- {data?.list.map((epigram: RecentEpigramType) => (
+ {epigrams.map((epigram: RecentEpigramType) => (
handleEpigramClick(epigram.id)}
@@ -40,7 +61,12 @@ function RecentEpigrams() {
))}
- {data && limit < data.totalCount && (
+ {isLoadingMore && (
+
+
+
+ )}
+ {!isLoadingMore && data?.nextCursor !== null && (
diff --git a/src/hooks/useGetRecentEpigrams.ts b/src/hooks/useGetRecentEpigrams.ts
index beaaa314..19f862f9 100644
--- a/src/hooks/useGetRecentEpigrams.ts
+++ b/src/hooks/useGetRecentEpigrams.ts
@@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query';
import getRecentEpigrams from '@/apis/getRecentEpigrams';
import { GetRecentEpigramsResponseType } from '@/schema/recentEpigram';
-const useGetRecentEpigrams = (limit: number) =>
+const useGetRecentEpigrams = ({ cursor, limit, enabled }: { cursor: number | null; limit: number; enabled: boolean }) =>
useQuery
({
- queryKey: ['recentEpigrams', limit],
- queryFn: () => getRecentEpigrams(limit),
+ queryKey: ['recentEpigrams', cursor, limit],
+ queryFn: () => getRecentEpigrams(cursor, limit),
+ enabled,
});
export default useGetRecentEpigrams;
diff --git a/src/schema/recentEpigram.ts b/src/schema/recentEpigram.ts
index 899fcc7f..fe664e60 100644
--- a/src/schema/recentEpigram.ts
+++ b/src/schema/recentEpigram.ts
@@ -18,7 +18,7 @@ const RecentEpigramSchema = z.object({
export const GetRecentEpigramsResponseSchema = z.object({
totalCount: z.number(),
- nextCursor: z.number(),
+ nextCursor: z.number().nullable(),
list: z.array(RecentEpigramSchema),
});