diff --git a/src/components/timeLine/keywordList/KeywordList.tsx b/src/components/timeLine/keywordList/KeywordList.tsx index 5bfc206..fa6f6fa 100644 --- 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 = ({ className }) => { const { registerStatus } = useRegisterStore(); - const { selectedList, setSelectedList } = useKeywordStore(); + const { selectedList, setSelectedList, removeSelectedList } = + useKeywordStore(); const { allKeywordList, setAllKeywordList } = useAllKeywordStore(); const [isRefresh, setIsRefresh] = useState(false); const [alert, setAlert] = useState(false); const [isLog, setIsLog] = useState(false); - const [isPath, setIsPath] = useState(''); const location = useLocation(); @@ -47,7 +47,9 @@ const KeywordList: React.FC = ({ className }) => { useEffect(() => { fetchKeywordData(); + }, [location.pathname]); + useEffect(() => { if (registerStatus === RegisterStatus.LOG_IN) { setIsLog(true); } else { @@ -56,7 +58,11 @@ const KeywordList: React.FC = ({ 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 = ({ 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 = ({ 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 = ({ 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} diff --git a/src/pages/Explore/Explore.tsx b/src/pages/Explore/Explore.tsx index 9c7eb7b..91ce5e1 100644 --- 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(null); const navigate = useNavigate(); const pathname = useLocation().pathname; const { loginNeeded, registerStatus, setLoginNeeded } = useRegisterStore(); + const { allKeywordList, setAllKeywordList } = useAllKeywordStore(); const [isOverlayVisible, setIsOverlayVisible] = useState(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 index 59fcfdc..9a550fe 100644 --- 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()( cookieStorage.setItem('keyword-store', JSON.stringify(selectedList)); }, removeSelectedList: () => { - // set({ selectedList: [] }); + set({ selectedList: [] }); cookieStorage.removeItem('keyword-store'); }, }),