21장. 실전-장바구니(Cart)

쿠폰/미리계산

화면 구조

Desktop (1440×900)

헤더 (80px)
├─ 브레드크럼 (48px) "홈 > 장바구니"
└─ 본문 영역 (1200px 중앙 정렬)
├─ 좌측 상품 목록 영역 (760px)
│ ├─ 전체 선택 헤더 (56px)
│ │ ├─ 체크박스 + "전체 선택 (3/5)"
│ │ └─ "선택 삭제" 버튼
│ └─ 상품 카드 리스트
│ ├─ 상품 카드 1
│ │ ├─ 체크박스
│ │ ├─ 상품 이미지 (100×100)
│ │ ├─ 상품 정보 (브랜드/상품명/옵션)
│ │ ├─ 수량 조절
│ │ ├─ 가격
│ │ └─ 삭제 버튼
│ ├─ 상품 카드 2
│ └─ 상품 카드 3
└─ 우측 결제 요약 영역 (360px, Sticky)
├─ 쿠폰 적용 섹션
├─ 금액 요약
│ ├─ 총 상품 금액
│ ├─ 할인 금액
│ ├─ 배송비
│ └─ 총 결제 금액
└─ CTA 버튼 "주문하기"
푸터

Mobile (390×844)

헤더 (56px)
├─ 전체 선택 영역 (52px)
│ ├─ 체크박스 + "전체 선택 (3/5)"
│ └─ "선택 삭제" 링크
├─ 상품 카드 리스트 (스크롤)
│ ├─ 상품 카드 1
│ │ ├─ 체크박스 + 상품 이미지 (80×80)
│ │ ├─ 상품 정보 (브랜드/상품명/옵션)
│ │ ├─ 수량 조절 + 가격
│ │ └─ 삭제 X 버튼
│ └─ 상품 카드 2...
├─ 쿠폰 적용 버튼 (접힘 가능)
└─ 하단 고정 결제 바 (120px)
├─ 금액 요약 (총 결제 금액)
└─ "주문하기" 버튼
바텀 내비게이션 (56px)

Figma Make 프롬프트

Desktop 전체 레이아웃

Desktop의 헤더의 장바구니 클리했을때 장바구니 페이지를 만들어줘.

상단 헤더 80픽셀 높이, 로고와 검색창, 장바구니 아이콘 배치. 장바구니 아이콘에 빨간 배지 숫자 "3" 표시.
헤더 아래 브레드크럼 48픽셀 높이, 좌측 정렬로 "홈 > 장바구니" 텍스트 표시.
페이지 제목 "장바구니" 32픽셀 굵게, 브레드크럼 아래 24픽셀 여백.
본문 영역 1200픽셀 중앙 정렬, 좌우 여백 120픽셀.

좌측 상품 목록 영역 760픽셀 너비:

전체 선택 헤더 56픽셀 높이, 연한 회색 배경 #F8F8F8, 모서리 8픽셀:
- 좌측 체크박스 20×20픽셀, 파란 배경 체크 상태
- "전체 선택 (3/5)" 텍스트 15픽셀
- 우측 "선택 삭제" 버튼 14픽셀 회색 밑줄

상품 카드 760×140픽셀, 흰색 배경, 하단 테두리 1픽셀 연한 회색:
- 좌측 체크박스 20×20픽셀, 좌측 여백 16픽셀
- 상품 이미지 100×100픽셀, 체크박스 우측 16픽셀 간격, 모서리 8픽셀
- 상품 정보 영역 이미지 우측 16픽셀 간격:
- 브랜드명 "나이키" 13픽셀 회색
- 상품명 "에어맥스 97 실버불릿" 16픽셀 굵게, 최대 1줄 말줄임
- 옵션 "검정 / 270" 14픽셀 회색, 상품명 아래 4픽셀
- "옵션 변경" 링크 13픽셀 파란색 밑줄

수량 조절 영역 상품 정보 아래 12픽셀:
- 마이너스 버튼 32×32픽셀 테두리 1픽셀 회색
- 수량 "2" 16픽셀 너비 48픽셀 중앙 정렬
- 플러스 버튼 32×32픽셀

가격 영역 카드 우측:
- 할인가 "258,000원" 18픽셀 굵게
- 정가 "378,000원" 14픽셀 취소선 회색, 할인가 아래 4픽셀
- 우측 상단 X 삭제 버튼 24×24픽셀 회색

상품 카드 3개 세로 배치, 간격 0 (테두리로 구분).

품절 상품 카드 1개 추가:
- 전체 opacity 0.5
- 이미지 위 "품절" 배지 빨간 배경 흰색 글씨
- 하단 "품절된 상품입니다. 삭제하시겠습니까?" 빨간 텍스트 13픽셀
- "삭제" 버튼 빨간 테두리 빨간 글씨

우측 결제 요약 영역 360픽셀 너비, 좌측 상품 목록과 40픽셀 간격:
- 흰색 배경, 테두리 1픽셀 연한 회색, 모서리 12픽셀, 패딩 24픽셀
- position sticky, 상단 100픽셀 고정

