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; `;