# Tasteby UX/디자인 개선 가이드

## 1. 네비게이션 & 구조

| 원칙 | 설명 | 적용 아이디어 |
|---|---|---|
| **Bottom Navigation** | 모바일에서 엄지 닿는 하단에 핵심 탭 (지도/검색/찜/마이) | 현재 상단에 모든 것이 몰려있음 → 하단 탭바 추가 |
| **Sticky 검색바** | 스크롤해도 검색은 항상 접근 가능 | 리스트 모드에서 검색바가 스크롤에 묻힘 |
| **Progressive Disclosure** | 필터는 처음엔 숨기고, 필요할 때 펼치기 | 필터 아이콘 터치 시 바텀시트로 |
| **2탭 이내 도달** | 핵심 기능까지 최대 2번 터치 | 식당 상세 → 마커 탭 → 바로 상세 (현재 OK) |

## 2. 비주얼 & 레이아웃

| 원칙 | 설명 | 적용 아이디어 |
|---|---|---|
| **카드 UI** | 식당 정보를 그림자+라운드 카드로 구분 | 리스트 아이템을 카드 형태로 |
| **음식 사진** | 텍스트보다 사진이 10배 효과 | Google Places 사진 API로 대표 이미지 추가 |
| **여백(White Space)** | 요소 간 충분한 간격 → 시각적 호흡 | 현재 필터/버튼이 빽빽 → 간격 확보 |
| **일관된 색상 체계** | 브랜드 컬러 1개 + 보조 1-2개 | 현재 blue/red/teal/amber 혼재 → 통일 |
| **아이콘 + 텍스트** | 아이콘만은 의미 불명확, 텍스트만은 지루 | 필터 버튼에 아이콘+라벨 조합 |

## 3. 인터랙션 & 피드백

| 원칙 | 설명 | 적용 아이디어 |
|---|---|---|
| **마이크로 애니메이션** | 탭 전환, 카드 등장 시 부드러운 전환 | 리스트↔지도 전환에 fade/slide |
| **Skeleton Loading** | 로딩 중 회색 뼈대 표시 (스피너 대신) | 식당 목록 로딩 시 스켈레톤 |
| **Pull to Refresh** | 모바일에서 당겨서 새로고침 | 리스트 모드에서 |
| **Toast 알림** | 액션 완료 시 하단에 잠깐 표시 | "찜 완료", "리뷰 저장됨" 등 |

## 4. 모바일 특화

| 원칙 | 설명 | 적용 아이디어 |
|---|---|---|
| **Bottom Sheet** | 지도 위 하단에서 올라오는 패널 (Google Maps 스타일) | 식당 상세를 바텀시트로 |
| **Swipe 제스처** | 좌우 스와이프로 식당 넘기기 | 상세 화면에서 이전/다음 식당 |
| **한 손 조작 영역** | 핵심 버튼은 하단 60% 안에 | 현재 필터가 최상단 → 접근 어려움 |
| **반응형 지도 크기** | 리스트 모드: 지도 작게 / 지도 모드: 전체 | 현재 고정 비율 → 동적 조절 |

## 5. 개인화 & 스마트 기능

| 원칙 | 설명 | 적용 아이디어 |
|---|---|---|
| **최근 본 식당** | 히스토리 자동 저장 | 로컬스토리지로 구현 가능 |
| **맞춤 추천** | "당신이 좋아할 식당" | 찜/리뷰 기반 유사 식당 추천 |
| **위치 기반 기본값** | 현재 위치 근처 식당 우선 | 이미 구현 (geolocation) |
| **검색 자동완성** | 타이핑 중 식당/메뉴 서제스트 | 검색바에 debounced suggestions |

## 6. 디자인 트렌드 (2025-2026)

| 트렌드 | 설명 |
|---|---|
| **Bento Box 레이아웃** | 대시보드형 격자 카드 배치 (Apple 스타일) |
| **Glassmorphism** | 반투명 유리 효과 배경 (지도 위 오버레이에 적합) |
| **다크모드** | 시스템 설정 연동 자동 전환 |
| **대담한 타이포그래피** | 큰 글씨 + 굵은 폰트로 핵심 정보 강조 |
| **Scroll-telling** | 스크롤 따라 콘텐츠가 자연스럽게 전개 |

## 우선 적용 추천 순위

1. ~~**모바일 Bottom Sheet** — 지도 위 식당 상세를 Google Maps처럼~~ ✅ 완료
   - `BottomSheet.tsx` 컴포넌트: 3단 snap (40%/55%/92%), 드래그 제스처, 속도 감지
   - 모바일 지도 모드: 전체 화면 지도 + 바텀시트로 상세
   - 모바일 리스트 모드: 리스트 유지 + 바텀시트로 상세
2. **식당 카드 + 음식 사진** — 시각적 임팩트 (Google Places Photo API)
3. **필터를 바텀시트/드롭다운으로** — 상단 필터 줄 정리
4. ~~**Skeleton Loading** — 체감 속도 향상~~ ✅ 완료
   - `Skeleton.tsx`: RestaurantListSkeleton (8개 카드), RestaurantDetailSkeleton
   - RestaurantList: loading prop으로 스켈레톤 표시
   - RestaurantDetail: 비디오 로딩 시 스켈레톤
   - ReviewSection: 리뷰 로딩 시 스켈레톤
   - 초기 로드 + 검색 + 채널 변경 시 모두 스켈레톤 표시
5. **Toast 알림** — 액션 피드백
6. **다크모드** — 트렌드 + 야간 사용성
