feat :Implement a bottom navigation bar with haptic feedback and iPhone safe area support to replace the floating navigation button

[Salvation-sub]

---

📝 Summary

Implement a bottom navigation bar with haptic feedback and iPhone safe area support to replace the floating navigation button.

---

📋 Detailed Tasks

Frontend (Web)

• Create BottomNavigation component with 4 tabs (Home, Map, Report, My Page)
• Add rounded top corners and shadow styling from Figma design
• Implement active/inactive tab states with color transitions
• Add iPhone safe area support using CSS env() variables
• Apply safe area insets to MainHeader component
• Fix SSR/CSR hydration errors with useEffect mounting pattern
• Update main layout with bottom navigation padding

Frontend (React Native)

• Create useHapticFeedback hook using expo-haptics
• Register haptic feedback in bridge API handlers
• Enable iOS swipe-back gesture in WebView configuration
• Fix Expo Go localhost issue with local IP configuration
• Add SafeAreaView wrapper to WebView screen

Bridge Communication

• Add triggerHapticFeedback query to bridge types
• Implement DeviceHapticFeedbackResponse interface
• Update BRIDGE_QUERIES constants
• Handle haptic feedback requests in React Native

Testing & Polish

• Test navigation on web browsers
• Test haptic feedback on physical iOS/Android devices
• Verify safe area behavior on iPhone X and newer models
• Ensure swipe-back gesture works correctly

---