style: 스타일 코드 분리

src/components/tournament/intro/TournamentContainer.tsx

@@ -1,6 +1,6 @@
 import TournamentStartText from './tournamentStartText/TournamentStartText';
 import TournamentItemCount from './tournamentItemCount/TournamentItemCount';
-import styled from 'styled-components';
+import * as S from './TournamentContatiner.style';
 import { Svg3Dicons } from '../../../assets/svg';
 import TournamentStartButton from './tournamentStartButton/TournamentStartButton';
 import { useState } from 'react';
@@ -18,9 +18,9 @@ export default function TournamentContainer() {
         <>
           <TournamentStartText />
           <TournamentItemCount />
-          <TournamentImg>
+          <S.TournamentImg>
             <Svg3Dicons />
-          </TournamentImg>
+          </S.TournamentImg>
           <TournamentStartButton onClick={handleStartClick} />
         </>
       )}
@@ -29,9 +29,3 @@ export default function TournamentContainer() {
     </>
   );
 }
-
-const TournamentImg = styled.div`
-  width: 20rem;
-  height: 20rem;
-  margin: 0 auto;
-`;

src/components/tournament/intro/TournamentContatiner.style.tsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const TournamentImg = styled.div`
+  width: 20rem;
+  height: 20rem;
+  margin: 0 auto;
+`;

src/components/tournament/intro/tournamentStartButton/TournamentStartButton.style.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const TournamentStartButtonWrapper = styled.div`
+  position: absolute;
+  margin-bottom: 2rem;
+  bottom: 0;
+`;

src/components/tournament/intro/tournamentStartButton/TournamentStartButton.tsx

@@ -1,25 +1,19 @@
 import React from 'react';
 import BtnFill from '../../../common/Button/Cta/fill/BtnFill';
-import styled from 'styled-components';
+import * as S from './TournamentStartButton.style';
 
 interface TournamentStartButtonProps {
   onClick: () => void;
 }
 
 const TournamentStartButton: React.FC<TournamentStartButtonProps> = ({ onClick }) => {
   return (
-    <TournamentStartButtonWrapper>
+    <S.TournamentStartButtonWrapper>
       <BtnFill customStyle={{ backgroundColor: '#FF2176', border: 'none' }} onClick={onClick}>
         시작하기
       </BtnFill>
-    </TournamentStartButtonWrapper>
+    </S.TournamentStartButtonWrapper>
   );
 };
 
-const TournamentStartButtonWrapper = styled.div`
-  position: absolute;
-  margin-bottom: 2rem;
-  bottom: 0;
-`;
-
 export default TournamentStartButton;