feat: UT용 결과 페이지 로직 수정 (reviewStyle 객체로 변경)

Author: lgrin-byte

src/components/ReviewResult/ReviewResult.tsx

@@ -6,6 +6,7 @@ import HomeNavigateConfirmModal from "@/components/HomeNavigateConfirmModal/Home
 import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
 import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
 import styles from "@/components/ReviewResult/ReviewResult.module.scss";
+import { IMG_STYLE_DATA } from "@/components/SelectStyle/SelectStyle";
 import Button from "@/components/ui/Button/Button";
 import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
@@ -14,6 +15,8 @@ import Toast from "@/components/ui/Toast/Toast";
 import { useOverlay } from "@/hooks/common/useOverlay";
 import useToast from "@/hooks/common/useToast";
 
+import { useCreateReviewStore } from "@/store/useReviewStore";
+
 import type { Options as ConfettiOptions } from "canvas-confetti";
 
 const ReviewResult = () => {
@@ -22,8 +25,19 @@ const ReviewResult = () => {
   const { isOpen, handleClose, handleOpen } = useOverlay();
   const { isToast } = useToast(1000);
 
-  const reviewText = `오늘 처음으로 청담커피 앤 토스트에서 주문했어요.. 매장도 깔끔하고 직원들도 친절해요!
-    음료랑 토스트 세트 시켰는데 가성비가 좋네요… 맛도 좋고 양도 많아요!! 다음에도 또 시켜먹을 거예요.`;
+  const { createReviewData } = useCreateReviewStore();
+
+  const { reviewStyle } = createReviewData;
+  const dummyDataMap: Record<string, string> = {
+    [IMG_STYLE_DATA[1].name]: "1",
+    [IMG_STYLE_DATA[2].name]: "2",
+    [IMG_STYLE_DATA[3].name]: "3",
+  };
+
+  const getDummyText = (reviewStyle: string): string => {
+    return dummyDataMap[reviewStyle];
+  };
+  const reviewText = getDummyText(reviewStyle.name);
 
   const handleConfetti = () => {
     const setting: ConfettiOptions = {
@@ -45,7 +59,10 @@ const ReviewResult = () => {
     <div className={styles.ReviewResult}>
       <div className={styles.Top}>
         <div className={styles.ReceiptImage}>
-          <img src="/assets/img/img-style-cute-circle.png" alt="mainLogo" />
+          <img
+            src={`/assets/img/img-${reviewStyle.image}-circle.png`}
+            alt={`${reviewStyle.name}-img`}
+          />
         </div>
         <div className={styles.TitleBox}>
           <Text variant="titleM" color="gradient" as="h1" truncated>

src/components/SelectStyle/SelectStyle.tsx

@@ -9,23 +9,25 @@ 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 { useCreateReviewStore } from "@/store/useReviewStore";
 
 interface StyleProps {
   name: string;
   image: string;
 }
 
-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" },
+export const IMG_STYLE_DATA = [
+  { name: "default", image: "graphic-logo" },
+  { name: "친절한 미식가", image: "style-friendly" },
+  { name: "믿음직한 미식가", image: "style-trust" },
+  { name: "귀여운 미식가", image: "style-cute" },
 ];
 
 const SelectStyle = () => {
   const { send } = useAppBridge();
-
+  const { navigateToReviewResult } = useRoute();
   const { createReviewData, setReviewStyle } = useCreateReviewStore();
 
   const [selectedStyle, setSelectedStyle] = useState(IMG_STYLE_DATA[0]);
@@ -38,12 +40,12 @@ const SelectStyle = () => {
 
   const handleCreateReview = () => {
     if (selectedStyle.name !== "default") {
-      setReviewStyle(selectedStyle.name);
+      setReviewStyle(selectedStyle);
     }
-
+    navigateToReviewResult();
     send({
       type: AppBridgeMessageType.CREATE_REVIEW,
-      payload: { ocrText, hashTag, reviewStyle },
+      payload: { ocrText, hashTag, reviewStyle: reviewStyle.name },
     });
   };
 
@@ -59,7 +61,7 @@ const SelectStyle = () => {
       </div>
 
       <div className={styles.Image}>
-        <img src={selectedStyle.image} alt={`${selectedStyle.name}-img`} />
+        <img src={`/assets/img/img-${selectedStyle.image}.png`} alt={`${selectedStyle.name}-img`} />
       </div>
 
       <div className={styles.StyleButtonList}>

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/useReviewStore.ts

@@ -1,22 +1,30 @@
 import { create } from "zustand";
 
+interface ReviewStyle {
+  name: string;
+  image: string;
+}
+
 interface CreateReviewData {
   ocrText: string;
   hashTag: string[];
-  reviewStyle: string;
+  reviewStyle: ReviewStyle;
 }
 
 interface CreateReviewDataStore {
   createReviewData: CreateReviewData;
   setOcrText: (ocrText: string) => void;
   setHashTag: (hashTag: string[]) => void;
-  setReviewStyle: (reviewStyle: string) => void;
+  setReviewStyle: (reviewStyle: ReviewStyle) => void;
 }
 
 export const CREATE_REVIEW_DATA = {
   ocrText: "",
   hashTag: [],
-  reviewStyle: "",
+  reviewStyle: {
+    name: "",
+    image: "",
+  },
 };
 
 export const useCreateReviewStore = create<CreateReviewDataStore>((set) => ({
@@ -29,7 +37,7 @@ export const useCreateReviewStore = create<CreateReviewDataStore>((set) => ({
     set((state) => ({
       createReviewData: { ...state.createReviewData, hashTag },
     })),
-  setReviewStyle: (reviewStyle: string) =>
+  setReviewStyle: (reviewStyle: ReviewStyle) =>
     set((state) => ({
       createReviewData: { ...state.createReviewData, reviewStyle },
     })),