Merge pull request #322 from prgrms-fe-devcourse/bug-post-update

✨  좋아요 싫어요 낙관적 업데이트 적용

src/components/molcules/LikeDislikeCount/LikeDislikeCount.tsx

@@ -8,8 +8,8 @@ import './index.scss'
 export type LikeDislikeCountProps = {
   like: number
   dislike: number
-  onClickLike?: () => Promise<void>
-  onClickDisLike?: () => Promise<void>
+  onClickLike?: () => void
+  onClickDisLike?: () => void
   initalState: 'like' | 'dislike' | 'init' | 'both'
 }
 export default function LikeDislikeCount({

src/components/organisms/LikeDisLikeContainer/LikeDIsLikeContainer.tsx

@@ -17,7 +17,6 @@ export default function LikeDislikeContainer({
   onClickDisLike,
   initalState,
 }: LikeDislikeCountProps) {
-  const [loading, setLoading] = useState(false)
   const { toggleDisLikeState, toggleLikeState, likeState } =
     useLikeState(initalState)
 
@@ -34,28 +33,14 @@ export default function LikeDislikeContainer({
     toggleLikeState()
 
     if (onClickLike) {
-      setLoading(true)
       onClickLike()
-        .then(() => {
-          setLoading(false)
-        })
-        .finally(() => {
-          setLoading(false)
-        })
     }
   }, [onClickLike, toggleLikeState])
 
   const handleClickDisLike = useCallback(() => {
     toggleDisLikeState()
     if (onClickDisLike) {
-      setLoading(true)
       onClickDisLike()
-        .then(() => {
-          setLoading(false)
-        })
-        .finally(() => {
-          setLoading(false)
-        })
     }
   }, [onClickDisLike, toggleDisLikeState])
 
@@ -64,11 +49,15 @@ export default function LikeDislikeContainer({
       <>
         <span className="like-container__likes">
           <Image
-            src={likeState === 'like' ? Assets.ActiveLike : likeImage}
+            src={
+              likeState === 'like' || likeState === 'both'
+                ? Assets.ActiveLike
+                : likeImage
+            }
             alt="좋아요 이미지"
             width={30}
             height={30}
-            onClick={loading ? undefined : handleClickLike}
+            onClick={handleClickLike}
             style={{
               cursor: 'pointer',
             }}
@@ -84,11 +73,15 @@ export default function LikeDislikeContainer({
         />
         <span className="like-container__dislikes">
           <Image
-            src={likeState === 'dislike' ? Assets.ActiveDisLike : disLikeImage}
+            src={
+              likeState === 'dislike' || likeState === 'both'
+                ? Assets.ActiveDisLike
+                : disLikeImage
+            }
             alt="싫어요 이미지"
             width={30}
             height={30}
-            onClick={loading ? undefined : handleClickDisLike}
+            onClick={handleClickDisLike}
             style={{
               cursor: 'pointer',
             }}

src/components/templates/PostDetailTemplate/PostDetailTemplate.tsx

@@ -11,8 +11,8 @@ import CommentInput from '@/components/organisms/CommentInput/CommentInput'
 import CommentListContainer from '@/components/organisms/CommentList/CommentListContainer'
 import { LikeDisLikeContainer } from '@/components/organisms/LikeDisLikeContainer'
 import APP_PATH from '@/config/paths'
-import useLike from '@/hooks/useLike'
 import { useAuth } from '@/lib/contexts/authProvider'
+import { useGetPostLikesQuery, useLikeMutate } from '@/queries/likes'
 import { postNewComment } from '@/services/comment'
 import Post from '@/types/post'
 import './index.scss'
@@ -35,16 +35,21 @@ export function PostDetailTemplate({
   const cachedCurrentUser = useMemo(() => currentUser, [currentUser])
   const isEqualUser = cachedCurrentUser?._id === author._id
 
-  const { post, handleOnClickLike, handleOnClickDisLikeBtn, disLikePost } =
-    useLike({
-      initPost,
-      initDisLikePost: initDisLikeChannelPost,
-    })
+  const { data: postLike, isFetching: isLikePostFetching } =
+    useGetPostLikesQuery(initPost._id, initPost)
+  const { data: postDisLike, isFetching: isDisLikePostFetching } =
+    useGetPostLikesQuery(initDisLikeChannelPost._id, initDisLikeChannelPost)
 
-  const initLikeState = post?.likes.some(
+  const { likeMutation, disLikeMutation } = useLikeMutate({
+    initPost: initPost,
+    initDisLikePost: initDisLikeChannelPost,
+    currentUser,
+  })
+
+  const initLikeState = postLike?.likes.some(
     (like) => like.user === currentUser?._id,
   )
-  const initDisLikeState = disLikePost?.likes.some(
+  const initDisLikeState = postDisLike?.likes.some(
     (dislike) => dislike.user === currentUser?._id,
   )
 
@@ -89,10 +94,14 @@ export function PostDetailTemplate({
 
       <LikeDisLikeContainer
         initalState={initState}
-        like={post?.likes?.length || 0}
-        dislike={disLikePost?.likes?.length || 0}
-        onClickLike={handleOnClickLike}
-        onClickDisLike={handleOnClickDisLikeBtn}
+        like={postLike?.likes?.length || 0}
+        dislike={postDisLike?.likes?.length || 0}
+        onClickLike={() => {
+          !isLikePostFetching && likeMutation.mutate()
+        }}
+        onClickDisLike={() => {
+          !isDisLikePostFetching && disLikeMutation.mutate()
+        }}
       />
       <CommentListContainer postId={postId} initComments={comment} />
       {isLoggedIn && currentUser && (