Merge /fix : 106-exploreKeyword

Merge/feat: 탐색페이지 키워드 선택
KUIT-MAPU · Aug 12, 2024 · 6a0738d · 6a0738d
2 parents d6f650a + 1ba4ef7
commit 6a0738d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 38 deletions.
diff --git a/src/components/timeLine/keywordList/KeywordList.tsx b/src/components/timeLine/keywordList/KeywordList.tsx
@@ -27,12 +27,12 @@ const mockData: KeywordType[] = [
 
 const KeywordList: React.FC<KeywordListProps> = ({ className }) => {
   const { registerStatus } = useRegisterStore();
-  const { selectedList, setSelectedList } = useKeywordStore();
+  const { selectedList, setSelectedList, removeSelectedList } =
+    useKeywordStore();
   const { allKeywordList, setAllKeywordList } = useAllKeywordStore();
   const [isRefresh, setIsRefresh] = useState<boolean>(false);
   const [alert, setAlert] = useState<boolean>(false);
   const [isLog, setIsLog] = useState<boolean>(false);
-  const [isPath, setIsPath] = useState<string>('');
 
   const location = useLocation();
 
@@ -47,7 +47,9 @@ const KeywordList: React.FC<KeywordListProps> = ({ className }) => {
 
   useEffect(() => {
     fetchKeywordData();
+  }, [location.pathname]);
 
+  useEffect(() => {
     if (registerStatus === RegisterStatus.LOG_IN) {
       setIsLog(true);
     } else {
@@ -56,7 +58,11 @@ const KeywordList: React.FC<KeywordListProps> = ({ className }) => {
   }, [registerStatus]);
 
   useEffect(() => {
-    if (!isLog && selectedList.length === 0) {
+    if (
+      !isLog &&
+      selectedList.length === 0 &&
+      location.pathname === '/timeline'
+    ) {
       const selectedInit = allKeywordList
         .slice(0, 2)
         .map((item: KeywordType) => {
@@ -93,11 +99,6 @@ const KeywordList: React.FC<KeywordListProps> = ({ className }) => {
     }
   }, [isRefresh]);
 
-  useEffect(() => {
-    console.log('현재 경로:', location.pathname);
-    setIsPath(location.pathname);
-  }, [location.pathname]);
-
   const handleRefreshClick = () => {
     if (selectedList.length === 5) {
       setAlert(true);
@@ -107,13 +108,24 @@ const KeywordList: React.FC<KeywordListProps> = ({ className }) => {
   };
 
   const handleSelectPills = (selectedKeyword: KeywordType) => {
-    selectedKeyword.selected = !selectedKeyword.selected;
-    const updatedList = allKeywordList.filter((item) => item.selected);
-    setAllKeywordList(allKeywordList);
-    setSelectedList(updatedList);
+    if (location.pathname === '/explore') {
+      if (selectedKeyword.selected) return;
+      const updatedList = allKeywordList.map((keyword) => ({
+        ...keyword,
+        selected: keyword.id === selectedKeyword.id ? true : false,
+      }));
+
+      setAllKeywordList(updatedList);
+      setSelectedList(updatedList.filter((keyword) => keyword.selected));
+    } else {
+      selectedKeyword.selected = !selectedKeyword.selected;
+      const updatedList = allKeywordList.filter((item) => item.selected);
+      setAllKeywordList(allKeywordList);
+      setSelectedList(updatedList);
 
-    if (updatedList.length < 5) {
-      setAlert(false);
+      if (updatedList.length < 5) {
+        setAlert(false);
+      }
     }
   };
 
@@ -132,13 +144,6 @@ const KeywordList: React.FC<KeywordListProps> = ({ className }) => {
             className={keyword.selected ? styles.selected : styles.keywordPills}
             key={keyword.id}
             onClick={() => handleSelectPills(keyword)}
-            disabled={
-              isPath === '/explore' &&
-              selectedList.length === 1 &&
-              !keyword.selected
-                ? true
-                : false
-            }
           >
             {keyword.title}
           </button>

diff --git a/src/pages/Explore/Explore.tsx b/src/pages/Explore/Explore.tsx
@@ -29,13 +29,13 @@ const Explore: React.FC = () => {
 
   const { selectedList, setSelectedList, removeSelectedList } =
     useKeywordStore();
-  const { allKeywordList, setAllKeywordList } = useAllKeywordStore();
 
   const outside = useRef<HTMLDivElement>(null);
   const navigate = useNavigate();
   const pathname = useLocation().pathname;
 
   const { loginNeeded, registerStatus, setLoginNeeded } = useRegisterStore();
+  const { allKeywordList, setAllKeywordList } = useAllKeywordStore();
   const [isOverlayVisible, setIsOverlayVisible] = useState<boolean>(false);
 
   const fetchMapData = async () => {
@@ -74,20 +74,8 @@ const Explore: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    const allKeywords = allKeywordList.map((keyword) => ({
-      ...keyword,
-      selected: false,
-    }));
-
-    setAllKeywordList(allKeywords);
-
-    const resetSelectedLists = async () => {
-      await removeSelectedList();
-      setSelectedList([]);
-    };
-
-    resetSelectedLists();
-  }, [pathname]);
+    console.log(selectedList);
+  },[selectedList])
 
   useEffect(() => {
     if (registerStatus !== RegisterStatus.LOG_IN && loginNeeded) {
@@ -123,6 +111,13 @@ const Explore: React.FC = () => {
 
   useEffect(() => {
     fetchMapData();
+    setSelectedList([]);
+    if (allKeywordList) {
+      const keywords: KeywordType[] = allKeywordList.map((item) => {
+        return { ...item, selected: false };
+      });
+      setAllKeywordList(keywords);
+    }
   }, []);
 
   useEffect(() => {

diff --git a/src/stores/keywordStore.ts b/src/stores/keywordStore.ts
@@ -9,7 +9,7 @@ const cookieStorage: StateStorage = {
     return cookie ? JSON.parse(cookie) : null;
   },
   setItem: (name: string, value: string) => {
-    setCookie(name, value, { path: '/' });
+    setCookie(name, value, { path: "/" });
   },
   removeItem: (name: string) => {
     removeCookie(name);
@@ -31,7 +31,7 @@ const useKeywordStore = create<KeywordStore>()(
         cookieStorage.setItem('keyword-store', JSON.stringify(selectedList));
       },
       removeSelectedList: () => {
-        // set({ selectedList: [] });
+        set({ selectedList: [] });
         cookieStorage.removeItem('keyword-store');
       },
     }),