refactor: ProductOverviewItem -> ProductOVerviewList 컴포넌트로 교체

fun-eat · Apr 13, 2024 · 5721558 · 5721558
1 parent c8a671a
commit 5721558
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 11 deletions.
diff --git a/src/components/Product/ProductOverviewList/ProductOverviewList.tsx b/src/components/Product/ProductOverviewList/ProductOverviewList.tsx
@@ -8,18 +8,18 @@ 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 }) => (
         <li key={id}>
           <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
@@ -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
@@ -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>
     </>