Design: 채널 수정 모달 디자인 변경

TheUpperPart · Nov 21, 2023 · 19614b3 · 19614b3
1 parent b3e0912
commit 19614b3
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 41 deletions.
diff --git 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
@@ -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,49 +50,63 @@ 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>
   );
 };
 
 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`