feat: implement bottom navigation with haptic feedback and safe area support

.claude/settings.local.json

@@ -19,7 +19,8 @@
       "Bash(pnpm check:web:*)",
       "Bash(pnpm run check:web:*)",
       "Bash(pnpm -w run check:web:*)",
-      "Bash(node:*)"
+      "Bash(node:*)",
+      "Bash(python3:*)"
     ],
     "deny": [],
     "ask": []

app/apis/index.ts

@@ -1,4 +1,4 @@
-import { useDeviceLocation, useDeviceSystem } from "@/hooks";
+import { useDeviceLocation, useDeviceSystem, useHapticFeedback } from "@/hooks";
 import type { BridgeMessage, BridgeQuery } from "@bridge";
 import { RefObject } from "react";
 import { WebView } from "react-native-webview";
@@ -11,6 +11,7 @@ export const useApis = (webviewRef: RefObject<WebView | null>) => {
   const APIS = {
     ...useDeviceSystem(onResponse),
     ...useDeviceLocation(onResponse),
+    ...useHapticFeedback(onResponse),
   };
 
   const onRequest = (query: BridgeQuery) => {

app/app/_layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout() {
   return (
     <View style={{ flex: 1 }}>
       <WebViewScreen />
-      <StatusBar style="auto" />
+      <StatusBar style="dark" />
     </View>
   );
 }

app/app/index.tsx

@@ -6,15 +6,17 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { WebView } from "react-native-webview";
 
 export default function WebViewScreen() {
-  const [isConnected, setIsConnected] = useState(false);
+  const [isConnected, setIsConnected] = useState(true);
   const webViewRef = useRef<WebView>(null);
   const { onRequest } = useApis(webViewRef);
 
   // 인터넷 상태 확인
   useEffect(() => {
-    NetInfo.addEventListener((status) => {
+    const unsubscribe = NetInfo.addEventListener((status) => {
       setIsConnected(status.isConnected ?? false);
     });
+
+    return () => unsubscribe();
   }, []);
 
   if (!isConnected)
@@ -25,17 +27,22 @@ export default function WebViewScreen() {
     );
 
   return (
-    <SafeAreaView style={styles.container}>
       <WebView
         ref={webViewRef}
+        // 개발 환경: 로컬 IP 사용 (Expo Go에서 localhost 접근 불가)
+        // 프로덕션: https://bobtory.com
         source={{ uri: "https://bobtory.com" }}
+        // source={{ uri: "http://localhost:3000" }}
         onMessage={(event) => {
           if (!event.nativeEvent.data) return;
           const request = JSON.parse(event.nativeEvent.data);
           onRequest(request.query);
         }}
+        // iOS 스와이프 백 제스처 활성화
+        allowsBackForwardNavigationGestures={true}
+        // iOS에서 바운스 효과 비활성화 (선택사항)
+        bounces={false}
       />
-    </SafeAreaView>
   );
 }
 

app/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from "./useDeviceLocation";
 export * from "./useDeviceSystem";
+export * from "./useHapticFeedback";

app/hooks/useHapticFeedback.ts

@@ -0,0 +1,30 @@
+import * as Haptics from "expo-haptics";
+import type { BridgeMessage, BridgeQuery } from "@bridge";
+
+export const useHapticFeedback = (
+  onResponse: <T extends BridgeQuery>(result: BridgeMessage<T>) => void
+) => {
+  const triggerHapticFeedback = async () => {
+    try {
+      // iOS와 Android 모두 지원하는 경량 햅틱 피드백
+      await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+
+      onResponse({
+        triggerHapticFeedback: {
+          success: true,
+        },
+      });
+    } catch (error) {
+      console.error("Haptic feedback error:", error);
+      onResponse({
+        triggerHapticFeedback: {
+          success: false,
+        },
+      });
+    }
+  };
+
+  return {
+    triggerHapticFeedback,
+  };
+};

shared/bridge/queries.ts

@@ -8,6 +8,7 @@ export const BRIDGE_QUERIES = {
   DEVICE_SYSTEM_APP: 'fetchDeviceSystemForAppSet',
   DEVICE_SYSTEM_PLATFORM: 'fetchDeviceSystemForPlatformSet',
   DEVICE_LOCATION: 'fetchDeviceLocationForLatLngSet',
+  HAPTIC_FEEDBACK: 'triggerHapticFeedback',
 } as const satisfies Record<string, BridgeQuery>;
 
 /**

shared/bridge/types.ts

@@ -22,6 +22,10 @@ export interface DeviceLocationLatLngSetResponse {
   lng: number;
 }
 
+export interface DeviceHapticFeedbackResponse {
+  success: boolean;
+}
+
 // ============================================
 // Bridge Schema
 // ============================================
@@ -35,6 +39,7 @@ export interface BridgeSchema {
   fetchDeviceSystemForAppSet: DeviceSystemAppSetResponse;
   fetchDeviceSystemForPlatformSet: DeviceSystemPlatformSetResponse;
   fetchDeviceLocationForLatLngSet: DeviceLocationLatLngSetResponse;
+  triggerHapticFeedback: DeviceHapticFeedbackResponse;
 }
 
 // ============================================

web/src/app/(main)/layout.tsx

@@ -1,13 +1,25 @@
-import { MAIN_HEADER_HEIGHT } from "@/shared/config";
-import { FloatingNavButton } from "@/shared/ui";
+"use client";
+
+import { usePathname } from "next/navigation";
+import { BOTTOM_NAV_HEIGHT, MAIN_HEADER_HEIGHT } from "@/shared/config";
+import { BottomNavigation } from "@/shared/ui";
 import MainHeader from "@/shared/ui/MainHeader";
 
 export default function MainLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const isHeaderVisible = pathname.startsWith("/home") || pathname.startsWith("/map");
   return (
-    <div style={{ paddingTop: `${MAIN_HEADER_HEIGHT}px` }}>
-      <FloatingNavButton />
-      <MainHeader />
+    <div
+      style={{
+        paddingTop: isHeaderVisible
+          ? `calc(${MAIN_HEADER_HEIGHT}px + env(safe-area-inset-top))`
+          : "env(safe-area-inset-top)",
+        paddingBottom: `calc(${BOTTOM_NAV_HEIGHT}px + env(safe-area-inset-bottom))`,
+      }}
+    >
+      {isHeaderVisible && <MainHeader />}
       {children}
+      <BottomNavigation />
     </div>
   );
 }

web/src/app/(main)/report/page.tsx

@@ -0,0 +1,3 @@
+export default function ReportPage() {
+  return <div>식당 제하</div>;
+}

web/src/app/(stack)/layout.tsx

@@ -1,4 +1,14 @@
 export default function StackLayout({ children }: { children: React.ReactNode }) {
   // 헤더는 이제 TransitionLayout에서 처리
-  return <div className="overflow-x-hidden">{children}</div>;
+  return (
+    <div
+      className="overflow-x-hidden"
+      style={{
+        paddingTop: "env(safe-area-inset-top)",
+        paddingBottom: "env(safe-area-inset-bottom)",
+      }}
+    >
+      {children}
+    </div>
+  );
 }

web/src/app/globals.css

@@ -1,5 +1,13 @@
 @import "tailwindcss";
 
+/* iPhone Safe Area 지원 */
+:root {
+  --safe-area-inset-top: env(safe-area-inset-top, 0px);
+  --safe-area-inset-right: env(safe-area-inset-right, 0px);
+  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-inset-left: env(safe-area-inset-left, 0px);
+}
+
 /* Ssgoi drill 애니메이션 최적화 */
 html,
 body {

web/src/entities/user/model/constant.ts

@@ -4,7 +4,7 @@ export const MY_PAGE_NAVIGATION: { label: string; icon: IconName; href: string }
   {
     label: "식당 제보하기",
     icon: "colorSpeaker",
-    href: "/mypage/report",
+    href: "/report",
   },
   {
     label: "내 방문 후기 보기",

web/src/shared/config/offsetInfo.ts

@@ -1 +1,2 @@
 export const MAIN_HEADER_HEIGHT = 60;
+export const BOTTOM_NAV_HEIGHT = 64;

web/src/shared/config/routeConfig.ts

@@ -61,11 +61,9 @@ export const ROUTE_CONFIG: Record<string, RouteConfig> = {
 
   // 스택 그룹 - 드릴 네비게이션
   "/mypage": {
-    group: "stack",
-    transition: "drill",
-    header: {
-      title: "마이페이지",
-    },
+    group: "main",
+    transition: "fade",
+    header: null,
   },
   "/mypage/nickname": {
     group: "stack",
@@ -75,17 +73,17 @@ export const ROUTE_CONFIG: Record<string, RouteConfig> = {
     },
   },
   "/mypage/*": {
-    group: "stack",
-    transition: "drill",
+    group: "main",
+    transition: "fade",
     header: {
       title: "마이페이지 상세",
     },
   },
-  "/mypage/tester": {
+  "/mypage/reviews": {
     group: "stack",
     transition: "drill",
     header: {
-      title: "테스터 페이지",
+      title: "방문 후기",
     },
   },
   "/item": {