diff --git a/src/components/SelectTag/SelectTag.tsx b/src/components/SelectTag/SelectTag.tsx index 2837a6e..312fc5a 100644 --- a/src/components/SelectTag/SelectTag.tsx +++ b/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([]); const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false); - const [tagList, setTagList] = useState([ - "음식이 맛있어요", - "양이 많아요", - "가성비가 좋아요", - "메뉴 구성이 알차요", - "매장이 넓어요", - "단체모임 하기 좋아요", - "뷰가 좋아요", - "아늑해요", - "분위기가 좋아요", - "친절해요", - "매장이 청결해요", - ]); - - const handleTagClick = (e: React.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(createReviewData.hashTag); + + // const [tagList, setTagList] = useState([ + // "음식이 맛있어요", + // "양이 많아요", + // "가성비가 좋아요", + // "메뉴 구성이 알차요", + // "매장이 넓어요", + // "단체모임 하기 좋아요", + // "뷰가 좋아요", + // "아늑해요", + // "분위기가 좋아요", + // "친절해요", + // "매장이 청결해요", + // ]); + + // useEffect(() => { + // setSelectedTagList(createReviewData.hashTag); + // }, [createReviewData.hashTag]); + + // const handleTagClick = (e: React.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 = () => { handleTagClick(tag)} + isSelect={hashTag.includes(tag)} /> ))} setIsBottomSheetOpen(true)} /> diff --git a/src/store/useReviewStore.ts b/src/store/useReviewStore.ts index 85506ce..70b2067 100644 --- a/src/store/useReviewStore.ts +++ b/src/store/useReviewStore.ts @@ -4,6 +4,7 @@ interface CreateReviewData { ocrText: string; hashTag: string[]; reviewStyle: string; + tagList: string[]; } interface CreateReviewDataStore { @@ -11,6 +12,7 @@ interface CreateReviewDataStore { setOcrText: (ocrText: string) => void; setHashTag: (hashTag: string[]) => void; setReviewStyle: (reviewStyle: string) => void; + setTagList: (tagList: string[]) => void; resetCreateReviewData: () => void; } @@ -18,6 +20,20 @@ export const CREATE_REVIEW_DATA = { ocrText: "", hashTag: [], reviewStyle: "FRIENDLY", + tagList: [ + // 초기 태그 리스트 + "음식이 맛있어요", + "양이 많아요", + "가성비가 좋아요", + "메뉴 구성이 알차요", + "매장이 넓어요", + "단체모임 하기 좋아요", + "뷰가 좋아요", + "아늑해요", + "분위기가 좋아요", + "친절해요", + "매장이 청결해요", + ], }; export const useCreateReviewStore = create((set) => ({ @@ -34,5 +50,9 @@ export const useCreateReviewStore = create((set) => ({ set((state) => ({ createReviewData: { ...state.createReviewData, reviewStyle }, })), + setTagList: (tagList: string[]) => + set((state) => ({ + createReviewData: { ...state.createReviewData, tagList }, + })), resetCreateReviewData: () => set({ createReviewData: { ...CREATE_REVIEW_DATA } }), }));