feat: 상품 페이지 디자인 변경점 적용 (#99)

* feat: 상품 페이지 콘텐츠 간격 수정 * feat: 카테고리 목데이터 수정 * feat: 카테고리 스타일 수정 * feat: 섹션헤더 스타일 수정 * feat: 상품 페이지 스타일 수정
fun-eat · Apr 20, 2024 · 01a3d99 · 01a3d99
1 parent 4685b8b
commit 01a3d99
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 62 deletions.
diff --git a/src/components/Common/CategoryFoodList/CategoryFoodList.tsx b/src/components/Common/CategoryFoodList/CategoryFoodList.tsx
@@ -14,12 +14,12 @@ const categoryType = CATEGORY_TYPE.FOOD;
 
 const imgSize = {
   home: {
-    width: 51,
-    height: 51,
+    width: 52,
+    height: 52,
   },
   products: {
-    width: 68,
-    height: 68,
+    width: 56,
+    height: 56,
   },
 };
 

diff --git a/src/components/Common/CategoryFoodList/categoryFoodList.css.ts b/src/components/Common/CategoryFoodList/categoryFoodList.css.ts
@@ -2,6 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const categoryFoodListWrapper = style({
   display: 'flex',
+  justifyContent: 'space-between',
   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,8 @@
 import cx from 'classnames';
 import { Link } from 'react-router-dom';
 
-import { imageWrapper, categoryImage, categoryName, circle, bordered, link } from './categoryItem.css';
+import { imageWrapper, categoryImage, circle, bordered, link } from './categoryItem.css';
+import Text from '../Text/Text';
 
 import { PATH } from '@/constants/path';
 import { useGA } from '@/hooks/common';
@@ -54,7 +55,11 @@ const CategoryItem = ({
           alt={name}
         />
       </div>
-      {hasName && <span className={categoryName}>{name}</span>}
+      {hasName && (
+        <Text as="span" color="info" size="caption4" weight="semiBold">
+          {name}
+        </Text>
+      )}
     </Link>
   );
 };

diff --git a/src/components/Common/CategoryItem/categoryItem.css.ts b/src/components/Common/CategoryItem/categoryItem.css.ts
@@ -1,3 +1,4 @@
+import { vars } from '@/styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const link = style({
@@ -23,10 +24,5 @@ export const circle = style({
 });
 
 export const bordered = style({
-  border: '1px solid #e6e6e6',
-});
-
-export const categoryName = style({
-  fontSize: '1.2rem',
-  lineHeight: 1.4,
+  border: `1px solid ${vars.colors.border.default}`,
 });
diff --git a/src/components/Common/CategoryStoreList/CategoryStoreList.tsx b/src/components/Common/CategoryStoreList/CategoryStoreList.tsx
@@ -8,28 +8,11 @@ interface CategoryStoreListProps {
   hasName?: boolean;
   isCircular?: boolean;
   isBordered?: boolean;
-  location?: 'home' | 'products';
 }
 
 const categoryType = CATEGORY_TYPE.STORE;
 
-const imgSize = {
-  home: {
-    width: 78,
-    height: 58,
-  },
-  products: {
-    width: 76,
-    height: 58,
-  },
-};
-
-const CategoryStoreList = ({
-  hasName = false,
-  isCircular = false,
-  isBordered = false,
-  location = 'home',
-}: CategoryStoreListProps) => {
+const CategoryStoreList = ({ hasName = false, isCircular = false, isBordered = false }: CategoryStoreListProps) => {
   const { data: categories } = useCategoryStoreQuery();
 
   return (
@@ -38,8 +21,8 @@ const CategoryStoreList = ({
         <CategoryItem
           key={category.id}
           category={category}
-          width={imgSize[location].width}
-          height={imgSize[location].height}
+          width={68}
+          height={51}
           categoryType={categoryType}
           hasName={hasName}
           isCircular={isCircular}

diff --git a/src/components/Common/CategoryStoreList/categoryStoreList.css.ts b/src/components/Common/CategoryStoreList/categoryStoreList.css.ts
@@ -2,7 +2,7 @@ import { style } from '@vanilla-extract/css';
 
 export const categoryStoreListWrapper = style({
   display: 'flex',
-  justifyContent: 'space-between',
+  justifyContent: 'space-evenly',
   width: '100%',
   padding: '0 20px',
 });
diff --git a/src/components/Common/SectionHeader/SectionHeader.tsx b/src/components/Common/SectionHeader/SectionHeader.tsx
@@ -13,10 +13,10 @@ interface SectionHeaderProps {
 const SectionHeader = ({ name, link, state }: SectionHeaderProps) => {
   return (
     <div className={container}>
-      <h1 className={title}>{name}</h1>
+      <h2 className={title}>{name}</h2>
       {link && (
         <Link to={link} state={state}>
-          <SvgIcon variant="arrowRight" width={20} height={20} />
+          <SvgIcon variant="arrowRight" width={16} height={16} style={{ transform: 'translateY(2px)' }} />
         </Link>
       )}
     </div>

diff --git a/src/components/Common/SectionHeader/sectionHeader.css.ts b/src/components/Common/SectionHeader/sectionHeader.css.ts
@@ -7,6 +7,6 @@ export const container = style({
 });
 
 export const title = style({
-  fontSize: '1.8rem',
-  fontWeight: 600,
+  fontSize: '1.6rem',
+  fontWeight: 700,
 });
diff --git a/src/mocks/data/foodCategory.json b/src/mocks/data/foodCategory.json
@@ -1,7 +1,7 @@
 [
-  { "id": 1, "name": "간편식사", "image": "https://image.funeat.site/prod/food.png" },
-  { "id": 2, "name": "과자류", "image": "https://image.funeat.site/prod/food.png" },
-  { "id": 3, "name": "아이스크림", "image": "https://image.funeat.site/prod/food.png" },
+  { "id": 1, "name": "간편식사", "image": "https://image.funeat.site/prod/instantfood.png" },
+  { "id": 2, "name": "과자류", "image": "https://image.funeat.site/prod/snack.png" },
+  { "id": 3, "name": "아이스크림", "image": "https://image.funeat.site/prod/icecream.png" },
   { "id": 4, "name": "식품", "image": "https://image.funeat.site/prod/food.png" },
-  { "id": 5, "name": "음료", "image": "https://image.funeat.site/prod/food.png" }
+  { "id": 5, "name": "음료", "image": "https://image.funeat.site/prod/drink.png" }
 ]
diff --git a/src/mocks/data/storeCategory.json b/src/mocks/data/storeCategory.json
@@ -1,6 +1,6 @@
 [
   { "id": 6, "name": "CU", "image": "https://image.funeat.site/prod/cu.webp" },
-  { "id": 7, "name": "GS25", "image": "https://image.funeat.site/prod/cu.webp" },
-  { "id": 8, "name": "이마트24", "image": "https://image.funeat.site/prod/cu.webp" },
-  { "id": 9, "name": "세븐일레븐", "image": "https://image.funeat.site/prod/cu.webp" }
+  { "id": 7, "name": "GS25", "image": "https://image.funeat.site/prod/gs.webp" },
+  { "id": 8, "name": "이마트24", "image": "https://image.funeat.site/prod/emart24.webp" },
+  { "id": 9, "name": "세븐일레븐", "image": "https://image.funeat.site/prod/seven.webp" }
 ]
diff --git a/src/pages/ProductPage/ProductPage.tsx b/src/pages/ProductPage/ProductPage.tsx
@@ -18,6 +18,7 @@ import { ProductPreviewList } from '@/components/Product';
 import { CATEGORY_TYPE } from '@/constants';
 import { useTabMenu } from '@/hooks/common';
 import { useCategoryQuery } from '@/hooks/queries/product';
+import { vars } from '@/styles/theme.css';
 import type { CategoryVariant, Tab } from '@/types/common';
 
 const TAB_MENUS: Tab<CategoryVariant>[] = [
@@ -43,19 +44,19 @@ export const ProductPage = () => {
           {selectedTabMenu === TAB_MENUS[0].value ? (
             <CategoryFoodList location="products" hasName isCircular />
           ) : (
-            <CategoryStoreList location="products" hasName isBordered />
+            <CategoryStoreList hasName isBordered />
           )}
         </Suspense>
       </section>
 
-      <div style={{ height: '12px', backgroundColor: '#f9f9f9' }} aria-hidden />
+      <div style={{ height: '12px', backgroundColor: vars.colors.border.light }} aria-hidden />
 
       <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
         <Suspense fallback={<Loading />}>
           {categories.map(({ id, name }) => (
             <section key={id} className={productSection}>
               <SectionHeader name={getSectionTitle(selectedTabMenu, name)} link={`${selectedTabMenu}`} state={id} />
-              <Spacing size={7} />
+              <Spacing size={8} />
               <ProductPreviewList key={id} category={selectedTabMenu} categoryId={id} />
             </section>
           ))}

diff --git a/src/pages/ProductPage/productPage.css.ts b/src/pages/ProductPage/productPage.css.ts
@@ -1,4 +1,5 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+import { style } from '@vanilla-extract/css';
 
 export const tabMenuWrapper = style({
   display: 'flex',
@@ -11,27 +12,15 @@ export const tabMenu = style({
   width: '50%',
   height: 40,
   textAlign: 'center',
-  borderBottom: '1px solid #e6e6e6',
-});
-
-const menuNameBase = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: '100%',
-});
-
-export const menuName = styleVariants({
-  active: [menuNameBase, { fontWeight: 700, color: '#232527', borderBottom: '3px solid #444' }],
-  default: [menuNameBase, { fontWeight: 600, color: '#999' }],
+  borderBottom: `1px solid ${vars.colors.border.default}`,
 });
 
 export const categorySection = style({
   margin: '28px 0 24px',
 });
 
 export const productSection = style({
-  margin: '28px 0 32px',
+  margin: '28px 0 36px',
 });
 
 export const list = style({