refactor(CategoryListSection): Flex 대신 스타일드 컴포넌트로 스타일 지정

woowacourse-teams · Oct 17, 2024 · ce63a7a · ce63a7a
1 parent 8e8086d
commit ce63a7a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/...end/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSection.style.ts b/...end/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSection.style.ts
@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+
+export const CategoryListSectionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  margin-top: 4.5rem;
+`;
diff --git a/frontend/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSection.tsx b/frontend/src/pages/MyTemplatesPage/components/CategoryListSection/CategoryListSection.tsx
@@ -1,7 +1,7 @@
-import { Flex } from '@/components';
 import { useCategoryListQuery } from '@/queries/categories';
 
 import { CategoryFilterMenu } from '..';
+import * as S from './CategoryListSection.style';
 
 interface Props {
   onSelectCategory: (selectedCategoryId: number) => void;
@@ -12,9 +12,9 @@ const CategoryListSection = ({ onSelectCategory }: Props) => {
   const categoryList = categoryData?.categories || [];
 
   return (
-    <Flex direction='column' gap='2.5rem' style={{ marginTop: '4.5rem' }}>
+    <S.CategoryListSectionContainer>
       <CategoryFilterMenu categoryList={categoryList} onSelectCategory={onSelectCategory} />
-    </Flex>
+    </S.CategoryListSectionContainer>
   );
 };