쿠폰 적용 섹션:
- "쿠폰 적용" 라벨 15픽셀 굵게
- 입력 필드 260픽셀 너비 44픽셀 높이, placeholder "쿠폰 코드 입력"
- "적용" 버튼 60픽셀 너비 44픽셀 높이 파란 배경
- 적용된 쿠폰: "첫 구매 10% 할인" 초록 텍스트 14픽셀, X 삭제 버튼

구분선 1픽셀 연한 회색, 상하 20픽셀 여백.

금액 요약:
- "총 상품 금액" / "636,000원" 15픽셀, 좌우 정렬
- "상품 할인" / "-120,000원" 15픽셀 빨간색, 좌우 정렬
- "쿠폰 할인" / "-51,600원" 15픽셀 빨간색, 좌우 정렬
- "배송비" / "무료" 15픽셀, 좌우 정렬
- 구분선 1픽셀 상하 16픽셀
- "총 결제 금액" / "464,400원" 20픽셀 굵게, 좌우 정렬

"3만원 이상 구매 시 무료배송" 안내 13픽셀 회색 중앙 정렬.
CTA 버튼 "주문하기 (3개)" 312×56픽셀 파란 배경 흰색 글씨 18픽셀 굵게, 상단 20픽셀 여백.

푸터 영역.
전체 배경 흰색.

Desktop 빈 장바구니 상태

장바구니가 비어있는 Empty 상태를 만들어줘.

본문 영역 1200픽셀 너비 중앙 정렬.

페이지 제목 "장바구니" 32픽셀 굵게.

빈 상태 컨테이너 760픽셀 너비, 높이 500픽셀, 중앙 정렬:
- 빈 장바구니 일러스트 아이콘 160×160픽셀 연한 회색
- "장바구니가 비어있습니다" 24픽셀 굵게, 아이콘 아래 24픽셀
- "마음에 드는 상품을 담아보세요" 16픽셀 회색, 텍스트 아래 8픽셀
- "쇼핑 계속하기" 버튼 200×52픽셀 파란 배경 흰색 글씨, 텍스트 아래 32픽셀

추천 상품 섹션 빈 상태 아래 60픽셀:
- "이런 상품은 어떠세요?" 제목 24픽셀 굵게
- 상품 카드 4개 가로 배치, 각 280×380픽셀, 간격 16픽셀
- 각 카드: 이미지 280×280픽셀, 브랜드명, 상품명, 가격

우측 결제 요약 영역 숨김 처리 (빈 상태에서는 불필요).

Desktop 쿠폰 선택 모달

장바구니에서 쿠폰 선택 모달을 만들어줘.

반투명 검정 오버레이 opacity 0.5.

중앙 모달 520×600픽셀:
- 흰색 배경, 모서리 12픽셀
- 상단 우측 X 닫기 버튼 24×24픽셀

모달 헤더 60픽셀 높이, 하단 테두리 1픽셀:
- "쿠폰 선택" 제목 20픽셀 굵게 중앙

쿠폰 입력 영역 패딩 20픽셀:
- 입력 필드 380픽셀 너비 44픽셀 높이, placeholder "쿠폰 코드 직접 입력"
- "등록" 버튼 80픽셀 너비 44픽셀 높이

구분선 "보유 쿠폰 3장" 라벨 14픽셀 회색.

쿠폰 리스트 스크롤 영역 높이 380픽셀:

쿠폰 카드 472×100픽셀, 테두리 1픽셀 연한 회색, 모서리 8픽셀, 간격 12픽셀:
- 좌측 라디오 버튼 20×20픽셀
- 쿠폰 정보:
- "10% 할인 쿠폰" 16픽셀 굵게
- "3만원 이상 구매 시 사용 가능" 13픽셀 회색
- "2025.02.28까지" 12픽셀 회색
- 우측 할인 금액 "-51,600원" 18픽셀 빨간색 굵게

사용 불가 쿠폰 카드:
- 전체 opacity 0.5
- "최소 구매 금액 미달" 빨간 텍스트 12픽셀
- 라디오 버튼 비활성화

모달 하단 버튼 영역 패딩 20픽셀:
- "취소" 버튼 220×48픽셀 흰색 배경 회색 테두리
- "적용하기" 버튼 220×48픽셀 파란 배경
- 버튼 간격 16픽셀

Desktop 삭제 확인 모달

장바구니에서 상품 삭제 확인 모달을 만들어줘.

반투명 검정 오버레이 opacity 0.5.

중앙 모달 400×240픽셀:
- 흰색 배경, 모서리 12픽셀

모달 콘텐츠 중앙 정렬, 패딩 32픽셀:
- 경고 아이콘 48×48픽셀 노란색
- "상품을 삭제하시겠습니까?" 18픽셀 굵게, 아이콘 아래 16픽셀
- "삭제된 상품은 복구할 수 없습니다" 14픽셀 회색

모달 하단 버튼 영역:
- "취소" 버튼 160×48픽셀 흰색 배경 회색 테두리
- "삭제" 버튼 160×48픽셀 빨간 배경 흰색 글씨
- 버튼 간격 16픽셀

Desktop 선택 삭제 확인 모달

장바구니에서 여러 상품 선택 삭제 확인 모달을 만들어줘.

반투명 검정 오버레이 opacity 0.5.

중앙 모달 400×280픽셀:
- 흰색 배경, 모서리 12픽셀

