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

Author: lgrin-byte

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