개요
검색 키워드에 대한 상품 목록을 제공하는 화면.
진입 조건
| 조건 | 설명 |
|---|
| 검색 실행 | 검색 화면에서 엔터 또는 추천어 터치 |
| 키워드 터치 | 홈 인기 검색어 터치 |
정렬 옵션
UI
바텀시트 구성
| 요소 | 내용 |
|---|
| 타이틀 | "필터" |
| 닫기 버튼 | (x) 우측 상단 |
| 옵션 목록 | 라디오 버튼 형태 |
| 확인 버튼 | [확인] |
옵션
| 옵션 | 설명 |
|---|
| 추천순 | 기본값, 선택 시 배경색 강조 |
| 낮은 가격순 | 가격 오름차순 |
| 높은 가격순 | 가격 내림차순 |
동작
| 액션 | 결과 |
|---|
| 정렬 버튼 터치 | 바텀시트 표시 |
| 옵션 선택 | 해당 옵션 선택 상태 변경 |
| [확인] 터치 | 바텀시트 닫힘 + 목록 새로고침 |
접근성
| 항목 | 처리 |
|---|
| 버튼 | "정렬 기준 선택, 현재 추천순. 이중 탭 하여 변경" |
| 옵션 | "낮은 가격순, 라디오 버튼, 선택 안 됨" |
상품 그리드
UI 구성
| 요소 | 내용 |
|---|
| 레이아웃 | 2열 그리드 |
| 노출 개수 | 상위 4~6개 |
| 더보기 | [검색결과 모두보기] 버튼 |
상품 카드 (그리드형)
| 요소 | 내용 |
|---|
| 썸네일 | 정사각형 이미지 |
| 상품명 | 최대 2줄, 말줄임 |
| 가격 | 판매가 |
동작
| 액션 | 결과 |
|---|
| 상품 카드 터치 | 상품 상세 이동 |
| [검색결과 모두보기] 터치 | 전체 결과 화면 이동 (무한 스크롤) |
전체 결과 화면 (하위)
진입
[검색결과 모두보기] 버튼 터치
UI 구성
| 요소 | 내용 |
|---|
| 헤더 | 뒤로가기 + "검색결과" |
| 결과 정보 | "상품 N개" + 정렬 드롭다운 |
| 상품 목록 | 2열 그리드, 무한 스크롤 |
| 로딩 | 하단 스피너 |
페이지네이션
| 항목 | 내용 |
|---|
| 트리거 | 스크롤 하단 도달 |
| 로딩 | 스피너 표시 |
| 완료 | 추가 상품 렌더링 |
| 마지막 | "마지막 상품입니다" 안내 |
검색 결과 없음
조건
검색 결과 0건
UI 구성
| 요소 | 내용 |
|---|
| 아이콘 | 검색 관련 일러스트 |
| 메시지 | "검색 결과가 없습니다" |
| 서브 메시지 | "다른 검색어로 다시 시도해보세요" |
| 버튼 | [홈으로 가기] |
접근성
| 항목 | 처리 |
|---|
| 진입 시 | "검색 결과가 없습니다" 자동 안내 |
접근성 종합
화면 진입 시 안내
"검색 결과, 상품 N개가 검색되었습니다"
포커스 순서
뒤로가기 → 검색어 → 검색 → 결과 개수 → 정렬 → 상품 카드들 → 모두 보기
미리보는 상품 설명 (Future Release)
v3.5.0 범위 미포함 - 추후 버전에서 구현 예정
목적
상품 상세 진입 없이 AI 요약으로 빠른 비교
UI 구성
| 요소 | 내용 |
|---|
| 섹션 타이틀 | "미리보는 상품 설명" (Heading) |
| AI 요약 카드 | 세로 리스트 |
AI 요약 카드
| 요소 | 내용 |
|---|
| 썸네일 | 좌측 정사각형 |
| 상품명 | 우측 상단 |
| 가격 | 상품명 하단 |
| AI 요약 | 3~4줄 핵심 요약문 |
| 이동 버튼 | (→) 우측 하단 |