모달 콘텐츠 중앙 정렬, 패딩 32픽셀:
- 경고 아이콘 48×48픽셀 노란색
- "선택한 3개 상품을 삭제하시겠습니까?" 18픽셀 굵게
- 삭제 대상 상품 요약:
- "에어맥스 97 외 2개" 14픽셀 회색

모달 하단 버튼 영역:
- "취소" 버튼 160×48픽셀 흰색 배경 회색 테두리
- "삭제" 버튼 160×48픽셀 빨간 배경 흰색 글씨

Desktop 옵션 변경 모달

장바구니에서 상품 옵션 변경 모달을 만들어줘.

반투명 검정 오버레이 opacity 0.5.

중앙 모달 480×520픽셀:
- 흰색 배경, 모서리 12픽셀
- 상단 우측 X 닫기 버튼

모달 헤더 60픽셀:
- "옵션 변경" 제목 20픽셀 굵게 중앙

모달 콘텐츠 패딩 24픽셀:
상품 요약 영역:
- 이미지 80×80픽셀
- 상품명 "에어맥스 97 실버불릿" 16픽셀 굵게
- 현재 옵션 "현재: 검정 / 270" 14픽셀 회색

구분선 상하 20픽셀 여백.

색상 선택:
- "색상" 라벨 15픽셀 굵게
- 컬러 칩 5개 가로 배치, 각 40×40픽셀 원형, 간격 12픽셀
- 현재 선택 "검정" 파란 테두리 체크 아이콘

사이즈 선택:
- "사이즈" 라벨 15픽셀 굵게
- 사이즈 버튼 6개, 각 60×44픽셀
- 현재 선택 "270" 파란 배경
- 품절 사이즈 회색 배경 취소선

수량 선택:
- "수량" 라벨
- 마이너스/숫자/플러스 버튼

변경 후 가격:
- "변경 후 금액: 129,000원" 16픽셀 굵게

모달 하단:
- "취소" 버튼 200×48픽셀
- "변경하기" 버튼 200×48픽셀 파란 배경

Desktop 수량 변경 상태들

장바구니에서 수량 조절 영역의 여러 상태를 만들어줘.

상태 1 - 기본:
- 마이너스 버튼 32×32픽셀 테두리 회색
- 수량 "1" 16픽셀
- 플러스 버튼 32×32픽셀 테두리 회색

상태 2 - 최소 수량 (1개):
- 마이너스 버튼 비활성화 opacity 0.3
- 수량 "1"
- 플러스 버튼 활성화

상태 3 - 최대 수량 도달:
- 마이너스 버튼 활성화
- 수량 "10"
- 플러스 버튼 비활성화 opacity 0.3
- 아래 "최대 구매 수량: 10개" 12픽셀 회색

상태 4 - 재고 부족:
- 수량 "3"
- 플러스 버튼 비활성화
- 아래 "남은 재고: 3개" 12픽셀 빨간색

상태 5 - 수량 변경 중:
- 수량 영역에 작은 스피너 16×16픽셀
- 버튼 일시 비활성화

Desktop 쿠폰 적용 상태들

장바구니에서 쿠폰 적용 영역의 여러 상태를 만들어줘.

상태 1 - 쿠폰 미적용:
- 입력 필드 빈 상태, placeholder "쿠폰 코드 입력"
- "적용" 버튼 활성화
- 아래 "사용 가능한 쿠폰 3장" 파란 링크 14픽셀

상태 2 - 쿠폰 코드 입력 중:
- 입력 필드에 "WELCOME10" 텍스트
- "적용" 버튼 활성화

상태 3 - 쿠폰 적용 성공:
- 입력 필드 숨김
- 적용된 쿠폰 카드 312×60픽셀, 연한 파란 배경 #E8F4FD:
- 쿠폰 아이콘 24픽셀
- "첫 구매 10% 할인" 15픽셀
- "-51,600원" 빨간색 굵게
- X 삭제 버튼 20×20픽셀
- "다른 쿠폰으로 변경" 링크 13픽셀 파란색

상태 4 - 쿠폰 적용 실패:
- 입력 필드 빨간 테두리
- 아래 "유효하지 않은 쿠폰입니다" 빨간 텍스트 13픽셀

상태 5 - 쿠폰 조건 미달:
- 입력 필드 빨간 테두리
- 아래 "최소 구매 금액 50,000원 이상 시 사용 가능합니다" 빨간 텍스트

Desktop 배송비 안내 상태들

장바구니에서 배송비 관련 다양한 상태를 만들어줘.

상태 1 - 무료배송 달성:
- "배송비" / "무료" 초록색
- 아래 "무료배송 적용됨" 13픽셀 초록색

상태 2 - 무료배송 미달성:
- "배송비" / "3,000원"
- 아래 "5,000원 더 구매 시 무료배송!" 13픽셀 파란색
- 프로그레스 바 200×8픽셀, 파란색 83% 채워짐

상태 3 - 도서산간 추가 배송비:
- "배송비" / "3,000원"
- 아래 "+ 도서산간 추가 3,000원" 13픽셀 회색
- "배송지에 따라 추가 배송비가 발생할 수 있습니다" 안내

