Merge pull request #111 from delicious-algorithme/dev

fix: 북마크 아이디 저장 로직 수정
delicious-algorithme · Nov 26, 2024 · 121be9b · 121be9b
2 parents 33cee28 + 8e66d0d
commit 121be9b
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 102 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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,21 +59,32 @@ 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 (
         <BookmarkLayout>
             {!isLoading &&
                 bookmarkStores.length > 0 &&
                 bookmarkStores.map((store) => (
                     <TopStoreCard
-                        bookmarkId={store.bookmarkId}
                         address={store.storeResponseDto.address}
                         key={store.storeResponseDto.storeId}
+                        storeId={store.storeResponseDto.storeId}
                         image={store.storeResponseDto.imageUrls}
-                        id={store.storeResponseDto.storeId}
                         positiveRatio={store.storeResponseDto.positiveRatio}
                         keyword={store.storeResponseDto.positiveKeywords}
                         name={store.storeResponseDto.name}

diff --git a/src/components/common/bookmark/BookmarkContainer.jsx b/src/components/common/bookmark/BookmarkContainer.jsx
@@ -3,36 +3,27 @@ import { ReactComponent as SavedBookmarkIcon } from '../../../assets/Icon/detail
 import { deleteBookmarkStore, postBookmarkStore } from '../../../apis/api/bookmarks';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import { getBookmarksStores } from '../../../apis/api/bookmarks';
+import { getAllBookmarksIds } from '../../../apis/api/bookmarks';
 import { useSaveBookmarkId } from '../../../store';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
-const BookmarkContainer = ({ bookmarkId, storeId }) => {
-    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) {
             navigate('/login');
         }
         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
@@ -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 }) => {
         <KeywordBox>
             {keywordItem.map((item) => {
                 return (
-                    <KeywordTag mode={mode} type={type} key={type}>
+                    <KeywordTag mode={mode} type={type} key={uuidv4()}>
                         <p>#{item}</p>
                     </KeywordTag>
                 );

diff --git 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
                 <ContentsBox>
                     <NameAndBookmarkContainer>
                         <p onClick={() => cardClickHandler(id)}>{name}</p>
-                        <Bookmark bookmarkId={bookmarkId} storeId={id} />
+                        <Bookmark storeId={id} />
                     </NameAndBookmarkContainer>
                     <RatingContainer>
                         <Star />

diff --git a/src/components/main/TopRecommendations.jsx b/src/components/main/TopRecommendations.jsx
@@ -76,7 +76,7 @@ const TopRecommendations = () => {
                             <TopStoreCard
                                 image={store.imageUrls}
                                 address={store.address}
-                                id={store.storeId}
+                                storeId={store.storeId}
                                 positiveRatio={store.positiveRatio}
                                 keyword={store.positiveKeywords}
                                 name={store.name}

diff --git a/src/components/storeCard/TopStoreCard.jsx b/src/components/storeCard/TopStoreCard.jsx
@@ -2,31 +2,24 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import { Orange, Grey, DarkGrey } from '../../color';
 import Bookmark from '../common/bookmark/BookmarkContainer';
-import { useSaveBookmarkId } from '../../store';
 import { Keyword } from '../common';
 
-const TopStoreCard = ({ image, alt, bookmarkId, id, address, name, keyword }) => {
+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 (
         <StoreCardContainer>
-            <ImageContainer onClick={() => cardClickHandler(id)}>
+            <ImageContainer onClick={() => cardClickHandler(storeId)}>
                 <img src={image} width="100%" height="auto" alt={alt} />
             </ImageContainer>
             <ContentsContainer>
                 <Keyword keyword={keyword} mode="card" type="positive" />
                 <NameAndBookmarkContainer>
-                    <p onClick={() => cardClickHandler(id)}>{name}</p>
-                    <Bookmark bookmarkId={bookmarkId} storeId={id} />
+                    <p onClick={() => cardClickHandler(storeId)}>{name}</p>
+                    <Bookmark storeId={storeId} />
                 </NameAndBookmarkContainer>
                 <Location>
                     <p>

diff --git 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
@@ -7,8 +7,8 @@ const useSaveBookmarkId = create(
     persist(
         (set) => ({
             savedId: initialBookmarkId,
-            setSaveBookmarkId: (bookmarkId) => {
-                set({ savedId: bookmarkId });
+            setSaveBookmarkId: (data) => {
+                set({ savedId: data });
             },
             savedStores: [],
             setBookmarkStore: (stores) => {