feat: webview setting

package.json

@@ -61,6 +61,7 @@
     "react-native-splash-screen": "^3.3.0",
     "react-native-svg": "^15.8.0",
     "react-native-vector-icons": "^10.1.0",
+    "react-native-webview": "^13.15.0",
     "tosspayments-react-native-webview": "^1.0.0",
     "zustand": "^5.0.3"
   },

src/components/map/MyLocationMap.tsx

@@ -6,6 +6,7 @@ import {StackNavigationProp} from '@react-navigation/stack';
 import {RootStackParamList} from '@/types/StackNavigationType';
 
 import S from './MyLocationMap.style';
+import {routeToDetail} from '@/navigation/navigator';
 
 const MyLocationMap = ({
   cords,
@@ -20,10 +21,7 @@ const MyLocationMap = ({
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const handleMarkerClick = (marketId: number) => {
     if (marketId !== -1) {
-      navigation.navigate('Detail', {
-        screen: 'MarketDetail',
-        params: {marketId},
-      });
+      routeToDetail(navigation, marketId);
     }
   };
   return (

src/components/orderDetail/OrderDescription.tsx

@@ -9,6 +9,7 @@ import {to6DigitHash} from '@ummgoban/shared';
 import {DetailStackParamList} from '@/types/StackNavigationType';
 
 import S from './OrderDescription.style';
+import {routeToDetail} from '@/navigation/navigator';
 
 type Props = {
   id: string;
@@ -48,9 +49,7 @@ const OrderCustomerInfo = ({id, navigation, orderDetail}: Props) => {
     <S.Container>
       <S.OrderStatusText>{orderStatusText}</S.OrderStatusText>
       <S.MarketInformation
-        onPress={() =>
-          navigation.navigate('MarketDetail', {marketId: orderDetail.marketId})
-        }>
+        onPress={() => routeToDetail(navigation, orderDetail.marketId)}>
         <S.MarketName>{orderDetail.marketName}</S.MarketName>
         <S.MarketAddress>{orderDetail.address}</S.MarketAddress>
       </S.MarketInformation>

src/navigation/index.tsx

@@ -6,11 +6,18 @@ import RegisterNavigator from './RegisterNavigator';
 import DetailNavigator from './DetailNavigator';
 import CartNavigator from './CartNavigator';
 import MyPageNavigator from './MyPageNavigator';
+import withWebViewGate from './withWebViewGate';
 
 import {RootStackParamList} from '@/types/StackNavigationType';
 
 const Stack = createStackNavigator<RootStackParamList>();
 
+const HomeWithGate = withWebViewGate(HomeNavigator);
+const RegisterWithGate = withWebViewGate(RegisterNavigator);
+const DetailWithGate = withWebViewGate(DetailNavigator);
+const CartWithGate = withWebViewGate(CartNavigator);
+const MyPageWithGate = withWebViewGate(MyPageNavigator);
+
 const AppNavigator = () => {
   /** omit top, because of `@react-navigation/stack` appbar containing top safe area */
   // const {left, right, bottom} = useSafeAreaInsets();
@@ -19,11 +26,11 @@ const AppNavigator = () => {
     <Stack.Navigator
       initialRouteName="Home"
       screenOptions={{headerShown: false}}>
-      <Stack.Screen name="Home" component={HomeNavigator} />
-      <Stack.Screen name="Register" component={RegisterNavigator} />
-      <Stack.Screen name="Detail" component={DetailNavigator} />
-      <Stack.Screen name="CartRoot" component={CartNavigator} />
-      <Stack.Screen name="MyPageRoot" component={MyPageNavigator} />
+      <Stack.Screen name="Home" component={HomeWithGate} />
+      <Stack.Screen name="Register" component={RegisterWithGate} />
+      <Stack.Screen name="Detail" component={DetailWithGate} />
+      <Stack.Screen name="CartRoot" component={CartWithGate} />
+      <Stack.Screen name="MyPageRoot" component={MyPageWithGate} />
     </Stack.Navigator>
   );
 };

src/navigation/navigator.ts

@@ -0,0 +1,30 @@
+import {
+  DetailStackParamList,
+  FeedStackParamList,
+  HomeStackParamList,
+  MyPageStackParamList,
+  RegisterStackParamList,
+  RootStackParamList,
+} from '@/types/StackNavigationType';
+import {StackNavigationProp} from '@react-navigation/stack';
+
+export function routeToDetail(
+  navigation: StackNavigationProp<
+    | RootStackParamList
+    | HomeStackParamList
+    | FeedStackParamList
+    | RegisterStackParamList
+    | DetailStackParamList
+    | MyPageStackParamList
+  >,
+  marketId: number,
+) {
+  navigation.navigate('Detail', {
+    screen: 'MarketDetail',
+    params: {marketId},
+    webview: {
+      uri: __DEV__ ? 'http://172.30.1.34:4173' : 'https://ummgoban.com',
+      title: 'webview',
+    },
+  });
+}

src/navigation/withWebViewGate.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import WebViewScreen from '@/webview/WebViewScreen';
+
+type RouteWithWeb = {params: {webview?: {uri: string; title?: string}}};
+
+const withWebViewGate = <P extends {route?: RouteWithWeb}>(
+  NavigatorComponent: React.ComponentType<P>,
+) => {
+  return function WebViewGateComponent(props: P) {
+    const webview = props.route?.params?.webview;
+
+    if (webview?.uri) {
+      return <WebViewScreen {...webview} />;
+    }
+    return <NavigatorComponent {...props} />;
+  };
+};
+
+export default withWebViewGate;

src/screens/CustomerReviewScreen/index.tsx

@@ -8,6 +8,7 @@ import S from './CustomerReviewScreen.style';
 import {CustomerReviewCard} from '@/components/common/customerReview';
 import {ActivityIndicator} from 'react-native-paper';
 import EmptyComponent from '@/components/common/EmptyComponent';
+import {routeToDetail} from '@/navigation/navigator';
 
 type CustomerReviewScreenProps = StackScreenProps<
   MyPageStackParamList,
@@ -49,12 +50,7 @@ const CustomerReviewScreen = ({
   }
 
   const navigateMarketDetail = (marketId: number) => {
-    navigation.navigate('Detail', {
-      screen: 'MarketDetail',
-      params: {
-        marketId: marketId,
-      },
-    });
+    routeToDetail(navigation, marketId);
   };
 
   if (reviews.length === 0) {

src/screens/FeedScreen/index.tsx

@@ -19,6 +19,7 @@ import useGPSLocation from '@/hooks/useGPSLocation';
 import {RootStackParamList} from '@/types/StackNavigationType';
 
 import S from './Feed.style';
+import {routeToDetail} from '@/navigation/navigator';
 
 type Props = {
   navigation: StackNavigationProp<RootStackParamList, 'Home'>;
@@ -36,10 +37,7 @@ const FeedScreen = ({navigation}: Props) => {
   const marketList = data ? data.pages.flatMap(page => page.markets) : [];
 
   const onPressStore = (marketId: number) => {
-    navigation.navigate('Detail', {
-      screen: 'MarketDetail',
-      params: {marketId},
-    });
+    routeToDetail(navigation, marketId);
   };
 
   const navigateMap = () => {

src/screens/OrderHistoryScreen/index.tsx

@@ -15,6 +15,7 @@ import usePullDownRefresh from '@/hooks/usePullDownRefresh';
 import {RootStackParamList} from '@/types/StackNavigationType';
 
 import S from './OrderHistory.style';
+import {routeToDetail} from '@/navigation/navigator';
 
 const OrderHistoryScreen = () => {
   const {data: historyList, refetch} = useOrderHistoryQuery();
@@ -60,12 +61,7 @@ const OrderHistoryScreen = () => {
       }>
       <OrderHistory
         historyList={historyList}
-        onPressMarket={marketId =>
-          navigation.navigate('Detail', {
-            screen: 'MarketDetail',
-            params: {marketId: marketId},
-          })
-        }
+        onPressMarket={marketId => routeToDetail(navigation, marketId)}
       />
     </S.OrderHistoryContainer>
   );

src/screens/ShoppingCartScreen/ShoppingCartPage.tsx

@@ -9,6 +9,7 @@ import {RootStackParamList} from '@/types/StackNavigationType';
 import {Menu} from '@/components/marketDetailPage';
 import {BottomButton} from '@/components/common';
 import {useUpdateBucket} from '@/apis/buckets';
+import {routeToDetail} from '@/navigation/navigator';
 
 type Props = {
   navigation: StackNavigationProp<RootStackParamList, 'Home'>;
@@ -42,10 +43,7 @@ const ShoppingCartPage = ({navigation, cartData}: Props) => {
   }, [market.closeAt]);
 
   const onPressStore = () => {
-    navigation.navigate('Detail', {
-      screen: 'MarketDetail',
-      params: {marketId: cartData.market.id},
-    });
+    routeToDetail(navigation, cartData.market.id);
   };
 
   const onPressPayment = () => {

src/screens/SubscribeScreen/index.tsx

@@ -17,6 +17,7 @@ import SubscribeMarketCard from '@/components/subscribePage/SubscribeMarketCard'
 import {RootStackParamList} from '@/types/StackNavigationType';
 
 import S from './SubscribeScreen.style';
+import {routeToDetail} from '@/navigation/navigator';
 
 type Props = {
   navigation: StackNavigationProp<RootStackParamList, 'Subscribe'>;
@@ -48,10 +49,7 @@ const SubscribeScreen = ({navigation}: Props) => {
   });
 
   const onPressStore = (marketId: number) => {
-    navigation.navigate('Detail', {
-      screen: 'MarketDetail',
-      params: {marketId},
-    });
+    routeToDetail(navigation, marketId);
   };
 
   const handleEndReached = () => {

src/types/StackNavigationType.ts

@@ -2,9 +2,13 @@ import {ParamListBase} from '@react-navigation/native';
 import {OrderType} from './OrderType';
 import {ProductType} from '@ummgoban/shared/lib';
 
-type StackParamType<T> = {
+export type StackParamType<T> = {
   screen?: keyof T;
   params?: T[keyof T];
+  webview?: {
+    uri: string;
+    title?: string;
+  };
 };
 
 export interface HomeStackParamList extends ParamListBase {

src/webview/WebViewScreen.tsx

@@ -0,0 +1,48 @@
+import {useFocusEffect} from '@react-navigation/native';
+import React, {useCallback, useRef, useState} from 'react';
+import {BackHandler, Linking} from 'react-native';
+import {WebView} from 'react-native-webview';
+
+type Props = {
+  uri: string;
+  title?: string;
+};
+
+const WebViewScreen = ({uri}: Props) => {
+  const webRef = useRef<WebView>(null);
+  const [canGoBack, setCanGoBack] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+        if (canGoBack) {
+          webRef.current?.goBack();
+          return true;
+        }
+        return false;
+      });
+      return () => sub.remove();
+    }, [canGoBack]),
+  );
+
+  return (
+    <WebView
+      ref={webRef}
+      source={{uri}}
+      onNavigationStateChange={s => setCanGoBack(s.canGoBack)}
+      javaScriptEnabled
+      domStorageEnabled
+      setSupportMultipleWindows={false}
+      // 필요 시 스킴 필터/외부 링크 분리
+      onShouldStartLoadWithRequest={req => {
+        if (!/^https?:/.test(req.url)) {
+          Linking.openURL(req.url);
+          return false;
+        }
+        return true;
+      }}
+    />
+  );
+};
+
+export default WebViewScreen;

yarn.lock

@@ -4531,6 +4531,7 @@ __metadata:
     react-native-svg: ^15.8.0
     react-native-svg-transformer: ^1.5.0
     react-native-vector-icons: ^10.1.0
+    react-native-webview: ^13.15.0
     react-test-renderer: 18.3.1
     tosspayments-react-native-webview: ^1.0.0
     typescript: 5.0.4
@@ -10576,6 +10577,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-webview@npm:^13.15.0":
+  version: 13.15.0
+  resolution: "react-native-webview@npm:13.15.0"
+  dependencies:
+    escape-string-regexp: ^4.0.0
+    invariant: 2.2.4
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 1c843206108358faef5cd8e25834de729a90319c3fa3f765923536fdd99b86b07a3e850b89ebe6503725a022dd9dddd5de76ef6e102d290cc5935dcf9c60198d
+  languageName: node
+  linkType: hard
+
 "react-native@npm:0.75.2":
   version: 0.75.2
   resolution: "react-native@npm:0.75.2"