상태 4 - 무료배송 상품 포함:
- "배송비" / "일부 무료"
- 아래 "무료배송 상품 2개 포함" 13픽셀 회색

Mobile 전체 레이아웃

모바일 장바구니 페이지를 만들어주고, 모바일 헤더의 장바구니 클릭시 링크 연결해줘.

상단 헤더 56픽셀 높이:
- 뒤로가기 화살표 아이콘 24픽셀
- 중앙 "장바구니" 제목 18픽셀 굵게
- 우측 홈 아이콘 24픽셀

전체 선택 영역 52픽셀 높이, 좌우 패딩 16픽셀, 흰색 배경, 하단 테두리:
- 좌측 체크박스 20×20픽셀 + "전체 (3/5)" 14픽셀
- 우측 "선택 삭제" 14픽셀 회색

상품 카드 리스트 스크롤 영역:

상품 카드 390×160픽셀, 좌우 패딩 16픽셀, 상하 패딩 16픽셀, 하단 테두리:
- 첫 줄: 체크박스 + 이미지 80×80픽셀 + 삭제 X 버튼 우측 상단
- 이미지 우측 상품 정보:
- 브랜드 "나이키" 12픽셀 회색
- 상품명 "에어맥스 97 실버불릿" 15픽셀 굵게 1줄 말줄임
- 옵션 "검정 / 270" 13픽셀 회색
- "옵션 변경" 링크 12픽셀 파란색
- 하단 영역: 수량 조절 좌측, 가격 우측
- 수량: -/1/+ 버튼 각 28×28픽셀
- 가격 "129,000원" 16픽셀 굵게

상품 카드 3개 세로 배치.

품절 상품 카드:
- opacity 0.5
- 이미지 위 "품절" 배지
- "삭제" 버튼 빨간 테두리

쿠폰 적용 섹션 390픽셀 너비, 패딩 16픽셀, 배경 #F8F8F8:
- "쿠폰" 라벨 + 우측 화살표 (접힘 가능)
- 펼침 시: 적용된 쿠폰 또는 "쿠폰 선택" 버튼

하단 고정 결제 바 120픽셀 높이, 흰색 배경, 상단 그림자:
- 상단 금액 요약 영역 52픽셀:
- 좌측 "총 결제금액" 14픽셀
- 우측 "464,400원" 20픽셀 굵게
- 아래 "상품 3개" 12픽셀 회색
- 하단 버튼 영역:
- "주문하기" 버튼 358×52픽셀 파란 배경 중앙

바텀 내비게이션 56픽셀.

Mobile 빈 장바구니 상태

모바일 빈 장바구니 상태를 만들어줘.

상단 헤더 56픽셀.

빈 상태 컨테이너 전체 높이 중앙 정렬:
- 빈 장바구니 아이콘 120×120픽셀 회색
- "장바구니가 비어있습니다" 20픽셀 굵게
- "마음에 드는 상품을 담아보세요" 14픽셀 회색
- "쇼핑하러 가기" 버튼 200×48픽셀 파란 배경

추천 상품 섹션:
- "추천 상품" 제목 18픽셀 굵게
- 상품 카드 가로 스크롤, 각 140×200픽셀

하단 결제 바 숨김 (빈 상태에서는 불필요).

Mobile 쿠폰 선택 바텀시트

모바일 장바구니 쿠폰 선택 바텀시트를 만들어줘.

반투명 검정 오버레이 opacity 0.5.

하단 바텀시트 390×500픽셀:
- 흰색 배경, 상단 모서리 16픽셀 라운드
- 상단 핸들바 32×4픽셀 회색 중앙

바텀시트 헤더 56픽셀:
- 좌측 X 닫기
- 중앙 "쿠폰 선택" 18픽셀 굵게

쿠폰 입력 영역 패딩 16픽셀:
- 입력 필드 280픽셀 + "등록" 버튼 70픽셀

"보유 쿠폰 3장" 라벨 13픽셀 회색.

쿠폰 리스트 스크롤:
- 쿠폰 카드 358×90픽셀
- 라디오 버튼 + 쿠폰 정보 + 할인 금액

하단 고정:
- "적용하기" 버튼 358×52픽셀 파란 배경

Mobile 삭제 확인 바텀시트

모바일 장바구니 삭제 확인 바텀시트를 만들어줘.

반투명 검정 오버레이 opacity 0.5.

하단 바텀시트 390×220픽셀:
- 흰색 배경, 상단 모서리 16픽셀

콘텐츠 중앙 정렬 패딩 24픽셀:
- "상품을 삭제하시겠습니까?" 18픽셀 굵게
- "삭제된 상품은 복구할 수 없습니다" 14픽셀 회색

버튼 영역:
- "취소" 버튼 170×48픽셀 흰색 배경
- "삭제" 버튼 170×48픽셀 빨간 배경
- 버튼 간격 12픽셀

Mobile 옵션 변경 바텀시트

모바일 장바구니 옵션 변경 바텀시트를 만들어줘.

반투명 검정 오버레이 opacity 0.5.

하단 바텀시트 390×560픽셀:
- 흰색 배경, 상단 모서리 16픽셀
- 상단 핸들바

바텀시트 헤더 56픽셀:
- X 닫기 + "옵션 변경" 제목

