찜한 작품

Implementation Specification

1. 화면 구조 개요

• 화면 ID: MYP-007, 찜한 작품 목록
• 뷰포트: 393 x 852px (iPhone 기준), 전체 배경 --bg #FAFAF8
• 수직 구조: 상태바(44px) → 네비바(48px) → 작품 리스트(flex:1, 스크롤) → 홈 인디케이터
• 탭 없음, 하단 CTA 없음 — 단순 리스트 구조
• 2개 상태: 찜한 작품 있음(아이템 리스트 + 하트 아이콘) / 빈 상태(CHRT 모노그램 120x120 + 안내 문구)
• 로그인 필수 화면 — 비로그인 시 로그인 안내 모달(LOG-009) 노출

2. 레이어 구조 + 치수

3. 핵심 인터랙션

• 작품 카드 구조: display:flex, gap:14px. 좌: 썸네일 72x72px bg --paper #F0EDE6 직각(R=0) + linen 텍스처(4px 패턴, opacity:0.6) + CHRT 워터마크(24x28 viewBox, opacity:0.15). 중앙: 텍스트 블록. 우: 하트 아이콘
• 텍스트 블록 순서: [PS 뱃지(선택)] → 작품명 14px/700 --charcoal ls:-0.01em mb:3px → 작가명 12px --text-secondary #555555 mb:2px → 작품 타입 --mono 11px --text-muted ls:0.02em mb:6px → 가격 14px/700 --charcoal ls:-0.01em
• PS 태그 뱃지: "프라이빗 세일" — inline-block, --mono 9px/600, --charcoal, border: 1px solid rgba(26,26,26,0.12), padding: 2px 6px, ls:0.02em, mb:4px. 프라이빗 세일 작품에만 표시
• 하트 아이콘 (활성): 18x18px, fill: --red-brand #961E23, stroke: --red-brand, stroke-width: 1.5, stroke-linecap: square, stroke-linejoin: miter. align-items:flex-start, padding-top:4px
• 찜 해제: 하트 아이콘 탭 → 리스트에서 즉시 제거 + 토스트 "찜한 작품에서 제거했습니다". 찜 목록 전체 비어지면 빈 상태 뷰로 전환
• 카드 전체 영역 탭: 해당 작품 상세 화면(MKT-013)으로 이동. 프라이빗 세일인 경우 프라이빗 작품 상세 화면으로 이동
• 뒤로가기: 마이페이지 메인(MYP-001)으로 이동
• 정렬: 최신 찜 순으로 노출

4. 상태 변화

• 데이터 있음 → 리스트 뷰: 찜한 작품 아이템 리스트 표시. 마켓/프라이빗 세일 작품 혼합 가능. PS 뱃지로 프라이빗 세일 구분
• 데이터 없음 → 빈 상태: CHRT 모노그램 히어로(120x120px) + "찜한 작품 내역이 없습니다" 14px --text-muted ls:-0.01em 중앙 정렬, gap:16px
• 찜 해제 시: 리스트에서 즉시 제거 반영. 별도 작품 영역(필터/탭)에서는 리스트에서 유지, 상세 화면 진입 시 삭제 반영
• 작품 가격: 현재 최신 가격으로 실시간 노출 (조건 전용이 아닌 최신 반영)

5. 네비게이션 플로우

• 진입 경로: MYP-001 마이페이지 메인 → 찜한 작품
• 뒤로가기 (chevron): → MYP-001 마이페이지 메인
• 리스트 아이템 탭 (마켓): → MKT-013 작품 상세
• 리스트 아이템 탭 (프라이빗 세일): → 프라이빗 작품 상세 화면
• 비로그인 접근: → LOG-009 로그인 안내 모달 → 로그인 완료 후 본 화면 복귀

6. 에러/예외 처리

• 찜 목록 로딩 실패: 토스트 "찜한 목록을 불러오지 못했어요. 잠시 후 다시 시도해주세요."
• 네트워크 오류: 토스트 "네트워크 오류 — 잠시 후 다시 시도해주세요"
• 찜 해제 도중 네트워크 오류: 상태 롤백(하트 아이콘 활성 복원) + 에러 토스트
• 비로그인 접근: 로그인 안내 모달(LOG-009) 노출 → 로그인 유도 (오류가 아닌 정상 상태)

7. 모션 스펙

• 화면 진입: translateX(100% → 0), duration 350ms, easing --ease-ios-spring
• 카드 pressed: background rgba(26,26,26,0.04) 즉시 적용 → 150ms fade-out으로 해제
• 찜 해제: 하트 아이콘 scale(1 → 0.8 → 1), duration 200ms. 아이템 제거 시 height collapse + opacity 0, duration 300ms ease-out
• 화면 퇴장 (뒤로가기): translateX(0 → 100%), duration 300ms, easing ease-in

8. 여백 · 간격 요약

9. 적용 디자인 토큰

• [색상]
• --bg: #FAFAF8
• --charcoal: #1A1A1A
• --red-brand: #961E23
• --text-muted: #888888
• --text-secondary: #555555
• [타이포그래피]
• --mono: TASA Orbiter
• --sans: Pretendard Variable
• [기타]
• --paper: (see tokens.css)