feat: 내 서랍장, 랭킹 페이지 무한 스크롤 구현

src/drawer/apis/getBookMarked.ts

@@ -1,9 +1,9 @@
 import { soomsilClient } from '@/apis';
 
-import { RankingRequestParams } from '../types/RankingRequestParams.type';
+import { ProductRequestParams } from '../types/ProductRequestParams.type';
 import { ProductResponses } from '../types/product.type';
 
-export const getBookmarked = async ({ responseType, page }: RankingRequestParams) => {
+export const getBookmarked = async ({ responseType, page }: ProductRequestParams) => {
   const response = await soomsilClient.get<ProductResponses>('/v2/drawer/my-bookmarked', {
     params: {
       responseType,

src/drawer/apis/getMyProduct.ts

@@ -1,9 +1,9 @@
 import { soomsilClient } from '@/apis';
 
-import { RankingRequestParams } from '../types/RankingRequestParams.type';
+import { ProductRequestParams } from '../types/ProductRequestParams.type';
 import { ProductResponses } from '../types/product.type';
 
-export const getMyProduct = async ({ responseType, page }: RankingRequestParams) => {
+export const getMyProduct = async ({ responseType, page }: ProductRequestParams) => {
   const response = await soomsilClient.get<ProductResponses>('/v2/drawer/my-registered', {
     params: {
       responseType,

src/drawer/apis/getNewRelease.ts

@@ -1,9 +1,9 @@
 import { soomsilClient } from '@/apis';
 
-import { RankingRequestParams } from '../types/RankingRequestParams.type';
+import { ProductRequestParams } from '../types/ProductRequestParams.type';
 import { ProductResponses } from '../types/product.type';
 
-export const getNewRelease = async ({ responseType, category, page }: RankingRequestParams) => {
+export const getNewRelease = async ({ responseType, category, page }: ProductRequestParams) => {
   const response = await soomsilClient.get<ProductResponses>('/v2/drawer/new-release', {
     params: {
       responseType,

src/drawer/apis/getRanking.ts

@@ -1,9 +1,9 @@
 import { soomsilClient } from '@/apis';
 
-import { RankingRequestParams } from '../types/RankingRequestParams.type';
+import { ProductRequestParams } from '../types/ProductRequestParams.type';
 import { ProductResponses } from '../types/product.type';
 
-export const getRanking = async ({ responseType, category, page }: RankingRequestParams) => {
+export const getRanking = async ({ responseType, category, page }: ProductRequestParams) => {
   const response = await soomsilClient.get<ProductResponses>('/v2/drawer/rank', {
     params: {
       responseType,

src/drawer/constants/page.constant.ts

@@ -0,0 +1 @@
+export const PRODUCTS_PER_PAGE = 21;

src/drawer/hooks/useGetBookMarked.ts

@@ -1,15 +1,29 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { InfiniteData, useSuspenseInfiniteQuery } from '@tanstack/react-query';
 
 import { getBookmarked } from '../apis/getBookMarked';
-import { RankingRequestParams } from '../types/RankingRequestParams.type';
+import { PRODUCTS_PER_PAGE } from '../constants/page.constant';
+import { ProductRequestParams } from '../types/ProductRequestParams.type';
+import { ProductResponses, ProductResult } from '../types/product.type';
 
-export const useGetBookmarked = ({ responseType, page }: RankingRequestParams) => {
-  return useSuspenseQuery({
-    queryKey: ['bookmarked', { responseType, page }],
-    queryFn: () => {
-      return getBookmarked({ responseType, page });
+type ProductRequestParamsWithoutPage = Omit<ProductRequestParams, 'page'>;
+
+export const useGetBookmarked = ({ responseType }: ProductRequestParamsWithoutPage) => {
+  return useSuspenseInfiniteQuery<
+    ProductResponses[],
+    Error,
+    InfiniteData<ProductResult[], number>,
+    string[],
+    number
+  >({
+    queryKey: ['bookmarked', responseType],
+    queryFn: ({ pageParam }) =>
+      getBookmarked({ responseType, page: pageParam }).then((data) => data.productList) as Promise<
+        ProductResponses[]
+      >,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      return lastPage.length === PRODUCTS_PER_PAGE ? allPages.length : undefined;
     },
     retry: false,
-    select: (data) => data.productList,
   });
 };

src/drawer/hooks/useGetMyRegistered.ts

@@ -1,15 +1,29 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { InfiniteData, useSuspenseInfiniteQuery } from '@tanstack/react-query';
 
 import { getMyProduct } from '../apis/getMyProduct';
-import { RankingRequestParams } from '../types/RankingRequestParams.type';
+import { PRODUCTS_PER_PAGE } from '../constants/page.constant';
+import { ProductRequestParams } from '../types/ProductRequestParams.type';
+import { ProductResponses, ProductResult } from '../types/product.type';
 
-export const useGetMyRegistered = ({ responseType, page }: RankingRequestParams) => {
-  return useSuspenseQuery({
-    queryKey: ['myRegistered', { responseType, page }],
-    queryFn: () => {
-      return getMyProduct({ responseType, page });
+type ProductRequestParamsWithoutPage = Omit<ProductRequestParams, 'page'>;
+
+export const useGetMyRegistered = ({ responseType }: ProductRequestParamsWithoutPage) => {
+  return useSuspenseInfiniteQuery<
+    ProductResponses[],
+    Error,
+    InfiniteData<ProductResult[], number>,
+    string[],
+    number
+  >({
+    queryKey: ['myRegistered', responseType],
+    queryFn: ({ pageParam }) =>
+      getMyProduct({ responseType, page: pageParam }).then((data) => data.productList) as Promise<
+        ProductResponses[]
+      >,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      return lastPage.length === PRODUCTS_PER_PAGE ? allPages.length : undefined;
     },
     retry: false,
-    select: (data) => data.productList,
   });
 };

src/drawer/hooks/useGetNewRelease.ts

@@ -1,19 +1,31 @@
-import { useQuery } from '@tanstack/react-query';
+import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
 
 import { getNewRelease } from '@/drawer/apis/getNewRelease';
 
-import { RankingRequestParams } from '../types/RankingRequestParams.type';
+import { PRODUCTS_PER_PAGE } from '../constants/page.constant';
+import { ProductRequestParams } from '../types/ProductRequestParams.type';
+import { ProductResponses, ProductResult } from '../types/product.type';
 
-export const useGetNewRelease = ({ responseType, category, page }: RankingRequestParams) => {
-  return useQuery({
-    queryKey: ['newReleases', { responseType, category, page }],
-    queryFn: () => {
-      return getNewRelease({
+type ProductRequestParamsWithoutPage = Omit<ProductRequestParams, 'page'>;
+
+export const useGetNewRelease = ({ responseType, category }: ProductRequestParamsWithoutPage) => {
+  return useInfiniteQuery<
+    ProductResponses[],
+    Error,
+    InfiniteData<ProductResult[], number>,
+    string[],
+    number
+  >({
+    queryKey: ['newReleases', responseType, category ?? ''],
+    queryFn: ({ pageParam }) =>
+      getNewRelease({
         responseType,
         category,
-        page,
-      });
+        page: pageParam,
+      }).then((data) => data.productList) as Promise<ProductResponses[]>,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      return lastPage.length === PRODUCTS_PER_PAGE ? allPages.length : undefined;
     },
-    select: (data) => data.productList,
   });
 };

src/drawer/hooks/useGetProductByProvider.ts

@@ -4,10 +4,9 @@ import { useRecoilValue } from 'recoil';
 import { CategoryState } from '@/drawer/recoil/CategoryState';
 
 import { getProductByProvider } from '../apis/getProductByProvider';
+import { PRODUCTS_PER_PAGE } from '../constants/page.constant';
 import { ProviderProductResponses } from '../types/product.type';
 
-const PRODUCTS_PER_PAGE = 21;
-
 export const useGetProductByProvider = ({ providerId }: { providerId: string }) => {
   const selectedCategory = useRecoilValue(CategoryState);
 

src/drawer/hooks/useGetStarRank.ts

@@ -1,18 +1,30 @@
-import { useQuery } from '@tanstack/react-query';
+import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
 
 import { getRanking } from '../apis/getRanking';
-import { RankingRequestParams } from '../types/RankingRequestParams.type';
+import { PRODUCTS_PER_PAGE } from '../constants/page.constant';
+import { ProductRequestParams } from '../types/ProductRequestParams.type';
+import { ProductResponses, ProductResult } from '../types/product.type';
 
-export const useGetStarRank = ({ responseType, category, page }: RankingRequestParams) => {
-  return useQuery({
-    queryKey: ['getRanking', { responseType, category, page }],
-    queryFn: () => {
-      return getRanking({
+type ProductRequestParamsWithoutPage = Omit<ProductRequestParams, 'page'>;
+
+export const useGetStarRank = ({ responseType, category }: ProductRequestParamsWithoutPage) => {
+  return useInfiniteQuery<
+    ProductResponses[],
+    Error,
+    InfiniteData<ProductResult[], number>,
+    string[],
+    number
+  >({
+    queryKey: ['getRanking', responseType, category ?? ''],
+    queryFn: ({ pageParam }) =>
+      getRanking({
         responseType,
         category,
-        page,
-      });
+        page: pageParam,
+      }).then((data) => data.productList) as Promise<ProductResponses[]>,
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      return lastPage.length === PRODUCTS_PER_PAGE ? allPages.length : undefined;
     },
-    select: (data) => data.productList,
   });
 };

src/drawer/pages/MyDrawer/MyDrawer.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useCallback, useRef } from 'react';
 
 import { useSearchParams } from 'react-router-dom';
 
@@ -16,15 +16,48 @@ export type TabType = 'STAR' | 'MYDRAWER';
 
 export const MyDrawer = () => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const { data: bookmarkedData } = useGetBookmarked({ responseType: 'WEB', page: 0 });
-  const { data: myProductData } = useGetMyRegistered({ responseType: 'WEB', page: 0 });
+
+  const {
+    data: bookmarkedData,
+    fetchNextPage: fetchNextBookmarkedPage,
+    hasNextPage: hasNextBookmarkedPage,
+    isLoading: isLoadingBookmarked,
+  } = useGetBookmarked({ responseType: 'WEB' });
+
+  const {
+    data: myProductData,
+    fetchNextPage: fetchNextMyProductPage,
+    hasNextPage: hasNextMyProductPage,
+    isLoading: isLoadingMyProduct,
+  } = useGetMyRegistered({ responseType: 'WEB' });
+
   const initialTab = searchParams.get('tab');
 
   const [currentTab, setCurrentTab] = useState<TabType>(
     isTabType(initialTab) ? initialTab : 'STAR'
   );
 
   const drawerData = currentTab === 'STAR' ? bookmarkedData : myProductData;
+  const fetchNextPage = currentTab === 'STAR' ? fetchNextBookmarkedPage : fetchNextMyProductPage;
+  const hasNextPage = currentTab === 'STAR' ? hasNextBookmarkedPage : hasNextMyProductPage;
+  const isLoading = currentTab === 'STAR' ? isLoadingBookmarked : isLoadingMyProduct;
+
+  const observer = useRef<IntersectionObserver>();
+
+  const lastElementRef = useCallback(
+    (node: HTMLDivElement) => {
+      if (isLoading) return;
+
+      if (observer.current) observer.current.disconnect();
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && hasNextPage) {
+          fetchNextPage();
+        }
+      });
+      if (node) observer.current.observe(node);
+    },
+    [isLoading, hasNextPage, fetchNextPage]
+  );
 
   function isTabType(tab: string | null): tab is TabType {
     return tab === 'STAR' || tab === 'MYDRAWER';
@@ -55,13 +88,14 @@ export const MyDrawer = () => {
         />
       </StyledTabWrapper>
       <Spacing direction={'vertical'} size={14} />
-      {drawerData.length > 0 ? (
+      {drawerData.pages[0].length === 0 ? (
+        <EmptyScreen type={currentTab} />
+      ) : (
         <>
           <StyledDescription>{TAB_DESCRIPTION[currentTab]}</StyledDescription>
-          <CardLayout data={drawerData} type={currentTab} />
+          <CardLayout data={drawerData.pages.flatMap((page) => page)} type={currentTab} />
+          <div ref={lastElementRef} />
         </>
-      ) : (
-        <EmptyScreen type={currentTab} />
       )}
     </StyledContainer>
   );

src/drawer/pages/NewRelease/NewRelease.tsx

@@ -1,3 +1,5 @@
+import { useCallback, useRef } from 'react';
+
 import { useRecoilValue } from 'recoil';
 
 import { CategoryDropdownMenu } from '@/drawer/components/Category/CategoryDropdownMenu/CategoryDropdownMenu';
@@ -20,11 +22,33 @@ import {
 
 export const NewRelease = () => {
   const selectedCategory = useRecoilValue(CategoryState);
-  const { data: newReleases } = useGetNewRelease({
+  const {
+    data: newReleases,
+    isLoading,
+    fetchNextPage,
+    hasNextPage,
+  } = useGetNewRelease({
     responseType: 'WEB',
     category: selectedCategory,
-    page: 0,
   });
+
+  const observer = useRef<IntersectionObserver>();
+
+  const lastElementRef = useCallback(
+    (node: HTMLDivElement) => {
+      if (isLoading) return;
+
+      if (observer.current) observer.current.disconnect();
+      observer.current = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting && hasNextPage) {
+          fetchNextPage();
+        }
+      });
+      if (node) observer.current.observe(node);
+    },
+    [isLoading, hasNextPage]
+  );
+
   const isSmallDesktop = useMediaQuery(SMALL_DESKTOP_MEDIA_QUERY);
 
   return (
@@ -41,18 +65,23 @@ export const NewRelease = () => {
           </StyledBetweenContainer>
           <StyledCardContainer>
             {newReleases &&
-              newReleases.map((product) => (
-                <BigDrawerCard
-                  key={product.productNo}
-                  link={`/drawer/services/${product.productNo}`}
-                  title={product.productTitle}
-                  body={product.productSubTitle}
-                  bookmarkCount={product.count}
-                  isBookmarked={product.isBookmarked}
-                  bigImgSrc={product.introductionImage[0]}
-                  smallImgSrc={product.mainImage}
-                />
-              ))}
+              newReleases.pages.flat().map((product, productIndex, flatArray) => {
+                const isLastProduct = productIndex === flatArray.length - 1;
+                return (
+                  <div key={product.productNo}>
+                    <BigDrawerCard
+                      link={`/drawer/services/${product.productNo}`}
+                      title={product.productTitle}
+                      body={product.productSubTitle}
+                      bookmarkCount={product.count}
+                      isBookmarked={product.isBookmarked}
+                      bigImgSrc={product.introductionImage[0]}
+                      smallImgSrc={product.mainImage}
+                    />
+                    {isLastProduct && <div ref={lastElementRef} />}
+                  </div>
+                );
+              })}
           </StyledCardContainer>
         </div>
       </StyledRankingContainer>