From 14a11751e172166962416ae40dafcde2511926a6 Mon Sep 17 00:00:00 2001
From: imeureka <lky062@naver.com>
Date: Wed, 10 Jan 2024 02:31:10 -0800
Subject: [PATCH] =?UTF-8?q?style:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tournament/intro/TournamentContainer.tsx         | 12 +++---------
 .../tournament/intro/TournamentContatiner.style.tsx  |  7 +++++++
 .../TournamentStartButton.style.ts                   |  7 +++++++
 .../tournamentStartButton/TournamentStartButton.tsx  | 12 +++---------
 4 files changed, 20 insertions(+), 18 deletions(-)
 create mode 100644 src/components/tournament/intro/TournamentContatiner.style.tsx
 create mode 100644 src/components/tournament/intro/tournamentStartButton/TournamentStartButton.style.ts

diff --git a/src/components/tournament/intro/TournamentContainer.tsx b/src/components/tournament/intro/TournamentContainer.tsx
index 3fed9989..d359a521 100644
--- a/src/components/tournament/intro/TournamentContainer.tsx
+++ b/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;
-`;
diff --git a/src/components/tournament/intro/TournamentContatiner.style.tsx b/src/components/tournament/intro/TournamentContatiner.style.tsx
new file mode 100644
index 00000000..e1125da5
--- /dev/null
+++ b/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;
+`;
\ No newline at end of file
diff --git a/src/components/tournament/intro/tournamentStartButton/TournamentStartButton.style.ts b/src/components/tournament/intro/tournamentStartButton/TournamentStartButton.style.ts
new file mode 100644
index 00000000..2fe2ef4b
--- /dev/null
+++ b/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;
+`;
diff --git a/src/components/tournament/intro/tournamentStartButton/TournamentStartButton.tsx b/src/components/tournament/intro/tournamentStartButton/TournamentStartButton.tsx
index b7a1eaf3..1637a1c6 100644
--- a/src/components/tournament/intro/tournamentStartButton/TournamentStartButton.tsx
+++ b/src/components/tournament/intro/tournamentStartButton/TournamentStartButton.tsx
@@ -1,6 +1,6 @@
 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;
@@ -8,18 +8,12 @@ interface TournamentStartButtonProps {
 
 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;