[Feat] 유저 페이지 Gathering, Archive List 구현

src/features/archive/archive.api.ts

@@ -1,5 +1,6 @@
 import type {
   getArchiveColorApiResponse,
+  GetArchiveUserListApiResponse,
   PatchArchiveOrderDTO,
   PostCommentApiResponse,
 } from './archive.dto';
@@ -85,10 +86,10 @@ export const getPopularArchive = () =>
 
 export const getUserArchiveList = (userId: number, page: number) =>
   api
-    .get<GetArchiveListApiResponse>(`/user/${userId}/archives`, {
+    .get<GetArchiveUserListApiResponse>(`/user/${userId}/archives`, {
       params: {
         size: 8,
-        page,
+        nextArchiveId: page ? page : undefined,
       },
     })
     .then(res => res.data);

src/features/archive/archive.dto.ts

@@ -98,4 +98,9 @@ export type GetArchiveListApiResponse = ApiResponse<{
   archives: ArchiveCardDTO[];
   slice: Meta;
 }>;
+export type GetArchiveUserListApiResponse = ApiResponse<{
+  archives: ArchiveCardDTO[];
+  hasNext: boolean;
+  nextArchiveId: number | null;
+}>;
 export type getArchiveColorApiResponse = ApiResponse<ColorCountDTO>;

src/features/archive/archive.hook.ts

@@ -29,6 +29,7 @@ import type {
   PatchArchiveOrderDTO,
   CommentsPageDTO,
   ArchivePageDTO,
+  GetArchiveUserListApiResponse,
 } from './archive.dto';
 import type { Color } from './colors.type';
 
@@ -74,8 +75,14 @@ export const useComments = (archiveId: number) => {
   return useCustomInfiniteQuery<GetCommentsApiResponse, Comment, Error>(
     ['/archive', archiveId, 'comment'],
     ({ pageParam }) => getComments(archiveId, 10, pageParam),
-    10,
     'comments',
+    (lastPage, allPages) => {
+      if (Array.isArray(lastPage.data)) {
+        const isLastPage = lastPage.data.length < 9;
+        return isLastPage ? null : allPages.length;
+      }
+      return null;
+    },
   );
 };
 
@@ -269,8 +276,14 @@ export const useArchiveList = (sort: string, color: Color) => {
   return useCustomInfiniteQuery<GetArchiveListApiResponse, ArchiveCardDTO, Error>(
     ['/archive', 'list', sort, color],
     ({ pageParam }) => getArchiveList(sort, pageParam, color === 'DEFAULT' ? null : color),
-    9,
     'archives',
+    (lastPage, allPages) => {
+      if (Array.isArray(lastPage.data!['archives'])) {
+        const isLastPage = lastPage.data!['archives']?.length < 9;
+        return isLastPage ? null : allPages.length;
+      }
+      return null;
+    },
     true,
   );
 };
@@ -279,8 +292,14 @@ export const useSearchArchive = (searchKeyword: string) => {
   return useCustomInfiniteQuery<GetArchiveListApiResponse, ArchiveCardDTO, Error>(
     ['/archive', 'list', 'search', searchKeyword],
     ({ pageParam }) => getSearchArchive(searchKeyword, pageParam),
-    9,
     'archives',
+    (lastPage, allPages) => {
+      if (Array.isArray(lastPage.data!['archives'])) {
+        const isLastPage = lastPage.data!['archives']?.length < 9;
+        return isLastPage ? null : allPages.length;
+      }
+      return null;
+    },
     true,
   );
 };
@@ -289,8 +308,14 @@ export const useLikeArchiveList = () => {
   return useCustomInfiniteQuery<GetArchiveListApiResponse, ArchiveCardDTO, Error>(
     ['/user', 'list', 'me', 'like'],
     ({ pageParam }) => getLikeArchiveList(pageParam),
-    9,
     'archives',
+    (lastPage, allPages) => {
+      if (Array.isArray(lastPage.data!['archives'])) {
+        const isLastPage = lastPage.data!['archives']?.length < 9;
+        return isLastPage ? null : allPages.length;
+      }
+      return null;
+    },
     true,
   );
 };
@@ -436,11 +461,16 @@ export const useUpdateArchiveOrder = () => {
 };
 
 export const useUserArchiveList = (userId: number) =>
-  useCustomInfiniteQuery<GetArchiveListApiResponse, ArchiveCardDTO, Error>(
+  useCustomInfiniteQuery<GetArchiveUserListApiResponse, ArchiveCardDTO, Error>(
     ['/user', userId, 'archive', 'list'],
     ({ pageParam }) => getUserArchiveList(userId, pageParam),
-    8,
     'archives',
+    lastPage => {
+      if (!lastPage.data?.hasNext) {
+        return undefined;
+      }
+      return lastPage.data.nextArchiveId ?? undefined;
+    },
     true,
   );
 

src/features/gathering/api/gathering.api.ts

@@ -1,4 +1,8 @@
-import type { GatheringPageResponse, GatheringListParams } from '../model/dto/gathering.dto';
+import type {
+  GatheringPageResponse,
+  GatheringListParams,
+  UserGatheringPageResponse,
+} from '../model/dto/gathering.dto';
 import type {
   GatheringDetailResponse,
   CreateGatheringRequest,
@@ -63,7 +67,15 @@ export const gatheringApi = {
   completeGathering: async (gatheringId: string): Promise<void> => {
     await api.patch(`/gathering/${gatheringId}`);
   },
-
+  getUserGathering: (userId: number, nextGatheringId: number) =>
+    api
+      .get<UserGatheringPageResponse>(`/user/${userId}/gatherings`, {
+        params: {
+          ...(nextGatheringId && { nextGatheringId }),
+          size: 8,
+        },
+      })
+      .then(res => res.data),
   // 좋아요한 게더링 목록 조회 추가
   getGatheringLikeList: async (params: {
     size: number;

src/features/gathering/lib/hooks/useUserGathering.ts

@@ -0,0 +1,18 @@
+import { gatheringApi } from '../../api/gathering.api';
+import type { GatheringItem, UserGatheringPageResponse } from '../../model';
+
+import { useCustomInfiniteQuery } from '@/shared/hook';
+
+export const useUserGathering = (userId: number) =>
+  useCustomInfiniteQuery<UserGatheringPageResponse, GatheringItem, Error>(
+    ['/user', userId, 'gathering', 'list'],
+    ({ pageParam }) => gatheringApi.getUserGathering(userId, pageParam),
+    'gatherings',
+    lastPage => {
+      if (!lastPage.data.hasNext) {
+        return undefined;
+      }
+      return lastPage.data.nextLikeId ?? undefined;
+    },
+    true,
+  );

src/features/gathering/model/dto/gathering.dto.ts

@@ -50,6 +50,7 @@ export interface GatheringPageResponse {
   };
   timeStamp: string;
 }
+
 export interface GatheringListParams {
   page: number;
   size: number;
@@ -63,3 +64,11 @@ export interface GatheringListParams {
   contact?: GatheringContactType;
 }
 //
+export interface UserGatheringPageResponse {
+  data: {
+    gatherings: GatheringItem[];
+    hasNext: boolean;
+    nextLikeId: number | null;
+  };
+  timeStamp: string;
+}

src/shared/hook/useCustomInfiniteQuery.ts

@@ -1,3 +1,4 @@
+import type { GetNextPageParamFunction } from '@tanstack/react-query';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import throttle from 'lodash-es/throttle';
 import { useMemo, useEffect } from 'react';
@@ -12,22 +13,16 @@ export const useCustomInfiniteQuery = <
 >(
   queryKey: (string | number)[],
   queryFn: (context: { pageParam: number }) => Promise<TData>,
-  pageSize: number,
   dataKey: string,
+  getNextPageParam: GetNextPageParamFunction<unknown, TData>,
   enabled: boolean = false,
   staleTime: number = 0,
 ) => {
   const { data, fetchNextPage, isLoading, isError, isFetchingNextPage, refetch, isPending } =
     useInfiniteQuery<TData, TError>({
       queryKey,
       queryFn: ({ pageParam = 0 }) => queryFn({ pageParam: pageParam as number }),
-      getNextPageParam: (lastPage, allPages) => {
-        if (Array.isArray(lastPage.data[dataKey])) {
-          const isLastPage = lastPage.data[dataKey]?.length < pageSize;
-          return isLastPage ? null : allPages.length;
-        }
-        return null;
-      },
+      getNextPageParam,
       initialPageParam: 0,
       enabled: enabled,
       staleTime,

src/widgets/UserContents/UserContents.tsx

@@ -2,23 +2,25 @@ import styles from './UserContents.module.scss';
 import { ArchiveGrid } from '../ArchiveGrid';
 //import { GatheringGrid } from '../GatheringGrid';
 import { ContentsTab } from './ContentsTab';
+import { GatheringGrid } from '../GatheringGrid';
 import { useUserTab } from './hook/useUserTab';
 
 import type { ColorCountDTO } from '@/features';
-import { ColorMap, useMyArchiveList, useUserArchiveColors } from '@/features';
+import { ColorMap, useUserArchiveColors, useUserArchiveList } from '@/features';
 //import type { GatheringItemDto } from '@/features/gathering/model/gathering.dto';
+import { useUserGathering } from '@/features/gathering/lib/hooks/useUserGathering';
 import { Loader } from '@/shared/ui';
 import { PieChart } from '@/shared/ui/Chart/PieChart';
 
-interface ArchiveContentProps {
+interface ContentProps {
   userId: number;
 }
 
-const ArchiveContent = ({ userId }: ArchiveContentProps) => {
-  const { data: archives, isPending } = useMyArchiveList();
+const ArchiveContent = ({ userId }: ContentProps) => {
+  const { items: archives, isFetchingNextPage, isPending, ref } = useUserArchiveList(userId);
   const { data: colorData, isPending: isColorPending } = useUserArchiveColors(userId);
 
-  if (!colorData?.data || isColorPending || isPending || !archives?.data) {
+  if (!colorData?.data || isColorPending || isPending) {
     return <Loader />;
   }
 
@@ -38,13 +40,29 @@ const ArchiveContent = ({ userId }: ArchiveContentProps) => {
           <PieChart data={convertToChartData(colorData.data)} />
         </div>
       </div>
-      <ArchiveGrid archives={archives?.data?.archives} />
+      <ArchiveGrid archives={archives} isMine />
+      <div ref={ref}>{isFetchingNextPage && <Loader />}</div>
+    </div>
+  );
+};
+
+const GatheringContent = ({ userId }: ContentProps) => {
+  const { items: gatherings, isFetchingNextPage, isPending, ref } = useUserGathering(userId);
+  console.log(gatherings);
+  if (isPending) {
+    return <Loader />;
+  }
+
+  return (
+    <div>
+      <GatheringGrid items={gatherings} />
+      <div ref={ref}>{isFetchingNextPage && <Loader />}</div>
     </div>
   );
 };
 
 const ContentComponents = {
-  gathering: ArchiveContent,
+  gathering: GatheringContent,
   archive: ArchiveContent,
 };