From 7c2e1d3a8d9cea731aac3cea6a8ad4345c639874 Mon Sep 17 00:00:00 2001
From: nakyong82 <nakyong7770@gmail.com>
Date: Wed, 6 Nov 2024 01:08:48 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EB=B6=81=EB=A7=88?=
 =?UTF-8?q?=ED=81=AC=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?=
 =?UTF-8?q?=20=EB=AF=B8=EB=A6=AC=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=ED=95=98=EA=B8=B0=20#103?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Common/JobPostingCard.tsx           | 14 ++++++++++++--
 .../PostDetail/PostDetailApplyButton.tsx           | 14 +++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/Common/JobPostingCard.tsx b/src/components/Common/JobPostingCard.tsx
index 573741ba..207e5afc 100644
--- a/src/components/Common/JobPostingCard.tsx
+++ b/src/components/Common/JobPostingCard.tsx
@@ -12,6 +12,7 @@ import { usePutPostBookmark } from '@/hooks/api/usePost';
 import { useUserStore } from '@/store/user';
 import { UserType } from '@/constants/user';
 import { useCurrentPostIdStore } from '@/store/url';
+import { useEffect, useState } from 'react';
 
 type JobPostingCardProps = {
   jobPostingData: JobPostingItemType;
@@ -24,12 +25,17 @@ const JobPostingCard = ({ jobPostingData }: JobPostingCardProps) => {
 
   const navigate = useNavigate();
 
+  const [isBookmark, setIsBookmark] = useState<boolean>(false);
+
   const onClickBookmark = async (
     event: React.MouseEvent<SVGSVGElement, MouseEvent>,
   ) => {
     event.stopPropagation();
 
-    if (account_type) mutate(jobPostingData.id);
+    if (account_type) {
+      mutate(jobPostingData.id);
+      setIsBookmark(!isBookmark);
+    }
   };
 
   const goToPostDetailPage = () => {
@@ -37,6 +43,10 @@ const JobPostingCard = ({ jobPostingData }: JobPostingCardProps) => {
     navigate(`/post/${jobPostingData.id}`);
   };
 
+  useEffect(() => {
+    setIsBookmark(jobPostingData?.is_book_marked ?? false);
+  }, [setIsBookmark, jobPostingData]);
+
   return (
     <article
       className="flex flex-col gap-[1rem] w-full px-[1.125rem] pt-[1.125rem] pb-[0.75rem] border-[0.5px] border-solid border-[#1E19263D] rounded-[1.125rem]"
@@ -95,7 +105,7 @@ const JobPostingCard = ({ jobPostingData }: JobPostingCardProps) => {
             fontStyle="button-2"
           />
           {account_type === UserType.USER &&
-            (jobPostingData?.is_book_marked ? (
+            (isBookmark ? (
               <BookmarkCheckedIcon onClick={(e) => onClickBookmark(e)} />
             ) : (
               <BookmarkIcon onClick={(e) => onClickBookmark(e)} />
diff --git a/src/components/PostDetail/PostDetailApplyButton.tsx b/src/components/PostDetail/PostDetailApplyButton.tsx
index 7f20b934..2a17b61c 100644
--- a/src/components/PostDetail/PostDetailApplyButton.tsx
+++ b/src/components/PostDetail/PostDetailApplyButton.tsx
@@ -4,7 +4,7 @@ import PostDetailConfirmBottomSheet from '@/components/PostDetail/PostDetailConf
 import LoginBottomSheet from '@/components/Common/LoginBottomSheet';
 import BookmarkIcon from '@/assets/icons/BookmarkIcon.svg?react';
 import BookmarkCheckedIcon from '@/assets/icons/BookmarkCheckedIcon.svg?react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useUserStore } from '@/store/user';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useGetPostValidation } from '@/hooks/api/useApplication';
@@ -29,6 +29,7 @@ const PostDetailApplyButton = ({
     useState<boolean>(false);
   const [isOpenLoginBottomSheet, setIsOpenLoginBottomSheet] =
     useState<boolean>(false);
+  const [isBookmark, setIsBookmark] = useState<boolean>(false);
 
   const onClickApply = async () => {
     if (!account_type) {
@@ -46,9 +47,16 @@ const PostDetailApplyButton = ({
   };
 
   const onClickBookmark = async () => {
-    if (account_type && !isNaN(Number(id))) mutate(Number(id));
+    if (account_type && !isNaN(Number(id))) {
+      mutate(Number(id));
+      setIsBookmark(!isBookmark);
+    }
   };
 
+  useEffect(() => {
+    setIsBookmark(isBookmarked);
+  }, [setIsBookmark, isBookmarked]);
+
   return (
     <>
       <footer className="fixed bottom-0 left-0 w-full flex gap-[0.5rem] pt-[0.75rem] px-[1.5rem] pb-[2.5rem] bg-white z-20">
@@ -57,7 +65,7 @@ const PostDetailApplyButton = ({
             className="flex justify-center items-center min-w-[3.25rem] w-[3.25rem] h-[3.25rem] rounded-full bg-[#F4F4F980]"
             onClick={onClickBookmark}
           >
-            {isBookmarked ? <BookmarkCheckedIcon /> : <BookmarkIcon />}
+            {isBookmark ? <BookmarkCheckedIcon /> : <BookmarkIcon />}
           </button>
         )}
         <Button