fix: 스크랩 버튼 누르면 스크랩 수 바로 반영

whatever-mentoring · Sep 25, 2023 · 79497f0 · 79497f0
1 parent af2f8ac
commit 79497f0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git 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
@@ -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 && (