E-Commerce

쇼핑몰 '오프무드' — 장바구니·주문서 전 과정

상품 그리드부터 옵션 선택·장바구니·주문서까지 구매 흐름 전체가 실제로 도는 패션 셀렉트샵입니다. 색을 쓰지 않고 타이포와 여백만으로 위계를 만든 에디토리얼 커머스입니다.

비공개·데모 — AI 가상 데이터로 재구성한 예시입니다

데모 열기 ↗정적 HTML, Tailwind CSS(빌드), 바닐라 JS, nginx

문제

브로슈어 사이트와 달리 쇼핑몰은 '돌아가는 것'이 곧 역량이다. 옵션을 안 고르면 담기가 막히고, 담으면 헤더 배지가 오르고, 수량을 바꾸면 합계가 다시 계산돼야 한다. 동시에 데모라서 결제·저장·외부 전송은 하나도 있으면 안 된다.

해결

상품 카탈로그 12종과 장바구니 엔진을 바닐라 JS로 짜서 옵션 선택 → 담기 → 드로어 → 수량 변경 → 합계 재계산 → 주문서 → 결제 alert까지 전 과정을 붙였다. localStorage·쿠키 없이 메모리와 URL 쿼리로만 흐름을 잇고, 외부 요청은 0건이다. 가격·세일 배지는 실제 쇼핑몰처럼 두되 '상품·가격·재고는 가상 데이터' 고지를 그리드·상세·장바구니·주문서에 상시 노출했다.

12
상품 카탈로그: 0
외부 요청(XHR·fetch): 0
가로 오버플로(5뷰포트)

화면