diff --git a/package-lock.json b/package-lock.json index 7f09ccd..7251608 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "styled-components": "^6.1.12", "styled-reset": "^4.5.2", "sweetalert2": "^11.14.4", + "uuid": "^11.0.3", "web-vitals": "^2.1.4", "zustand": "^4.5.5" }, @@ -17068,6 +17069,15 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -18618,11 +18628,16 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.3.tgz", + "integrity": "sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "license": "MIT", "bin": { - "uuid": "dist/bin/uuid" + "uuid": "dist/esm/bin/uuid" } }, "node_modules/v8-to-istanbul": { diff --git a/package.json b/package.json index a78e1b4..f9a541d 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "styled-components": "^6.1.12", "styled-reset": "^4.5.2", "sweetalert2": "^11.14.4", + "uuid": "^11.0.3", "web-vitals": "^2.1.4", "zustand": "^4.5.5" }, diff --git a/src/apis/api/bookmarks.jsx b/src/apis/api/bookmarks.jsx index d6ca974..5b98d35 100644 --- a/src/apis/api/bookmarks.jsx +++ b/src/apis/api/bookmarks.jsx @@ -54,3 +54,21 @@ export const deleteBookmarkStore = async (id) => { }; } }; + +export const getAllBookmarksIds = async () => { + try { + const { data, status } = await defaultInstance.get('/api/bookmarks/ids', { + withCredentials: true, + }); + return { + data, + status, + }; + } catch (e) { + console.log(e); + return { + error: e.response.data.detail, + status: e.response.status, + }; + } +}; diff --git a/src/components/bookmark/Bookmarks.jsx b/src/components/bookmark/Bookmarks.jsx index 6572991..ab6392c 100644 --- a/src/components/bookmark/Bookmarks.jsx +++ b/src/components/bookmark/Bookmarks.jsx @@ -11,20 +11,12 @@ import { Loading } from '../common'; const Bookmarks = () => { const [stores, setStores] = useState([]); - const { setSaveBookmarkId, setBookmarkStore } = useSaveBookmarkId(); + const [isTimeout, setIsTimeout] = useState(false); + const { setBookmarkStore } = useSaveBookmarkId(); const navigate = useNavigate(); const { ref, inView } = useInView(); - useEffect(() => { - if (stores.length > 0) { - const saveBookmarkId = stores.map((store) => store.bookmarkId); - const bookmarkIds = [...new Set(saveBookmarkId)]; - setSaveBookmarkId(bookmarkIds); - } - // eslint-disable-next-line - }, [stores]); - const fetchBookmarkStores = async ({ pageParam = 0 }) => { const auth = JSON.parse(localStorage.getItem('auth')) || {}; if (!auth.state.isLoggedIn) { @@ -67,9 +59,21 @@ const Bookmarks = () => { // eslint-disable-next-line }, [data]); - const handleClickScrap = () => { - navigate('/webmap'); - }; + useEffect(() => { + if (isLoading) { + const timeout = setTimeout(() => { + setIsTimeout(true); + navigate('/*'); + }, 5000); + return () => clearTimeout(timeout); + } + }, [isLoading, navigate]); + + if (isTimeout) { + return null; + } + + const handleClickScrap = () => navigate('/webmap'); return ( @@ -77,11 +81,10 @@ const Bookmarks = () => { bookmarkStores.length > 0 && bookmarkStores.map((store) => ( { - const [stores, setStores] = useState([]); - const { savedId, setSaveBookmarkId, setBookmarkStore } = useSaveBookmarkId(); +const BookmarkContainer = ({ storeId }) => { + const { savedId, setSaveBookmarkId } = useSaveBookmarkId(); const [isLoading, setIsLoading] = useState(false); const auth = JSON.parse(localStorage.getItem('auth')) || {}; - const isSaved = savedId.includes(bookmarkId) && auth.state.isLoggedIn; + const isSaved = savedId.some((item) => item.storeId === storeId && auth.state.isLoggedIn); const navigate = useNavigate(); - useEffect(() => { - if (stores.length > 0) { - const saveBookmarkId = stores.map((store) => store.bookmarkId); - const bookmarkIds = [...new Set(saveBookmarkId)]; - setSaveBookmarkId(bookmarkIds); - } - // eslint-disable-next-line - }, [stores]); - const handleClickBookmarks = async (e) => { e.preventDefault(); if (!auth.state.isLoggedIn) { @@ -32,7 +22,8 @@ const BookmarkContainer = ({ bookmarkId, storeId }) => { } try { if (isSaved) { - const response = await deleteBookmarkStore(bookmarkId); + const bookmarkIdIndex = savedId.find((item) => item.storeId === storeId); + const response = await deleteBookmarkStore(bookmarkIdIndex.bookmarkId); if (response.status === 204) { console.log('success delete'); getAllBookmarksStores(); @@ -57,21 +48,13 @@ const BookmarkContainer = ({ bookmarkId, storeId }) => { } try { setIsLoading(true); - let page = 0; - let allData = []; - let hasMoreData = true; - while (hasMoreData) { - const response = await getBookmarksStores(page); - if (response.status === 200) { - allData = allData.concat(response.data.content); - hasMoreData = response.data.last !== true; - page++; - } else { - navigate('/login'); - } + const response = await getAllBookmarksIds(); + if (response.status === 200) { + const bookmarkStoreIds = response.data; + setSaveBookmarkId(bookmarkStoreIds); + } else { + navigate('/login'); } - setStores(allData); - setBookmarkStore(allData); } catch (error) { console.log(error); } finally { diff --git a/src/components/common/keyword/Keyword.jsx b/src/components/common/keyword/Keyword.jsx index 46eff58..59b7d85 100644 --- a/src/components/common/keyword/Keyword.jsx +++ b/src/components/common/keyword/Keyword.jsx @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { DarkGreen, Orange } from '../../../color'; +import { v4 as uuidv4 } from 'uuid'; const Keyword = ({ keyword, type, mode }) => { if (!keyword) { @@ -11,7 +12,7 @@ const Keyword = ({ keyword, type, mode }) => { {keywordItem.map((item) => { return ( - +

#{item}

 ); diff --git a/src/components/common/store/StoreCard.jsx b/src/components/common/store/StoreCard.jsx index 3dd469f..99db5d8 100644 --- a/src/components/common/store/StoreCard.jsx +++ b/src/components/common/store/StoreCard.jsx @@ -4,14 +4,9 @@ import { ReactComponent as Star } from '../../../assets/Icon/detail/Star.svg'; import { DarkGreen, DarkGrey, LightGrey, Orange } from '../../../color'; import { LocationOn } from '@mui/icons-material'; import { useNavigate } from 'react-router-dom'; -import { useSaveBookmarkId } from '../../../store'; const StoreListCard = ({ image, alt, id, name, address, rating, positiveRatio, positiveKeywords }) => { const navigate = useNavigate(); - const { savedStores } = useSaveBookmarkId(); - - const bookmark = savedStores.find((store) => store.storeResponseDto.storeId === id); - const bookmarkId = bookmark?.bookmarkId; const cardClickHandler = () => { navigate(`/webmap/storeDetail/${id}`); @@ -26,7 +21,7 @@ const StoreListCard = ({ image, alt, id, name, address, rating, positiveRatio, p

cardClickHandler(id)}>{name}

- + diff --git a/src/components/main/TopRecommendations.jsx b/src/components/main/TopRecommendations.jsx index be96eb3..0587664 100644 --- a/src/components/main/TopRecommendations.jsx +++ b/src/components/main/TopRecommendations.jsx @@ -76,7 +76,7 @@ const TopRecommendations = () => { { +const TopStoreCard = ({ image, alt, storeId, address, name, keyword }) => { const navigate = useNavigate(); - const { savedStores } = useSaveBookmarkId(); - if (!bookmarkId) { - const bookmark = savedStores.find((store) => store.storeResponseDto.storeId === id); - bookmarkId = bookmark?.bookmarkId; - } - - const cardClickHandler = (id) => { - navigate(`/webmap/storeDetail/${id}`, { state: { detailVisible: true } }); + const cardClickHandler = (storeId) => { + navigate(`/webmap/storeDetail/${storeId}`, { state: { detailVisible: true } }); }; return ( - cardClickHandler(id)}> + cardClickHandler(storeId)}> {alt} -

cardClickHandler(id)}>{name}

- +

cardClickHandler(storeId)}>{name}

+

diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index bb49ab6..db7163a 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -5,14 +5,13 @@ import { ReactComponent as Banner } from '../assets/Icon/banner/Banner.svg'; import { useIsFetch, useSaveBookmarkId } from '../store'; import { CategoryAndMap, SearchKeyword, TopRecommendations } from '../components/main'; import { SearchBar, Button, Footer } from '../components/common'; -import { getBookmarksStores } from '../apis/api/bookmarks'; +import { getAllBookmarksIds } from '../apis/api/bookmarks'; const MainPage = () => { const [searchInput, setSearchInput] = useState(); const navigate = useNavigate(); - const [stores, setStores] = useState([]); const { setIsFetchAll } = useIsFetch(); - const { setBookmarkStore, setSaveBookmarkId } = useSaveBookmarkId(); + const { setSaveBookmarkId } = useSaveBookmarkId(); const onChangeHandler = (e) => { setSearchInput(e.target.value); @@ -40,40 +39,23 @@ const MainPage = () => { // eslint-disable-next-line }, []); - useEffect(() => { - if (stores.length > 0) { - const saveBookmarkId = stores.map((store) => store.bookmarkId); - const bookmarkIds = [...new Set(saveBookmarkId)]; - setSaveBookmarkId(bookmarkIds); - } - // eslint-disable-next-line - }, [stores]); - const buttonClickHandler = () => { navigate('/webmap'); }; const getAllBookmarksStores = async () => { try { - let page = 0; - let allData = []; - let hasMoreData = true; - while (hasMoreData) { - const response = await getBookmarksStores(page); - if (response.status === 200) { - allData = allData.concat(response.data.content); - hasMoreData = response.data.last !== true; - page++; - } else if (response.status === 401) { - navigate('/login'); - } else if (response.status === 404) { - navigate('/*'); - } else { - navigate('/'); - } + const response = await getAllBookmarksIds(); + if (response.status === 200) { + const bookmarkIds = response.data; + setSaveBookmarkId(bookmarkIds); + } else if (response.status === 401) { + navigate('/login'); + } else if (response.status === 404) { + navigate('/*'); + } else { + navigate('/'); } - setBookmarkStore(allData); - setStores(allData); } catch (error) { console.log(error); } finally { diff --git a/src/store/useSaveBookmarkId.jsx b/src/store/useSaveBookmarkId.jsx index 8765a1c..68801e3 100644 --- a/src/store/useSaveBookmarkId.jsx +++ b/src/store/useSaveBookmarkId.jsx @@ -7,8 +7,8 @@ const useSaveBookmarkId = create( persist( (set) => ({ savedId: initialBookmarkId, - setSaveBookmarkId: (bookmarkId) => { - set({ savedId: bookmarkId }); + setSaveBookmarkId: (data) => { + set({ savedId: data }); }, savedStores: [], setBookmarkStore: (stores) => {