Merge pull request #611 from pearpearB/Fix/게시글좋아요누를때마다새로고침-610

[Fix] 게시글 댓글 좋아요 누를 때마다 새로고침 되는 문제 해결 Close #610
blind-42 · Apr 10, 2022 · 83656b1 · 83656b1
2 parents ebccda6 + 23954f6
commit 83656b1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/client/src/components/Comments/Comments.tsx b/client/src/components/Comments/Comments.tsx
@@ -51,6 +51,7 @@ function Comments({ roleType, comment, commentsUserList }: GreetingProps) {
     recomments,
   } = comment;
   const [boxState, setBoxState] = useState<boolean>(isLiked);
+  const [usersLikeCnt, setUsersLikeCnt] = useState(likeCnt);
   const [openEditor, setOpenEditor] = useState<boolean>(false);
   const [openReCmt, setOpenReCmt] = useState<boolean>(false);
   const writer = whoIsWriter(isAuthor, commentsUserList, authorId);
@@ -157,7 +158,8 @@ function Comments({ roleType, comment, commentsUserList }: GreetingProps) {
       },
       {
         onSuccess: () => {
-          queryClient.invalidateQueries(['comment_key']);
+          if (boxState) setUsersLikeCnt(usersLikeCnt - 1);
+          else setUsersLikeCnt(usersLikeCnt + 1);
           setBoxState(!boxState);
         },
         onError: () => {
@@ -228,7 +230,7 @@ function Comments({ roleType, comment, commentsUserList }: GreetingProps) {
               <div>
                 <GrLike />
               </div>
-              <div>{likeCnt}</div>
+              <div>{usersLikeCnt}</div>
             </LikesBox>
           </CommentBottom>
         </CommentWrap>

diff --git a/client/src/components/Comments/ReComments.tsx b/client/src/components/Comments/ReComments.tsx
@@ -48,6 +48,7 @@ function ReComments({ roleType, recomment, commentsUserList }: GreetingProps) {
     targetAuthorId,
   } = recomment;
   const [boxState, setBoxState] = useState<boolean>(isLiked);
+  const [usersLikeCnt, setUsersLikeCnt] = useState(likeCnt);
   const [openEditor, setOpenEditor] = useState<boolean>(false);
   const [openReReCmt, setOpenReReCmt] = useState<boolean>(false);
   const writer = whoIsWriter(isAuthor, commentsUserList, authorId);
@@ -154,7 +155,8 @@ function ReComments({ roleType, recomment, commentsUserList }: GreetingProps) {
       },
       {
         onSuccess: () => {
-          queryClient.invalidateQueries(['comment_key']);
+          if (boxState) setUsersLikeCnt(usersLikeCnt - 1);
+          else setUsersLikeCnt(usersLikeCnt + 1);
           setBoxState(!boxState);
         },
         onError: () => {
@@ -241,7 +243,7 @@ function ReComments({ roleType, recomment, commentsUserList }: GreetingProps) {
                 <div>
                   <GrLike />
                 </div>
-                <div>{likeCnt}</div>
+                <div>{usersLikeCnt}</div>
               </LikesBox>
             </CommentBottom>
           </ReCommentWrap>

diff --git a/client/src/pages/Detail/Detail.tsx b/client/src/pages/Detail/Detail.tsx
@@ -81,7 +81,8 @@ export default function Detail() {
   const [commentData, setCommentData] = useState([]);
   const [commentsUserList, setCommentsUserList] = useState([-1]);
   const [commentTotalCnt, setCommentTotalCnt] = useState(0);
-  const [boxState, setBoxState] = useState(isLiked);
+  const [boxState, setBoxState] = useState(false);
+  const [usersLikeCnt, setUsersLikeCnt] = useState(0);
   const [openEditor, setOpenEditor] = useState(false);
   const currentUrl = window.location.href;
   const postUrl = currentUrl.split('postId=')[1];
@@ -102,10 +103,12 @@ export default function Detail() {
   );
   const results = useQueries([
     {
-      queryKey: ['detail_key', postUrl, boxState],
+      queryKey: ['detail_key', postUrl],
       queryFn: () => {
         instance.get(`/post?postId=${postUrl}`).then((res) => {
           setDetailData(res.data);
+          setBoxState(res.data.isLiked);
+          setUsersLikeCnt(res.data.likeCnt);
         });
       },
       retry: 0,
@@ -219,6 +222,8 @@ export default function Detail() {
       { path: `/post/like?postId=${postUrl}`, data: undefined },
       {
         onSuccess: () => {
+          if (boxState) setUsersLikeCnt(usersLikeCnt - 1);
+          else setUsersLikeCnt(usersLikeCnt + 1);
           setBoxState(!boxState);
         },
         onError: () => {
@@ -302,11 +307,11 @@ export default function Detail() {
                         </ContentWrap>
                       )}
                       <LikeWrap>
-                        <LikesBox boxState={isLiked} onClick={likeBoxHandler}>
+                        <LikesBox boxState={boxState} onClick={likeBoxHandler}>
                           <div>
                             <GrLike />
                           </div>
-                          <div>{likeCnt}</div>
+                          <div>{usersLikeCnt}</div>
                         </LikesBox>
                       </LikeWrap>
                       <CommentContainer>