Merge pull request #116 from Team-inglo/feat/IGW-44/65

[Feat/103] 서류 관리 페이지 이동 시 에러 및 북마크 아이콘 미리 변경하기
Team-inglo · Nov 5, 2024 · 4827589 · 4827589
2 parents 3ac6f36 + 7c2e1d3
commit 4827589
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 6 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/Home/HomeApplicationCard.tsx b/src/components/Home/HomeApplicationCard.tsx
@@ -1,4 +1,5 @@
 import TopRightArrowIcons from '@/assets/icons/Home/TopRightArrowIcon.svg?react';
+import { useCurrentPostIdEmployeeStore } from '@/store/url';
 import { OngoingInterviewItemType } from '@/types/home/ongoingInterviewItem';
 import { useNavigate } from 'react-router-dom';
 
@@ -8,6 +9,12 @@ type HomeApplicationCardProps = {
 
 const HomeApplicationCard = ({ applicationData }: HomeApplicationCardProps) => {
   const navigate = useNavigate();
+  const { updateCurrentPostId } = useCurrentPostIdEmployeeStore();
+
+  const goToApplicationDetailPage = () => {
+    updateCurrentPostId(applicationData.id);
+    navigate(`/application/${applicationData.id}`);
+  };
 
   return (
     <article className="flex flex-col gap-[0.5rem] px-[1.25rem] pt-[0.75rem] pb-[1.25rem] min-w-[17.5rem] bg-white rounded-[1rem] shadow-cardShadow">
@@ -26,7 +33,7 @@ const HomeApplicationCard = ({ applicationData }: HomeApplicationCardProps) => {
         </div>
         <button
           className="px-[0.75rem] py-[0.25rem] bg-[#1B1B1B] rounded-[1.313rem]"
-          onClick={() => navigate(`/application/${applicationData.id}`)}
+          onClick={goToApplicationDetailPage}
         >
           <TopRightArrowIcons />
         </button>

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