상품 요약:
- 이미지 60×60픽셀 + 상품명 + 현재 옵션

색상 선택:
- 컬러 칩 5개, 각 44×44픽셀

사이즈 선택:
- 버튼 2행 3열 그리드, 각 108×44픽셀

수량 선택:
- 마이너스/숫자/플러스

변경 후 가격 표시.

하단 고정:
- "변경하기" 버튼 358×52픽셀 파란 배경

Loading 상태 (Desktop)

Desktop 장바구니 로딩 상태를 만들어줘.

전체 선택 헤더 스켈레톤 56픽셀.

상품 카드 스켈레톤 3개:
- 체크박스 위치 스켈레톤 20×20픽셀
- 이미지 스켈레톤 100×100픽셀 회색 #F0F0F0
- 상품명 스켈레톤 200×20픽셀
- 옵션 스켈레톤 100×16픽셀
- 가격 스켈레톤 80×24픽셀

우측 결제 요약 스켈레톤:
- 쿠폰 영역 스켈레톤 312×44픽셀
- 금액 라인 스켈레톤 4줄
- CTA 버튼 스켈레톤 312×56픽셀

shimmer 효과: 그라디언트 애니메이션 좌에서 우로.

Loading 상태 (Mobile)

모바일 장바구니 로딩 상태를 만들어줘.

전체 선택 영역 스켈레톤 52픽셀.

상품 카드 스켈레톤 3개:
- 체크박스 스켈레톤 20×20픽셀
- 이미지 스켈레톤 80×80픽셀
- 상품명 스켈레톤 180×18픽셀
- 옵션 스켈레톤 80×14픽셀
- 가격 스켈레톤 60×18픽셀

하단 결제 바 스켈레톤:
- 금액 스켈레톤 100×24픽셀
- 버튼 스켈레톤 358×52픽셀

shimmer 효과.

Error 상태 (Desktop)

Desktop 장바구니 에러 상태를 만들어줘.

본문 영역 중앙 Error 컨테이너 600×300픽셀:
- 연한 빨강 배경 #FFF5F5, 테두리 1픽셀 #FFE0E0, 모서리 12픽셀
- 느낌표 원형 아이콘 80×80픽셀 빨간색 중앙
- "장바구니를 불러올 수 없습니다" 20픽셀 굵게
- "네트워크 연결을 확인하고 다시 시도해 주세요" 15픽셀 회색
- "다시 시도" 버튼 160×48픽셀 파란 배경 중앙

수량 변경 성공 토스트

장바구니에서 수량 변경 성공 토스트를 만들어줘.

Desktop:
- 화면 상단 중앙 토스트 320×52픽셀
- 흰색 배경, 그림자, 모서리 8픽셀
- 초록 체크 아이콘 24픽셀 + "수량이 변경되었습니다" 15픽셀
- 2초 후 자동 사라짐

Mobile:
- 화면 하단 결제 바 위 토스트 358×48픽셀
- 초록 체크 아이콘 + "수량 변경됨"
- 2초 후 자동 사라짐

삭제 완료 토스트

장바구니에서 상품 삭제 완료 토스트를 만들어줘.

Desktop:
- 상단 중앙 토스트 400×56픽셀
- 체크 아이콘 + "상품이 삭제되었습니다" + "실행 취소" 파란 링크
- 5초 후 자동 사라짐 (실행 취소 가능 시간)

Mobile:
- 하단 토스트 358×52픽셀
- 체크 아이콘 + "삭제됨" + "실행 취소" 링크

재고 부족 알림

장바구니에서 재고 부족 시 알림 표시를 만들어줘.

상품 카드 내 인라인 경고:
- 수량 영역 아래 경고 메시지
- 경고 삼각형 아이콘 16픽셀 노란색
- "재고가 3개 남았습니다. 수량이 자동 조정되었습니다." 13픽셀

또는 상단 배너 형태:
- 760픽셀 너비 노란 배경 #FFF8E1, 패딩 12픽셀
- 경고 아이콘 + "일부 상품의 재고가 변경되었습니다. 확인해 주세요."
- "확인" 버튼

상태 정의

Idle (정상)

상품 있음: 상품 카드 리스트 표시, 결제 요약 활성화

일부 선택: 선택된 상품만 결제 금액에 반영

전체 선택: 모든 상품 체크, CTA 버튼에 총 개수 표시

쿠폰 적용: 할인 금액 반영, 적용된 쿠폰 표시

Loading

페이지 진입: 상품 카드, 결제 요약 스켈레톤

수량 변경 중: 해당 카드 수량 영역 스피너

쿠폰 적용 중: 쿠폰 영역 로딩 스피너

주문 처리 중: CTA 버튼 로딩 상태

Empty

빈 장바구니: Empty 일러스트 + 쇼핑 유도 + 추천 상품

선택 상품 없음: "주문할 상품을 선택해주세요" 안내

Error

API 실패: Error 메시지 + 다시 시도 버튼

수량 변경 실패: 에러 토스트 + 이전 수량 복원

쿠폰 적용 실패: 에러 메시지 + 입력 필드 초기화

재고 부족: 경고 메시지 + 수량 자동 조정

NOTE 문서화

N.기능.Cart상품목록.01

