[YETI] 장바구니 사이드패널

화면 정보

Screen ID	Screen Title	진입 조건
CART-SIDE-01	장바구니 사이드패널	헤더 장바구니 아이콘 클릭

개요

장바구니 아이콘 클릭 시 우측에서 오버레이로 열리는 사이드패널. 회원·비회원 구분 없이 동일하게 동작한다.

상태별 화면 구성

빈 상태 (장바구니 비어 있음)

┌──────────────────────────────┐
│  장바구니              [✕]   │
├──────────────────────────────┤
│                              │
│    장바구니가 비었습니다.    │
│                              │
├──────────────────────────────┤
│  최근 본 상품                │
│  ← [상품A] [상품B] [상품C] → │
│       (가로 스크롤)          │
└──────────────────────────────┘

상품 있는 상태

┌──────────────────────────────┐
│  장바구니              [✕]   │
├──────────────────────────────┤
│  [전체선택 ☑]  [선택상품 삭제]│
├──────────────────────────────┤
│  ☑ [이미지] 상품명           │
│            옵션 / 수량 / 가격 │
│  ☐ [이미지] 상품명           │
│            옵션 / 수량 / 가격 │
├──────────────────────────────┤
│  주문 정보                   │
│  상품금액        000,000원   │
│  할인            -00,000원   │
│  배송비              0원     │
│  ─────────────────────────  │
│  총 결제금액     000,000원   │
│                              │
│  [         주문하기         ] │
├──────────────────────────────┤
│  최근 본 상품                │
│  ← [상품A] [상품B] [상품C] → │
│       (가로 스크롤)          │
└──────────────────────────────┘

장바구니 상품 목록

항목	내용
전체선택 체크박스	전체 선택/해제
개별 체크박스	개별 상품 선택/해제
선택 상품 삭제	체크된 상품 삭제
상품 표시	이미지 · 상품명 · 옵션 · 수량 · 가격
기타 동작	WORKSOUT과 유사하게 구성

주문 정보

항목	표시 내용
상품금액	선택된 상품 합계
할인	적용된 할인 금액 (없으면 0원)
배송비	배송비 (무료이면 0원)
총 결제금액	상품금액 - 할인 + 배송비
주문하기 버튼	회원·비회원 구분 없이 “주문하기” 표시

최근 본 상품

항목	내용
노출 위치	빈 상태·상품 있는 상태 모두 하단 고정
표시 방식	가로 스크롤
최대 노출 수	20개
+ 버튼	상품 이미지 위에 표시 — 클릭 시 해당 상품 즉시 장바구니 추가

미결 사항

항목	담당	내용
최근 본 상품 + 버튼 — 다중 옵션 상품 처리	기획/개발	색상·사이즈가 여러 개인 상품 클릭 시 옵션 선택 팝업 표시 vs + 버튼 미노출 방향 결정 필요
최근 본 상품 저장 방식	개발	로컬스토리지 vs 서버 저장

모바일

모바일에서는 사이드패널이 아닌 전체 화면으로 표시된다. 상세 레이아웃은 피그마 참고.

합격 기준

장바구니 아이콘 클릭 시 우측에서 사이드패널이 열린다
장바구니가 비었을 때 “장바구니가 비었습니다.” 메시지가 표시된다
상품이 있을 때 전체선택 체크박스, 개별 체크박스, 선택 상품 삭제가 동작한다
주문 정보(상품금액 / 할인 / 배송비 / 총 결제금액)가 표시된다
회원·비회원 모두 “주문하기” 버튼이 표시된다
최근 본 상품이 가로 스크롤로 최대 20개 표시된다 (빈 상태·상품 있는 상태 모두)
최근 본 상품의 + 버튼 클릭 시 해당 상품이 즉시 장바구니에 추가된다

변경 이력

버전	날짜	변경 내용
v1.0	2026-07-09	최초 작성 — 빈 상태·상품 있는 상태 레이아웃, 전체선택·삭제, 주문 정보, 최근 본 상품 가로 스크롤