refactor: 카테고리 이동 구현

woowacourse-teams · Sep 15, 2023 · d6b0b9f · d6b0b9f
1 parent f9b371b
commit d6b0b9f
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/frontend/src/components/Common/CategoryTab/CategoryTab.tsx b/frontend/src/components/Common/CategoryTab/CategoryTab.tsx
@@ -1,4 +1,6 @@
 import { Button, theme } from '@fun-eat/design-system';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 import type { CSSProp } from 'styled-components';
 import styled from 'styled-components';
 
@@ -12,10 +14,21 @@ interface CategoryMenuProps {
 
 const CategoryTab = ({ menuVariant }: CategoryMenuProps) => {
   const { data: categories } = useCategoryQuery(menuVariant);
+
   const { categoryIds } = useCategoryValueContext();
   const { selectCategory } = useCategoryActionContext();
   const currentCategoryId = categoryIds[menuVariant];
 
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const categoryIdFromURL = queryParams.get('category');
+
+  useEffect(() => {
+    if (categoryIdFromURL) {
+      selectCategory(menuVariant, parseInt(categoryIdFromURL));
+    }
+  }, [location]);
+
   return (
     <CategoryMenuContainer>
       {categories.map((menu) => {