From fe604427c2a266190ffb545286726ae1d6377563 Mon Sep 17 00:00:00 2001
From: TaeeunKim <xodms0309@naver.com>
Date: Thu, 14 Sep 2023 15:58:14 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=EC=9D=84=20ProductList=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Product/ProductList/ProductList.tsx       | 22 +++++++++----
 .../src/hooks/common/useScrollRestoration.ts  |  6 +++-
 frontend/src/pages/ProductListPage.tsx        | 31 ++++---------------
 3 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/Product/ProductList/ProductList.tsx b/frontend/src/components/Product/ProductList/ProductList.tsx
index 2afa5f995..40b492f73 100644
--- a/frontend/src/components/Product/ProductList/ProductList.tsx
+++ b/frontend/src/components/Product/ProductList/ProductList.tsx
@@ -20,6 +20,7 @@ interface ProductListProps {
 
 const ProductList = ({ category, isHomePage, selectedOption }: ProductListProps) => {
   const scrollRef = useRef<HTMLDivElement>(null);
+  const productListRef = useRef<HTMLDivElement>(null);
 
   const { categoryIds } = useCategoryValueContext();
 
@@ -27,13 +28,17 @@ const ProductList = ({ category, isHomePage, selectedOption }: ProductListProps)
     categoryIds[category],
     selectedOption?.value ?? 'reviewCount,desc'
   );
+
+  useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
+
+  useScrollRestoration(categoryIds[category], productListRef);
+
   const productList = data.pages.flatMap((page) => page.products);
   const productsToDisplay = displaySlice(isHomePage, productList);
 
-  useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
   return (
-    <>
-      <ProductListContainer>
+    <ProductListContainer ref={productListRef}>
+      <ProductListWrapper>
         {productsToDisplay.map((product) => (
           <li key={product.id}>
             <Link as={RouterLink} to={`${PATH.PRODUCT_LIST}/${category}/${product.id}`}>
@@ -41,14 +46,19 @@ const ProductList = ({ category, isHomePage, selectedOption }: ProductListProps)
             </Link>
           </li>
         ))}
-      </ProductListContainer>
+      </ProductListWrapper>
       <div ref={scrollRef} aria-hidden />
-    </>
+    </ProductListContainer>
   );
 };
 export default ProductList;
 
-const ProductListContainer = styled.ul`
+const ProductListContainer = styled.div`
+  height: calc(100% - 150px);
+  overflow-y: auto;
+`;
+
+const ProductListWrapper = styled.ul`
   display: flex;
   flex-direction: column;
 
diff --git a/frontend/src/hooks/common/useScrollRestoration.ts b/frontend/src/hooks/common/useScrollRestoration.ts
index c03001048..00e53598a 100644
--- a/frontend/src/hooks/common/useScrollRestoration.ts
+++ b/frontend/src/hooks/common/useScrollRestoration.ts
@@ -2,10 +2,11 @@ import type { RefObject } from 'react';
 import { useEffect } from 'react';
 
 import useTimeout from './useTimeout';
-import { useCategoryActionContext } from '../context';
+import { useCategoryActionContext, useCategoryValueContext } from '../context';
 
 const useScrollRestoration = (currentCategoryId: number, ref: RefObject<HTMLElement>) => {
   const { saveCurrentTabScroll } = useCategoryActionContext();
+  const { currentTabScroll } = useCategoryValueContext();
 
   const handleScroll = () => {
     if (!ref.current) return;
@@ -19,6 +20,9 @@ const useScrollRestoration = (currentCategoryId: number, ref: RefObject<HTMLElem
 
     ref.current.addEventListener('scroll', timeoutFn);
 
+    const scrollY = currentTabScroll[currentCategoryId];
+    ref.current.scrollTo(0, scrollY);
+
     return () => {
       ref.current?.removeEventListener('scroll', timeoutFn);
     };
diff --git a/frontend/src/pages/ProductListPage.tsx b/frontend/src/pages/ProductListPage.tsx
index 075a42459..ae32a6b29 100644
--- a/frontend/src/pages/ProductListPage.tsx
+++ b/frontend/src/pages/ProductListPage.tsx
@@ -1,6 +1,6 @@
 import { BottomSheet, Spacing, useBottomSheet } from '@fun-eat/design-system';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
-import { Suspense, useEffect, useRef } from 'react';
+import { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -17,8 +17,7 @@ import {
 import { ProductList } from '@/components/Product';
 import { PRODUCT_SORT_OPTIONS } from '@/constants';
 import { PATH } from '@/constants/path';
-import { useScrollRestoration, useSortOption } from '@/hooks/common';
-import { useCategoryValueContext } from '@/hooks/context';
+import { useSortOption } from '@/hooks/common';
 import { isCategoryVariant } from '@/types/common';
 
 const PAGE_TITLE = { food: '공통 상품', store: 'PB 상품' };
@@ -26,24 +25,13 @@ const PAGE_TITLE = { food: '공통 상품', store: 'PB 상품' };
 const ProductListPage = () => {
   const { category } = useParams();
 
-  if (!category || !isCategoryVariant(category)) {
-    return null;
-  }
-
   const { ref, isClosing, handleOpenBottomSheet, handleCloseBottomSheet } = useBottomSheet();
   const { selectedOption, selectSortOption } = useSortOption(PRODUCT_SORT_OPTIONS[0]);
   const { reset } = useQueryErrorResetBoundary();
 
-  const { categoryIds, currentTabScroll } = useCategoryValueContext();
-  const currentCategoryId = categoryIds[category];
-
-  const productListRef = useRef<HTMLDivElement>(null);
-  useScrollRestoration(currentCategoryId, productListRef);
-
-  useEffect(() => {
-    const scrollY = currentTabScroll[currentCategoryId];
-    productListRef.current?.scrollTo(0, scrollY);
-  }, [currentCategoryId]);
+  if (!category || !isCategoryVariant(category)) {
+    return null;
+  }
 
   return (
     <>
@@ -61,9 +49,7 @@ const ProductListPage = () => {
             <SortButtonWrapper>
               <SortButton option={selectedOption} onClick={handleOpenBottomSheet} />
             </SortButtonWrapper>
-            <ProductListWrapper ref={productListRef}>
-              <ProductList category={category} selectedOption={selectedOption} />
-            </ProductListWrapper>
+            <ProductList category={category} selectedOption={selectedOption} />
           </Suspense>
         </ErrorBoundary>
       </ProductListSection>
@@ -90,8 +76,3 @@ const SortButtonWrapper = styled.div`
   justify-content: flex-end;
   margin-top: 20px;
 `;
-
-const ProductListWrapper = styled.div`
-  height: calc(100% - 150px);
-  overflow-y: auto;
-`;