목적: 고객이 담은 상품을 확인하고 수량/옵션 조절
대상: 장바구니에 상품을 담은 고객
표시 정보: 이미지, 브랜드, 상품명, 옵션, 수량, 가격
최대 표시: 제한 없음 (스크롤)
자동 저장: 수량/옵션 변경 시 즉시 서버 반영

N.상태.Cart상품카드.02

조건: 상품 상태에 따라 표시 변경
정상: 모든 기능 활성화
품절: opacity 0.5, 체크 불가, "품절" 배지, 삭제 유도
재고 부족: 수량 제한, 경고 메시지
판매 종료: 삭제만 가능, "판매 종료" 배지

N.데이터.Cart상품.03

cart_item_id: 고유 식별자
product_id: 상품 ID
option_id: 선택 옵션 ID
quantity: 수량 (1-99)
price: 개별 가격
subtotal: quantity × price
stock_status: available/sold_out/limited
stock_quantity: 현재 재고

N.이벤트.Cart수량변경.04

트리거: +/- 버튼 클릭 또는 직접 입력
디바운스: 500ms (연속 클릭 방지)
API: PATCH /cart/items/{id} { quantity: number }
성공: 가격 재계산, 토스트 2초
실패: 이전 값 복원, 에러 토스트
최소: 1 (0 입력 시 삭제 확인)
최대: 재고 수량 또는 10개 중 작은 값

N.기능.Cart선택.01

목적: 일부 상품만 선택하여 주문
전체 선택: 모든 상품 체크/해제
개별 선택: 개별 상품 체크/해제
선택 개수: 헤더에 "선택 (3/5)" 형식 표시
금액 반영: 선택된 상품만 결제 금액에 포함

N.상태.Cart선택.02

전체 선택: 모든 체크박스 파란 배경 체크
전체 해제: 모든 체크박스 빈 상태
일부 선택: 전체 선택 체크박스 대시(-) 표시
품절 제외: 품절 상품은 선택 불가, 카운트 제외

N.기능.Cart쿠폰.01

목적: 할인 쿠폰 적용으로 결제 금액 감소
적용 방법: 코드 직접 입력 또는 보유 쿠폰 선택
적용 개수: 1회 주문당 1장
중복 적용: 불가
변경: 적용된 쿠폰 삭제 후 다른 쿠폰 선택 가능

N.상태.Cart쿠폰.02

미적용: 입력 필드 표시, "사용 가능한 쿠폰 N장" 링크
적용됨: 쿠폰 카드 표시, 할인 금액, 삭제 버튼
조건 미달: 빨간 테두리, 에러 메시지
유효하지 않음: 에러 메시지, 입력 초기화

N.데이터.Cart쿠폰.03

coupon_id: 쿠폰 ID
coupon_code: 입력 코드 (선택)
discount_type: fixed/percentage
discount_value: 할인 값
min_purchase: 최소 구매 금액
max_discount: 최대 할인 금액 (percentage 시)
valid_until: 유효 기간

N.이벤트.Cart쿠폰적용.04

코드 입력 후 "적용" 클릭:
- API: POST /cart/coupon { code: string }
- 성공: 쿠폰 카드 표시, 금액 재계산
- 실패: 에러 메시지 표시

쿠폰 목록에서 선택:
- 라디오 선택 → "적용하기" 클릭
- 조건 미달 쿠폰 선택 불가

쿠폰 삭제:
- X 버튼 클릭 → 즉시 삭제, 금액 재계산

N.기능.Cart결제요약.01

목적: 결제 전 총 금액과 할인 내역 확인
표시 항목: 상품 금액, 상품 할인, 쿠폰 할인, 배송비, 총 금액
계산: 선택된 상품만 반영
실시간 업데이트: 수량/선택/쿠폰 변경 시 즉시 재계산

N.데이터.Cart결제요약.02

subtotal: 선택 상품 정가 합계
product_discount: 상품별 할인 합계
coupon_discount: 쿠폰 할인 금액
shipping_fee: 배송비 (30,000원 이상 무료)
total: subtotal - product_discount - coupon_discount + shipping_fee

N.기능.Cart삭제.01

목적: 불필요한 상품 제거
개별 삭제: X 버튼 클릭 → 확인 모달 → 삭제
선택 삭제: 체크된 상품 일괄 삭제
품절 삭제: 품절 상품 삭제 유도 UI
실행 취소: 삭제 후 5초 내 복원 가능

N.이벤트.Cart삭제.02

개별 삭제:
- X 클릭 → 확인 모달/바텀시트
- "삭제" 클릭 → API DELETE /cart/items/{id}
- 성공 → 카드 슬라이드아웃 300ms, 토스트 5초 (실행 취소)

선택 삭제:
- "선택 삭제" 클릭 → 확인 모달 (삭제 개수 표시)
- "삭제" 클릭 → API DELETE /cart/items (배열)
- 성공 → 카드들 순차 슬라이드아웃

N.기능.Cart옵션변경.01

목적: 장바구니 이탈 없이 옵션 수정
변경 가능: 색상, 사이즈, 수량
변경 불가: 상품 자체 (삭제 후 재추가)
재고 확인: 옵션 변경 시 실시간 재고 체크

N.이벤트.Cart옵션변경.02

