diff --git a/src/apis/getRecentComments.ts b/src/apis/getRecentComments.ts index c563173b..5f83fcca 100644 --- a/src/apis/getRecentComments.ts +++ b/src/apis/getRecentComments.ts @@ -1,10 +1,10 @@ import type { GetRecentCommentsResponseType } from '@/schema/recentcomment'; import httpClient from './index'; -const getRecentComments = async (): Promise => { +const getRecentComments = async (limit: number): Promise => { const response = await httpClient.get('/comments', { params: { - limit: 3, + limit, }, }); return response.data; diff --git a/src/components/main/RecentComment.tsx b/src/components/main/RecentComment.tsx index 85d18022..ad54549c 100644 --- a/src/components/main/RecentComment.tsx +++ b/src/components/main/RecentComment.tsx @@ -1,9 +1,23 @@ -import React from 'react'; +import React, { useState } from 'react'; import useGetRecentComments from '@/hooks/useGetRecentComments'; import CommentCard from '@/components/Card/CommentCard'; +import type { CommentType } from '@/schema/recentcomment'; +import LoadMoreButton from './LoadMoreButton'; function RecentComments() { - const { data, error, isLoading } = useGetRecentComments(); + const [comments, setComments] = useState([]); + const [limit, setLimit] = useState(3); + const { data, error, isLoading } = useGetRecentComments(limit); + + React.useEffect(() => { + if (data?.list) { + setComments(data.list); + } + }, [data]); + + const handleLoadMore = () => { + setLimit((prevLimit) => prevLimit + 4); + }; if (isLoading) return

로딩 중...

; if (error) return

{error.message}

; @@ -11,7 +25,10 @@ function RecentComments() { return (

최신 댓글

- {data?.list.map((comment) => )} + {comments.map((comment) => ( + + ))} + {data?.totalCount && comments.length < data.totalCount && }
); } diff --git a/src/hooks/useGetRecentComments.ts b/src/hooks/useGetRecentComments.ts index 45362e38..443938a9 100644 --- a/src/hooks/useGetRecentComments.ts +++ b/src/hooks/useGetRecentComments.ts @@ -2,10 +2,10 @@ import { useQuery } from '@tanstack/react-query'; import getRecentComments from '@/apis/getRecentComments'; import { GetRecentCommentsResponseType } from '@/schema/recentcomment'; -const useGetRecentComments = () => +const useGetRecentComments = (limit: number) => useQuery({ - queryKey: ['recentComments', 3], - queryFn: getRecentComments, + queryKey: ['recentComments', limit], + queryFn: () => getRecentComments(limit), }); export default useGetRecentComments;