개요
상품을 카테고리별로 탐색할 수 있는 화면.
카테고리 메인
UI 구성
| 요소 | 내용 |
|---|
| 헤더 | "카테고리" |
| 카테고리 그리드 | 5열 그리드 |
| 각 아이템 | 아이콘 + 카테고리명 |
카테고리 목록 (15개)
| 순서 | 카테고리 |
|---|
| 1 | 식품 |
| 2 | 생활용품 |
| 3 | 주방용품 |
| 4 | 욕실용품 |
| 5 | 반려동물 |
| 6 | 의류 |
| 7 | 잡화 |
| 8 | 언더웨어 |
| 9 | 화장품 |
| 10 | 건강 |
| 11 | 가전 |
| 12 | 디지털 |
| 13 | 문구 |
| 14 | 완구 |
| 15 | 기타 |
동작
| 액션 | 결과 |
|---|
| 카테고리 터치 | 해당 카테고리 상품 목록 이동 |
카테고리별 상품 목록 (하위 화면)
UI 구성
| 요소 | 내용 |
|---|
| 헤더 | 뒤로가기 + 카테고리명 |
| 상품 개수 | "상품 N개" |
| 정렬 드롭다운 | 추천순/낮은 가격순/높은 가격순 |
| 상품 그리드 | 2열 그리드 |
상품 카드
| 요소 | 내용 |
|---|
| 썸네일 | 정사각형 이미지 |
| 상품명 | 최대 2줄 |
| 가격 | 판매가 |
페이지네이션
| 항목 | 내용 |
|---|
| 방식 | 무한 스크롤 |
| 로딩 | 하단 스피너 |
| 마지막 | "마지막 상품입니다" 안내 |
동작
| 액션 | 결과 |
|---|
| 상품 카드 터치 | 상품 상세 이동 |
| 뒤로가기 | 카테고리 메인 복귀 |
| 정렬 변경 | 목록 새로고침 |
접근성
카테고리 메인
| 항목 | 처리 |
|---|
| 화면 진입 | "카테고리 화면, 15개 카테고리" |
| 카테고리 아이템 | "식품, 버튼. 이중 탭 하여 식품 상품 보기" |
카테고리 상품 목록
| 항목 | 처리 |
|---|
| 화면 진입 | "식품 카테고리, 상품 N개" |
| 상품 카드 | "상품명, N원. 이중 탭 하여 상세 보기" |
포커스 순서
뒤로가기 → 헤더 → 상품개수 → 정렬 → 상품카드들