From 79497f080a3d72fa83918fbd520be07fd64994f3 Mon Sep 17 00:00:00 2001
From: asaei623 <86418308+asaei623@users.noreply.github.com>
Date: Mon, 25 Sep 2023 15:53:40 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=8A=A4=ED=81=AC=EB=9E=A9=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=9E=A9=20=EC=88=98=20=EB=B0=94=EB=A1=9C=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PostDetail/ScrapButton.tsx |  5 ++++
 src/pages/Main/PostDetail/index.tsx       | 32 ++++++++++++++---------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/PostDetail/ScrapButton.tsx b/src/components/PostDetail/ScrapButton.tsx
index 5949ab1..d319bf1 100644
--- a/src/components/PostDetail/ScrapButton.tsx
+++ b/src/components/PostDetail/ScrapButton.tsx
@@ -9,9 +9,11 @@ import { postType } from 'types';
 const ScrapButton = ({
   postIdx,
   post,
+  setIsScrap,
 }: {
   postIdx: number;
   post: postType;
+  setIsScrap: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 }) => {
   const [isScraped, setIsScraped] = useState<boolean>();
   const userType = window.localStorage.getItem('userType');
@@ -29,6 +31,9 @@ const ScrapButton = ({
       setIsScraped(post.isScrap);
     }
   }, []);
+  useEffect(() => {
+    setIsScrap(isScraped);
+  }, [isScraped]);
 
   return (
     <ScrapImg
diff --git a/src/pages/Main/PostDetail/index.tsx b/src/pages/Main/PostDetail/index.tsx
index d4f978b..0f371d4 100644
--- a/src/pages/Main/PostDetail/index.tsx
+++ b/src/pages/Main/PostDetail/index.tsx
@@ -15,21 +15,25 @@ const PostDetail = () => {
   const { idx } = useParams();
   const idxNum = idx ? parseInt(idx) : null;
   const [postdetail, setPostdetail] = useState<postType | null>(null);
+  const [isScrap, setIsScrap] = useState<boolean | undefined>(); //스크랩 버튼을 누를 경우 api를 다시 호출한다.
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        if (idxNum !== null) {
-          const res = await postsDetailApi(idxNum);
-          setPostdetail(res);
-        }
-      } catch (err) {
-        console.log(err);
+  const fetchData = async () => {
+    try {
+      if (idxNum !== null) {
+        const res = await postsDetailApi(idxNum);
+        setPostdetail(res);
       }
-    };
-
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  useEffect(() => {
     fetchData();
+    setIsScrap(postdetail?.isScrap);
   }, [idxNum]);
+  useEffect(() => {
+    fetchData();
+  }, [isScrap]);
   return (
     <Column>
       <Header btn={'back'} borderBottom={true}>
@@ -42,7 +46,11 @@ const PostDetail = () => {
             <Row justifyContent="space-between">
               <CommentScrapInfo post={postdetail}></CommentScrapInfo>
               {idxNum && (
-                <ScrapButton postIdx={idxNum} post={postdetail}></ScrapButton>
+                <ScrapButton
+                  postIdx={idxNum}
+                  post={postdetail}
+                  setIsScrap={setIsScrap}
+                ></ScrapButton>
               )}
             </Row>
             {postdetail.commentList !== undefined && (