58. 모바일 지도 인터페이스 Design a mobile map interface: **Map View**: - Full screen map - Interactive: pan, zoom, rotate - Markers for locations **UI Overlay Elements**: - Search bar: top, floating - Filter chips: below search, scrollable - Location button: right side - Zoom controls: optional (pinch native) **Search Bar**: - White card with shadow - Search icon + input - Tap: expands or opens full search - Recent searches dropdown **Map Markers**: - Custom styled pins - Cluster markers for density - Selected state: larger, elevated - Category colors/icons **Bottom Sheet** (location details): - Collapsed: shows preview card - Expanded: full details - Peek height: 120px - Full height: 60% screen **Location Card** (peek state): - Name + category - Rating + distance - Quick action buttons: directions, call **Location Details** (expanded): - Photo gallery - Full address - Hours, phone, website - Reviews summary - Directions button - Save/share actions **My Location Button**: - Floating right side - Tap: center on user - User location: blue pulsing dot **Directions Mode**: - Route line overlay - Turn-by-turn card at bottom - ETA prominently displayed - Travel mode tabs: drive, walk, transit **Filter/Category Chips**: - Horizontal scroll - Active: filled style - Tap: filter markers Tech: React Native + react-native-maps + Bottom Sheet + MapBox