refactor: Refactor Intro styled component (#6)

FE/baseball/src/Components/Intro/GameStartButton.jsx

@@ -1,36 +1,14 @@
-import styled from 'styled-components';
 import GameTitle from '@/Components/Intro/GameTitle';
+import { IntroStyles as S } from '@/Components/Intro/IntroStyles';
 import { Link } from 'react-router-dom';
 
 const GameStartButton = () => {
   return (
     <Link to="/home">
-      <GameStartButtonStyle>
+      <S.GameStartButton>
         <GameTitle />
-      </GameStartButtonStyle>
+      </S.GameStartButton>
     </Link>
   );
 };
 export default GameStartButton;
-
-const GameStartButtonStyle = styled.div`
-  width: 650px;
-  height: 100px;
-  padding: 20px;
-  border: 1px solid #fff;
-  border-radius: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  font-size: 30px;
-  transition: all ease-in-out 0.4s;
-  font-weight: 700;
-
-  :hover {
-    background: #333;
-  }
-  :active {
-    background: #111;
-  }
-`;

FE/baseball/src/Components/Intro/GameTitle.jsx

@@ -1,16 +1,12 @@
-import styled from 'styled-components';
+import { IntroStyles as S } from '@/Components/Intro/IntroStyles';
 
 const GameTitle = () => {
   return (
-    <GameTitleStyle>
+    <S.GameTitle>
       Team illy'swing BASEBALL GAME!!! <br />
       comming soon...
-    </GameTitleStyle>
+    </S.GameTitle>
   );
 };
 
 export default GameTitle;
-
-const GameTitleStyle = styled.div`
-  text-align: center;
-`;

FE/baseball/src/Components/Intro/Intro.jsx

@@ -1,11 +1,11 @@
-import IntroStyles from '@/Components/Intro/IntroStyles';
+import { IntroStyles as S } from '@/Components/Intro/IntroStyles';
 import GameStartButton from '@/Components/Intro/GameStartButton';
 
 const Intro = () => {
   return (
-    <IntroStyles>
+    <S.Intro>
       <GameStartButton />
-    </IntroStyles>
+    </S.Intro>
   );
 };
 

FE/baseball/src/Components/Intro/IntroStyles.jsx

@@ -1,13 +1,37 @@
 import styled from 'styled-components';
+import * as CS from '@/Styles/CommonStyles';
+import theme from '@/Styles/theme';
 
-const IntroStyles = styled.div`
-  background: #222;
-  width: 1440px;
-  height: 1080px;
-  color: #fff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export default IntroStyles;
+const IntroStyles = {
+  Intro: styled(CS.BOX.FLEX_CENTER_BOX)`
+    background: #222;
+    width: 1440px;
+    height: 1080px;
+    color: ${theme.COLOR.DEFAULT};
+  `,
+
+  GameTitle: styled.div`
+    text-align: center;
+  `,
+
+  GameStartButton: styled(CS.BOX.FLEX_CENTER_BOX)`
+    width: 650px;
+    height: 100px;
+    padding: 20px;
+    border: 1px solid #fff;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 30px;
+    transition: all ease-in-out 0.4s;
+    font-weight: 700;
+
+    :hover {
+      background: #333;
+    }
+    :active {
+      background: #111;
+    }
+  `,
+};
+
+export { IntroStyles };

FE/baseball/src/Styles/CommonStyles.jsx

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+const BOX = {
+  FLEX_ROW_BOX: styled.div`
+    display: flex;
+  `,
+
+  FLEX_ROW_CENTER_BOX: styled.div`
+    display: flex;
+    align-items: center;
+  `,
+
+  FLEX_COLUMN_BOX: styled.div`
+    display: flex;
+    flex-direction: column;
+  `,
+
+  FLEX_COLUMN_CENTER_BOX: styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `,
+
+  FLEX_CENTER_BOX: styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `,
+};
+
+export { BOX };

FE/baseball/src/Styles/theme.js

@@ -0,0 +1,17 @@
+// 관리되야 할 것들
+/*
+1. 사용되는 폰트 사이즈
+2. 사용되는 색상 (폰트색상,볼카운트색상,플레이어태그색상,현재타자색상,지난타자색상...)
+*/
+
+const COLOR = {
+  VS: '#757575',
+  CURRENT_PLAYER_TAG: '#ffeeec',
+  DEFAULT: '#fff',
+};
+
+const theme = {
+  COLOR,
+};
+
+export default theme;