From 89b76c5411c51d3b528e2f6b4d0142e320a46a4a Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Fri, 19 Apr 2024 23:34:42 +0200 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=BD=98=ED=85=90=EC=B8=A0=20=EA=B0=84?= =?UTF-8?q?=EA=B2=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ProductPage/productPage.css.ts | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/src/pages/ProductPage/productPage.css.ts b/src/pages/ProductPage/productPage.css.ts index cf4e6165..7802c2ad 100644 --- 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,19 +12,7 @@ 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({ @@ -31,7 +20,7 @@ export const categorySection = style({ }); export const productSection = style({ - margin: '28px 0 32px', + margin: '28px 0 36px', }); export const list = style({ From 8bc684652400d8210adec236f11d69e0a16580d3 Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Fri, 19 Apr 2024 23:45:09 +0200 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EB=AA=A9=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/data/foodCategory.json | 8 ++++---- src/mocks/data/storeCategory.json | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/mocks/data/foodCategory.json b/src/mocks/data/foodCategory.json index 5a4a2d06..36155d23 100644 --- 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 index dfa06b77..ecf7030c 100644 --- 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" } ] From 8edcf22cec8ccf13ffface5fafccc4de45c3a28b Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Fri, 19 Apr 2024 23:48:03 +0200 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=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.tsx | 8 +++---- .../CategoryFoodList/categoryFoodList.css.ts | 1 + .../Common/CategoryItem/CategoryItem.tsx | 9 ++++++-- .../Common/CategoryItem/categoryItem.css.ts | 8 ++----- .../CategoryStoreList/CategoryStoreList.tsx | 23 +++---------------- .../categoryStoreList.css.ts | 2 +- 6 files changed, 18 insertions(+), 33 deletions(-) diff --git a/src/components/Common/CategoryFoodList/CategoryFoodList.tsx b/src/components/Common/CategoryFoodList/CategoryFoodList.tsx index cac992f8..7b329473 100644 --- 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 index ae848bd2..a659106b 100644 --- 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 index 38060492..3dc9f679 100644 --- 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} /> - {hasName && {name}} + {hasName && ( + + {name} + + )} ); }; diff --git a/src/components/Common/CategoryItem/categoryItem.css.ts b/src/components/Common/CategoryItem/categoryItem.css.ts index 3bb629f3..7abdc802 100644 --- 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 index e027e026..ce070417 100644 --- 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 = ({ Date: Sat, 20 Apr 2024 00:04:25 +0200 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EC=84=B9=EC=85=98=ED=97=A4?= =?UTF-8?q?=EB=8D=94=20=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 --- src/components/Common/SectionHeader/SectionHeader.tsx | 4 ++-- src/components/Common/SectionHeader/sectionHeader.css.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Common/SectionHeader/SectionHeader.tsx b/src/components/Common/SectionHeader/SectionHeader.tsx index 7c65dfb1..7f6dc9bd 100644 --- 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 (
-

{name}

+

{name}

{link && ( - + )}
diff --git a/src/components/Common/SectionHeader/sectionHeader.css.ts b/src/components/Common/SectionHeader/sectionHeader.css.ts index 4c53627a..0219e4a6 100644 --- 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, }); From a3c51deca67b443455466f987809a7842c1b80e3 Mon Sep 17 00:00:00 2001 From: Leejin-Yang Date: Sat, 20 Apr 2024 00:04:47 +0200 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EC=83=81=ED=92=88=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ProductPage/ProductPage.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/ProductPage/ProductPage.tsx b/src/pages/ProductPage/ProductPage.tsx index 4dcbac10..aa7de4af 100644 --- 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[] = [ @@ -43,19 +44,19 @@ export const ProductPage = () => { {selectedTabMenu === TAB_MENUS[0].value ? ( ) : ( - + )} -
+
}> {categories.map(({ id, name }) => (
- +
))}