Add UX/design improvement guide document

Tracks planned UI/UX improvements with priorities and completion status.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

docs/ux-design-guide.md

@@ -0,0 +1,74 @@
+# 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. **다크모드** — 트렌드 + 야간 사용성