[Feature] 네이티브 응답 핸들러 추가

src/components/Home/Home.tsx

@@ -1,12 +1,43 @@
+import { useEffect, useState } from "react";
+
 import styles from "@/components/Home/Home.module.scss";
 import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
 import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
 import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
 const Home = () => {
   const { send } = useAppBridge();
 
+  interface ScanResult {
+    [key: string]: string;
+  }
+
+  // const [results, setResults] = useState<ScanResult[]>([]);
+  const [isSuccess, setIsSuccess] = useState<boolean>(false);
+  const { navigateToReceiptEdit } = useRoute();
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.response =
+        window.response || ({} as { receiveScanResult: (jsonData: string) => void });
+
+      window.response.receiveScanResult = (jsonData: string) => {
+        try {
+          const data: ScanResult[] = JSON.parse(jsonData);
+          // setResults(data);
+          console.log(data);
+          setIsSuccess(true);
+          navigateToReceiptEdit();
+        } catch (error) {
+          console.error("Error parsing scan result JSON:", error);
+        }
+      };
+    }
+  }, []);
+
   return (
     <div className={styles.Home}>
       <div className={styles.HomeTitle}>
@@ -20,6 +51,7 @@ const Home = () => {
       <div className={styles.HomeImage}>
         <img src="/assets/img/img-graphic-logo.png" alt="mainLogo" />
       </div>
+      {isSuccess && <div>성공</div>}
       <div className={styles.HomeBottom}>
         <IconButton
           text="갤러리"

src/components/provider/AppBridgeProvider/convertToNativeMessage.ts

@@ -15,9 +15,11 @@ const iosHandlers = {
 };
 
 const androidHandlers = {
-  [AppBridgeMessageType.OPEN_CAMERA]: () => window.AndroidBridge?.openCamera(),
-  [AppBridgeMessageType.OPEN_GALLERY]: () => window.AndroidBridge?.openGallery(),
-  [AppBridgeMessageType.SHARE]: () => window.AndroidBridge?.share(),
+  [AppBridgeMessageType.OPEN_CAMERA]: (message: string) =>
+    window.AndroidBridge?.openCamera(message),
+  [AppBridgeMessageType.OPEN_GALLERY]: (message: string) =>
+    window.AndroidBridge?.openGallery(message),
+  [AppBridgeMessageType.SHARE]: (message: string) => window.AndroidBridge?.share(message),
   [AppBridgeMessageType.CREATE_REVIEW]: (message: { payload: { json: string } }) =>
     window.AndroidBridge?.createReview(message.payload.json),
   [AppBridgeMessageType.COPY]: (message: { payload: { json: string } }) =>

src/components/provider/WebBridgeProvider/WebBridgeMessage.types.ts

@@ -0,0 +1,9 @@
+export enum WebBridgeMessageType {
+  RECEIVE_SCAN_RESULT = "RECEIVE_SCAN_RESULT",
+}
+
+export type WebBridgeMessage = ReceiveScanResultMessage;
+
+export interface ReceiveScanResultMessage {
+  type: WebBridgeMessageType.RECEIVE_SCAN_RESULT;
+}

src/components/provider/WebBridgeProvider/WebBridgeProvider.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from "react";
+import { createContext, useContext, useEffect } from "react";
+
+declare global {
+  interface Window {
+    response: {
+      receiveScanResult: (jsonData: string) => void;
+    };
+  }
+}
+// window.response = window.response || {};
+
+interface WebBridgeMessage {
+  type: string;
+  payload?: unknown;
+}
+
+interface WebBridge {
+  receive: (message: WebBridgeMessage) => void;
+}
+
+interface WebBridgeProviderProps {
+  children: ReactNode;
+}
+
+export const WebBridgeContext = createContext<null | WebBridge>(null);
+
+export function WebBridgeProvider({ children }: WebBridgeProviderProps) {
+  const receive = (message: WebBridgeMessage) => {
+    try {
+      if (typeof window !== "undefined" && window.response) {
+        if (typeof window.response.receiveScanResult === "function") {
+          window.response.receiveScanResult(JSON.stringify(message.payload));
+        } else {
+          console.warn("window.response.receiveScanResult is not available.");
+        }
+      }
+    } catch (error) {
+      console.error("WebBridge API call failed:", error);
+    }
+  };
+
+  useEffect(() => {
+    window.response = window.response || {};
+  }, []);
+
+  return <WebBridgeContext.Provider value={{ receive }}>{children}</WebBridgeContext.Provider>;
+}
+
+export function useWebBridge() {
+  const webBridge = useContext(WebBridgeContext);
+
+  if (webBridge == null) {
+    throw new Error("Wrap Web Bridge Provider");
+  }
+
+  return webBridge;
+}

src/main.tsx

@@ -8,6 +8,7 @@ import AppRouter from "@/router/AppRouter";
 import { AppBridgeProvider } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
 import ReactQueryClientProvider from "@/components/provider/ReactQueryClientProvider";
 import { UserAgentProvider } from "@/components/provider/UserAgentProvider";
+import { WebBridgeProvider } from "@/components/provider/WebBridgeProvider/WebBridgeProvider";
 
 import "@/styles/reset.scss";
 import "@/styles/global.scss";
@@ -17,8 +18,10 @@ ReactDom.createRoot(document.getElementById("root")!).render(
     <ReactQueryClientProvider>
       <UserAgentProvider>
         <AppBridgeProvider>
-          <AppRouter />
-          <ReactQueryDevtools initialIsOpen={false} />
+          <WebBridgeProvider>
+            <AppRouter />
+            <ReactQueryDevtools initialIsOpen={false} />
+          </WebBridgeProvider>
         </AppBridgeProvider>
       </UserAgentProvider>
     </ReactQueryClientProvider>

src/types/global.d.ts

@@ -21,9 +21,9 @@ declare global {
       };
     };
     AndroidBridge?: {
-      openCamera: () => void;
-      openGallery: () => void;
-      share: () => void;
+      openCamera: (request: string) => void;
+      openGallery: (request: string) => void;
+      share: (request: string) => void;
       createReview: (json: string) => void;
       copy: (json: string) => void;
     };