diff --git a/public/spinner.svg b/public/spinner.svg new file mode 100644 index 00000000..f65e5227 --- /dev/null +++ b/public/spinner.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/apis/getRecentComments.ts b/src/apis/getRecentComments.ts index 5f83fcca..53b48b40 100644 --- a/src/apis/getRecentComments.ts +++ b/src/apis/getRecentComments.ts @@ -1,9 +1,10 @@ import type { GetRecentCommentsResponseType } from '@/schema/recentcomment'; import httpClient from './index'; -const getRecentComments = async (limit: number): Promise => { +const getRecentComments = async (cursor: number, limit: number): Promise => { const response = await httpClient.get('/comments', { params: { + cursor, limit, }, }); diff --git a/src/components/main/RecentComment.tsx b/src/components/main/RecentComment.tsx index eefdad42..868b710b 100644 --- a/src/components/main/RecentComment.tsx +++ b/src/components/main/RecentComment.tsx @@ -1,25 +1,38 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import useGetRecentComments from '@/hooks/useGetRecentComments'; import CommentCard from '@/components/Card/CommentCard'; import type { CommentType } from '@/schema/recentcomment'; +import Image from 'next/image'; import LoadMoreButton from './LoadMoreButton'; +import spinner from '../../../public/spinner.svg'; function RecentComments() { const [comments, setComments] = useState([]); - const [limit, setLimit] = useState(3); - const { data, error, isLoading } = useGetRecentComments(limit); + const [cursor, setCursor] = useState(0); + const [limit, setLimit] = useState(3); + const [isLoadingMore, setIsLoadingMore] = useState(false); + const [shouldFetch, setShouldFetch] = useState(true); - React.useEffect(() => { - if (data?.list) { - setComments(data.list); + const { data, error, isLoading } = useGetRecentComments({ cursor, limit, enabled: shouldFetch }); + + useEffect(() => { + if (data) { + setComments((prevComments) => [...prevComments, ...data.list]); + if (data.list.length > 0) { + setCursor(data.list[data.list.length - 1].id); + } + setIsLoadingMore(false); + setShouldFetch(false); } }, [data]); - const handleLoadMore = () => { - setLimit((prevLimit) => prevLimit + 4); + const loadMore = () => { + setIsLoadingMore(true); + setLimit(4); + setShouldFetch(true); }; - if (isLoading) return

로딩 중...

; + if (isLoading && comments.length === 0) return

로딩 중...

; if (error) return

{error.message}

; return ( @@ -29,9 +42,14 @@ function RecentComments() { {comments.map((comment) => ( ))} - {data?.totalCount && comments.length < data.totalCount && ( -
- + {isLoadingMore && ( +
+ 로딩중 +
+ )} + {!isLoadingMore && data?.nextCursor !== null && ( +
+
)}
diff --git a/src/hooks/useGetRecentComments.ts b/src/hooks/useGetRecentComments.ts index 443938a9..40ce3824 100644 --- a/src/hooks/useGetRecentComments.ts +++ b/src/hooks/useGetRecentComments.ts @@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query'; import getRecentComments from '@/apis/getRecentComments'; import { GetRecentCommentsResponseType } from '@/schema/recentcomment'; -const useGetRecentComments = (limit: number) => +const useGetRecentComments = ({ cursor, limit, enabled }: { cursor: number; limit: number; enabled: boolean }) => useQuery({ - queryKey: ['recentComments', limit], - queryFn: () => getRecentComments(limit), + queryKey: ['recentComments', cursor, limit], + queryFn: () => getRecentComments(cursor, limit), + enabled, }); export default useGetRecentComments;