[WORKSOUT] 위시리스트 전체보기

화면 정보

Screen ID	Screen Title	Screen Path
ACCT-WISH-01	위시리스트 전체보기	/mypage/wishlist

개요

찜 목록 전체보기 화면. 마이페이지 홈의 위시리스트 영역에서 “전체보기” 버튼을 클릭했을 때 진입하며, 사용자가 등록한 모든 찜 상품을 등록 순서대로 제공한다.

---

화면 구성

헤더 영역

• 뒤로가기 버튼: 좌측 상단, 이전 화면(마이페이지 홈)으로 이동
• 제목: “위시리스트 전체보기”

찜 목록 영역

항목	내용
상품 정보	마이페이지 홈 찜 목록과 동일한 정보 표시
정렬 순서	상품 상세 페이지에서 하트를 클릭한 순서 (등록 순서, 최신 등록이 상단)
하트 아이콘	항상 채워진 상태로 표시
즉시 제거	하트 클릭 시 목록에서 즉시 제거 + 토스트 메시지 “관심 상품에서 제외되었습니다.”
장바구니 담기	“상품 담기” 버튼 제공

상품 표시 조건

조건	처리
product.visible = 1	표시
product.visible = 0	표시하지 않음 (목록에서 자동 제외)
품절 상품	목록에는 표시하되 “장바구니 담기” 버튼 비활성화

장바구니 담기 기능

• 사이즈/수량 선택: 버튼 클릭 시 하단 모달(Bottom Modal)로 사이즈 및 수량 선택 옵션 표시
• 선택 완료: 사이즈/수량 선택 후 장바구니 추가

모달 구성

• 타이틀: 상품명
• 상품 이미지: 썸네일 이미지
• 사이즈 선택: 라디오 버튼 형태
• 수량 선택: +/- 버튼으로 조절 (기본값: 1, 최소값: 1)
• 총 금액: 선택 수량 × 상품 가격
• 버튼: “장바구니 담기”

사이즈 표시 규칙

사이즈 상태	표시
일반 사이즈	선택 가능 상태
품절 사이즈 (isSoldOut: true)	비활성화 + “품절” 표시
단독 사이즈 (isLast: true)	“단독” 배지 표시
사이즈 없음	사이즈 선택 영역 숨김

상품 상태별 표시

특별 상품 배지

필드	배지
isOnlyForUser: true	회원 전용
isOnlyApp: true	앱 전용
isOnlyOne: true	단 하나
isCollection: true	컬렉션
isFreeDelivery: true	무료배송

가격 표시

• 할인 상품 (discountedRate > 0): 원가 취소선 + 할인가 + 할인율
• 정가 상품 (discountedRate = 0): 정가만 표시

---

정책

하트 아이콘 동작

• 초기 상태: 항상 채워진 하트로 표시
• 클릭 동작: 즉시 목록에서 제거 (애니메이션: 페이드아웃과 함께 부드럽게 제거)
• 되돌리기: 제거 후 되돌리기 기능 없음 (즉시 처리)

예외 처리

상황	처리
상품 비노출 (product.visible = 0)	목록에서 자동 제외
전체 품절	모든 사이즈가 품절인 경우 “품절” 표시 + 장바구니 담기 비활성화
사이즈 정보 없음	사이즈 선택 없이 바로 장바구니 추가 진행
사이즈 미선택	“사이즈를 선택해주세요” 메시지
수량 오류	수량이 1 미만으로 설정되지 않도록 제한
모달 로딩 실패	모달 대신 간단한 확인 다이얼로그로 대체
찜 목록 없음	“위시리스트가 없습니다” 메시지 + 쇼핑하러 가기 버튼
이미지 로딩 실패	기본 플레이스홀더 이미지로 대체
가격 정보 없음	“가격 정보 없음” 표시

사용자 경험 고려사항

• 무한 스크롤: 찜 상품이 많을 경우 페이징 처리
• 당겨서 새로고침으로 목록 업데이트
• 초기 로딩 시 스켈레톤 UI 표시
• 빈 상태일 때 의미 있는 안내 메시지

---

API 연동

찜 목록 조회

엔드포인트: GET /v1/bookmarks?type=PRODUCT — 찜 목록 전체보기 화면 진입 시 호출

응답 예시

{
  "code": "SUCCESS",
  "payload": [
    {
      "id": 5,
      "name": "CANVAS SMALL TOTE",
      "bookmarkUpdateAt": "2025-06-26T20:49:40",
      "brandName": "CARHARTT WIP",
      "currentPrice": 37800,
      "initialPrice": 63000,
      "discountedRate": 40,
      "thumbnailUrl": "https://...",
      "hoverUrl": "https://...",
      "sizes": [...],
      "isMidsale": true,
      "isNewArrival": true,
      "isOnlyForUser": true,
      "isOnlyApp": true,
      "isOnlyOne": true,
      "isCollection": true,
      "isFreeDelivery": true
    }
  ]
}

• 정렬 기준: bookmarkUpdateAt 순서 (등록 순서)
• 필터링 조건: product.visible = 1인 상품만 표시

찜 제거

엔드포인트: POST /v1/bookmarks

{
  "targetId": 5,
  "targetType": "PRODUCT"
}

• UI에서 즉시 해당 상품 제거 → API 호출하여 서버에서도 찜 상태 해제

사이즈 선택

엔드포인트: POST /v1/products/sizes — “장바구니 담기” 버튼 클릭 시 (사이즈 선택 모달 표시용)

• 찜 목록 API 응답의 sizes 배열 활용
• 품절 사이즈는 선택 불가 상태로 표시, isLast: true인 사이즈에 “단독” 표시

장바구니 조회 / 추가

목적	API	호출 시점
조회 (확인용)	GET /v1/carts	장바구니 담기 완료 후
추가	POST /v1/carts/{productId} {"sizeId": 7, "count": 1, "answer": "string"}	사이즈/수량 선택 모달에서 “장바구니 담기” 확인 시

처리 순서: 사이즈 선택(필수) → 수량 선택(기본값 1) → 장바구니 추가 API 호출 → 성공 시 토스트 메시지 → 모달 자동 닫기

---

변경 이력

버전	날짜	변경 내용
v1.0	2026-07-30	최초 작성 (전체 위시리스트 화면 정책.md 이전)