"옵션 변경" 클릭 → 모달/바텀시트 열림
옵션 선택 → 재고 확인 API
"변경하기" 클릭 → API PATCH /cart/items/{id}
성공 → 카드 정보 업데이트, 모달 닫기
실패 → 에러 메시지 (재고 부족 등)

N.데이터.Cart분석.01

GA4 이벤트:
- view_cart: 장바구니 진입
- remove_from_cart: 상품 삭제
- add_shipping_info: 배송 정보 입력 (체크아웃 전환 시)
- begin_checkout: "주문하기" 클릭

추적 데이터:
- items: 장바구니 상품 배열
- value: 총 결제 금액
- coupon: 적용된 쿠폰 코드

컴포넌트화

상품 카드 컴포넌트

CartItem/Desktop/Default → 기본 상품 카드

CartItem/Desktop/Selected → 선택된 상태

CartItem/Desktop/SoldOut → 품절 상태

CartItem/Desktop/LimitedStock → 재고 부족

CartItem/Mobile/Default

CartItem/Mobile/Selected

CartItem/Mobile/SoldOut

수량 조절 컴포넌트

QuantitySelector/Default → 기본 상태

QuantitySelector/Min → 최소 수량 (- 비활성화)

QuantitySelector/Max → 최대 수량 (+ 비활성화)

QuantitySelector/Loading → 변경 중

QuantitySelector/Disabled → 비활성화

쿠폰 컴포넌트

Coupon/Input → 쿠폰 코드 입력 필드

Coupon/Applied → 적용된 쿠폰 카드

Coupon/Card/Available → 사용 가능 쿠폰

Coupon/Card/Unavailable → 사용 불가 쿠폰

Coupon/Modal/Desktop → 쿠폰 선택 모달

Coupon/BottomSheet/Mobile → 쿠폰 선택 바텀시트

결제 요약 컴포넌트

OrderSummary/Desktop → 데스크톱 결제 요약

OrderSummary/Mobile/Collapsed → 모바일 접힌 상태

OrderSummary/Mobile/Expanded → 모바일 펼친 상태

Empty/Error 컴포넌트

Cart/Empty/Desktop → 빈 장바구니 (Desktop)

Cart/Empty/Mobile → 빈 장바구니 (Mobile)

Cart/Error/Desktop → 에러 상태 (Desktop)

Cart/Error/Mobile → 에러 상태 (Mobile)

Cart/Loading/Desktop → 로딩 스켈레톤 (Desktop)

Cart/Loading/Mobile → 로딩 스켈레톤 (Mobile)

모달/바텀시트 컴포넌트

Modal/DeleteConfirm → 삭제 확인 모달

Modal/OptionChange → 옵션 변경 모달

BottomSheet/DeleteConfirm → 삭제 확인 (Mobile)

BottomSheet/OptionChange → 옵션 변경 (Mobile)

BottomSheet/CouponSelect → 쿠폰 선택 (Mobile)

90_Spec_Components 페이지 구성

Section: Cart Components

├─ Subsection: CartItem

│ ├─ CartItem/Desktop (4 variants)

│ └─ CartItem/Mobile (3 variants)

├─ Subsection: QuantitySelector

│ └─ QuantitySelector (5 variants)

├─ Subsection: Coupon

│ ├─ Coupon/Input

│ ├─ Coupon/Applied

│ ├─ Coupon/Card (2 variants)

│ └─ Coupon/Modal, BottomSheet

├─ Subsection: OrderSummary

│ ├─ OrderSummary/Desktop

│ └─ OrderSummary/Mobile (2 variants)

├─ Subsection: States

│ ├─ Cart/Empty (2 variants)

│ ├─ Cart/Error (2 variants)

│ └─ Cart/Loading (2 variants)

└─ Subsection: Modals

├─ Modal/DeleteConfirm

├─ Modal/OptionChange

└─ BottomSheet (3 variants)

Figma 프로토타입 설정

체크박스 인터랙션

전체 선택 체크박스:
- 체크 상태 클릭 → 모든 상품 해제 Instant
- 미체크 상태 클릭 → 모든 상품 선택 Instant
- 결제 요약 금액 즉시 업데이트

개별 상품 체크박스:
- 클릭 → 체크 상태 토글 Instant
- 전체 선택 체크박스 상태 자동 업데이트 (전체/일부/없음)
- 결제 요약 금액 재계산

수량 변경 인터랙션
+ 버튼 클릭:
- 수량 +1 Instant
- 가격 업데이트 Smart animate 200ms
- 결제 요약 재계산

- 버튼 클릭:
- 수량 -1 Instant
- 수량 1일 때 버튼 비활성화
- 수량 0 시도 시 삭제 확인 모달

수량 직접 입력 (Desktop):
- 숫자 클릭 → 입력 필드 활성화
- 포커스 아웃 → 유효성 검증 → 업데이트

삭제 인터랙션

개별 삭제 (Desktop):
- X 버튼 클릭 → 삭제 확인 모달 Dissolve 200ms
- "삭제" 클릭 → 모달 닫기 + 카드 슬라이드아웃 300ms
- 토스트 슬라이드다운 "삭제되었습니다. 실행 취소"

