Merge pull request #71 from delicious-algorithme/feat/bookmark

fix: 북마크 저장 로직 수정
delicious-algorithme · Nov 15, 2024 · 96d5514 · 96d5514
2 parents 80d9a0e + 1a66c4b
commit 96d5514
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 16 deletions.
diff --git a/src/components/bookmark/Bookmarks.jsx b/src/components/bookmark/Bookmarks.jsx
@@ -9,7 +9,7 @@ import { useSaveBookmarkId } from '../../store';
 const Bookmarks = () => {
     const [stores, setStores] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
-    const { setSaveStoreId } = useSaveBookmarkId();
+    const { setSaveBookmarkId, setBookmarkStore } = useSaveBookmarkId();
 
     const navigate = useNavigate();
 
@@ -20,9 +20,9 @@ const Bookmarks = () => {
 
     useEffect(() => {
         if (stores.length > 0) {
-            const saveStoreId = stores.map((store) => store.storeResponseDto.storeId);
-            const uniqueStoreId = [...new Set(saveStoreId)];
-            setSaveStoreId(uniqueStoreId);
+            const saveBookmarkId = stores.map((store) => store.bookmarkId);
+            const bookmarkIds = [...new Set(saveBookmarkId)];
+            setSaveBookmarkId(bookmarkIds);
         }
         // eslint-disable-next-line
     }, [stores]);
@@ -39,6 +39,7 @@ const Bookmarks = () => {
             if (response.status === 200) {
                 const newData = response.data;
                 setStores([...newData]);
+                setBookmarkStore([...newData]);
             } else {
                 navigate('/login');
             }
@@ -57,6 +58,7 @@ const Bookmarks = () => {
                         stores.length > 0 &&
                         stores.map((store) => (
                             <TopStoreCard
+                                bookmarkId={store.bookmarkId}
                                 address={store.storeResponseDto.address}
                                 key={store.storeResponseDto.storeId}
                                 image={store.storeResponseDto.imageUrls}

diff --git a/src/components/common/bookmark/BookmarkContainer.jsx b/src/components/common/bookmark/BookmarkContainer.jsx
@@ -5,11 +5,11 @@ import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { useSaveBookmarkId } from '../../../store';
 
-const BookmarkContainer = ({ storeId }) => {
-    const { savedStoreId } = useSaveBookmarkId();
+const BookmarkContainer = ({ bookmarkId, storeId }) => {
+    const { savedId } = useSaveBookmarkId();
 
     const auth = JSON.parse(localStorage.getItem('auth')) || {};
-    const isSaved = savedStoreId.includes(storeId) && auth.state.isLoggedIn;
+    const isSaved = savedId.includes(bookmarkId) && auth.state.isLoggedIn;
 
     const navigate = useNavigate();
 
@@ -21,7 +21,7 @@ const BookmarkContainer = ({ storeId }) => {
 
         try {
             if (isSaved) {
-                const response = await deleteBookmarkStore(storeId);
+                const response = await deleteBookmarkStore(bookmarkId);
                 if (response.status === 204) {
                     console.log('success delete');
                 }

diff --git a/src/components/common/store/StoreCard.jsx b/src/components/common/store/StoreCard.jsx
@@ -4,9 +4,13 @@ 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 bookmarkId = savedStores.filter((store) => store.storeResponseDto.storeId === id).bookmarkId;
 
     const cardClickHandler = () => {
         navigate(`/webmap/storeDetail/${id}`);
@@ -21,7 +25,7 @@ const StoreListCard = ({ image, alt, id, name, address, rating, positiveRatio, p
                 <ContentsBox>
                     <NameAndBookmarkContainer>
                         <p>{name}</p>
-                        <Bookmark />
+                        <Bookmark bookmarkId={bookmarkId} storeId={id} />
                     </NameAndBookmarkContainer>
                     <RatingContainer>
                         <Star />

diff --git a/src/components/storeCard/StoreCard.jsx b/src/components/storeCard/StoreCard.jsx
@@ -2,9 +2,18 @@ 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 { useState } from 'react';
 
-const TopStoreCard = ({ image, alt, id, address, name, positiveRatio, keyword }) => {
+const TopStoreCard = ({ image, alt, bookmarkId, id, address, name, positiveRatio, keyword }) => {
     const navigate = useNavigate();
+    const { savedStores } = useSaveBookmarkId();
+    const [savedId, setSavedId] = useState(bookmarkId ? bookmarkId : null);
+
+    if (!bookmarkId) {
+        const bookmarkId = savedStores.filter((store) => store.storeResponseDto.storeId === id);
+        setSavedId(bookmarkId);
+    }
 
     const cardClickHandler = (id) => {
         navigate(`/webmap/storeDetail/${id}`, { state: { detailVisible: true } });
@@ -21,7 +30,7 @@ const TopStoreCard = ({ image, alt, id, address, name, positiveRatio, keyword })
                 </Review>
                 <NameAndCategoryContainer>
                     <p onClick={() => cardClickHandler(id)}>{name}</p>
-                    <Bookmark storeId={id} />
+                    <Bookmark bookmarkId={savedId} storeId={id} />
                 </NameAndCategoryContainer>
                 <PositiveRatio>
                     <p>

diff --git a/src/store/useSaveBookmarkId.jsx b/src/store/useSaveBookmarkId.jsx
@@ -1,17 +1,21 @@
 import create from 'zustand';
 import { persist } from 'zustand/middleware';
 
-const initialStoreId = [];
+const initialBookmarkId = [];
 
 const useSaveBookmarkId = create(
     persist(
         (set) => ({
-            savedStoreId: initialStoreId,
-            setSaveStoreId: (storeId) => {
-                set({ savedStoreId: storeId });
+            savedId: initialBookmarkId,
+            setSaveBookmarkId: (bookmarkId) => {
+                set({ savedId: bookmarkId });
+            },
+            savedStores: [],
+            setBookmarkStore: (stores) => {
+                set({ savedStores: stores });
             },
         }),
-        { name: 'saved-storeId' }
+        { name: 'saved-bookmarkId' }
     )
 );