refactor: 태그 선택 전역 state 저장

Author: sikkzz

src/components/SelectTag/SelectTag.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import styles from "@/components/SelectTag/SelectTag.module.scss";
 import TagSheet from "@/components/SelectTag/TagSheet/TagSheet";
@@ -13,48 +13,89 @@ import { useCreateReviewStore } from "@/store/useReviewStore";
 const SelectTag = () => {
   const { navigateToSelectStyle } = useRoute();
 
-  const { setHashTag } = useCreateReviewStore();
+  const { createReviewData, setHashTag, setTagList } = useCreateReviewStore();
+
+  const { tagList, hashTag } = createReviewData;
 
-  const [selectedTagList, setSelectedTagList] = useState<string[]>([]);
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
-  const [tagList, setTagList] = useState<string[]>([
-    "음식이 맛있어요",
-    "양이 많아요",
-    "가성비가 좋아요",
-    "메뉴 구성이 알차요",
-    "매장이 넓어요",
-    "단체모임 하기 좋아요",
-    "뷰가 좋아요",
-    "아늑해요",
-    "분위기가 좋아요",
-    "친절해요",
-    "매장이 청결해요",
-  ]);
-
-  const handleTagClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    const tag = e.currentTarget.textContent || "";
-
-    setSelectedTagList((prevSelectedTags) =>
-      prevSelectedTags.includes(tag)
-        ? prevSelectedTags.filter((selectedTag) => selectedTag !== tag)
-        : [...prevSelectedTags, tag],
-    );
+
+  useEffect(() => {
+    setHashTag(hashTag);
+  }, [hashTag, setHashTag]);
+
+  const handleTagClick = (tag: string) => {
+    const newSelectedTags = hashTag.includes(tag)
+      ? hashTag.filter((selectedTag) => selectedTag !== tag)
+      : [...hashTag, tag];
+
+    setHashTag(newSelectedTags);
   };
 
   const handleTagAdd = (newTag: string) => {
     setIsBottomSheetOpen(false);
-    if (!tagList.includes(newTag)) {
-      setTagList((prevTagList: string[]) => [...prevTagList, newTag]);
-      setSelectedTagList((prevSelectedTags) => [...prevSelectedTags, newTag]);
-    }
+    setTagList([...tagList, newTag]);
+    setHashTag([...hashTag, newTag]);
   };
 
+  // const [selectedTagList, setSelectedTagList] = useState<string[]>(createReviewData.hashTag);
+
+  // const [tagList, setTagList] = useState<string[]>([
+  //   "음식이 맛있어요",
+  //   "양이 많아요",
+  //   "가성비가 좋아요",
+  //   "메뉴 구성이 알차요",
+  //   "매장이 넓어요",
+  //   "단체모임 하기 좋아요",
+  //   "뷰가 좋아요",
+  //   "아늑해요",
+  //   "분위기가 좋아요",
+  //   "친절해요",
+  //   "매장이 청결해요",
+  // ]);
+
+  // useEffect(() => {
+  //   setSelectedTagList(createReviewData.hashTag);
+  // }, [createReviewData.hashTag]);
+
+  // const handleTagClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+  //   const tag = e.currentTarget.textContent || "";
+
+  //   setSelectedTagList((prevSelectedTags) => {
+  //     const newSelectedTags = prevSelectedTags.includes(tag)
+  //       ? prevSelectedTags.filter((selectedTag) => selectedTag !== tag)
+  //       : [...prevSelectedTags, tag];
+
+  //     setHashTag(newSelectedTags);
+  //     return newSelectedTags;
+  //   });
+  // };
+
+  // const handleTagAdd = (newTag: string) => {
+  //   setIsBottomSheetOpen(false);
+
+  //   setTagList((prevTagList) => {
+  //     if (!prevTagList.includes(newTag)) {
+  //       return [...prevTagList, newTag];
+  //     }
+  //     return prevTagList;
+  //   });
+
+  //   setSelectedTagList((prevSelectedTags) => {
+  //     if (!prevSelectedTags.includes(newTag)) {
+  //       const newSelectedTags = [...prevSelectedTags, newTag];
+  //       setHashTag(newSelectedTags);
+  //       return newSelectedTags;
+  //     }
+  //     return prevSelectedTags;
+  //   });
+  // };
+
   const handleSheetClose = () => {
     setIsBottomSheetOpen(false);
   };
 
   const handleNextClick = () => {
-    setHashTag(selectedTagList);
+    // setHashTag(selectedTagList);
     navigateToSelectStyle();
   };
 
@@ -74,8 +115,8 @@ const SelectTag = () => {
             <Tag
               text={tag}
               key={tag}
-              onClick={handleTagClick}
-              isSelect={selectedTagList.includes(tag)}
+              onClick={() => handleTagClick(tag)}
+              isSelect={hashTag.includes(tag)}
             />
           ))}
           <Tag variant="add" onClick={() => setIsBottomSheetOpen(true)} />

src/store/useReviewStore.ts

@@ -4,20 +4,36 @@ interface CreateReviewData {
   ocrText: string;
   hashTag: string[];
   reviewStyle: string;
+  tagList: string[];
 }
 
 interface CreateReviewDataStore {
   createReviewData: CreateReviewData;
   setOcrText: (ocrText: string) => void;
   setHashTag: (hashTag: string[]) => void;
   setReviewStyle: (reviewStyle: string) => void;
+  setTagList: (tagList: string[]) => void;
   resetCreateReviewData: () => void;
 }
 
 export const CREATE_REVIEW_DATA = {
   ocrText: "",
   hashTag: [],
   reviewStyle: "FRIENDLY",
+  tagList: [
+    // 초기 태그 리스트
+    "음식이 맛있어요",
+    "양이 많아요",
+    "가성비가 좋아요",
+    "메뉴 구성이 알차요",
+    "매장이 넓어요",
+    "단체모임 하기 좋아요",
+    "뷰가 좋아요",
+    "아늑해요",
+    "분위기가 좋아요",
+    "친절해요",
+    "매장이 청결해요",
+  ],
 };
 
 export const useCreateReviewStore = create<CreateReviewDataStore>((set) => ({
@@ -34,5 +50,9 @@ export const useCreateReviewStore = create<CreateReviewDataStore>((set) => ({
     set((state) => ({
       createReviewData: { ...state.createReviewData, reviewStyle },
     })),
+  setTagList: (tagList: string[]) =>
+    set((state) => ({
+      createReviewData: { ...state.createReviewData, tagList },
+    })),
   resetCreateReviewData: () => set({ createReviewData: { ...CREATE_REVIEW_DATA } }),
 }));