WP-FE-ROUTE-NAV-EXPLORE-01 — Dẫn đường + khám phá bản đồ
Domain: D-ROUTE · Surface: CON · Status: IMP · Date: 2026-08-14
Goal
Màn RouteActive giữ luồng turn-by-turn (Figma/JPG b6ccd…) và thêm chế độ vừa dẫn đường vừa khám phá: vuốt / zoom / xoay / nghiêng không làm mất hành trình; marker ảnh vuông bo góc quanh tuyến; clustering + bottom sheet hai chiều.
Acceptance
| AC | Result |
|---|---|
| Gesture (pan/zoom/rotate/tilt) không auto-recenter camera | PASS — exploring khóa animateCamera |
| GPS + polyline + reroute vẫn chạy khi đang khám phá | PASS — session không pause |
| Nút Về vị trí của tôi khóa lại follow | PASS |
| Marker ảnh vuông, viền trắng, shadow, tên | PASS — MapPhotoThumbPin |
| Clustering + selected + sheet 2 chiều | PASS — clusterMapMarkers + peek list |
| Sheet: ảnh, tên, loại, khoảng cách, ETA, rating, mở cửa · Chi tiết / Thêm dừng / Dẫn đường | PASS |
| Viewport fetch + debounce 400ms · cap 60 marker | PASS — GET /places/map |
| Loading / empty / error · quyền vị trí | PASS |
| Không phá API directions / component follow cũ | PASS — via = 2 lần POST /routing/directions ghép FE |
Files
| Path | Role |
|---|---|
mobile/src/features/routing/routeExplore.ts |
viewport, corridor, ETA, camera lock, stitch legs |
mobile/src/features/routing/routeExplore.test.ts |
unit 12 cases + cluster 4 |
mobile/src/features/routing/useRouteExplorePlaces.ts |
debounce fetch + cluster |
mobile/src/features/routing/useRouteNavSession.ts |
addViaStop · navigateToPlace |
mobile/src/features/routing/components/RoutePolylinePreview.tsx |
gesture unlock · children markers |
mobile/src/features/routing/components/RouteExplorePlaceSheet.tsx |
place card |
mobile/src/features/routing/screens/RouteActiveScreen.tsx |
wire explore UX |
mobile/src/shared/maps/MapPhotoThumbPin.tsx |
Google-Photos-style thumb |
mobile/src/shared/maps/MapPhotoThumbMarker.tsx |
tracksViewChanges |
Verify
cd mobile
npm run test:route-explore
Device: Chỉ đường → Bắt đầu → vuốt bản đồ (camera không kéo về) → Về vị trí của tôi → follow lại. Bật khám phá (icon map-search) → chip danh mục → tap marker ↔ sheet.