Merge pull request #345 from Team-TenTen/bug/#344/link-like

링크 좋아요가 반영되지 않는 문제 수정

Author: dudwns

src/components/PopularLink/PopularLinkList/PopularLinkList.tsx

@@ -54,8 +54,8 @@ const PopularLinkList = () => {
             url={link.url}
             tagName={link.tagName}
             tagColor={link.tagColor as ChipColors}
-            isInitLiked={link.isLiked}
-            likeInitCount={link.likeCount}
+            isLiked={link.isLiked}
+            likeCount={link.likeCount}
             type="card"
           />
         </SwiperSlide>

src/components/common/LinkItem/LinkItem.tsx

@@ -44,8 +44,8 @@ export interface LinkItemProps {
   tagName: string
   tagColor: ChipColors
   readUsers?: linkViewHistories[]
-  isInitLiked?: boolean
-  likeInitCount: number
+  isLiked: boolean
+  likeCount: number
   read?: boolean
   summary?: boolean
   edit?: boolean
@@ -62,8 +62,8 @@ const LinkItem = ({
   tagName,
   tagColor,
   readUsers,
-  isInitLiked,
-  likeInitCount,
+  isLiked,
+  likeCount,
   read = false,
   summary = false,
   edit = false,
@@ -110,11 +110,9 @@ const LinkItem = ({
     linkId,
   })
   const { handleSaveReadInfo } = useReadSaveLink({ spaceId, linkId })
-  const { isLiked, likeCount, handleClickLike } = useLikeLink({
+  const { handleClickLike } = useLikeLink({
     spaceId,
     linkId,
-    isLikedValue: isInitLiked,
-    likeCountValue: likeInitCount,
   })
   return (
     <>

src/components/common/LinkItem/hooks/useLikeLink.ts

@@ -1,57 +1,35 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback } from 'react'
 import { useDeleteLikeLink, usePostLikeLink } from '@/services/link/useLink'
-import { debounce } from 'lodash'
-import useToggle from '../../Toggle/hooks/useToggle'
 
 export interface UseLikeLinkProps {
   spaceId?: number
   linkId: number
-  isLikedValue?: boolean
-  likeCountValue: number
 }
 
-const useLikeLink = ({
-  linkId,
-  isLikedValue,
-  likeCountValue,
-}: UseLikeLinkProps) => {
-  const [isLiked, likeToggle] = useToggle(isLikedValue)
-  const [likeCount, setLikeCount] = useState<number>(likeCountValue)
+const useLikeLink = ({ spaceId, linkId }: UseLikeLinkProps) => {
+  const { mutate: deleteLikeLink } = useDeleteLikeLink({ spaceId })
+  const { mutate: postLikeLink } = usePostLikeLink({ spaceId })
 
-  const { mutate: deleteLikeLink } = useDeleteLikeLink()
-  const { mutate: postLikeLink } = usePostLikeLink()
+  const handleRemoveLike = useCallback(() => {
+    deleteLikeLink({ linkId })
+  }, [deleteLikeLink, linkId])
 
-  const debounceUnLikeLink = useMemo(
-    () =>
-      debounce(async () => {
-        await deleteLikeLink({ linkId })
-      }, 300),
-    [deleteLikeLink, linkId],
-  )
-
-  const debounceLikeLink = useMemo(
-    () =>
-      debounce(async () => {
-        await postLikeLink({ linkId })
-      }, 300),
-    [postLikeLink, linkId],
-  )
+  const handleAddLike = useCallback(() => {
+    postLikeLink({ linkId })
+  }, [postLikeLink, linkId])
 
   const handleClickLike = useCallback(
     (isLike: boolean) => {
-      likeToggle()
       if (isLike) {
-        setLikeCount((prev) => prev - 1)
-        debounceUnLikeLink()
+        handleRemoveLike()
       } else {
-        setLikeCount((prev) => prev + 1)
-        debounceLikeLink()
+        handleAddLike()
       }
     },
-    [likeToggle, debounceUnLikeLink, debounceLikeLink],
+    [handleRemoveLike, handleAddLike],
   )
 
-  return { isLiked, likeCount, handleClickLike }
+  return { handleClickLike }
 }
 
 export default useLikeLink

src/components/common/LinkList/LinkList.tsx

@@ -151,8 +151,8 @@ const LinkList = ({
                   tagName={link.tagName}
                   tagColor={link.tagColor}
                   readUsers={link.linkViewHistories}
-                  isInitLiked={link.isLiked}
-                  likeInitCount={link.likeCount}
+                  isLiked={link.isLiked}
+                  likeCount={link.likeCount}
                   read={read}
                   summary={summary}
                   edit={edit}

src/services/link/useLink.ts

@@ -124,7 +124,9 @@ export const fetchGetPopularLinks = async () => {
 }
 
 // 링크 좋아요
-export const usePostLikeLink = () => {
+export const usePostLikeLink = ({ spaceId }: { spaceId?: number }) => {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: async (query: ILikeLink['query']) => {
       const response = await apiClient.post(
@@ -133,19 +135,29 @@ export const usePostLikeLink = () => {
       )
       return response
     },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.LINKS, spaceId] })
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.POPULAR_LINKS] })
+    },
     onError: (error: Error) => {
       console.log(error)
     },
   })
 }
 
 // 링크 좋아요 취소
-export const useDeleteLikeLink = () => {
+export const useDeleteLikeLink = ({ spaceId }: { spaceId?: number }) => {
+  const queryClient = useQueryClient()
+
   return useMutation({
     mutationFn: async (query: ILikeLink['query']) => {
       const response = await apiClient.delete(`/api/links/${query.linkId}/like`)
       return response
     },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.LINKS, spaceId] })
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.POPULAR_LINKS] })
+    },
     onError: (error: Error) => {
       console.log(error)
     },