Design: 리그 정보 수정 모달 디자인 변경

TheUpperPart · Nov 21, 2023 · 0e3a4b4 · 0e3a4b4
1 parent 8f150af
commit 0e3a4b4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 44 deletions.
diff --git a/src/components/ModifyChannel/BasicInfoChannel.tsx b/src/components/ModifyChannel/BasicInfoChannel.tsx
@@ -37,7 +37,6 @@ const BasicInfoChannel = ({ channelLink, leagueTitle, maxPlayer }: BasicInfoChan
 
   return (
     <Container>
-      <Header>리그 수정하기</Header>
       <Content>
         <Wrapper>
           <FlexWrapper>리그 제목</FlexWrapper>
@@ -63,24 +62,15 @@ const BasicInfoChannel = ({ channelLink, leagueTitle, maxPlayer }: BasicInfoChan
         </Wrapper>
       </Content>
 
-      <ButtonWrapper>
-        <SubmitButton onClick={onClickSubmit}>수정하기</SubmitButton>
-      </ButtonWrapper>
+      <SubmitButton onClick={onClickSubmit}>수정하기</SubmitButton>
     </Container>
   );
 };
 
 export default BasicInfoChannel;
 
 const Container = styled.div`
-  margin: 2rem 4rem;
-`;
-const Header = styled.div`
-  text-align: left;
-
-  font-size: 3rem;
-  font-weight: 900;
-  color: white;
+  width: 40rem;
 `;
 
 const Content = styled.div``;
@@ -95,9 +85,7 @@ const Wrapper = styled.div`
   min-height: 7rem;
 `;
 
-const FlexWrapper = styled.div`
-  color: white;
-`;
+const FlexWrapper = styled.div``;
 
 const ButtonWrapper = styled.div`
   display: flex;
@@ -117,18 +105,23 @@ const Input = styled.input`
 `;
 
 const SubmitButton = styled.button`
-  width: 10rem;
-  height: 6rem;
-  background-color: #344051;
+  position: absolute;
+  bottom: 2rem;
+  right: -4rem;
+  width: 8rem;
+  height: 4rem;
+  background-color: #ffffff;
   border: none;
   border-radius: 0.5rem;
-  color: white;
+  color: #020202;
   margin: 0 6rem 0 6rem;
   &:hover {
     cursor: pointer;
+    background-color: #ff4655;
+    color: #ffffff;
   }
   &:disabled {
-    background-color: #d3d3d3;
+    background-color: #ffffff;
     cursor: not-allowed;
   }
 `;
diff --git a/src/components/ModifyChannel/BracketInfoChannel.tsx b/src/components/ModifyChannel/BracketInfoChannel.tsx
@@ -69,7 +69,6 @@ const BracketInfoChannel = () => {
 
   return (
     <Container>
-      <Header>라운드 수정</Header>
       <Content>
         {isLoading && <div>로딩 중</div>}
         {isError && <div>Error</div>}
@@ -90,9 +89,7 @@ const BracketInfoChannel = () => {
             </RoundInfo>
           );
         })}
-        <ButtonWrapper>
-          <ModifyButton onClick={updateRoundMatchCount}>수정완료</ModifyButton>
-        </ButtonWrapper>
+        <ModifyButton onClick={updateRoundMatchCount}>수정 하기</ModifyButton>
       </Content>
     </Container>
   );
@@ -101,19 +98,16 @@ const BracketInfoChannel = () => {
 export default BracketInfoChannel;
 
 const Container = styled.div`
-  margin: 2rem 4rem;
+  color: #020202;
 `;
 
-const Header = styled.div`
-  text-align: left;
-
-  font-size: 3rem;
-  font-weight: 900;
-  color: white;
+const Content = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  width: 95%;
+  margin: 0 auto;
 `;
 
-const Content = styled.div``;
-
 const RoundInfo = styled.div`
   height: 7rem;
   display: flex;
@@ -122,26 +116,33 @@ const RoundInfo = styled.div`
 `;
 
 const RoundInfoHeader = styled.div`
-  font-size: 2rem;
-  color: white;
+  font-size: 1.6rem;
+  width: 10rem;
 `;
 
 const ButtonWrapper = styled.div`
   display: flex;
   align-items: center;
-  justify-content: flex-end;
 `;
 
 const ModifyButton = styled.button`
-  width: 10rem;
-  height: 6rem;
-  background-color: #344051;
+  position: absolute;
+  bottom: 2rem;
+  right: -4rem;
+  width: 8rem;
+  height: 4rem;
+  background-color: #ffffff;
   border: none;
   border-radius: 0.5rem;
-  color: white;
+  color: #020202;
   margin: 0 6rem 0 6rem;
-
-  cursor: pointer;
-
-  font-size: 1.8rem;
+  &:hover {
+    cursor: pointer;
+    background-color: #ff4655;
+    color: #ffffff;
+  }
+  &:disabled {
+    background-color: #ffffff;
+    cursor: not-allowed;
+  }
 `;