feat: 클라 -> 웹 영수증 OCR 결과 브릿지 구현

Author: lgrin-byte

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/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;
     };