개별 삭제 (Mobile):
- X 버튼 탭 → 삭제 확인 바텀시트 슬라이드업 400ms
- "삭제" 탭 → 바텀시트 닫기 + 카드 사라짐

선택 삭제:
- "선택 삭제" 클릭 → 확인 모달 (개수 표시)
- 삭제 완료 → 선택된 카드들 순차 사라짐

쿠폰 인터랙션

쿠폰 코드 입력:
- 입력 필드 타이핑 → "적용" 버튼 활성화
- "적용" 클릭 → 로딩 → 성공/실패

쿠폰 선택 모달 (Desktop):
- "사용 가능한 쿠폰 N장" 클릭 → 모달 열림 Dissolve 200ms
- 쿠폰 라디오 선택 → "적용하기" 클릭 → 모달 닫기
- 적용된 쿠폰 카드 표시 + 금액 재계산

쿠폰 선택 바텀시트 (Mobile):
- 쿠폰 영역 탭 → 바텀시트 슬라이드업 400ms
- 쿠폰 선택 → "적용하기" 탭 → 바텀시트 닫기

쿠폰 삭제:
- 적용된 쿠폰 X 클릭 → 쿠폰 카드 사라짐 + 금액 재계산

옵션 변경 인터랙션

Desktop:
- "옵션 변경" 클릭 → 옵션 변경 모달 Dissolve 200ms
- 옵션 선택 → "변경하기" 클릭 → 모달 닫기 + 카드 정보 업데이트

Mobile:
- "옵션 변경" 탭 → 바텀시트 슬라이드업 400ms
- 옵션 선택 → "변경하기" 탭 → 바텀시트 닫기 + 업데이트

CTA 버튼 인터랙션

"주문하기" 클릭/탭:
- 선택 상품 없으면 → "주문할 상품을 선택해주세요" 토스트
- 품절 상품 포함 시 → "품절 상품을 제외하고 주문하시겠습니까?" 확인
- 정상 → 로딩 상태 → 체크아웃 페이지 Navigate

체크리스트

디자인 검증

[ ] Desktop 상품 카드 760×140px

[ ] Desktop 이미지 100×100px, 모서리 8px

[ ] Desktop 결제 요약 360px 너비, Sticky

[ ] Mobile 상품 카드 390×160px

[ ] Mobile 이미지 80×80px

[ ] Mobile 하단 결제 바 120px 높이

[ ] 체크박스 20×20px, 선택 시 파란 배경

[ ] 수량 버튼 32×32px (Desktop), 28×28px (Mobile)

[ ] CTA 버튼 312×56px (Desktop), 358×52px (Mobile)

[ ] 쿠폰 적용 카드 연한 파란 배경 #E8F4FD

콘텐츠 검증

[ ] 브랜드명 최대 20자

[ ] 상품명 최대 30자, 1줄 말줄임

[ ] 옵션 "색상 / 사이즈" 형식

[ ] 가격 천 단위 콤마 + "원"

[ ] 전체 선택 "(선택/전체)" 형식

[ ] CTA 버튼 "주문하기 (N개)"

[ ] 빈 장바구니 "장바구니가 비어있습니다"

[ ] 품절 배지 "품절"

인터랙션 검증

[ ] 전체 선택 체크박스 토글

[ ] 개별 상품 체크박스 토글

[ ] 수량 +/- 버튼 동작

[ ] 수량 최소(1)/최대 제한

[ ] 삭제 버튼 → 확인 모달/바텀시트

[ ] 선택 삭제 → 확인 모달

[ ] 쿠폰 코드 입력 → 적용

[ ] 쿠폰 선택 모달/바텀시트

[ ] 옵션 변경 모달/바텀시트

[ ] CTA 버튼 → 체크아웃 이동

상태 검증

[ ] Idle: 상품 있음 - 결제 요약 활성화

[ ] Idle: 선택 상품 없음 - CTA 버튼 안내 메시지

[ ] Loading: 스켈레톤 shimmer 효과

[ ] Empty: 빈 장바구니 + 추천 상품

[ ] Error: 에러 메시지 + 다시 시도

[ ] 품절: 상품 카드 비활성화 + 삭제 유도

[ ] 재고 부족: 수량 제한 + 경고 메시지

[ ] 쿠폰 적용: 할인 금액 표시

[ ] 쿠폰 오류: 빨간 테두리 + 에러 메시지

프로토타입 검증

[ ] 체크박스 상태 변경 Instant

[ ] 수량 변경 애니메이션 200ms

[ ] 삭제 확인 모달 Dissolve 200ms

[ ] 삭제 후 카드 슬라이드아웃 300ms

[ ] 바텀시트 슬라이드업/다운 400ms

[ ] 토스트 슬라이드다운 300ms

[ ] 토스트 자동 사라짐 (2-5초)

[ ] 실행 취소 토스트 5초 유지

[ ] 결제 요약 Sticky 동작 (Desktop)

---

예시 프롬프트는 한번에 적용하도록 구성되어있다. 프롬프트의 작은단위로 순차적으로 적용해도 문제는 없다. 오히려 순차적으로 적용하면서 변화되는 부분을 확인하는 것도 좋은 방법이다.

https://ide-python-61918998.figma.site/

Desktop E-commerce Header