[Feat/#81] 리뷰 생성 핸들러 연결

src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx

@@ -10,6 +10,10 @@ import Text from "@/components/ui/Text/Text";
 
 import { useRoute } from "@/hooks/common/useRoute";
 
+import { useGenerateReviewStore } from "@/store/useGenerateReviewStore";
+import { useCreateReviewStore } from "@/store/useReviewStore";
+import { useScanDataStore } from "@/store/useScanDataStore";
+
 interface HomeNavigateConfirmModalProps {
   isOpen: boolean;
   handleClose: () => void;
@@ -18,6 +22,10 @@ interface HomeNavigateConfirmModalProps {
 const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmModalProps) => {
   const { navigateToHome } = useRoute();
 
+  const { resetGenerateReviewData } = useGenerateReviewStore();
+  const { resetCreateReviewData } = useCreateReviewStore();
+  const { resetScanData } = useScanDataStore();
+
   // 이후 상태 초기값 재설정
   const [isShowButtonChecked, setIsShowButtonChecked] = useState(false);
 
@@ -27,6 +35,9 @@ const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmMo
 
   const handleNavigateHome = () => {
     handleClose();
+    resetGenerateReviewData();
+    resetCreateReviewData();
+    resetScanData();
     navigateToHome();
   };
 

src/components/ReceiptEdit/ReceiptEdit.tsx

@@ -13,7 +13,7 @@ import { useScanDataStore } from "@/store/useScanDataStore";
 const ReceiptEdit = () => {
   const { navigateToHome, navigateToSelectTag } = useRoute();
 
-  const { scanData } = useScanDataStore();
+  const { scanData, resetScanData } = useScanDataStore();
 
   const { setOcrText } = useCreateReviewStore();
 
@@ -66,6 +66,11 @@ const ReceiptEdit = () => {
     navigateToSelectTag();
   };
 
+  const handleReScanClick = () => {
+    resetScanData();
+    navigateToHome();
+  };
+
   return (
     <div className={styles.ReceiptEdit}>
       <div className={styles.Top}>
@@ -114,7 +119,7 @@ const ReceiptEdit = () => {
           />
         ) : (
           <>
-            <Button text="다시 스캔하기" variant="secondary" onClick={navigateToHome} />
+            <Button text="다시 스캔하기" variant="secondary" onClick={handleReScanClick} />
             <Button
               text="정보가 맞아요"
               disabled={formData.some((item) => Object.values(item).some((value) => !value))}

src/components/ReviewResult/ReviewResult.tsx

@@ -14,16 +14,17 @@ import Toast from "@/components/ui/Toast/Toast";
 import { useOverlay } from "@/hooks/common/useOverlay";
 import useToast from "@/hooks/common/useToast";
 
+import { useGenerateReviewStore } from "@/store/useGenerateReviewStore";
+
 import type { Options as ConfettiOptions } from "canvas-confetti";
 
 const ReviewResult = () => {
   const { send } = useAppBridge();
 
-  const { isOpen, handleClose, handleOpen } = useOverlay();
-  const { isToast } = useToast(1000);
+  const { generateReviewData } = useGenerateReviewStore();
 
-  const reviewText = `오늘 처음으로 청담커피 앤 토스트에서 주문했어요.. 매장도 깔끔하고 직원들도 친절해요!
-    음료랑 토스트 세트 시켰는데 가성비가 좋네요… 맛도 좋고 양도 많아요!! 다음에도 또 시켜먹을 거예요.`;
+  const { isOpen, handleClose, handleOpen } = useOverlay();
+  const { isToast, showToast } = useToast(1000);
 
   const handleConfetti = () => {
     const setting: ConfettiOptions = {
@@ -54,22 +55,24 @@ const ReviewResult = () => {
         </div>
 
         <Text variant="bodyLg" color="primary">
-          {reviewText}
+          {generateReviewData}
         </Text>
         <div className={styles.IconBtn}>
           <IconButton
             text="복사하기"
             iconName="paste"
             size="sm"
-            onClick={() =>
-              send({ type: AppBridgeMessageType.COPY, payload: { review: reviewText } })
-            }
+            onClick={() => {
+              send({ type: AppBridgeMessageType.COPY, payload: { review: generateReviewData } });
+
+              showToast();
+            }}
           />
         </div>
       </div>
 
       <div className={styles.Bottom}>
-        {isToast && <Toast text="링크가 복사되었어요." />}
+        {isToast && <Toast text="리뷰가 복사되었어요." />}
         <div className={styles.ButtonBox}>
           <Button text="다시생성" variant="secondary" />
           <Button text="홈으로 가기" onClick={handleOpen} />

src/components/SelectStyle/SelectStyle.tsx

@@ -9,6 +9,9 @@ import Button from "@/components/ui/Button/Button";
 import Icon from "@/components/ui/Icon/Icon";
 import Text from "@/components/ui/Text/Text";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
+import { useGenerateReviewStore } from "@/store/useGenerateReviewStore";
 import { useCreateReviewStore } from "@/store/useReviewStore";
 
 interface StyleProps {
@@ -17,16 +20,24 @@ interface StyleProps {
 }
 
 const IMG_STYLE_DATA = [
-  { name: "default", image: "/assets/img/img-graphic-logo.png" },
   { name: "친절한 미식가", image: "/assets/img/img-style-friendly.png" },
   { name: "믿음직한 미식가", image: "/assets/img/img-style-trust.png" },
   { name: "귀여운 미식가", image: "/assets/img/img-style-cute.png" },
 ];
 
+const STYLE_NAME_MAPPING: { [key: string]: string } = {
+  "친절한 미식가": "FRIENDLY",
+  "귀여운 미식가": "CUTE",
+  "믿음직한 미식가": "PROFESSIONAL",
+};
+
 const SelectStyle = () => {
   const { send } = useAppBridge();
 
   const { createReviewData, setReviewStyle } = useCreateReviewStore();
+  const { generateReviewData } = useGenerateReviewStore();
+
+  const { navigateToReviewResult } = useRoute();
 
   const [selectedStyle, setSelectedStyle] = useState(IMG_STYLE_DATA[0]);
 
@@ -37,14 +48,25 @@ const SelectStyle = () => {
   };
 
   const handleCreateReview = () => {
-    if (selectedStyle.name !== "default") {
-      setReviewStyle(selectedStyle.name);
+    const mappedStyle = STYLE_NAME_MAPPING[selectedStyle.name];
+
+    if (mappedStyle) {
+      setReviewStyle(mappedStyle);
     }
 
     send({
       type: AppBridgeMessageType.CREATE_REVIEW,
       payload: { ocrText, hashTag, reviewStyle },
     });
+
+    send({
+      type: AppBridgeMessageType.RECEIVE_GENERATED_REVIEW,
+      payload: { result: String(generateReviewData) },
+    });
+
+    if (generateReviewData.length > 0) {
+      navigateToReviewResult();
+    }
   };
 
   return (
@@ -63,7 +85,7 @@ const SelectStyle = () => {
       </div>
 
       <div className={styles.StyleButtonList}>
-        {IMG_STYLE_DATA.slice(1, 4).map((style) => (
+        {IMG_STYLE_DATA.map((style) => (
           <div
             key={style.name}
             className={classNames({

src/components/provider/AppBridgeProvider/AppBridgeProvider.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/components/provider/AppBridgeProvider/convertToNativeMessage";
 import { useUserAgent } from "@/components/provider/UserAgentProvider";
 
+import { useGenerateReviewStore } from "@/store/useGenerateReviewStore";
 import { useScanDataStore } from "@/store/useScanDataStore";
 
 interface AppBridgeProviderProps {
@@ -22,6 +23,7 @@ export const AppBridgeContext = createContext<null | AppBridge>(null);
 
 export function AppBridgeProvider({ children }: AppBridgeProviderProps) {
   const { setScanData } = useScanDataStore();
+  const { setGenerateReviewData } = useGenerateReviewStore();
 
   const userAgent = useUserAgent();
 
@@ -50,7 +52,7 @@ export function AppBridgeProvider({ children }: AppBridgeProviderProps) {
         receiveGeneratedReview: (jsonData: string) => {
           try {
             const data = JSON.parse(jsonData);
-            alert(`Generated Review: ${data.review}`);
+            setGenerateReviewData(data.result);
           } catch (error) {
             console.error("Invalid JSON data for generated review:", error);
           }

src/components/provider/AppBridgeProvider/convertToNativeMessage.ts

@@ -8,10 +8,11 @@ const iosHandlers = {
     window.webkit?.messageHandlers.openGallery.postMessage(message),
   [AppBridgeMessageType.SHARE]: (message: string) =>
     window.webkit?.messageHandlers.share.postMessage(message),
-  [AppBridgeMessageType.CREATE_REVIEW]: (message: { payload: { json: string } }) =>
-    window.webkit?.messageHandlers.createReview.postMessage(message.payload.json),
-  [AppBridgeMessageType.COPY]: (message: { payload: { json: string } }) =>
-    window.webkit?.messageHandlers.copy.postMessage(message.payload.json),
+  [AppBridgeMessageType.CREATE_REVIEW]: (message: {
+    payload: { ocrText: string; hashTag: string[]; reviewStyle: string };
+  }) => window.webkit?.messageHandlers.createReview.postMessage(message.payload),
+  [AppBridgeMessageType.COPY]: (message: { payload: { review: string } }) =>
+    window.webkit?.messageHandlers.copy.postMessage(message.payload),
   [AppBridgeMessageType.RECEIVE_SCAN_RESULT]: (message: { payload: { result: string } }) =>
     window.response?.receiveScanResult(message.payload.result),
   [AppBridgeMessageType.RECEIVE_GENERATED_REVIEW]: (message: { payload: { result: string } }) =>
@@ -22,10 +23,11 @@ const androidHandlers = {
   [AppBridgeMessageType.OPEN_CAMERA]: () => window.AndroidBridge?.openCamera(),
   [AppBridgeMessageType.OPEN_GALLERY]: () => window.AndroidBridge?.openGallery(),
   [AppBridgeMessageType.SHARE]: () => window.AndroidBridge?.share(),
-  [AppBridgeMessageType.CREATE_REVIEW]: (message: { payload: { json: string } }) =>
-    window.AndroidBridge?.createReview(message.payload.json),
-  [AppBridgeMessageType.COPY]: (message: { payload: { json: string } }) =>
-    window.AndroidBridge?.copy(message.payload.json),
+  [AppBridgeMessageType.CREATE_REVIEW]: (message: {
+    payload: { ocrText: string; hashTag: string[]; reviewStyle: string };
+  }) => window.AndroidBridge?.createReview(message.payload),
+  [AppBridgeMessageType.COPY]: (message: { payload: { review: string } }) =>
+    window.AndroidBridge?.copy(message.payload),
   [AppBridgeMessageType.RECEIVE_SCAN_RESULT]: (message: { payload: { result: string } }) =>
     window.response?.receiveScanResult(message.payload.result),
   [AppBridgeMessageType.RECEIVE_GENERATED_REVIEW]: (message: { payload: { result: string } }) =>

src/hooks/common/useRoute.ts

@@ -11,6 +11,7 @@ export const useRoute = () => {
     navigateToReceiptEdit: () => navigate(PATH.RECEIPT_EDIT),
     navigateToSelectStyle: () => navigate(PATH.SELECT_STYLE),
     navigateToSelectTag: () => navigate(PATH.SELECT_TAG),
+    navigateToReviewResult: () => navigate(PATH.REVIEW_RESULT),
   };
 
   return routes;

src/store/useGenerateReviewStore.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface GenerateReviewStoreProps {
+  generateReviewData: string;
+  setGenerateReviewData: (review: string) => void;
+  resetGenerateReviewData: () => void;
+}
+
+export const useGenerateReviewStore = create<GenerateReviewStoreProps>((set) => ({
+  generateReviewData: "",
+  setGenerateReviewData: (review: string) => set({ generateReviewData: review }),
+  resetGenerateReviewData: () => set({ generateReviewData: "" }),
+}));

src/store/useReviewStore.ts

@@ -11,12 +11,13 @@ interface CreateReviewDataStore {
   setOcrText: (ocrText: string) => void;
   setHashTag: (hashTag: string[]) => void;
   setReviewStyle: (reviewStyle: string) => void;
+  resetCreateReviewData: () => void;
 }
 
 export const CREATE_REVIEW_DATA = {
   ocrText: "",
   hashTag: [],
-  reviewStyle: "",
+  reviewStyle: "FRIENDLY",
 };
 
 export const useCreateReviewStore = create<CreateReviewDataStore>((set) => ({
@@ -33,4 +34,5 @@ export const useCreateReviewStore = create<CreateReviewDataStore>((set) => ({
     set((state) => ({
       createReviewData: { ...state.createReviewData, reviewStyle },
     })),
+  resetCreateReviewData: () => set({ createReviewData: { ...CREATE_REVIEW_DATA } }),
 }));

src/store/useScanDataStore.ts

@@ -5,9 +5,11 @@ import type { ScanResult } from "@/components/Home/Home";
 interface ScanDataStoreProps {
   scanData: ScanResult[];
   setScanData: (scanData: ScanResult[]) => void;
+  resetScanData: () => void;
 }
 
 export const useScanDataStore = create<ScanDataStoreProps>((set) => ({
   scanData: [],
   setScanData: (scanData: ScanResult[]) => set({ scanData }),
+  resetScanData: () => set({ scanData: [] }),
 }));

src/types/global.d.ts

@@ -10,6 +10,15 @@ type MessageHandler<T = void> = {
 };
 
 declare global {
+  interface CreateReviewPayload {
+    ocrText: string;
+    hashTag: string[];
+    reviewStyle: string;
+  }
+
+  interface CopyMessagePayload {
+    review: string;
+  }
   interface Window {
     response?: {
       receiveScanResult: (jsonData: string) => void;
@@ -20,16 +29,16 @@ declare global {
         openCamera: MessageHandler<string>;
         openGallery: MessageHandler<string>;
         share: MessageHandler<string>;
-        createReview: MessageHandler<string>;
-        copy: MessageHandler<string>;
+        createReview: MessageHandler<CreateReviewPayload>;
+        copy: MessageHandler<CopyMessagePayload>;
       };
     };
     AndroidBridge?: {
       openCamera: () => void;
       openGallery: () => void;
       share: () => void;
-      createReview: (json: string) => void;
-      copy: (json: string) => void;
+      createReview: (json: CreateReviewPayload) => void;
+      copy: (json: CopyMessagePayload) => void;
     };
   }
 }