From 5c43c2a26e915bb990c5e9aad1ac49bd5e2e16da Mon Sep 17 00:00:00 2001
From: nijuy <youjin6325@naver.com>
Date: Tue, 21 May 2024 22:23:22 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20`Provider`=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=97=90=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4=ED=81=AC?=
 =?UTF-8?q?=EB=A1=A4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/drawer/pages/Provider/Provider.tsx | 31 +++++++++++++++++++-------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/drawer/pages/Provider/Provider.tsx b/src/drawer/pages/Provider/Provider.tsx
index c29549b3..6fc2c914 100644
--- 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,10 +21,16 @@ 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>
@@ -30,14 +38,21 @@ export const Provider = () => {
       <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>
   );