refactor: 테스트 사항 삭제, 히스토리 초기화

Author: sikkzz

src/components/Home/Home.tsx

@@ -3,6 +3,8 @@ import { useEffect } 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 { WebBridgeMessageType } from "@/components/provider/WebBridgeProvider/WebBridgeProvider";
+import { useWebBridge } from "@/components/provider/WebBridgeProvider/WebBridgeProvider";
 import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
 
@@ -17,23 +19,34 @@ export interface ScanResult {
 const Home = () => {
   const { send } = useAppBridge();
 
+  const { receive } = useWebBridge();
+
   const { setScanData } = useScanDataStore();
 
   const { navigateToReceiptEdit } = useRoute();
 
   useEffect(() => {
-    window.response = {
-      receiveScanResult: (jsonData: string) => {
-        try {
-          const data: ScanResult[] = JSON.parse(jsonData);
-          setScanData(data);
-          navigateToReceiptEdit();
-        } catch (error) {
-          console.error("Error parsing scan result JSON:", error);
-        }
-      },
-    };
-  }, []);
+    if (typeof window !== "undefined" && !window.response) {
+      window.response = {
+        receiveScanResult: (jsonData: string) => {
+          try {
+            const data: ScanResult[] = JSON.parse(jsonData);
+            receive({
+              type: WebBridgeMessageType.RECEIVE_SCAN_RESULT,
+              payload: data,
+            });
+
+            setScanData(data);
+            setTimeout(() => {
+              navigateToReceiptEdit();
+            }, 0);
+          } catch (error) {
+            console.error("Error parsing scan result JSON:", error);
+          }
+        },
+      };
+    }
+  }, [receive, navigateToReceiptEdit, setScanData]);
 
   return (
     <div className={styles.Home}>
@@ -57,20 +70,30 @@ const Home = () => {
         <IconButton
           text="카메라"
           iconName="camera"
-          onClick={() => send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" })}
-        />
-
-        <button
           onClick={() => {
-            if (window.response) {
-              window.response.receiveScanResult(
-                JSON.stringify([{ sampleKey: "sampleValue" }, { sampleKey2: "sampleValue2" }]),
-              );
+            send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" });
+            if (typeof window !== "undefined" && !window.response) {
+              window.response = {
+                receiveScanResult: (jsonData: string) => {
+                  try {
+                    const data: ScanResult[] = JSON.parse(jsonData);
+                    receive({
+                      type: WebBridgeMessageType.RECEIVE_SCAN_RESULT,
+                      payload: data,
+                    });
+
+                    setScanData(data);
+                    setTimeout(() => {
+                      navigateToReceiptEdit();
+                    }, 0);
+                  } catch (error) {
+                    console.error("Error parsing scan result JSON:", error);
+                  }
+                },
+              };
             }
           }}
-        >
-          테스트 데이터 전송
-        </button>
+        />
       </div>
     </div>
   );

src/components/provider/WebBridgeProvider/WebBridgeProvider.tsx

@@ -1,9 +1,17 @@
 import type { ReactNode } from "react";
 import { createContext, useContext, useEffect } from "react";
 
-interface WebBridgeMessage {
+import { useScanDataStore } from "@/store/useScanDataStore";
+
+export enum WebBridgeMessageType {
+  RECEIVE_SCAN_RESULT = "receiveScanResult",
+}
+
+type WebBridgeMessage = ScanResultMessage;
+
+interface ScanResultMessage {
   type: string;
-  payload?: unknown;
+  payload: { [key: string]: string }[];
 }
 
 interface WebBridge {
@@ -17,25 +25,24 @@ interface WebBridgeProviderProps {
 export const WebBridgeContext = createContext<null | WebBridge>(null);
 
 export function WebBridgeProvider({ children }: WebBridgeProviderProps) {
+  const { setScanData } = useScanDataStore();
+
   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);
+    if (message.type === WebBridgeMessageType.RECEIVE_SCAN_RESULT) {
+      setScanData(message.payload || []);
     }
   };
 
   useEffect(() => {
-    if (typeof window !== "undefined" && !window.response) {
+    if (typeof window !== "undefined") {
       window.response = {
         receiveScanResult: (jsonData: string) => {
-          console.log("Received scan result:", jsonData);
+          try {
+            const data = JSON.parse(jsonData);
+            setScanData(data);
+          } catch (error) {
+            console.error("Invalid JSON data:", error);
+          }
         },
       };
     }
@@ -47,8 +54,8 @@ export function WebBridgeProvider({ children }: WebBridgeProviderProps) {
 export function useWebBridge() {
   const webBridge = useContext(WebBridgeContext);
 
-  if (webBridge == null) {
-    throw new Error("Wrap Web Bridge Provider");
+  if (!webBridge) {
+    throw new Error("WebBridgeProvider must be used within a WebBridgeContext");
   }
 
   return webBridge;