[Feat] 라우팅 발생 시 웹뷰 여부에 따른 별도 핸들링 구현

apps/mobile/app.json

@@ -20,23 +20,23 @@
     },
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.bokeeeey.codeitresources"
+      "bundleIdentifier": "com.bokeeeey.codeitresources",
+      "newArchEnabled": true
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.bokeeeey.codeitresources"
+      "package": "com.bokeeeey.codeitresources",
+      "newArchEnabled": true
     },
     "web": {
       "bundler": "metro",
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": [
-      "expo-router"
-    ],
+    "plugins": ["expo-router", "expo-font"],
     "experiments": {
       "typedRoutes": true
     }

apps/mobile/app/(route)/dashboard.tsx

@@ -0,0 +1,16 @@
+import WebView, { WebViewMessageEvent } from "react-native-webview";
+
+import { ROUTES } from "@/constants/routes";
+import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
+import { getBaseUrl } from "@/utils/getBaseUrl";
+
+export default function DashboardScreen() {
+  const baseUrl = getBaseUrl();
+  const handleNavigationActions = useHandleNavigationActions();
+
+  const requestOnMessage = (e: WebViewMessageEvent) => {
+    handleNavigationActions(e);
+  };
+
+  return <WebView className="flex-1" source={{ uri: `${baseUrl}${ROUTES.DASHBOARD}` }} onMessage={requestOnMessage} />;
+}

apps/mobile/app/(route)/index.tsx

@@ -0,0 +1,17 @@
+import { WebView, WebViewMessageEvent } from "react-native-webview";
+
+import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
+import { getBaseUrl } from "@/utils/getBaseUrl";
+
+export default function HomeScreen() {
+  // TODO : login상태에 따른 분기 처리 설정
+
+  const baseUrl = getBaseUrl();
+  const handleNavigationActions = useHandleNavigationActions();
+
+  const requestOnMessage = (e: WebViewMessageEvent) => {
+    handleNavigationActions(e);
+  };
+
+  return <WebView className="flex-1" source={{ uri: `${baseUrl}` }} onMessage={requestOnMessage} />;
+}

apps/mobile/app/(route)/meetings.tsx

@@ -0,0 +1,16 @@
+import WebView, { WebViewMessageEvent } from "react-native-webview";
+
+import { ROUTES } from "@/constants/routes";
+import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
+import { getBaseUrl } from "@/utils/getBaseUrl";
+
+export default function MeetingsScreen() {
+  const baseUrl = getBaseUrl();
+  const handleNavigationActions = useHandleNavigationActions();
+
+  const requestOnMessage = (e: WebViewMessageEvent) => {
+    handleNavigationActions(e);
+  };
+
+  return <WebView className="flex-1" source={{ uri: `${baseUrl}${ROUTES.MEETINGS}` }} onMessage={requestOnMessage} />;
+}

apps/mobile/app/(route)/seats.tsx

@@ -0,0 +1,16 @@
+import WebView, { WebViewMessageEvent } from "react-native-webview";
+
+import { ROUTES } from "@/constants/routes";
+import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
+import { getBaseUrl } from "@/utils/getBaseUrl";
+
+export default function SeatsScreen() {
+  const baseUrl = getBaseUrl();
+  const handleNavigationActions = useHandleNavigationActions();
+
+  const requestOnMessage = (e: WebViewMessageEvent) => {
+    handleNavigationActions(e);
+  };
+
+  return <WebView className="flex-1" source={{ uri: `${baseUrl}${ROUTES.SEATS}` }} onMessage={requestOnMessage} />;
+}

apps/mobile/app/(route)/settings.tsx

@@ -0,0 +1,15 @@
+import WebView, { WebViewMessageEvent } from "react-native-webview";
+
+import { ROUTES } from "@/constants/routes";
+import { useHandleNavigationActions } from "@/hooks/useHandleNavigationActions";
+import { getBaseUrl } from "@/utils/getBaseUrl";
+
+export default function SettingsScreen() {
+  const baseUrl = getBaseUrl();
+  const handleNavigationActions = useHandleNavigationActions();
+
+  const requestOnMessage = (e: WebViewMessageEvent) => {
+    handleNavigationActions(e);
+  };
+  return <WebView className="flex-1" source={{ uri: `${baseUrl}${ROUTES.SETTINGS}` }} onMessage={requestOnMessage} />;
+}

apps/mobile/app/_layout.tsx

@@ -3,36 +3,38 @@ import { useFonts } from "expo-font";
 import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useEffect } from "react";
+import "react-native-reanimated";
 
+import { DIR_NAME, ROUTES } from "@/constants/routes";
 import { useColorScheme } from "@/hooks/useColorScheme";
 
-import "react-native-reanimated";
 import "@repo/ui/styles/globals.css";
 
-// Prevent the splash screen from auto-hiding before asset loading is complete.
+// TODO : splash 적용할건지?
 SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
   const colorScheme = useColorScheme();
+
   const [loaded] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
   });
 
   useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
+    if (loaded) SplashScreen.hideAsync();
   }, [loaded]);
 
-  if (!loaded) {
-    return null;
-  }
+  if (!loaded) return null;
 
   return (
     <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="+not-found" />
+      <Stack screenOptions={{ headerShown: false, animation: "default" }}>
+        <Stack.Screen name={`${DIR_NAME}${ROUTES.HOME}`} />
+        <Stack.Screen name={`${DIR_NAME}${ROUTES.DASHBOARD}`} />
+        <Stack.Screen name={`${DIR_NAME}${ROUTES.MEETINGS}`} />
+        <Stack.Screen name={`${DIR_NAME}${ROUTES.SEATS}`} />
+        <Stack.Screen name={`${DIR_NAME}${ROUTES.SETTINGS}`} />
+        <Stack.Screen name={ROUTES.NOT_FOUND} />
       </Stack>
     </ThemeProvider>
   );