rename: 스타일 파일 분리

src/components/common/Tab/Tab.style.ts

@@ -0,0 +1,27 @@
+import Theme from '@/styles/Theme';
+import styled from '@emotion/styled';
+
+const TabContainerStyled = styled.div<{ maxWidth: string }>`
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  max-width: ${(props) => `${props.maxWidth}rem`};
+  width: 100%;
+`;
+
+const TabItemStyled = styled.div<{ isActive: boolean; width: string }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${(props) => `${props.width}rem`};
+  height: 2rem;
+  color: ${(props) => (props.isActive ? `${Theme.color.activeColor}` : `${Theme.color.black}`)};
+  cursor: pointer;
+`;
+
+const SeparatorStyled = styled.div`
+  height: 1.5rem;
+  border-left: 0.07rem solid;
+`;
+
+export { TabContainerStyled, TabItemStyled, SeparatorStyled };

src/components/Tab.tsx → src/components/common/Tab/Tab.tsx

@@ -1,11 +1,11 @@
 import { TAB_CONSTANTS } from '@/constants/tab';
 import { useTabContext } from '@/hooks/useTabContext';
-import Theme from '@/styles/Theme';
 import { getKeyByValue } from '@/utils/getKeyByValue';
-import styled from '@emotion/styled';
 
 import { useEffect } from 'react';
 
+import { SeparatorStyled, TabContainerStyled, TabItemStyled } from './Tab.style';
+
 interface TabItemProps {
   title: string;
   width: string;
@@ -19,29 +19,6 @@ interface TabProps {
   tabItems: TabItemProps[];
 }
 
-const TabContainerStyled = styled.div<{ maxWidth: string }>`
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-  max-width: ${(props) => `${props.maxWidth}rem`};
-  width: 100%;
-`;
-
-const TabItemStyled = styled.div<{ isActive: boolean; width: string }>`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: ${(props) => `${props.width}rem`};
-  height: 2rem;
-  color: ${(props) => (props.isActive ? `${Theme.color.activeColor}` : `${Theme.color.black}`)};
-  cursor: pointer;
-`;
-
-const SeparatorStyled = styled.div`
-  height: 1.5rem;
-  border-left: 0.07rem solid;
-`;
-
 const Tab = ({ active, maxWidth, defaultTab, tabItems }: TabProps) => {
   const { activeTab, setActiveTab } = useTabContext();
   const activeIndex = getKeyByValue(TAB_CONSTANTS, activeTab);

src/pages/MainPage.tsx

@@ -1,5 +1,5 @@
-import Tab from '@/components/Tab';
 import Header from '@/components/common/Header/Header';
+import Tab from '@/components/common/Tab/Tab';
 import { TAB_CONSTANTS } from '@/constants/tab';
 import { TabContextProvider } from '@/context/TabContext';