diff --git a/frontend/src/components/Common/CategoryFoodList/CategoryFoodList.stories.tsx b/frontend/src/components/Common/CategoryFoodList/CategoryFoodList.stories.tsx index e597dc53c..25de7b811 100644 --- a/frontend/src/components/Common/CategoryFoodList/CategoryFoodList.stories.tsx +++ b/frontend/src/components/Common/CategoryFoodList/CategoryFoodList.stories.tsx @@ -2,9 +2,18 @@ import type { Meta, StoryObj } from '@storybook/react'; import CategoryFoodList from './CategoryFoodList'; +import CategoryProvider from '@/contexts/CategoryContext'; + const meta: Meta = { title: 'common/CategoryFoodList', component: CategoryFoodList, + decorators: [ + (Story) => ( + + + + ), + ], }; export default meta; diff --git a/frontend/src/components/Common/CategoryFoodList/CategoryFoodList.tsx b/frontend/src/components/Common/CategoryFoodList/CategoryFoodList.tsx index 46464b231..921584b8f 100644 --- a/frontend/src/components/Common/CategoryFoodList/CategoryFoodList.tsx +++ b/frontend/src/components/Common/CategoryFoodList/CategoryFoodList.tsx @@ -1,42 +1,21 @@ -import { Link } from '@fun-eat/design-system'; -import { Link as RouterLink } from 'react-router-dom'; import styled from 'styled-components'; import CategoryItem from '../CategoryItem/CategoryItem'; import { CATEGORY_TYPE } from '@/constants'; -import { useGA } from '@/hooks/common'; import { useCategoryFoodQuery } from '@/hooks/queries/product'; -const category = CATEGORY_TYPE.FOOD; +const categoryType = CATEGORY_TYPE.FOOD; const CategoryFoodList = () => { - const { data: categories } = useCategoryFoodQuery(category); - const { gaEvent } = useGA(); - - const handleHomeCategoryLinkClick = (categoryName: string) => { - gaEvent({ - category: 'link', - action: `${categoryName} 카테고리 링크 클릭`, - label: '카테고리', - }); - }; + const { data: categories } = useCategoryFoodQuery(categoryType); return ( -
- - {categories.map((menu) => ( - handleHomeCategoryLinkClick(menu.name)} - > - - - ))} - -
+ + {categories.map(({ id, name, image }) => ( + + ))} + ); }; diff --git a/frontend/src/components/Common/CategoryFoodTab/CategoryFoodTab.tsx b/frontend/src/components/Common/CategoryFoodTab/CategoryFoodTab.tsx index 6b6a734bc..56817526e 100644 --- a/frontend/src/components/Common/CategoryFoodTab/CategoryFoodTab.tsx +++ b/frontend/src/components/Common/CategoryFoodTab/CategoryFoodTab.tsx @@ -1,6 +1,4 @@ import { Button, theme } from '@fun-eat/design-system'; -import { useEffect } from 'react'; -import { useLocation } from 'react-router-dom'; import styled from 'styled-components'; import { CATEGORY_TYPE } from '@/constants'; @@ -9,29 +7,20 @@ import { useCategoryActionContext, useCategoryValueContext } from '@/hooks/conte import { useCategoryFoodQuery } from '@/hooks/queries/product/useCategoryQuery'; import { getTargetCategoryName } from '@/utils/category'; -const category = CATEGORY_TYPE.FOOD; +const categoryType = CATEGORY_TYPE.FOOD; const CategoryFoodTab = () => { - const { data: categories } = useCategoryFoodQuery(category); + const { data: categories } = useCategoryFoodQuery(categoryType); const { categoryIds } = useCategoryValueContext(); const { selectCategory } = useCategoryActionContext(); - const currentCategoryId = categoryIds[category]; - const location = useLocation(); - const queryParams = new URLSearchParams(location.search); - const categoryIdFromURL = queryParams.get('category'); + const currentCategoryId = categoryIds[categoryType]; const { gaEvent } = useGA(); - useEffect(() => { - if (categoryIdFromURL) { - selectCategory(category, parseInt(categoryIdFromURL)); - } - }, [category]); - const handleCategoryButtonClick = (menuId: number) => { - selectCategory(category, menuId); + selectCategory(categoryType, menuId); gaEvent({ category: 'button', action: `${getTargetCategoryName(categories, menuId)} 카테고리 버튼 클릭`, @@ -41,10 +30,10 @@ const CategoryFoodTab = () => { return ( - {categories.map((menu) => { - const isSelected = menu.id === currentCategoryId; + {categories.map(({ id, name }) => { + const isSelected = id === currentCategoryId; return ( -
  • +
  • { weight="bold" variant={isSelected ? 'filled' : 'outlined'} isSelected={isSelected} - onClick={() => handleCategoryButtonClick(menu.id)} + onClick={() => handleCategoryButtonClick(id)} aria-pressed={isSelected} > - {menu.name} + {name}
    • ); @@ -81,10 +70,9 @@ const CategoryMenuContainer = styled.ul` const CategoryButton = styled(Button)<{ isSelected: boolean }>` padding: 6px 12px; ${({ isSelected }) => - isSelected - ? ` + isSelected && + ` background: ${theme.colors.gray5}; color: ${theme.textColors.white}; - ` - : ''} + `} `; diff --git a/frontend/src/components/Common/CategoryItem/CategoryItem.stories.tsx b/frontend/src/components/Common/CategoryItem/CategoryItem.stories.tsx index b6158f5b6..3dc17ddf1 100644 --- a/frontend/src/components/Common/CategoryItem/CategoryItem.stories.tsx +++ b/frontend/src/components/Common/CategoryItem/CategoryItem.stories.tsx @@ -2,12 +2,23 @@ import type { Meta, StoryObj } from '@storybook/react'; import CategoryItem from './CategoryItem'; +import CategoryProvider from '@/contexts/CategoryContext'; + const meta: Meta = { title: 'common/CategoryItem', component: CategoryItem, + decorators: [ + (Story) => ( + + + + ), + ], args: { + categoryId: 1, name: '즉석 식품', image: 'https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg', + categoryType: 'food', }, }; diff --git a/frontend/src/components/Common/CategoryItem/CategoryItem.tsx b/frontend/src/components/Common/CategoryItem/CategoryItem.tsx index 4ce54ce72..051c97073 100644 --- a/frontend/src/components/Common/CategoryItem/CategoryItem.tsx +++ b/frontend/src/components/Common/CategoryItem/CategoryItem.tsx @@ -1,30 +1,47 @@ import { Button } from '@fun-eat/design-system'; +import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; +import { PATH } from '@/constants/path'; +import { useGA } from '@/hooks/common'; +import { useCategoryActionContext } from '@/hooks/context'; + interface CategoryItemProps { + categoryId: number; name: string; image: string; + categoryType: 'food' | 'store'; } -const CategoryItem = ({ name, image }: CategoryItemProps) => { +const CategoryItem = ({ categoryId, name, image, categoryType }: CategoryItemProps) => { + const navigate = useNavigate(); + const { selectCategory } = useCategoryActionContext(); + + const { gaEvent } = useGA(); + + const handleCategoryItemClick = (categoryId: number) => { + selectCategory(categoryType, categoryId); + navigate(PATH.PRODUCT_LIST + '/' + categoryType); + + gaEvent({ + category: 'button', + action: `${name} 카테고리 링크 클릭`, + label: '카테고리', + }); + }; + return ( - + ); }; export default CategoryItem; -const CategoryItemContainer = styled(Button)` - width: 60px; - height: 100px; - text-align: center; -`; - const ImageWrapper = styled.div` display: flex; justify-content: center; diff --git a/frontend/src/components/Common/CategoryStoreList/CategoryStoreList.stories.tsx b/frontend/src/components/Common/CategoryStoreList/CategoryStoreList.stories.tsx index 2592fe4c9..d26be6f49 100644 --- a/frontend/src/components/Common/CategoryStoreList/CategoryStoreList.stories.tsx +++ b/frontend/src/components/Common/CategoryStoreList/CategoryStoreList.stories.tsx @@ -2,9 +2,18 @@ import type { Meta, StoryObj } from '@storybook/react'; import CategoryStoreList from './CategoryStoreList'; +import CategoryProvider from '@/contexts/CategoryContext'; + const meta: Meta = { title: 'common/CategoryStoreList', component: CategoryStoreList, + decorators: [ + (Story) => ( + + + + ), + ], }; export default meta; diff --git a/frontend/src/components/Common/CategoryStoreList/CategoryStoreList.tsx b/frontend/src/components/Common/CategoryStoreList/CategoryStoreList.tsx index 9ce856fa1..6bf2c36ae 100644 --- a/frontend/src/components/Common/CategoryStoreList/CategoryStoreList.tsx +++ b/frontend/src/components/Common/CategoryStoreList/CategoryStoreList.tsx @@ -1,42 +1,21 @@ -import { Link } from '@fun-eat/design-system'; -import { Link as RouterLink } from 'react-router-dom'; import styled from 'styled-components'; import CategoryItem from '../CategoryItem/CategoryItem'; import { CATEGORY_TYPE } from '@/constants'; -import { useGA } from '@/hooks/common'; import { useCategoryStoreQuery } from '@/hooks/queries/product'; -const category = CATEGORY_TYPE.STORE; +const categoryType = CATEGORY_TYPE.STORE; const CategoryStoreList = () => { - const { data: categories } = useCategoryStoreQuery(category); - const { gaEvent } = useGA(); - - const handleHomeCategoryLinkClick = (categoryName: string) => { - gaEvent({ - category: 'link', - action: `${categoryName} 카테고리 링크 클릭`, - label: '카테고리', - }); - }; + const { data: categories } = useCategoryStoreQuery(categoryType); return ( -
    - - {categories.map((menu) => ( - handleHomeCategoryLinkClick(menu.name)} - > - - - ))} - -
    + + {categories.map(({ id, name, image }) => ( + + ))} + ); }; diff --git a/frontend/src/components/Common/CategoryStoreTab/CategoryStoreTab.tsx b/frontend/src/components/Common/CategoryStoreTab/CategoryStoreTab.tsx index a83fa501f..b75abb7b7 100644 --- a/frontend/src/components/Common/CategoryStoreTab/CategoryStoreTab.tsx +++ b/frontend/src/components/Common/CategoryStoreTab/CategoryStoreTab.tsx @@ -1,6 +1,4 @@ import { Button, theme } from '@fun-eat/design-system'; -import { useEffect } from 'react'; -import { useLocation } from 'react-router-dom'; import styled from 'styled-components'; import { CATEGORY_TYPE } from '@/constants'; @@ -9,29 +7,19 @@ import { useCategoryActionContext, useCategoryValueContext } from '@/hooks/conte import { useCategoryStoreQuery } from '@/hooks/queries/product/useCategoryQuery'; import { getTargetCategoryName } from '@/utils/category'; -const category = CATEGORY_TYPE.STORE; +const categoryType = CATEGORY_TYPE.STORE; const CategoryStoreTab = () => { - const { data: categories } = useCategoryStoreQuery(category); + const { data: categories } = useCategoryStoreQuery(categoryType); const { categoryIds } = useCategoryValueContext(); const { selectCategory } = useCategoryActionContext(); - const currentCategoryId = categoryIds[category]; - - const location = useLocation(); - const queryParams = new URLSearchParams(location.search); - const categoryIdFromURL = queryParams.get('category'); + const currentCategoryId = categoryIds[categoryType]; const { gaEvent } = useGA(); - useEffect(() => { - if (categoryIdFromURL) { - selectCategory(category, parseInt(categoryIdFromURL)); - } - }, [category]); - const handleCategoryButtonClick = (menuId: number) => { - selectCategory(category, menuId); + selectCategory(categoryType, menuId); gaEvent({ category: 'button', action: `${getTargetCategoryName(categories, menuId)} 카테고리 버튼 클릭`, @@ -41,10 +29,10 @@ const CategoryStoreTab = () => { return ( - {categories.map((menu) => { - const isSelected = menu.id === currentCategoryId; + {categories.map(({ id, name }) => { + const isSelected = id === currentCategoryId; return ( -
  • +
  • { weight="bold" variant={isSelected ? 'filled' : 'outlined'} isSelected={isSelected} - onClick={() => handleCategoryButtonClick(menu.id)} + onClick={() => handleCategoryButtonClick(id)} aria-pressed={isSelected} > - {menu.name} + {name}
    • ); @@ -81,10 +69,9 @@ const CategoryMenuContainer = styled.ul` const CategoryButton = styled(Button)<{ isSelected: boolean }>` padding: 6px 12px; ${({ isSelected }) => - isSelected - ? ` + isSelected && + ` background: ${theme.colors.primary}; color: ${theme.textColors.default}; - ` - : ''} + `} `;