From 19614b3420968cebf8ca43f5ba661025549d0add 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:44:14 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20=EC=B1=84=EB=84=90=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Modal/ModifyChannel/ModifyBracket.tsx     | 13 +--
 .../Modal/ModifyChannel/ModifyChannel.tsx     | 87 +++++++++++--------
 2 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/src/components/Modal/ModifyChannel/ModifyBracket.tsx b/src/components/Modal/ModifyChannel/ModifyBracket.tsx
index 4e7ccf24..73e20e22 100644
--- a/src/components/Modal/ModifyChannel/ModifyBracket.tsx
+++ b/src/components/Modal/ModifyChannel/ModifyBracket.tsx
@@ -45,18 +45,21 @@ const Container = styled.div`
   position: relative;
 
   width: 40rem;
-  height: 60rem;
+  height: 40rem;
   display: flex;
 
-  background-color: #344051;
+  border-radius: 4rem;
+
+  background-color: #f2f2f2;
 `;
 
 const Content = styled.div`
-  margin: 2rem 1rem;
+  width: 95%;
+  margin: 0 auto;
 `;
 
 const Header = styled.div`
-  color: white;
+  color: #020202;
 
   font-size: 2rem;
 
@@ -80,7 +83,7 @@ const HeaderList = styled.button<{ isSelected: boolean }>`
     `}
 
   background-color: inherit;
-  color: white;
+  color: #020202;
   font-size: 2rem;
   font-weight: 900;
 
diff --git a/src/components/Modal/ModifyChannel/ModifyChannel.tsx b/src/components/Modal/ModifyChannel/ModifyChannel.tsx
index 537116de..722664c2 100644
--- a/src/components/Modal/ModifyChannel/ModifyChannel.tsx
+++ b/src/components/Modal/ModifyChannel/ModifyChannel.tsx
@@ -21,26 +21,27 @@ const fetchChannelInfo = async (channelLink: string) => {
 const ModifyChannel = ({ channelLink, onClose }: ModifyChannelProps) => {
   const [selectedMenu, setSelectedMenu] = useState<MenuList>('basicInfo');
 
-  const handleSelectedMenu = (menu: MenuList) => {
-    setSelectedMenu(menu);
-  };
-
   const { data, isSuccess, isError, isLoading } = useQuery(['channelInfo', channelLink], () => {
     return fetchChannelInfo(channelLink);
   });
 
   return (
     <Container>
-      <Sidebar>
-        <SidebarContent onClick={() => handleSelectedMenu('basicInfo')}>
-          대회 기본 정보 수정
-        </SidebarContent>
-
-        <SidebarContent onClick={() => handleSelectedMenu('bracketInfo')}>
-          대진표 수정
-        </SidebarContent>
-      </Sidebar>
-      <MainContent>
+      <Content>
+        <Header>
+          <HeaderList
+            isSelected={selectedMenu === 'basicInfo'}
+            onClick={() => setSelectedMenu('basicInfo')}
+          >
+            대회 정보 수정
+          </HeaderList>
+          <HeaderList
+            isSelected={selectedMenu === 'bracketInfo'}
+            onClick={() => setSelectedMenu('bracketInfo')}
+          >
+            대진표 수정
+          </HeaderList>
+        </Header>
         {selectedMenu === 'basicInfo' && (
           <BasicInfoChannel
             channelLink={channelLink}
@@ -49,10 +50,10 @@ const ModifyChannel = ({ channelLink, onClose }: ModifyChannelProps) => {
           />
         )}
         {selectedMenu === 'bracketInfo' && <BracketInfoChannel />}
-      </MainContent>
-      <CloseButtonContainer>
-        <Icon kind='cancel' size={40} onClick={() => onClose()} />
-      </CloseButtonContainer>
+        <CloseButtonContainer>
+          <Icon kind='cancel' size={40} onClick={() => onClose()} />
+        </CloseButtonContainer>
+      </Content>
     </Container>
   );
 };
@@ -60,38 +61,52 @@ const ModifyChannel = ({ channelLink, onClose }: ModifyChannelProps) => {
 export default ModifyChannel;
 
 const Container = styled.div`
-  width: 80rem;
-  height: 60rem;
-  background-color: white;
+  position: relative;
 
+  width: 40rem;
+  height: 40rem;
   display: flex;
-  position: relative;
-`;
 
-const Sidebar = styled.div`
-  width: 30rem;
-  background-color: #141c24;
+  border-radius: 4rem;
+
+  background-color: #f2f2f2;
 `;
 
-const SidebarContent = styled.div`
-  width: 80%;
-  height: 5rem;
+const Content = styled.div`
+  width: 95%;
   margin: 0 auto;
-  color: white;
+`;
+
+const Header = styled.div`
+  color: #020202;
 
   font-size: 2rem;
-  font-weight: 900;
+
+  height: 5rem;
 
   display: flex;
   align-items: center;
-
-  cursor: pointer;
+  column-gap: 2rem;
 `;
 
-const MainContent = styled.div`
-  width: calc(100vw - 30rem);
+const HeaderList = styled.button<{ isSelected: boolean }>`
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  ${(prop) =>
+    prop.isSelected &&
+    `
+      text-decoration:underline;
+      text-underline-position: under;
+    `}
 
-  background-color: #202b37;
+  background-color: inherit;
+  color: #020202;
+  font-size: 2rem;
+  font-weight: 900;
+
+  cursor: pointer;
 `;
 
 const CloseButtonContainer = styled.div`