refactor: 스크롤 로직을 ProductList 컴포넌트로 이동

woowacourse-teams · Sep 14, 2023 · fe60442 · fe60442
1 parent a80dfed
commit fe60442
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 32 deletions.
diff --git a/frontend/src/components/Product/ProductList/ProductList.tsx b/frontend/src/components/Product/ProductList/ProductList.tsx
@@ -20,35 +20,45 @@ interface ProductListProps {
 
 const ProductList = ({ category, isHomePage, selectedOption }: ProductListProps) => {
   const scrollRef = useRef<HTMLDivElement>(null);
+  const productListRef = useRef<HTMLDivElement>(null);
 
   const { categoryIds } = useCategoryValueContext();
 
   const { fetchNextPage, hasNextPage, data } = useInfiniteProductsQuery(
     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}`}>
               <ProductItem product={product} />
             </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
@@ -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
@@ -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,33 +17,21 @@ 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 상품' };
 
 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;
-`;