[FE] feat: 홈에서 카테고리 눌렀을 때 context에 저장하는 방식으로 변경

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<typeof CategoryFoodList> = {
   title: 'common/CategoryFoodList',
   component: CategoryFoodList,
+  decorators: [
+    (Story) => (
+      <CategoryProvider>
+        <Story />
+      </CategoryProvider>
+    ),
+  ],
 };
 
 export default meta;

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 (
-    <div>
-      <CategoryFoodListWrapper>
-        {categories.map((menu) => (
-          <Link
-            key={menu.id}
-            as={RouterLink}
-            to={`products/food?category=${menu.id}`}
-            onClick={() => handleHomeCategoryLinkClick(menu.name)}
-          >
-            <CategoryItem name={menu.name} image={menu.image} />
-          </Link>
-        ))}
-      </CategoryFoodListWrapper>
-    </div>
+    <CategoryFoodListWrapper>
+      {categories.map(({ id, name, image }) => (
+        <CategoryItem key={id} categoryId={id} name={name} image={image} categoryType={categoryType} />
+      ))}
+    </CategoryFoodListWrapper>
   );
 };
 

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 (
     <CategoryMenuContainer>
-      {categories.map((menu) => {
-        const isSelected = menu.id === currentCategoryId;
+      {categories.map(({ id, name }) => {
+        const isSelected = id === currentCategoryId;
         return (
-          <li key={menu.id}>
+          <li key={id}>
             <CategoryButton
               type="button"
               customHeight="30px"
@@ -53,10 +42,10 @@ const CategoryFoodTab = () => {
               weight="bold"
               variant={isSelected ? 'filled' : 'outlined'}
               isSelected={isSelected}
-              onClick={() => handleCategoryButtonClick(menu.id)}
+              onClick={() => handleCategoryButtonClick(id)}
               aria-pressed={isSelected}
             >
-              {menu.name}
+              {name}
             </CategoryButton>
           </li>
         );
@@ -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};
-      `
-      : ''}
+      `}
 `;

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<typeof CategoryItem> = {
   title: 'common/CategoryItem',
   component: CategoryItem,
+  decorators: [
+    (Story) => (
+      <CategoryProvider>
+        <Story />
+      </CategoryProvider>
+    ),
+  ],
   args: {
+    categoryId: 1,
     name: '즉석 식품',
     image: 'https://tqklhszfkvzk6518638.cdn.ntruss.com/product/8801771029052.jpg',
+    categoryType: 'food',
   },
 };
 

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 (
-    <CategoryItemContainer variant="transparent">
+    <Button type="button" variant="transparent" customHeight="auto" onClick={() => handleCategoryItemClick(categoryId)}>
       <ImageWrapper>
         <img src={image} width={60} height={60} alt={name} />
       </ImageWrapper>
       <CategoryName>{name}</CategoryName>
-    </CategoryItemContainer>
+    </Button>
   );
 };
 
 export default CategoryItem;
 
-const CategoryItemContainer = styled(Button)`
-  width: 60px;
-  height: 100px;
-  text-align: center;
-`;
-
 const ImageWrapper = styled.div`
   display: flex;
   justify-content: center;

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<typeof CategoryStoreList> = {
   title: 'common/CategoryStoreList',
   component: CategoryStoreList,
+  decorators: [
+    (Story) => (
+      <CategoryProvider>
+        <Story />
+      </CategoryProvider>
+    ),
+  ],
 };
 
 export default meta;

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 (
-    <div>
-      <CategoryStoreListWrapper>
-        {categories.map((menu) => (
-          <Link
-            key={menu.id}
-            as={RouterLink}
-            to={`products/store?category=${menu.id}`}
-            onClick={() => handleHomeCategoryLinkClick(menu.name)}
-          >
-            <CategoryItem name={menu.name} image={menu.image} />
-          </Link>
-        ))}
-      </CategoryStoreListWrapper>
-    </div>
+    <CategoryStoreListWrapper>
+      {categories.map(({ id, name, image }) => (
+        <CategoryItem key={id} categoryId={id} name={name} image={image} categoryType={categoryType} />
+      ))}
+    </CategoryStoreListWrapper>
   );
 };
 

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 (
     <CategoryMenuContainer>
-      {categories.map((menu) => {
-        const isSelected = menu.id === currentCategoryId;
+      {categories.map(({ id, name }) => {
+        const isSelected = id === currentCategoryId;
         return (
-          <li key={menu.id}>
+          <li key={id}>
             <CategoryButton
               type="button"
               customHeight="30px"
@@ -53,10 +41,10 @@ const CategoryStoreTab = () => {
               weight="bold"
               variant={isSelected ? 'filled' : 'outlined'}
               isSelected={isSelected}
-              onClick={() => handleCategoryButtonClick(menu.id)}
+              onClick={() => handleCategoryButtonClick(id)}
               aria-pressed={isSelected}
             >
-              {menu.name}
+              {name}
             </CategoryButton>
           </li>
         );
@@ -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};
-      `
-      : ''}
+      `}
 `;