feat: 카테고리 스타일 수정

fun-eat · Mar 19, 2024 · 4981897 · 4981897
1 parent 49187ef
commit 4981897
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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} />