From 8f150afeb2ec42012048ac68745862bc9f3e3ffc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=87=E1=85=A1=E1=86=A8=E1=84=8C=E1=85=A5=E1=86=BC?=
 =?UTF-8?q?=E1=84=89=E1=85=A5=E1=86=A8?= <wjdtjr8649@Naver.com>
Date: Tue, 21 Nov 2023 22:45:13 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EA=B2=BD=EA=B8=B0=20=EB=B0=B0?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EA=B2=BD=EA=B8=B0=20=EC=8B=9C=EC=9E=91?=
 =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ModifyChannel/AssignBracket.tsx           | 11 ++++----
 src/components/ModifyChannel/StartMatch.tsx   | 28 +++++++++++++++----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/ModifyChannel/AssignBracket.tsx b/src/components/ModifyChannel/AssignBracket.tsx
index 3416f185..501fc30a 100644
--- a/src/components/ModifyChannel/AssignBracket.tsx
+++ b/src/components/ModifyChannel/AssignBracket.tsx
@@ -13,8 +13,6 @@ const fetchAllBracket = async (channelLink: string) => {
     url: `/api/match/${channelLink}`,
   });
 
-  console.log(res);
-
   return res.data;
 };
 
@@ -53,7 +51,7 @@ const AssignBracket = () => {
             {round === data.liveRound && <BracketButton status='DONE'>배정 완료</BracketButton>}
             {round === data.liveRound + 1 && (
               <BracketButton status='READY' onClick={() => fetchSetBracket(round)}>
-                배정하기
+                배정 하기
               </BracketButton>
             )}
             {round > data.liveRound + 1 && <BracketButton status='BAN'>배정 불가</BracketButton>}
@@ -79,8 +77,9 @@ const Bracket = styled.div`
 
 const BracketHeader = styled.div`
   font-size: 1.6rem;
-
-  color: white;
+  font-weight: 700;
+  width: 8rem;
+  color: #020202;
 `;
 
 const BracketButton = styled.button<{ status: bracketStatus }>`
@@ -93,6 +92,8 @@ const BracketButton = styled.button<{ status: bracketStatus }>`
   font-size: 1.6rem;
   color: white;
 
+  border-radius: 2rem;
+
   ${(prop) =>
     prop.status === 'DONE' &&
     `
diff --git a/src/components/ModifyChannel/StartMatch.tsx b/src/components/ModifyChannel/StartMatch.tsx
index dc635d0d..3da11f7b 100644
--- a/src/components/ModifyChannel/StartMatch.tsx
+++ b/src/components/ModifyChannel/StartMatch.tsx
@@ -19,7 +19,7 @@ const StartMatch = () => {
   const handleStartMatch = async () => {
     if (window.confirm('대회를 시작하시겠습니까?\n시작한 이후에는 중지할 수 없습니다')) {
       try {
-        const res = fetchStartBracket();
+        const res = await fetchStartBracket();
         window.alert('대회가 시작되었습니다!\nRound 1 배정을 해주세요!');
       } catch (error) {
         if (error instanceof AxiosError) {
@@ -31,15 +31,33 @@ const StartMatch = () => {
 
   return (
     <Container>
-      <Button width={20} height={5} onClick={handleStartMatch}>
-        대회 시작
-      </Button>
+      <StartButton onClick={handleStartMatch}>대회 시작</StartButton>
+      <Text>대회가 시작된 후 취소할 수 없습니다!</Text>
     </Container>
   );
 };
 
 const Container = styled.div`
-  margin: 2rem 1rem;
+  width: 95%;
+  margin: 0 auto;
+  text-align: left;
+`;
+
+const Text = styled.div`
+  margin: 2rem 0;
+  font-size: 1.6rem;
+  color: #020202;
+`;
+const StartButton = styled.button`
+  background-color: #1aacac;
+
+  width: 12rem;
+  height: 4rem;
+
+  border-radius: 4rem;
+  border: none;
+
+  color: #f2f2f2;
 `;
 
 export default StartMatch;