🐛 fix: 북마크 버튼 클릭 시 미리 아이콘 변경하기 #103

Team-inglo · Nov 5, 2024 · 7c2e1d3 · 7c2e1d3
1 parent 4afecf7
commit 7c2e1d3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git 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,19 +25,28 @@ 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 = () => {
     updateCurrentPostId(Number(jobPostingData.id));
     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
@@ -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