Main

src/components/common/bookmark/BookmarkContainer.jsx

@@ -3,16 +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 { useSaveBookmarkId } from '../../../store';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 const BookmarkContainer = ({ bookmarkId, storeId }) => {
-    const { savedId } = useSaveBookmarkId();
+    const [stores, setStores] = useState([]);
+    const { savedId, setSaveBookmarkId, setBookmarkStore } = useSaveBookmarkId();
 
     const auth = JSON.parse(localStorage.getItem('auth')) || {};
-    const [isSaved, setIsSaved] = useState(savedId.includes(bookmarkId) && auth.state.isLoggedIn);
+    const isSaved = savedId.includes(bookmarkId) && 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) {
@@ -24,12 +35,12 @@ const BookmarkContainer = ({ bookmarkId, storeId }) => {
                 const response = await deleteBookmarkStore(bookmarkId);
                 if (response.status === 204) {
                     console.log('success delete');
-                    setIsSaved(false);
+                    fetchBookmarkStores();
                 }
             } else {
                 const response = await postBookmarkStore(storeId);
                 if (response.status === 201) {
-                    setIsSaved(true);
+                    fetchBookmarkStores();
                 } else {
                     console.log(response.error);
                 }
@@ -39,6 +50,28 @@ const BookmarkContainer = ({ bookmarkId, storeId }) => {
         }
     };
 
+    const fetchBookmarkStores = async () => {
+        const auth = JSON.parse(localStorage.getItem('auth')) || {};
+        if (!auth.state.isLoggedIn) {
+            navigate('/login');
+        }
+        try {
+            const response = await getBookmarksStores();
+            if (response.status === 200) {
+                const newData = response.data;
+                setStores([...newData]);
+                setBookmarkStore([...newData]);
+                navigate(0);
+            } else {
+                navigate('/login');
+            }
+        } catch (error) {
+            console.log(error);
+        } finally {
+            console.log('success getBookmark');
+        }
+    };
+
     return (
         <BookmarkBox onClick={handleClickBookmarks}>
             {!isSaved && <BookmarkIcon />}

src/components/common/store/StoreCard.jsx

@@ -19,13 +19,13 @@ const StoreListCard = ({ image, alt, id, name, address, rating, positiveRatio, p
 
     return (
         <StoreListCardLayout>
-            <ContentsContainer onClick={() => cardClickHandler(id)}>
-                <ImageContainer>
+            <ContentsContainer>
+                <ImageContainer onClick={() => cardClickHandler(id)}>
                     <StyledImage src={image} alt={alt} />
                 </ImageContainer>
                 <ContentsBox>
                     <NameAndBookmarkContainer>
-                        <p>{name}</p>
+                        <p onClick={() => cardClickHandler(id)}>{name}</p>
                         <Bookmark bookmarkId={bookmarkId} storeId={id} />
                     </NameAndBookmarkContainer>
                     <RatingContainer>