Merge pull request #73 from delicious-algorithme/main

Main
delicious-algorithme · Nov 16, 2024 · c8dca78 · c8dca78
2 parents 96d5514 + fb6e887
commit c8dca78
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/src/components/common/bookmark/BookmarkContainer.jsx b/src/components/common/bookmark/BookmarkContainer.jsx
@@ -4,13 +4,13 @@ import { deleteBookmarkStore, postBookmarkStore } from '../../../apis/api/bookma
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { useSaveBookmarkId } from '../../../store';
+import { useState } from 'react';
 
 const BookmarkContainer = ({ bookmarkId, storeId }) => {
     const { savedId } = useSaveBookmarkId();
 
     const auth = JSON.parse(localStorage.getItem('auth')) || {};
-    const isSaved = savedId.includes(bookmarkId) && auth.state.isLoggedIn;
-
+    const [isSaved, setIsSaved] = useState(savedId.includes(bookmarkId) && auth.state.isLoggedIn);
     const navigate = useNavigate();
 
     const handleClickBookmarks = async (e) => {
@@ -24,11 +24,12 @@ const BookmarkContainer = ({ bookmarkId, storeId }) => {
                 const response = await deleteBookmarkStore(bookmarkId);
                 if (response.status === 204) {
                     console.log('success delete');
+                    setIsSaved(false);
                 }
             } else {
                 const response = await postBookmarkStore(storeId);
                 if (response.status === 201) {
-                    navigate('/bookmark');
+                    setIsSaved(true);
                 } else {
                     console.log(response.error);
                 }

diff --git a/src/components/common/store/StoreCard.jsx b/src/components/common/store/StoreCard.jsx
@@ -10,7 +10,8 @@ const StoreListCard = ({ image, alt, id, name, address, rating, positiveRatio, p
     const navigate = useNavigate();
     const { savedStores } = useSaveBookmarkId();
 
-    const bookmarkId = savedStores.filter((store) => store.storeResponseDto.storeId === id).bookmarkId;
+    const bookmark = savedStores.find((store) => store.storeResponseDto.storeId === id);
+    const bookmarkId = bookmark?.bookmarkId;
 
     const cardClickHandler = () => {
         navigate(`/webmap/storeDetail/${id}`);

diff --git a/src/components/storeCard/StoreCard.jsx → src/components/storeCard/TopStoreCard.jsx b/src/components/storeCard/StoreCard.jsx → src/components/storeCard/TopStoreCard.jsx
@@ -3,17 +3,21 @@ 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';
+import { useEffect, useState } from 'react';
 
 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);
-    }
+    useEffect(() => {
+        if (!bookmarkId) {
+            const bookmark = savedStores.find((store) => store.storeResponseDto.storeId === id);
+            const bookmarkId = bookmark?.bookmarkId;
+            setSavedId(bookmarkId);
+        }
+        // eslint-disable-next-line
+    }, []);
 
     const cardClickHandler = (id) => {
         navigate(`/webmap/storeDetail/${id}`, { state: { detailVisible: true } });

diff --git a/src/components/storeCard/index.js b/src/components/storeCard/index.js
@@ -1,3 +1,3 @@
-import TopStoreCard from './StoreCard';
+import TopStoreCard from './TopStoreCard';
 
 export { TopStoreCard };