refactor: 화면에 보여지는 부분 custom hook으로 분리

frontend/src/components/Product/PBProductList/PBProductList.tsx

@@ -1,22 +1,20 @@
 import { Link } from '@fun-eat/design-system';
-import { Link as RouterLink, useLocation } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
 import PBProductItem from '../PBProductItem/PBProductItem';
 
 import { PATH } from '@/constants/path';
 import { useCategoryContext } from '@/hooks/context';
 import { useInfiniteProductsQuery } from '@/hooks/queries/product';
+import useDisplaySlice from '@/hooks/useDisplaySlice';
 
 const PBProductList = () => {
-  const location = useLocation();
-  const isRootPath = location.pathname === '/';
-
   const { categoryIds } = useCategoryContext();
 
   const { data: pbPRoductListResponse } = useInfiniteProductsQuery(categoryIds.store);
   const pbProductList = pbPRoductListResponse?.pages.flatMap((page) => page.products);
-  const pbProductsToDisplay = isRootPath ? pbProductList?.slice(0, 10) : pbProductList;
+  const pbProductsToDisplay = useDisplaySlice(PATH.HOME, pbProductList, 10);
 
   return (
     <PBProductListContainer>

frontend/src/components/Product/ProductList/ProductList.tsx

@@ -1,6 +1,6 @@
 import { Link } from '@fun-eat/design-system';
 import { useRef } from 'react';
-import { Link as RouterLink, useLocation } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
 import ProductItem from '../ProductItem/ProductItem';
@@ -9,6 +9,7 @@ import { PRODUCT_SORT_OPTIONS } from '@/constants';
 import { PATH } from '@/constants/path';
 import { useCategoryContext } from '@/hooks/context';
 import { useInfiniteProductsQuery } from '@/hooks/queries/product';
+import useDisplaySlice from '@/hooks/useDisplaySlice';
 import useIntersectionObserver from '@/hooks/useIntersectionObserver';
 import useSortOption from '@/hooks/useSortOption';
 import type { CategoryVariant } from '@/types/common';
@@ -18,9 +19,6 @@ interface ProductListProps {
 }
 
 const ProductList = ({ category }: ProductListProps) => {
-  const location = useLocation();
-  const isRootPath = location.pathname === '/';
-
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const { selectedOption } = useSortOption(PRODUCT_SORT_OPTIONS[0]);
@@ -29,7 +27,7 @@ const ProductList = ({ category }: ProductListProps) => {
 
   const { fetchNextPage, hasNextPage, data } = useInfiniteProductsQuery(categoryIds[category], selectedOption.value);
   const productList = data?.pages.flatMap((page) => page.products);
-  const productsToDisplay = isRootPath ? productList?.slice(0, 2) : productList;
+  const productsToDisplay = useDisplaySlice(PATH.HOME, productList);
 
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
 

frontend/src/components/Rank/ProductRankingList/ProductRankingList.tsx

@@ -1,15 +1,13 @@
 import { Spacing } from '@fun-eat/design-system';
-import { useLocation } from 'react-router-dom';
 
 import { ProductOverviewItem } from '@/components/Product';
+import { PATH } from '@/constants/path';
 import { useProductRankingQuery } from '@/hooks/queries/rank';
+import useDisplaySlice from '@/hooks/useDisplaySlice';
 
 const ProductRankingList = () => {
-  const location = useLocation();
-  const isRootPath = location.pathname === '/';
-
   const { data: productRankings } = useProductRankingQuery();
-  const productsToDisplay = isRootPath ? productRankings?.products.slice(0, 3) : productRankings?.products;
+  const productsToDisplay = useDisplaySlice(PATH.HOME, productRankings?.products, 3);
 
   return (
     <ul>

frontend/src/components/Rank/ReviewRankingList/ReviewRankingList.tsx

@@ -1,16 +1,14 @@
-import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 import ReviewRankingItem from '../ReviewRankingItem/ReviewRankingItem';
 
+import { PATH } from '@/constants/path';
 import { useReviewRankingQuery } from '@/hooks/queries/rank';
+import useDisplaySlice from '@/hooks/useDisplaySlice';
 
 const ReviewRankingList = () => {
-  const location = useLocation();
-  const isRootPath = location.pathname === '/';
-
   const { data: reviewRankings } = useReviewRankingQuery();
-  const reviewsToDisplay = isRootPath ? reviewRankings?.reviews.slice(0, 3) : reviewRankings?.reviews;
+  const reviewsToDisplay = useDisplaySlice(PATH.HOME, reviewRankings?.reviews);
 
   return (
     <ReviewRankingListContainer>

frontend/src/hooks/useDisplaySlice.ts

@@ -0,0 +1,10 @@
+import { useLocation } from 'react-router-dom';
+
+const useDisplaySlice = <T>(path: string, data?: T[], limit = 2): T[] => {
+  const location = useLocation();
+  const isHomePage = location.pathname === path;
+
+  return isHomePage ? data?.slice(0, limit) || [] : data || [];
+};
+
+export default useDisplaySlice;