feat: 홈 컴포넌트에서 영수증 인식 결과 연동 테스트

Author: lgrin-byte

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