From 5721558ec9db3ec7d7b06432c43ca6a25720a48e Mon Sep 17 00:00:00 2001
From: TaeeunKim <xodms0309@naver.com>
Date: Sat, 13 Apr 2024 12:19:39 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20ProductOverviewItem=20->=20ProductO?=
 =?UTF-8?q?VerviewList=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20?=
 =?UTF-8?q?=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Product/ProductOverviewList/ProductOverviewList.tsx  | 6 +++---
 .../ProductSearchListPage/ProductSearchListPage.tsx      | 2 +-
 src/pages/RecipeDetailPage/RecipeDetailPage.tsx          | 9 ++-------
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/Product/ProductOverviewList/ProductOverviewList.tsx b/src/components/Product/ProductOverviewList/ProductOverviewList.tsx
index 66d615cb..eb91ba36 100644
--- a/src/components/Product/ProductOverviewList/ProductOverviewList.tsx
+++ b/src/components/Product/ProductOverviewList/ProductOverviewList.tsx
@@ -8,10 +8,10 @@ import type { Product } from '@/types/product';
 
 interface ProductOverviewListProps {
   products: Product[];
-  isSearchPage?: boolean;
+  hasBorder?: boolean;
 }
 
-const ProductOverviewList = ({ products, isSearchPage = false }: ProductOverviewListProps) => {
+const ProductOverviewList = ({ products, hasBorder = false }: ProductOverviewListProps) => {
   return (
     <ul className={container}>
       {products.map(({ id, image, name, price, averageRating }) => (
@@ -19,7 +19,7 @@ const ProductOverviewList = ({ products, isSearchPage = false }: ProductOverview
           <Link to={`${PATH.PRODUCT_LIST}/detail/${id}`}>
             <ProductOverviewItem image={image} name={name} price={price} rate={averageRating} />
           </Link>
-          {isSearchPage && (
+          {hasBorder && (
             <>
               <div style={{ height: '20px' }} />
               <hr style={{ border: '0.5px solid #e6e6e6' }} />
diff --git a/src/pages/ProductSearchListPage/ProductSearchListPage.tsx b/src/pages/ProductSearchListPage/ProductSearchListPage.tsx
index 7db784e5..828710b0 100644
--- a/src/pages/ProductSearchListPage/ProductSearchListPage.tsx
+++ b/src/pages/ProductSearchListPage/ProductSearchListPage.tsx
@@ -26,7 +26,7 @@ export const ProductSearchListPage = () => {
     <>
       <PageHeader title={`'${searchQuery}'이/가 포함된 상품`} hasBackLink />
       <div className={container}>
-        <ProductOverviewList products={products} isSearchPage />
+        <ProductOverviewList products={products} hasBorder />
       </div>
       <div ref={scrollRef} aria-hidden />
     </>
diff --git a/src/pages/RecipeDetailPage/RecipeDetailPage.tsx b/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
index e1a2baca..7df2ae24 100644
--- a/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
+++ b/src/pages/RecipeDetailPage/RecipeDetailPage.tsx
@@ -21,7 +21,7 @@ import {
 
 import { ErrorBoundary, ErrorComponent, Loading, SectionTitle, SvgIcon, Text } from '@/components/Common';
 import { MemberImage } from '@/components/Members';
-import { ProductOverviewItem } from '@/components/Product';
+import { ProductOverviewList } from '@/components/Product';
 import { CommentForm, CommentList, RecipeFavoriteButton } from '@/components/Recipe';
 import { useRecipeDetailQuery } from '@/hooks/queries/recipe';
 import { vars } from '@/styles/theme.css';
@@ -115,12 +115,7 @@ export const RecipeDetailPage = () => {
       </section>
       <BottomSheet isOpen={isOpen} isClosing={isClosing} close={handleCloseBottomSheet}>
         <div className={bottomSheetWrapper}>
-          {products.map(({ name, image, price, averageRating }) => (
-            <>
-              <ProductOverviewItem name={name} image={image} price={price} rate={averageRating} />
-              <hr style={{ height: '1px', background: '#e6e6e6', border: 0 }} />
-            </>
-          ))}
+          <ProductOverviewList products={products} hasBorder />
         </div>
       </BottomSheet>
     </>