feat: Provider 페이지에 무한 스크롤 적용

yourssu · May 21, 2024 · 5c43c2a · 5c43c2a
1 parent 5effc83
commit 5c43c2a
Showing 1 changed file with 23 additions and 8 deletions.
diff --git a/src/drawer/pages/Provider/Provider.tsx b/src/drawer/pages/Provider/Provider.tsx
@@ -6,7 +6,9 @@ import { RankingCategory } from '@/drawer/components/Category/RankingCategory';
 import { EmptyScreen } from '@/drawer/components/EmptyScreen/EmptyScreen';
 import { SMALL_DESKTOP_MEDIA_QUERY } from '@/drawer/constants/mobileview.constant';
 import { useGetProductByProvider } from '@/drawer/hooks/useGetProductByProvider';
+import { ProviderProductResponses } from '@/drawer/types/product.type';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useScrollObserve } from '@/hooks/useScrollObserve';
 
 import {
   StyledDescription,
@@ -19,25 +21,38 @@ export const Provider = () => {
   const isSmallDesktop = useMediaQuery(SMALL_DESKTOP_MEDIA_QUERY);
 
   const { providerId } = useParams();
-
-  const { data } = useGetProductByProvider({
+  const { data, isPending, fetchNextPage, hasNextPage } = useGetProductByProvider({
     providerId: String(providerId),
   });
+  const providerName = data.pages[0].providerName;
+
+  const { lastElementRef } = useScrollObserve<ProviderProductResponses>({
+    isPending,
+    fetchNextPage,
+    hasNextPage,
+  });
 
   return (
     <StyledContainer>
       {!isSmallDesktop && <RankingCategory />}
       <StyledProviderContainer $isSmallDesktop={isSmallDesktop}>
         {isSmallDesktop && <CategoryDropdownMenu />}
         <div>
-          <StyledProviderName>{data.providerName}</StyledProviderName>
+          <StyledProviderName>{providerName}</StyledProviderName>
           <StyledDescription>개발자의 서비스를 확인해보세요.</StyledDescription>
         </div>
-        {data.products.length > 0 ? (
-          <CardLayout data={data.products} type={'PROVIDER'} />
-        ) : (
-          <EmptyScreen type={'PROVIDER'} />
-        )}
+        {data.pages.map((page, index) => {
+          if (page.products.length === 0) {
+            return <EmptyScreen key={'empty'} type={'PROVIDER'} />;
+          }
+
+          return (
+            <div key={providerName + index}>
+              <CardLayout data={page.products} type={'PROVIDER'} />
+              <div ref={lastElementRef} />
+            </div>
+          );
+        })}
       </StyledProviderContainer>
     </StyledContainer>
   );