From 4981897cfa37beb7d113efe4af294d6144be8062 Mon Sep 17 00:00:00 2001
From: Leejin-Yang <ejin1996@gmail.com>
Date: Tue, 19 Mar 2024 23:42:04 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CategoryFoodList/categoryFoodList.css.ts      |  1 +
 .../Common/CategoryItem/CategoryItem.tsx          | 15 ++++++++++++---
 .../Common/CategoryItem/categoryItem.css.ts       |  6 +++++-
 .../CategoryStoreList/CategoryStoreList.tsx       |  9 ++++++++-
 .../CategoryStoreList/categoryStoreList.css.ts    |  5 +++--
 src/pages/HomePage/homePage.css.ts                |  1 +
 src/pages/ProductPage/ProductPage.tsx             |  2 +-
 7 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/Common/CategoryFoodList/categoryFoodList.css.ts b/src/components/Common/CategoryFoodList/categoryFoodList.css.ts
index 6334456b..ae848bd2 100644
--- a/src/components/Common/CategoryFoodList/categoryFoodList.css.ts
+++ b/src/components/Common/CategoryFoodList/categoryFoodList.css.ts
@@ -3,5 +3,6 @@ import { style } from '@vanilla-extract/css';
 export const categoryFoodListWrapper = style({
   display: 'flex',
   gap: 10,
+  padding: '0 20px',
   overflowX: 'auto',
 });
diff --git a/src/components/Common/CategoryItem/CategoryItem.tsx b/src/components/Common/CategoryItem/CategoryItem.tsx
index e91c6c74..41b99ff2 100644
--- a/src/components/Common/CategoryItem/CategoryItem.tsx
+++ b/src/components/Common/CategoryItem/CategoryItem.tsx
@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import { useNavigate } from 'react-router-dom';
 
-import { imageWrapper, categoryImage, categoryName, circle } from './categoryItem.css';
+import { imageWrapper, categoryImage, categoryName, circle, bordered } from './categoryItem.css';
 
 import { PATH } from '@/constants/path';
 import { useGA } from '@/hooks/common';
@@ -14,10 +14,19 @@ interface CategoryItemProps {
   height?: number;
   isCircular?: boolean;
   hasName?: boolean;
+  isBordered?: boolean;
   categoryType: 'food' | 'store';
 }
 
-const CategoryItem = ({ category, width, height, categoryType, hasName, isCircular }: CategoryItemProps) => {
+const CategoryItem = ({
+  category,
+  width,
+  height,
+  categoryType,
+  hasName = false,
+  isCircular = false,
+  isBordered = false,
+}: CategoryItemProps) => {
   const navigate = useNavigate();
   const { selectCategory } = useCategoryActionContext();
   const { id: categoryId, name, image } = category;
@@ -37,7 +46,7 @@ const CategoryItem = ({ category, width, height, categoryType, hasName, isCircul
 
   return (
     <button type="button" onClick={() => handleCategoryItemClick(categoryId)}>
-      <div className={imageWrapper}>
+      <div className={cx(imageWrapper, { [bordered]: isBordered })}>
         <img
           className={cx(categoryImage, { [circle]: isCircular })}
           src={image}
diff --git a/src/components/Common/CategoryItem/categoryItem.css.ts b/src/components/Common/CategoryItem/categoryItem.css.ts
index e165e811..a7b3b32f 100644
--- a/src/components/Common/CategoryItem/categoryItem.css.ts
+++ b/src/components/Common/CategoryItem/categoryItem.css.ts
@@ -4,7 +4,7 @@ export const imageWrapper = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  borderRadius: '10px',
+  borderRadius: 6,
 });
 
 export const categoryImage = style({
@@ -15,6 +15,10 @@ export const circle = style({
   borderRadius: '50%',
 });
 
+export const bordered = style({
+  border: '1px solid #e6e6e6',
+});
+
 export const categoryName = style({
   marginTop: 6,
   fontSize: '1.2rem',
diff --git a/src/components/Common/CategoryStoreList/CategoryStoreList.tsx b/src/components/Common/CategoryStoreList/CategoryStoreList.tsx
index f58cd984..e027e026 100644
--- a/src/components/Common/CategoryStoreList/CategoryStoreList.tsx
+++ b/src/components/Common/CategoryStoreList/CategoryStoreList.tsx
@@ -7,6 +7,7 @@ import { useCategoryStoreQuery } from '@/hooks/queries/product';
 interface CategoryStoreListProps {
   hasName?: boolean;
   isCircular?: boolean;
+  isBordered?: boolean;
   location?: 'home' | 'products';
 }
 
@@ -23,7 +24,12 @@ const imgSize = {
   },
 };
 
-const CategoryStoreList = ({ hasName = false, isCircular = false, location = 'home' }: CategoryStoreListProps) => {
+const CategoryStoreList = ({
+  hasName = false,
+  isCircular = false,
+  isBordered = false,
+  location = 'home',
+}: CategoryStoreListProps) => {
   const { data: categories } = useCategoryStoreQuery();
 
   return (
@@ -37,6 +43,7 @@ const CategoryStoreList = ({ hasName = false, isCircular = false, location = 'ho
           categoryType={categoryType}
           hasName={hasName}
           isCircular={isCircular}
+          isBordered={isBordered}
         />
       ))}
     </div>
diff --git a/src/components/Common/CategoryStoreList/categoryStoreList.css.ts b/src/components/Common/CategoryStoreList/categoryStoreList.css.ts
index 3032a9b5..10995f5d 100644
--- a/src/components/Common/CategoryStoreList/categoryStoreList.css.ts
+++ b/src/components/Common/CategoryStoreList/categoryStoreList.css.ts
@@ -2,6 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const categoryStoreListWrapper = style({
   display: 'flex',
-  gap: 10,
-  justifyContent: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  padding: '0 20px',
 });
diff --git a/src/pages/HomePage/homePage.css.ts b/src/pages/HomePage/homePage.css.ts
index 42b606da..2ca08bfd 100644
--- a/src/pages/HomePage/homePage.css.ts
+++ b/src/pages/HomePage/homePage.css.ts
@@ -19,6 +19,7 @@ export const categoryListWrapper = style({
   alignItems: 'center',
   justifyContent: 'center',
   gap: 20,
+  width: '100%',
 });
 
 export const rankingInfoWrapper = style({
diff --git a/src/pages/ProductPage/ProductPage.tsx b/src/pages/ProductPage/ProductPage.tsx
index 6022a8c0..1122ecf5 100644
--- a/src/pages/ProductPage/ProductPage.tsx
+++ b/src/pages/ProductPage/ProductPage.tsx
@@ -40,7 +40,7 @@ export const ProductPage = () => {
         {selectedTabMenu === TAB_MENUS[0].value ? (
           <CategoryFoodList location="products" hasName isCircular />
         ) : (
-          <CategoryStoreList location="products" hasName />
+          <CategoryStoreList location="products" hasName isBordered />
         )}
       </Suspense>
       <Spacing size={12} />