refactor: Refactor Home styled component (#6)

FE/baseball/src/Components/Home/Home.jsx

@@ -1,13 +1,13 @@
-import HomeStyles from '@/Components/Home/HomeStyles';
 import HomeTitle from '@/Components/Home/HomeTitle';
 import MatchInfo from './MatchInfo/MatchInfo';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
 
 const Home = () => {
   return (
-    <HomeStyles>
+    <S.Home>
       <HomeTitle />
       <MatchInfo />
-    </HomeStyles>
+    </S.Home>
   );
 };
 

FE/baseball/src/Components/Home/HomeStyles.jsx

@@ -1,14 +1,118 @@
 import styled from 'styled-components';
+import * as CS from '@/Styles/CommonStyles';
+import theme from '@/Styles/theme';
 
-const HomeStyles = styled.div`
-  background: #222;
-  width: 1440px;
-  height: 1080px;
-  color: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 40px;
-`;
-
-export default HomeStyles;
+const HomeStyles = {
+  Home: styled(CS.BOX.FLEX_COLUMN_CENTER_BOX)`
+    background: #222;
+    width: 1440px;
+    height: 1080px;
+    color: ${theme.COLOR.DEFAULT};
+    padding-top: 40px;
+  `,
+
+  HomeTitle: styled.div`
+    font-size: 36px;
+    font-weight: 700;
+    padding: 20px;
+    margin-bottom: 10px;
+  `,
+
+  MatchInfo: styled(CS.BOX.FLEX_COLUMN_CENTER_BOX)`
+    width: 500px;
+  `,
+
+  MatchInfoTitle: styled.div`
+    padding: 40px 40px 20px 40px;
+    font-size: 24px;
+    letter-spacing: 3px;
+  `,
+  MatchInfoBody: styled.div`
+    width: 100%;
+    height: 340px;
+    padding: 0px 20px 0px 10px;
+    overflow-y: scroll;
+
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 20px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background-color: #222;
+      border-radius: 8px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 8px;
+      background: #ffd2e1;
+    }
+
+    mask-image: linear-gradient(to top, transparent, #222),
+      linear-gradient(to left, transparent 12px, #222 12px);
+    mask-size: 100% 2000000px;
+    mask-position: left bottom;
+    transition: mask-position 0.3s, -webkit-mask-position 0.3s;
+
+    :hover {
+      mask-position: left top;
+    }
+  `,
+
+  ScrollMask: styled.div`
+    width: 100%;
+    border: 1px solid #ffa7c4;
+  `,
+
+  MatchBox: styled(CS.BOX.FLEX_COLUMN_CENTER_BOX)`
+    border: 1px solid #fff;
+    border-radius: 10px;
+    margin: 10px;
+    width: 100%;
+    height: 100px;
+    justify-content: center;
+  `,
+
+  GameNumber: styled(CS.BOX.FLEX_CENTER_BOX)`
+    width: 100%;
+    height: 50%;
+    padding: 15px 10px 0px 10px;
+    font-size: 12px;
+    color: #ffa7c4;
+  `,
+
+  Match: styled.div`
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0px 5px 5px 5px;
+    justify-content: space-evenly;
+  `,
+
+  TeamName: styled(CS.BOX.FLEX_CENTER_BOX)`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 23px;
+    font-weight: 900;
+    cursor: pointer;
+    transition: all ease-in-out 0.2s;
+
+    :hover {
+      color: #ffa7c4;
+      font-size: 24px;
+    }
+  `,
+
+  VS: styled.div`
+    display: flex;
+    align-items: center;
+    font-weight: 900;
+    font-size: 14px;
+  `,
+};
+
+export { HomeStyles };

FE/baseball/src/Components/Home/HomeTitle.jsx

@@ -1,14 +1,7 @@
-import styled from 'styled-components';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
 
 const HomeTitle = () => {
-  return <HomeTitleStyle>Team illy'swing BASEBALL</HomeTitleStyle>;
+  return <S.HomeTitle>Team illy'swing BASEBALL</S.HomeTitle>;
 };
 
 export default HomeTitle;
-
-const HomeTitleStyle = styled.div`
-  font-size: 36px;
-  font-weight: 700;
-  padding: 20px;
-  margin-bottom: 10px;
-`;

FE/baseball/src/Components/Home/MatchInfo/MatchBox/GameNumber.jsx

@@ -1,18 +1,7 @@
-import styled from 'styled-components';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
 
 const GameNumber = () => {
-  return <GameNumberStyle>GameNumber</GameNumberStyle>;
+  return <S.GameNumber>GameNumber</S.GameNumber>;
 };
 
 export default GameNumber;
-
-const GameNumberStyle = styled.div`
-  width: 100%;
-  height: 50%;
-  padding: 15px 10px 0px 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 12px;
-  color: #ffa7c4;
-`;

FE/baseball/src/Components/Home/MatchInfo/MatchBox/Match.jsx

@@ -1,24 +1,15 @@
-import styled from 'styled-components';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
 import TeamName from './TeamName';
 import VS from './VS';
 
 const Match = () => {
   return (
-    <MatchStyle>
+    <S.Match>
       <TeamName />
       <VS />
       <TeamName />
-    </MatchStyle>
+    </S.Match>
   );
 };
 
 export default Match;
-
-const MatchStyle = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  padding: 0px 5px 5px 5px;
-  justify-content: space-evenly;
-`;

FE/baseball/src/Components/Home/MatchInfo/MatchBox/MatchBox.jsx

@@ -1,26 +1,14 @@
-import styled from 'styled-components';
 import GameNumber from './GameNumber';
 import Match from './Match';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
 
 const MatchBox = () => {
   return (
-    <MatchBoxStyle>
+    <S.MatchBox>
       <GameNumber />
       <Match />
-    </MatchBoxStyle>
+    </S.MatchBox>
   );
 };
 
 export default MatchBox;
-
-const MatchBoxStyle = styled.div`
-  border: 1px solid #fff;
-  border-radius: 10px;
-  margin: 10px;
-  width: 100%;
-  height: 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;

FE/baseball/src/Components/Home/MatchInfo/MatchBox/TeamName.jsx

@@ -1,24 +1,7 @@
-import styled from 'styled-components';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
 
 const TeamName = () => {
-  return <TeamNameStyle>TeamName</TeamNameStyle>;
+  return <S.TeamName>TeamName</S.TeamName>;
 };
 
 export default TeamName;
-
-const TeamNameStyle = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 23px;
-  font-weight: 900;
-  cursor: pointer;
-  transition: all ease-in-out 0.2s;
-
-  :hover {
-    color: #ffa7c4;
-    font-size: 24px;
-  }
-`;

FE/baseball/src/Components/Home/MatchInfo/MatchBox/VS.jsx

@@ -1,14 +1,7 @@
-import styled from 'styled-components';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
 
 const VS = () => {
-  return <VSStyle>VS</VSStyle>;
+  return <S.VS>VS</S.VS>;
 };
 
 export default VS;
-
-const VSStyle = styled.div`
-  display: flex;
-  align-items: center;
-  font-weight: 900;
-  font-size: 14px;
-`;

FE/baseball/src/Components/Home/MatchInfo/MatchInfo.jsx

@@ -1,21 +1,14 @@
-import styled from 'styled-components';
 import MatchInfoBody from './MatchInfoBody';
 import MatchInfoTitle from './MatchInfoTitle';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
 
 const MatchInfo = () => {
   return (
-    <MatchInfoStyle>
+    <S.MatchInfo>
       <MatchInfoTitle />
       <MatchInfoBody />
-    </MatchInfoStyle>
+    </S.MatchInfo>
   );
 };
 
 export default MatchInfo;
-
-const MatchInfoStyle = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 500px;
-`;

FE/baseball/src/Components/Home/MatchInfo/MatchInfoBody.jsx

@@ -1,57 +1,20 @@
-import styled from 'styled-components';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
 import MatchBox from './MatchBox/MatchBox';
 
 const MatchInfoBody = () => {
   return (
-    <ScrollMask>
-      <MatchInfoBodyStyle>
+    <S.ScrollMask>
+      <S.MatchInfoBody>
         <MatchBox />
         <MatchBox />
         <MatchBox />
         <MatchBox />
         <MatchBox />
         <MatchBox />
         <MatchBox />
-      </MatchInfoBodyStyle>
-    </ScrollMask>
+      </S.MatchInfoBody>
+    </S.ScrollMask>
   );
 };
 
 export default MatchInfoBody;
-
-const MatchInfoBodyStyle = styled.div`
-  width: 100%;
-  height: 340px;
-  padding: 0px 20px 0px 10px;
-  overflow-y: scroll;
-
-  ::-webkit-scrollbar {
-    width: 10px;
-    height: 20px;
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: #222;
-    border-radius: 8px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 8px;
-    background: #ffd2e1;
-  }
-
-  mask-image: linear-gradient(to top, transparent, #222),
-    linear-gradient(to left, transparent 12px, #222 12px);
-  mask-size: 100% 2000000px;
-  mask-position: left bottom;
-  transition: mask-position 0.3s, -webkit-mask-position 0.3s;
-
-  :hover {
-    mask-position: left top;
-  }
-`;
-
-const ScrollMask = styled.div`
-  width: 100%;
-  border: 1px solid #ffa7c4;
-`;

FE/baseball/src/Components/Home/MatchInfo/MatchInfoTitle.jsx

@@ -1,13 +1,7 @@
-import styled from 'styled-components';
+import { HomeStyles as S } from '@/Components/Home/HomeStyles';
 
 const MatchInfoTitle = () => {
-  return <MatchInfoTitleStyle>⚾ Choose the Game ⚾︎</MatchInfoTitleStyle>;
+  return <S.MatchInfoTitle>⚾ Choose the Game ⚾︎</S.MatchInfoTitle>;
 };
 
 export default MatchInfoTitle;
-
-const MatchInfoTitleStyle = styled.div`
-  padding: 40px 40px 20px 40px;
-  font-size: 24px;
-  letter-spacing: 3px;
-`;