From 5807c08172a1f8e2f1a699611a3d16a1946f45de Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Thu, 3 Apr 2025 21:35:17 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=A7=81=ED=81=AC=20=EC=A2=8B?= =?UTF-8?q?=EC=95=84=EC=9A=94=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=8B=9C=20=EC=BF=BC=EB=A6=AC=20=EB=AC=B4=ED=9A=A8=ED=99=94=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../PopularLinkList/PopularLinkList.tsx | 4 +-- src/components/common/LinkItem/LinkItem.tsx | 12 ++++----- .../common/LinkItem/hooks/useLikeLink.ts | 25 +++++-------------- src/components/common/LinkList/LinkList.tsx | 4 +-- src/services/link/useLink.ts | 16 ++++++++++-- 5 files changed, 29 insertions(+), 32 deletions(-) diff --git a/src/components/PopularLink/PopularLinkList/PopularLinkList.tsx b/src/components/PopularLink/PopularLinkList/PopularLinkList.tsx index 6a15ec64..a22a701e 100644 --- a/src/components/PopularLink/PopularLinkList/PopularLinkList.tsx +++ b/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" /> diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx index 2d5d0a39..cbe11507 100644 --- a/src/components/common/LinkItem/LinkItem.tsx +++ b/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 ( <> diff --git a/src/components/common/LinkItem/hooks/useLikeLink.ts b/src/components/common/LinkItem/hooks/useLikeLink.ts index 7bb76faa..fe09f582 100644 --- a/src/components/common/LinkItem/hooks/useLikeLink.ts +++ b/src/components/common/LinkItem/hooks/useLikeLink.ts @@ -1,25 +1,15 @@ -import { useCallback, useMemo, useState } from 'react' +import { useCallback, useMemo } 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(likeCountValue) - - const { mutate: deleteLikeLink } = useDeleteLikeLink() - const { mutate: postLikeLink } = usePostLikeLink() +const useLikeLink = ({ spaceId, linkId }: UseLikeLinkProps) => { + const { mutate: deleteLikeLink } = useDeleteLikeLink({ spaceId }) + const { mutate: postLikeLink } = usePostLikeLink({ spaceId }) const debounceUnLikeLink = useMemo( () => @@ -39,19 +29,16 @@ const useLikeLink = ({ const handleClickLike = useCallback( (isLike: boolean) => { - likeToggle() if (isLike) { - setLikeCount((prev) => prev - 1) debounceUnLikeLink() } else { - setLikeCount((prev) => prev + 1) debounceLikeLink() } }, - [likeToggle, debounceUnLikeLink, debounceLikeLink], + [debounceUnLikeLink, debounceLikeLink], ) - return { isLiked, likeCount, handleClickLike } + return { handleClickLike } } export default useLikeLink diff --git a/src/components/common/LinkList/LinkList.tsx b/src/components/common/LinkList/LinkList.tsx index 5a913d29..7a3de0c2 100644 --- a/src/components/common/LinkList/LinkList.tsx +++ b/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} diff --git a/src/services/link/useLink.ts b/src/services/link/useLink.ts index f26bf40a..521e9d01 100644 --- a/src/services/link/useLink.ts +++ b/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,6 +135,10 @@ 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) }, @@ -140,12 +146,18 @@ export const usePostLikeLink = () => { } // 링크 좋아요 취소 -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) }, From 95f816efdc04b812b310ec6dc45f4929e94d38f4 Mon Sep 17 00:00:00 2001 From: Yeongjun Kim Date: Thu, 3 Apr 2025 21:51:36 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EB=A7=81=ED=81=AC=20=EC=A2=8B?= =?UTF-8?q?=EC=95=84=EC=9A=94=20=EB=B2=84=ED=8A=BC=EC=97=90=20=EB=94=94?= =?UTF-8?q?=EB=B0=94=EC=9A=B4=EC=8A=A4=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/LinkItem/hooks/useLikeLink.ts | 29 +++++++------------ 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/src/components/common/LinkItem/hooks/useLikeLink.ts b/src/components/common/LinkItem/hooks/useLikeLink.ts index fe09f582..b4cbe65e 100644 --- a/src/components/common/LinkItem/hooks/useLikeLink.ts +++ b/src/components/common/LinkItem/hooks/useLikeLink.ts @@ -1,6 +1,5 @@ -import { useCallback, useMemo } from 'react' +import { useCallback } from 'react' import { useDeleteLikeLink, usePostLikeLink } from '@/services/link/useLink' -import { debounce } from 'lodash' export interface UseLikeLinkProps { spaceId?: number @@ -11,31 +10,23 @@ const useLikeLink = ({ spaceId, linkId }: UseLikeLinkProps) => { const { mutate: deleteLikeLink } = useDeleteLikeLink({ spaceId }) const { mutate: postLikeLink } = usePostLikeLink({ spaceId }) - const debounceUnLikeLink = useMemo( - () => - debounce(async () => { - await deleteLikeLink({ linkId }) - }, 300), - [deleteLikeLink, linkId], - ) + const handleRemoveLike = useCallback(() => { + deleteLikeLink({ linkId }) + }, [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) => { if (isLike) { - debounceUnLikeLink() + handleRemoveLike() } else { - debounceLikeLink() + handleAddLike() } }, - [debounceUnLikeLink, debounceLikeLink], + [handleRemoveLike, handleAddLike], ) return { handleClickLike }