From 1e97d05232f3ec3a9b29941e8152f013a5c8b442 Mon Sep 17 00:00:00 2001
From: LEE KAYOUNG / KATIE <104339899+imeureka@users.noreply.github.com>
Date: Thu, 11 Jan 2024 00:20:37 -0800
Subject: [PATCH] =?UTF-8?q?[=ED=86=A0=EB=84=88=EB=A8=BC=ED=8A=B8]=20?=
=?UTF-8?q?=ED=86=A0=EB=84=88=EB=A8=BC=ED=8A=B8=20=EC=9D=B8=ED=8A=B8?=
=?UTF-8?q?=EB=A1=9C=20=ED=99=94=EB=A9=B4=20=ED=8D=BC=EB=B8=94=EB=A6=AC?=
=?UTF-8?q?=EC=8B=B1=20=EB=B0=8F=20=EB=9E=9C=EB=8D=94=EB=A7=81=20(#67)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: 토너먼트 공통 버튼 도입
* docs: 토너먼트 컨테이너 폴더변경
* style: 토너먼트 패딩 값 변경
* feat: 공통 컴포넌트 시작하기 버튼 구현
* feat: 시작하기 버튼 후 라운드 시작 로직 구현!
* chore: 네이밍 오타 수정
* style: 스타일 코드 분리
* style: arrow 함수로 변경
* fix: 아이콘 오류 수정
---
src/components/TournamentFlowContainer.tsx | 12 ------
.../tournament/TournamentFlowContainer.tsx | 12 ++++++
.../tournament/intro/TournamentContainer.tsx | 38 ++++++++++++-------
.../intro/TournamentContatiner.style.tsx | 7 ++++
.../TournamentStartButton.style.ts | 7 ++++
.../TournamentStartButton.tsx | 22 ++++++++---
src/pages/TournamentOngoing.tsx | 2 +-
src/pages/TournamentPage.tsx | 6 +--
8 files changed, 71 insertions(+), 35 deletions(-)
delete mode 100644 src/components/TournamentFlowContainer.tsx
create mode 100644 src/components/tournament/TournamentFlowContainer.tsx
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/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;
`;