feat: 리뷰 생성 데이터 전역 store 관리 추가

Author: sikkzz

.eslintrc.json

@@ -62,6 +62,11 @@
             "group": "type",
             "position": "before"
           },
+          {
+            "pattern": "@/store/**/*",
+            "group": "type",
+            "position": "before"
+          },
           {
             "pattern": "@/styles/**/*",
             "group": "type",

.pnp.cjs

@@ -23,7 +23,8 @@
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.3"
+    "react-router-dom": "^7.1.3",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",

.yarn/cache/zustand-npm-5.0.3-6b60927ae4-dad96c6c12.zip

@@ -8,9 +8,13 @@ import Text from "@/components/ui/Text/Text";
 import { useFocus } from "@/hooks/common/useFocus";
 import { useRoute } from "@/hooks/common/useRoute";
 
+import { useCreateReviewStore } from "@/store/useReviewStore";
+
 const ReceiptEdit = () => {
   const { navigateToSelectTag } = useRoute();
 
+  const { setOcrText } = useCreateReviewStore();
+
   const [placeName, setPlaceName] = useState("청담커피 앤 토스트");
   const [foodName, setFoodName] = useState("카야토스트+음료세트");
 
@@ -21,6 +25,13 @@ const ReceiptEdit = () => {
   } = useFocus({});
   const { isFocus: isFoodFocus, onFocus: handleFoodFocus, onBlur: handleFoodBlur } = useFocus({});
 
+  const handleInfoRightClick = () => {
+    const ocrText = `${placeName} ${foodName}`;
+    setOcrText(ocrText);
+
+    navigateToSelectTag();
+  };
+
   return (
     <div className={styles.ReceiptEdit}>
       <div className={styles.Top}>
@@ -75,7 +86,7 @@ const ReceiptEdit = () => {
             <Button
               text="정보가 맞아요"
               disabled={!placeName || !foodName}
-              onClick={navigateToSelectTag}
+              onClick={handleInfoRightClick}
             />
           </>
         )}

package.json

@@ -9,6 +9,8 @@ import Text from "@/components/ui/Text/Text";
 
 import { useRoute } from "@/hooks/common/useRoute";
 
+import { useCreateReviewStore } from "@/store/useReviewStore";
+
 interface StyleProps {
   name: string;
   image: string;
@@ -24,12 +26,22 @@ const IMG_STYLE_DATA = [
 const SelectStyle = () => {
   const { navigateToReviewResult } = useRoute();
 
+  const { setReviewStyle } = useCreateReviewStore();
+
   const [selectedStyle, setSelectedStyle] = useState(IMG_STYLE_DATA[0]);
 
   const handleStyleClick = (style: StyleProps) => {
     setSelectedStyle((prevStyle) => (prevStyle.name === style.name ? IMG_STYLE_DATA[0] : style));
   };
 
+  const handleCreateReview = () => {
+    if (selectedStyle.name !== "default") {
+      setReviewStyle(selectedStyle.name);
+    }
+
+    navigateToReviewResult();
+  };
+
   return (
     <div className={styles.SelectStyle}>
       <div className={styles.Title}>
@@ -63,7 +75,7 @@ const SelectStyle = () => {
       </div>
 
       <div className={styles.Bottom}>
-        <Button text="리뷰 만들기" onClick={navigateToReviewResult} />
+        <Button text="리뷰 만들기" onClick={handleCreateReview} />
       </div>
     </div>
   );

src/components/ReceiptEdit/ReceiptEdit.tsx

@@ -8,9 +8,13 @@ import Text from "@/components/ui/Text/Text";
 
 import { useRoute } from "@/hooks/common/useRoute";
 
+import { useCreateReviewStore } from "@/store/useReviewStore";
+
 const SelectTag = () => {
   const { navigateToSelectStyle } = useRoute();
 
+  const { setHashTag } = useCreateReviewStore();
+
   const [selectedTagList, setSelectedTagList] = useState<string[]>([]);
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
   const [tagList, setTagList] = useState<string[]>([
@@ -33,7 +37,7 @@ const SelectTag = () => {
     setSelectedTagList((prevSelectedTags) =>
       prevSelectedTags.includes(tag)
         ? prevSelectedTags.filter((selectedTag) => selectedTag !== tag)
-        : [...prevSelectedTags, tag]
+        : [...prevSelectedTags, tag],
     );
   };
 
@@ -48,6 +52,11 @@ const SelectTag = () => {
     setIsBottomSheetOpen(false);
   };
 
+  const handleNextClick = () => {
+    setHashTag(selectedTagList);
+    navigateToSelectStyle();
+  };
+
   return (
     <div className={styles.SelectTag}>
       <div className={styles.Top}>
@@ -73,7 +82,7 @@ const SelectTag = () => {
       </div>
 
       <div className={styles.Bottom}>
-        <Button text="다음" onClick={navigateToSelectStyle} />
+        <Button text="다음" onClick={handleNextClick} />
       </div>
 
       <TagSheet

src/components/SelectStyle/SelectStyle.tsx

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

src/components/SelectTag/SelectTag.tsx

@@ -8165,6 +8165,7 @@ __metadata:
     vite: "npm:^6.0.5"
     vite-plugin-svgr: "npm:^4.3.0"
     vite-tsconfig-paths: "npm:^5.1.4"
+    zustand: "npm:^5.0.3"
   languageName: unknown
   linkType: soft
 
@@ -11216,3 +11217,24 @@ __metadata:
   checksum: 10c0/cb287fe5e6acfa82690acb43c283de34e945c571a78a939774f6eaba7c285bacdf6c90fbc16ce530060863984c906d2b4c6ceb069c94d1e0a06d5f2b458e2a92
   languageName: node
   linkType: hard
+
+"zustand@npm:^5.0.3":
+  version: 5.0.3
+  resolution: "zustand@npm:5.0.3"
+  peerDependencies:
+    "@types/react": ">=18.0.0"
+    immer: ">=9.0.6"
+    react: ">=18.0.0"
+    use-sync-external-store: ">=1.2.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    immer:
+      optional: true
+    react:
+      optional: true
+    use-sync-external-store:
+      optional: true
+  checksum: 10c0/dad96c6c123fda088c583d5df6692e9245cd207583078dc15f93d255a67b0f346bad4535545c98852ecde93d254812a0c799579dfde2ab595016b99fbe20e4d5
+  languageName: node
+  linkType: hard