feat:19-login-style3(#19)

masil-team · Jan 18, 2023 · 3fb671a · 3fb671a
1 parent 56e122e
commit 3fb671a
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 34 deletions.
diff --git a/app/src/pages/Login/Form/index.jsx b/app/src/pages/Login/Form/index.jsx
@@ -32,11 +32,14 @@ const Form = () => {
   return (
     <>
       <form className={styles.form} onSubmit={handleSubmit(sendLoginData)}>
-        <span className={styles.span}>이메일</span>
+        <span className={styles.span}>
+          이메일<span className={styles.spanICon}>*</span>
+          <span className={styles.error}>{formState.errors.email?.message}</span>
+        </span>
         {/* email 유효성검사 메시지 */}
-        <span>{formState.errors.email?.message}</span>
+
         {/* password 유효성검사 메시지 */}
-        <span>{formState.errors.password?.message}</span>
+
         <input
           className={styles.input}
           {...register('email', {
@@ -60,7 +63,10 @@ const Form = () => {
           type="text"
           placeholder="이메일을 입력해주세요"
         ></input>
-        <span className={styles.span2}>비밀번호</span>
+        <span className={styles.span2}>
+          비밀번호<span className={styles.spanICon}>*</span>
+          <span className={styles.error}>{formState.errors.password?.message}</span>
+        </span>
         <input
           className={styles.input}
           {...register('password', {
@@ -85,7 +91,9 @@ const Form = () => {
           placeholder="비밀번호를 입력해주세요"
         ></input>
         <div className={styles.passwordBox}>
-          <Link to="#">비밀번호 찾기</Link>
+          <Link to="#">
+            <span>비밀번호 찾기</span>
+          </Link>
         </div>
         <button className={styles.btn}>로그인</button>
         <button className={styles.btn}>회원가입</button>

diff --git a/app/src/pages/Login/Form/style.module.css b/app/src/pages/Login/Form/style.module.css
@@ -7,38 +7,103 @@
 .span {
   font-size: 18px;
   display: block;
-  margin-bottom: 14px;
+  margin-bottom: 10px;
 }
 .input {
-  height: 70px;
-  width: 400px;
-  padding: 0px 35px;
+  height: 63px;
+  width: 382px;
+  padding: 0px 29px;
   border-radius: 2rem;
-  border: 1px solid rgba(0, 0, 0, 0.6);
-  margin-bottom: 30px;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: 25px;
+  font-size: 18px;
+}
+.input:focus {
+  border: double 2px transparent;
+  background-image: linear-gradient(white, white), linear-gradient(to left, #6253e1, #04befe);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
 }
 .span2 {
   font-size: 18px;
   display: block;
-  margin-bottom: 14px;
+  margin-bottom: 10px;
 }
 
 .passwordBox {
   width: 100%;
   display: flex;
   justify-content: end;
-  font-size: 16px;
+  font-size: 18px;
   margin-bottom: 30px;
+  letter-spacing: 2px;
+}
+.passwordBox span {
+  background: linear-gradient(to left, #6253e1, #04befe);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
-
 .btn {
-  width: 100%;
+  width: 440px;
   height: 67px;
-  margin-bottom: 25px;
+  margin-bottom: 24px;
   border-radius: 2.3rem;
-  font-size: 16px;
+  font-size: 18px;
   cursor: pointer;
-  background-color: linear-gradient(to left, rgba(98, 83, 225, 1), rgba(0, 0, 0, 1));
+  background-color: white;
+  border: 2px solid #6253e1;
+  border: double 2px transparent;
+  background-image: linear-gradient(white, white), linear-gradient(to left, #6253e1, #04befe);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+}
+.btn:hover {
+  background-image: linear-gradient(to left, #6253e1, #04befe);
+  color: white;
+}
 
-  border: 1.5px solid #6253e1;
+.spanICon {
+  color: #7e63ff;
+  margin-left: 4px;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.error {
+  margin-left: 40px;
+  font-size: 14px;
+  color: rgba(255, 0, 0, 0.7);
+}
+@media screen and (max-width: 769px) {
+  .span {
+    font-size: 14px;
+  }
+  .span2 {
+    font-size: 14px;
+  }
+  .input {
+    width: 230px;
+    height: 43px;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+  .passwordBox {
+    font-size: 14px;
+    margin-top: 5px;
+    margin-bottom: 25px;
+    font-size: 14px;
+  }
+  .btn {
+    width: 290px;
+    height: 45px;
+    font-size: 14px;
+  }
+  .spanICon {
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .error {
+    margin-left: 20px;
+    font-size: 9px;
+  }
 }
diff --git a/app/src/pages/Login/Social/index.jsx b/app/src/pages/Login/Social/index.jsx
@@ -9,11 +9,17 @@ const Social = () => {
       </div>
       <div className={styles.socialBtnContainer}>
         <div className={styles.btn}>
-          <div>K</div>
-          <span>kakao</span>
+          <span className={styles.span1}>K</span>
+          <span className={styles.span2}>Kakao</span>
+        </div>
+        <div className={styles.btn}>
+          <span className={styles.span1}>G</span>
+          <span className={styles.span2}>Google</span>
+        </div>
+        <div className={styles.btn}>
+          <span className={styles.span1}>N</span>
+          <span className={styles.span2}>Naver</span>
         </div>
-        <div className={styles.btn}></div>
-        <div className={styles.btn}></div>
       </div>
     </>
   );

diff --git a/app/src/pages/Login/Social/style.module.css b/app/src/pages/Login/Social/style.module.css
@@ -5,6 +5,7 @@
   justify-content: center;
   font-size: 16px;
   color: #bab6cd;
+  margin-top: 5px;
 
   margin-bottom: 30px;
 }
@@ -13,20 +14,52 @@
   width: 100%;
   height: 140px;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   flex-direction: row;
   align-items: center;
 }
 
 .btn {
   width: 140px;
   height: 140px;
-  border-radius: 0.4rem;
+  border-radius: 0.6rem;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   cursor: pointer;
-  border: 4px solid black;
+  border: 1.5px solid rgba(0, 0, 0, 0.2);
   cursor: pointer;
 }
+.btn:hover {
+  border: double 1.5px transparent;
+  background-image: linear-gradient(white, white), linear-gradient(to left, #8e37d7, #5364e6);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+}
+
+.span1 {
+  font-size: 26px;
+  font-weight: 600;
+}
+
+.span2 {
+  font-size: 16px;
+}
+@media screen and (max-width: 769px) {
+  .nameTag {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    font-size: 14px;
+  }
+  .btn {
+    width: 95px;
+    height: 100px;
+  }
+  .span1 {
+    font-size: 20px;
+  }
+  .span2 {
+    font-size: 10px;
+  }
+}
diff --git a/app/src/pages/Login/index.jsx b/app/src/pages/Login/index.jsx
@@ -2,15 +2,17 @@ import React from 'react';
 import Form from './Form';
 import styles from './style.module.css';
 import Social from './Social';
+import { useNavigate } from 'react-router-dom';
 
 const Login = () => {
+  const nav = useNavigate();
   return (
     <div className={styles.container}>
       <div className={styles.loginContainer}>
         <div className={styles.inner}>
           <div className={styles.navBox}>
             <h1 className={styles.loginH1}>로그인</h1>
-            <img src={`${process.env.PUBLIC_URL}/images/logo.png`}></img>
+            <img onClick={() => nav('/')} src={`${process.env.PUBLIC_URL}/images/logo.png`}></img>
           </div>
           <span className={styles.span}>오늘부터 당신의 생각을 세상과 공유하세요</span>
           <section className={styles.sectionForm}>

diff --git a/app/src/pages/Login/style.module.css b/app/src/pages/Login/style.module.css
@@ -6,23 +6,27 @@
   justify-content: center;
 }
 .loginContainer {
-  width: 478px;
-  height: 871px;
+  width: 448px;
+  height: 850px;
   border-radius: 1.6rem;
-  padding: 10px 22px;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  padding: 15px 20px;
 }
+
 .inner {
   width: 100%;
   height: 100%;
 }
 .loginH1 {
   font-size: 46px;
   color: #231a53;
+  font-weight: 600;
+  height: fit-content;
 }
 img {
   width: 33px;
   height: 38px;
+  cursor: pointer;
 }
 .navBox {
   width: 100%;
@@ -33,16 +37,36 @@ img {
 .span {
   display: block;
   font-size: 18px;
-  margin-top: 30px;
-  margin-bottom: 40px;
+  margin-top: 18px;
+  margin-bottom: 30px;
   color: #bab6cd;
 }
 .sectionForm {
   width: 100%;
-  height: 478px;
+  height: fit-content;
 }
 
 .sectionSocial {
   width: 100%;
-  height: 200px;
+  height: fit-content;
+}
+@media screen and (max-width: 769px) {
+  .loginContainer {
+    width: 300px;
+    height: 650px;
+  }
+  .loginH1 {
+    font-size: 35px;
+  }
+  .img {
+    width: 23px;
+    height: 30px;
+  }
+  .span {
+    display: block;
+    font-size: 16px;
+    margin-top: 18px;
+    margin-bottom: 20px;
+    color: #bab6cd;
+  }
 }