#2 회원가입 페이지 디자인 변경 완료

kdt-8-4 · Nov 16, 2023 · 0bfa5c4 · 0bfa5c4
1 parent ebc8b14
commit 0bfa5c4
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/react-page/src/component/Register.tsx b/react-page/src/component/Register.tsx
@@ -6,8 +6,8 @@ export default function Register() {
     <div id="container">
       <div id="x-div">
         <CloseIcon id="x" />
+        <hr />
       </div>
-      <hr />
       <section id="main">
         <p>회원가입</p>
         <form>
@@ -43,10 +43,13 @@ export default function Register() {
               placeholder="비밀번호 확인"
             />
           </div>
+          {/* <br />
+          <br />
+          <br /> */}
           <button id="btn_register">옷늘 캐스터 등록</button>
         </form>
       </section>
-      <footer></footer>
+      <footer>옷늘날씨</footer>
     </div>
   );
 }
diff --git a/react-page/src/style/_util.scss b/react-page/src/style/_util.scss
@@ -17,6 +17,7 @@ $color-register: #7995f9;
   font-size: $size;
   line-height: normal;
   letter-spacing: 3px;
+  margin-top: 0;
 }
 
 @mixin btn($width, $height, $font) {

diff --git a/react-page/src/style/register.scss b/react-page/src/style/register.scss
@@ -6,9 +6,13 @@
   height: 100%;
   font-family: "EASTARJET-Medium";
   font-weight: 600;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 #x-div {
   text-align: right;
+  padding: 10px 10px 0px 10px;
 }
 hr {
   height: 1px;
@@ -25,9 +29,9 @@ form {
   display: flex;
   flex-direction: column;
   width: 65vw;
-  height: 65vh;
-  justify-content: space-evenly;
+  justify-content: space-around;
   align-items: center;
+  height: 100%;
 
   div {
     display: flex;
@@ -68,18 +72,26 @@ input {
 
   &::placeholder {
     color: #ababaa;
+    font-size: 11px;
   }
   //TODO 작성 다 되면 (값 생기면) 하얀색으로 바뀌는 디자인 필요
   &:focus {
     background-color: #fff;
   }
 }
 
+#btn_register {
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  margin-top: 5vh;
+}
+
+footer {
+  text-align: center;
+  margin-bottom: 2vh;
+}
+
 // 모바일
 @media only screen and (min-width: 320px) and (max-width: 768px) {
-  #x-div {
-    padding: 10px 10px 0px 0px;
-  }
   #x {
     @include x-icon(18px, 18px); // 가로, 세로
   }
@@ -93,15 +105,11 @@ input {
 
   #btn_register {
     @include btn(147px, 35px, 15px); // 가로, 세로, 폰트 사이즈
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   }
 }
 
 // 태블릿 ~ 데스크탑
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
-  #x-div {
-    padding: 10px 10px 0px 0px;
-  }
   #x {
     @include x-icon(26px, 26px); // 가로, 세로
   }
@@ -117,15 +125,11 @@ input {
 
   #btn_register {
     @include btn(147px, 35px, 15px); // 가로, 세로, 폰트 사이즈
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   }
 }
 
 // 데스크탑 ~
 @media only screen and (min-width: 1024px) {
-  #x-div {
-    padding-top: 10px;
-  }
   #x {
     @include x-icon(30px, 30px); // 가로, 세로
   }
@@ -141,6 +145,5 @@ input {
 
   #btn_register {
     @include btn(147px, 35px, 15px); // 가로, 세로, 폰트 사이즈
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   }
 }