[토너먼트] 토너먼트 인트로 화면 퍼블리싱 및 랜더링 (#67)

* feat: 토너먼트 공통 버튼 도입

* docs: 토너먼트 컨테이너 폴더변경

* style: 토너먼트 패딩 값 변경

* feat: 공통 컴포넌트 시작하기 버튼 구현

* feat: 시작하기 버튼 후 라운드 시작 로직 구현!

* chore: 네이밍 오타 수정

* style: 스타일 코드 분리

* style: arrow 함수로 변경

* fix: 아이콘 오류 수정

src/components/tournament/TournamentFlowContainer.tsx

@@ -0,0 +1,12 @@
+import TournamentCard from './tournamentFlow/tournamentCard/TournamentCard';
+import TournamentFooter from './tournamentFlow/tournamentFooter/TournamentFooter';
+const TournamentFlowContainer = () => {
+  return (
+    <>
+      <TournamentCard />
+      <TournamentFooter />
+    </>
+  );
+};
+
+export default TournamentFlowContainer;

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 (
     <>
-      <TournamentStartText />
-      <TournamentItemCount />
-      <TournamentImg>
-        <Svg3Dicons />
-      </TournamentImg>
-      {/* 공통버튼 btn_cta_fill 들어갈 예정*/}
+      {showTournamentContainer && (
+        <>
+          <TournamentStartText />
+          <TournamentItemCount />
+          <S.TournamentImg>
+            <Svg3Dicons />
+          </S.TournamentImg>
+          <TournamentStartButton onClick={handleStartClick} />
+        </>
+      )}
+
+      {!showTournamentContainer && <TournamentFlowContainer />}
     </>
   );
-}
+};
 
-const TournamentImg = styled.div`
-  width: 20rem;
-  height: 20rem;
-  margin: 0 auto;
-`;
+export default TournamentContainer;

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,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<TournamentStartButtonProps> = ({ onClick }) => {
   return (
-    <div>
-      <button>시작하기</button>
-    </div>
+    <S.TournamentStartButtonWrapper>
+      <BtnFill customStyle={{ backgroundColor: '#FF2176', border: 'none' }} onClick={onClick}>
+        시작하기
+      </BtnFill>
+    </S.TournamentStartButtonWrapper>
   );
-}
+};
+
+export default TournamentStartButton;

src/pages/TournamentOngoing.tsx

@@ -1,4 +1,4 @@
-import TournamentFlowContainer from '../components/TournamentFlowContainer';
+import TournamentFlowContainer from '../components/tournament/TournamentFlowContainer';
 
 const TournamentOngoing = () => {
   return (

src/pages/TournamentPage.tsx

@@ -1,16 +1,16 @@
 import styled from 'styled-components';
-import TournamentConatainer from '../components/tournament/intro/TournamentContainer';
+import TournamentContainer from '../components/tournament/intro/TournamentContainer';
 
 const TournamentPage = () => {
   return (
     <TournamentPageWrapper>
-      <TournamentConatainer />
+      <TournamentContainer />
     </TournamentPageWrapper>
   );
 };
 
 export default TournamentPage;
 
 const TournamentPageWrapper = styled.section`
-  margin: 0 2rem;
+  padding: 1.2rem 2rem 0 2rem;
 `;