UI 구성
헤더
| 요소 | 내용 |
|---|
| 타이틀 | "위시리스트" |
| 편집 버튼 | 우측 상단 [편집] |
상품 개수
상품 목록
| 요소 | 내용 |
|---|
| 레이아웃 | 세로 리스트 |
| 정렬 | 최근 추가순 (최신이 위) |
상품 카드 (리스트형)
구성
| 요소 | 위치 | 내용 |
|---|
| 썸네일 | 좌측 | 정사각형 이미지 |
| 상품명 | 중앙 상단 | 최대 2줄, 말줄임 |
| 가격 | 중앙 하단 | 판매가 |
| 삭제 버튼 | 우측 | (x) 아이콘 |
동작
| 액션 | 결과 |
|---|
| 카드 터치 (삭제 버튼 외) | 상품 상세 이동 |
| 삭제 버튼 터치 | 찜 해제 (Soft Delete) |
삭제 기능
개별 삭제
| 동작 | 결과 |
|---|
| (x) 버튼 터치 | 해당 상품 찜 해제 |
| 삭제 후 | 토스트 + [되돌리기] 버튼 |
Soft Delete (되돌리기)
| 요소 | 내용 |
|---|
| 토스트 | "위시리스트에서 삭제되었습니다" |
| 되돌리기 버튼 | 토스트 우측 [되돌리기] |
| 유지 시간 | 3초 |
되돌리기 동작
| 액션 | 결과 |
|---|
| [되돌리기] 터치 | 삭제 취소, 목록에 복원 |
| 3초 경과 | 토스트 사라짐, 삭제 확정 |
편집 모드 (전체 삭제)
| 요소 | 내용 |
|---|
| 진입 | [편집] 버튼 터치 |
| 선택 | 전체 선택 / 개별 선택 체크박스 |
| 삭제 | [선택 삭제] 버튼 |
| 완료 | [완료] 버튼 |
편집 모드 UI
| 요소 | 내용 |
|---|
| 헤더 | "위시리스트" + [완료] |
| 전체 선택 | 체크박스 + "전체 선택" |
| 상품 카드 | 좌측에 체크박스 추가 |
| 하단 고정 | [선택 삭제] 버튼 |
빈 상태
조건
찜한 상품이 0개인 경우
UI 구성
| 요소 | 내용 |
|---|
| 아이콘 | 빈 하트 일러스트 |
| 메시지 | "아직 찜한 상품이 없어요" |
| 서브 메시지 | "마음에 드는 상품을 찜해보세요" |
| 버튼 | [홈으로 가기] |
동작
접근성
화면 진입
| 상황 | 안내 |
|---|
| 상품 있음 | "위시리스트, 찜한 상품 N개" |
| 상품 없음 | "위시리스트, 찜한 상품 없음" |
상품 카드
| 항목 | 처리 |
|---|
| 카드 영역 | "상품명, N원. 이중 탭 하여 상세 보기" |
| 삭제 버튼 | "상품명 찜 해제, 버튼" |
삭제 및 되돌리기
| 상황 | 안내 |
|---|
| 삭제 시 | "상품명이 위시리스트에서 삭제되었습니다. 되돌리기 버튼 3초 내 선택 가능" |
| 되돌리기 시 | "삭제가 취소되었습니다" |
포커스 순서
헤더 → 편집 버튼 → 상품 개수 → 상품 카드들 (카드 → 삭제버튼)