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

kdt-8-4 · Nov 15, 2023 · ebc8b14 · ebc8b14
1 parent 89ecdbd
commit ebc8b14
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 78 deletions.
diff --git a/react-page/src/component/Register.tsx b/react-page/src/component/Register.tsx
@@ -12,25 +12,37 @@ export default function Register() {
         <p>회원가입</p>
         <form>
           {/* 이메일 👉🏻 이메일 형식 유효성 검사*/}
-          <label htmlFor="email">이메일</label>
-          <div>
-            <input type="email" id="email" />
-            <button id="btn_verify">인증</button>
+          <div id="div_email">
+            <label htmlFor="email">이메일</label>
+            <div>
+              <input type="email" id="email" />
+              <button id="btn_verify">인증</button>
+            </div>
           </div>
           {/* 이름*/}
-          <label htmlFor="name">이름</label>
-          <input type="text" id="name" />
+          <div>
+            <label htmlFor="name">이름</label>
+            <input type="text" id="name" />
+          </div>
           {/* 닉네임 👉🏻 중복검사*/}
-          <label htmlFor="nickname">닉네임</label>
-          <input type="text" id="nickname" />
+          <div>
+            <label htmlFor="nickname">닉네임</label>
+            <input type="text" id="nickname" />
+          </div>
           {/* 비밀번호 👉🏻 중복검사 & 유효성 검사*/}
-          <label htmlFor="password">비밀번호</label>
-          <input
-            type="password"
-            id="password"
-            placeholder="비밀번호(8~20자 영문, 숫자, 특수기호 조합)"
-          />
-          <input type="password" id="re-password" placeholder="비밀번호 확인" />
+          <div>
+            <label htmlFor="password">비밀번호</label>
+            <input
+              type="password"
+              id="password"
+              placeholder="비밀번호(8~20자 영문, 숫자, 특수기호 조합)"
+            />
+            <input
+              type="password"
+              id="re-password"
+              placeholder="비밀번호 확인"
+            />
+          </div>
           <button id="btn_register">옷늘 캐스터 등록</button>
         </form>
       </section>

diff --git a/react-page/src/style/_font.scss b/react-page/src/style/_font.scss
@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "EASTARJET-Medium";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/EASTARJET-Medium.woff2")
+    format("woff2");
+  font-weight: 500;
+  font-style: normal;
+}
diff --git a/react-page/src/style/_util.scss b/react-page/src/style/_util.scss
@@ -1,3 +1,5 @@
+@import "_font.scss";
+
 $color-main: #a8bbff;
 $color-sub: #d0dbff;
 $color-register: #7995f9;
@@ -6,13 +8,32 @@ $color-register: #7995f9;
   color: $color-main;
   width: $width;
   height: $height;
+  cursor: pointer;
 }
 
 @mixin register($size) {
   color: $color-register;
   text-align: center;
   font-size: $size;
-  font-weight: 800;
   line-height: normal;
   letter-spacing: 3px;
 }
+
+@mixin btn($width, $height, $font) {
+  // 버튼 글자
+  color: #fff;
+  text-align: center;
+  font-family: "EASTARJET-Medium";
+  font-weight: 700;
+  font-size: $font;
+  line-height: normal;
+  letter-spacing: 2px;
+  // 버튼 윤곽(?)
+  width: $width;
+  height: $height;
+  flex-shrink: 0;
+  background-color: $color-main;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+}
diff --git a/react-page/src/style/register.scss b/react-page/src/style/register.scss
@@ -1,7 +1,11 @@
 @import "_util.scss";
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;800&display=swap");
+
 #container {
   width: 100%;
   height: 100%;
+  font-family: "EASTARJET-Medium";
+  font-weight: 600;
 }
 #x-div {
   text-align: right;
@@ -16,92 +20,84 @@ hr {
   flex-direction: column;
   align-items: center;
 }
+
 form {
   display: flex;
   flex-direction: column;
-  width: 250px;
+  width: 65vw;
+  height: 65vh;
+  justify-content: space-evenly;
+  align-items: center;
 
-  label {
-    color: $color-sub;
-    text-align: center;
-    font-family: Inter;
-    font-size: 15px;
-    font-style: normal;
-    font-weight: 800;
-    line-height: normal;
-    letter-spacing: -0.333px;
+  div {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
   }
-}
 
-#btn_verify {
-  // 글자
-  color: #fff;
+  #div_email {
+    display: flex;
+    div {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      input {
+        width: calc(100% - 65px);
+      }
+    }
+  }
+}
 
-  text-align: center;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 800;
+label {
+  color: $color-main;
+  text-align: left;
+  font-size: 15px;
   line-height: normal;
-  letter-spacing: 2px;
-
-  // 버튼
-  width: 53px;
-  height: 38px;
-  flex-shrink: 0;
-  background-color: $color-main;
-  border: none;
-  border-radius: 10px;
+  letter-spacing: -0.333px;
+  margin-bottom: 5px;
 }
 
-#btn_register {
-  // 글자
-  color: #fff;
-
-  text-align: center;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 800;
-  line-height: normal;
-  letter-spacing: 2px;
+input {
+  font-family: "EASTARJET-Medium";
+  font-weight: 100;
+  border: 1px solid $color-main;
+  border-radius: 5px;
+  height: 30px;
+  background-color: #f0f0f0;
+  margin-bottom: 5px;
 
-  // 버튼
-  width: 147px;
-  height: 35px;
-  flex-shrink: 0;
-  background-color: $color-main;
-  border: none;
-  border-radius: 10px;
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  &::placeholder {
+    color: #ababaa;
+  }
+  //TODO 작성 다 되면 (값 생기면) 하얀색으로 바뀌는 디자인 필요
+  &:focus {
+    background-color: #fff;
+  }
 }
 
+// 모바일
 @media only screen and (min-width: 320px) and (max-width: 768px) {
   #x-div {
     padding: 10px 10px 0px 0px;
   }
   #x {
     @include x-icon(18px, 18px); // 가로, 세로
   }
-
   p {
-    @include register(24px);
+    @include register(24px); // 폰트 사이즈
   }
 
-  //TODO 작성 다 되면 (값 생기면) 하얀색으로 바뀌는 디자인 필요
-  form {
-    input {
-      border: 1px solid $color-main;
-      border-radius: 5px;
-      height: 20px;
-      background-color: #f0f0f0;
-    }
-    & :focus {
-      background-color: #fff;
-    }
+  #btn_verify {
+    @include btn(53px, 35px, 15px); // 가로, 세로, 폰트 사이즈
+  }
+
+  #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;
@@ -110,10 +106,22 @@ form {
     @include x-icon(26px, 26px); // 가로, 세로
   }
   p {
-    @include register(30px);
+    @include register(30px); // 폰트 사이즈
+  }
+  form {
+    width: 30vw;
+  }
+  #btn_verify {
+    @include btn(53px, 35px, 15px); // 가로, 세로, 폰트 사이즈
+  }
+
+  #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;
@@ -122,6 +130,17 @@ form {
     @include x-icon(30px, 30px); // 가로, 세로
   }
   p {
-    @include register(36px);
+    @include register(36px); // 폰트 사이즈
+  }
+  form {
+    width: 30vw;
+  }
+  #btn_verify {
+    @include btn(53px, 35px, 15px); // 가로, 세로, 폰트 사이즈
+  }
+
+  #btn_register {
+    @include btn(147px, 35px, 15px); // 가로, 세로, 폰트 사이즈
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   }
 }