feat: naver-map

app/app.config.js

@@ -23,6 +23,8 @@ module.exports = {
           "kakaokompassauth", // 카카오 로그인 인증용
           "kakaolink", // 카카오톡 링크
           "kakaotalk", // 카카오톡 앱
+          "navermaps", // 네이버 지도
+          "nmap", // 네이버 지도
         ],
       },
     },

app/app/index.tsx

@@ -53,7 +53,25 @@ export default function WebViewScreen() {
       }
       const request = JSON.parse(event.nativeEvent.data);
       console.log("WebView: Message received from Web", request);
-      onRequest(request.query);
+
+      if (request.type === "open-external-link" && request.payload?.url) {
+        const { url } = request.payload;
+        Linking.canOpenURL(url).then((supported) => {
+          if (supported) {
+            Linking.openURL(url);
+          } else {
+            console.warn(`Cannot open URL: ${url}`);
+            if (url.startsWith("http")) {
+              Linking.openURL(url);
+            }
+          }
+        });
+        return;
+      }
+
+      if (request.query) {
+        onRequest(request.query);
+      }
     } catch (error) {
       console.error("WebView: Failed to parse message", error, event.nativeEvent.data);
     }

shared/bridge/types.ts

@@ -83,3 +83,11 @@ export type BridgeMessage<T extends BridgeQuery = BridgeQuery> = {
 export interface BridgeRequest<T extends BridgeQuery = BridgeQuery> {
   query: T;
 }
+
+/**
+ * Represents all possible messages sent from the web to the native app.
+ * It includes query-based requests and specific typed messages like opening an external link.
+ */
+export type WebToAppMessage =
+  | BridgeRequest
+  | { type: "open-external-link"; payload: { url: string } };

web/src/features/store/ui/StoreInfo.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import type { Menu } from "@/entities/store/model/types";
+import { useWebview } from "@/shared/lib/hooks/useWebview";
 import { ChipFilter, Icon, Tag } from "@/shared/ui";
 
 interface StoreInfoProps {
@@ -25,6 +26,8 @@ export function StoreInfo({
   lon,
   handleSetZoomImageSrc,
 }: StoreInfoProps) {
+  const { isWebview, postMessage } = useWebview();
+
   const renderImage = (src: string | undefined, alt: string, className: string) =>
     src ? (
       <Image
@@ -45,12 +48,6 @@ export function StoreInfo({
       return;
     }
 
-    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-    const isSimulator =
-      navigator.userAgent.includes("Android SDK") || navigator.userAgent.includes("Simulator");
-    const isDesktopChrome =
-      !isMobile && /Chrome/i.test(navigator.userAgent) && !/Mobile/i.test(navigator.userAgent);
-
     navigator.geolocation.getCurrentPosition(
       (pos) => {
         const fromLat = pos.coords.latitude;
@@ -59,17 +56,29 @@ export function StoreInfo({
           "현재위치",
         )}&dlat=${toLat}&dlng=${toLng}&dname=${encodeURIComponent(toName)}&mode=walk`;
 
+        if (isWebview) {
+          postMessage({
+            type: "open-external-link",
+            payload: {
+              url: appUrl,
+            },
+          });
+          return;
+        }
+
         const webUrl = `https://map.naver.com/v5/directions/${fromLng},${fromLat}/${toLng},${toLat}/${encodeURIComponent(
           toName,
         )}/walk`;
 
-        if (!isMobile || isSimulator || isDesktopChrome) {
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+        if (isMobile) {
+          window.location.href = appUrl;
+          setTimeout(() => {
+            window.location.href = webUrl;
+          }, 1000);
+        } else {
           window.open(webUrl, "_blank");
-          return;
         }
-
-        window.open(appUrl, "_blank");
-        setTimeout(() => window.open(webUrl, "_blank"), 1000);
       },
       (err) => {
         console.error(err);

web/src/shared/lib/hooks/useWebview.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import type { WebToAppMessage } from "@/../../shared/bridge/types";
+
+interface ReactNativeWebView {
+  postMessage: (message: string) => void;
+}
+
+interface CustomWindow extends Window {
+  ReactNativeWebView?: ReactNativeWebView;
+}
+
+declare const window: CustomWindow;
+
+export const useWebview = () => {
+  const [isWebview, setIsWebview] = useState(false);
+
+  useEffect(() => {
+    if (window.ReactNativeWebView) {
+      setIsWebview(true);
+    }
+  }, []);
+
+  const postMessage = (message: WebToAppMessage) => {
+    if (isWebview && window.ReactNativeWebView) {
+      window.ReactNativeWebView.postMessage(JSON.stringify(message));
+    }
+  };
+
+  return { isWebview, postMessage };
+};