diff --git a/src/components/TournamentFlowContainer.tsx b/src/components/TournamentFlowContainer.tsx
deleted file mode 100644
index f42f8dc7..00000000
--- a/src/components/TournamentFlowContainer.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import TournamentCard from './tournament/tournamentFlow/tournamentCard/TournamentCard';
-import TournamentFooter from './tournament/tournamentFlow/tournamentFooter/TournamentFooter';
-const TournamentFlowContainer = () => {
- return (
- <>
-
-
- >
- );
-};
-
-export default TournamentFlowContainer;
diff --git a/src/components/tournament/TournamentFlowContainer.tsx b/src/components/tournament/TournamentFlowContainer.tsx
new file mode 100644
index 00000000..f6ecc67d
--- /dev/null
+++ b/src/components/tournament/TournamentFlowContainer.tsx
@@ -0,0 +1,12 @@
+import TournamentCard from './tournamentFlow/tournamentCard/TournamentCard';
+import TournamentFooter from './tournamentFlow/tournamentFooter/TournamentFooter';
+const TournamentFlowContainer = () => {
+ return (
+ <>
+
+
+ >
+ );
+};
+
+export default TournamentFlowContainer;
diff --git a/src/components/tournament/intro/TournamentContainer.tsx b/src/components/tournament/intro/TournamentContainer.tsx
index b9fed45b..2216e4ab 100644
--- a/src/components/tournament/intro/TournamentContainer.tsx
+++ b/src/components/tournament/intro/TournamentContainer.tsx
@@ -1,23 +1,33 @@
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';
+import TournamentFlowContainer from '../TournamentFlowContainer';
-export default function TournamentConatainer() {
+const TournamentContainer = () => {
+ const [showTournamentContainer, setShowTournamentContainer] = useState(true);
+
+ const handleStartClick = () => {
+ setShowTournamentContainer(false);
+ };
return (
<>
-
-
-
-
-
- {/* 공통버튼 btn_cta_fill 들어갈 예정*/}
+ {showTournamentContainer && (
+ <>
+
+
+
+
+
+
+ >
+ )}
+
+ {!showTournamentContainer && }
>
);
-}
+};
-const TournamentImg = styled.div`
- width: 20rem;
- height: 20rem;
- margin: 0 auto;
-`;
+export default TournamentContainer;
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 8c5c3710..1637a1c6 100644
--- a/src/components/tournament/intro/tournamentStartButton/TournamentStartButton.tsx
+++ b/src/components/tournament/intro/tournamentStartButton/TournamentStartButton.tsx
@@ -1,7 +1,19 @@
-export default function TournamentStartButton() {
+import React from 'react';
+import BtnFill from '../../../common/Button/Cta/fill/BtnFill';
+import * as S from './TournamentStartButton.style';
+
+interface TournamentStartButtonProps {
+ onClick: () => void;
+}
+
+const TournamentStartButton: React.FC = ({ onClick }) => {
return (
-
-
-
+
+
+ 시작하기
+
+
);
-}
+};
+
+export default TournamentStartButton;
diff --git a/src/pages/TournamentOngoing.tsx b/src/pages/TournamentOngoing.tsx
index b77eeb57..1e730a9c 100644
--- a/src/pages/TournamentOngoing.tsx
+++ b/src/pages/TournamentOngoing.tsx
@@ -1,4 +1,4 @@
-import TournamentFlowContainer from '../components/TournamentFlowContainer';
+import TournamentFlowContainer from '../components/tournament/TournamentFlowContainer';
const TournamentOngoing = () => {
return (
diff --git a/src/pages/TournamentPage.tsx b/src/pages/TournamentPage.tsx
index 6205f0a4..eeb3dded 100644
--- a/src/pages/TournamentPage.tsx
+++ b/src/pages/TournamentPage.tsx
@@ -1,10 +1,10 @@
import styled from 'styled-components';
-import TournamentConatainer from '../components/tournament/intro/TournamentContainer';
+import TournamentContainer from '../components/tournament/intro/TournamentContainer';
const TournamentPage = () => {
return (
-
+
);
};
@@ -12,5 +12,5 @@ const TournamentPage = () => {
export default TournamentPage;
const TournamentPageWrapper = styled.section`
- margin: 0 2rem;
+ padding: 1.2rem 2rem 0 2rem;
`;