style: styled 분리

Space-Club · Oct 27, 2023 · ac5a5fc · ac5a5fc
1 parent 7ee93bb
commit ac5a5fc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/src/pages/event/ChoiceEventPage/ChoiceEventPage.style.ts b/src/pages/event/ChoiceEventPage/ChoiceEventPage.style.ts
@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const ChoiceEventContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 1rem;
+  height: 100%;
+  padding: 3rem 0;
+  box-sizing: border-box;
+`;
+
+export { ChoiceEventContainer };
diff --git a/src/pages/event/ChoiceEventPage.tsx → ...event/ChoiceEventPage/ChoiceEventPage.tsx b/src/pages/event/ChoiceEventPage.tsx → ...event/ChoiceEventPage/ChoiceEventPage.tsx
@@ -1,19 +1,9 @@
 import ClassificationCard from '@/components/ClassificationCard/ClassificationCard';
 import Theme from '@/styles/Theme';
-import styled from '@emotion/styled';
 
-import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-const Container = styled.div`
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  gap: 1rem;
-  height: 100%;
-  padding: 3rem 0;
-  box-sizing: border-box;
-`;
+import { ChoiceEventContainer } from './ChoiceEventPage.style';
 
 const ChoiceEventPage = () => {
   const navigate = useNavigate();
@@ -53,7 +43,7 @@ const ChoiceEventPage = () => {
     ],
   ];
   return (
-    <Container>
+    <ChoiceEventContainer>
       {content.map((item, index) => (
         <ClassificationCard
           key={index}
@@ -65,7 +55,7 @@ const ChoiceEventPage = () => {
           onClick={() => navigate(`/event/writeinfo?event=${item[5]}`)}
         />
       ))}
-    </Container>
+    </ChoiceEventContainer>
   );
 };