feat:19-login-style2(#19)

masil-team · Jan 16, 2023 · 56e122e · 56e122e
1 parent c7d8bc8
commit 56e122e
Show file tree

Hide file tree

Showing 9 changed files with 198 additions and 89 deletions.
diff --git a/app/package.json b/app/package.json
@@ -17,11 +17,8 @@
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
-<<<<<<< HEAD
     "react-hook-form": "^7.41.5",
-=======
     "react-intersection-observer": "^9.4.1",
->>>>>>> 49aaaf55d43af97ae60cb61b8e6e983fe90c69a2
     "react-redux": "^8.0.4",
     "react-router-dom": "^6.4.2",
     "react-scripts": "^5.0.1",

diff --git a/app/src/components/Nav/style.module.css b/app/src/components/Nav/style.module.css
@@ -1,10 +1,37 @@
-.nav{width: 100%;height: 60px;background: #eff2f4; position: fixed; top: 0;left: 0;z-index: 9000;}
-.container{max-width: 1440px; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; box-sizing: border-box; margin: 0 auto;}
+.nav {
+  width: 100%;
+  height: 60px;
+  background: #eff2f4;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9000;
+}
+.container {
+  max-width: 1440px;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  margin: 0 auto;
+}
 
 /* 로고 */
-.logo{width: 49px;height: 54px; cursor: pointer;}
-.logo img{width: 100%;height: 100%;object-fit: cover;}
+.logo {
+  width: 49px;
+  height: 54px;
+  cursor: pointer;
+}
+.logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 
-@media (max-width : 767px){
-    .container{padding: 0 10px; }
+@media (max-width: 767px) {
+  .container {
+    padding: 0 10px;
+  }
 }
diff --git a/app/src/pages/Login/Form/index.jsx b/app/src/pages/Login/Form/index.jsx
@@ -60,7 +60,7 @@ const Form = () => {
           type="text"
           placeholder="이메일을 입력해주세요"
         ></input>
-        <span className={styles.span}>비밀번호</span>
+        <span className={styles.span2}>비밀번호</span>
         <input
           className={styles.input}
           {...register('password', {

diff --git a/app/src/pages/Login/Form/style.module.css b/app/src/pages/Login/Form/style.module.css
@@ -1,35 +1,44 @@
 .form {
   display: flex;
   flex-direction: column;
-  background-color: green;
   height: 100%;
+  width: 100%;
 }
 .span {
-  font-size: 16px;
+  font-size: 18px;
   display: block;
-  margin-top: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 14px;
 }
 .input {
-  height: 50px;
-  width: 90%;
-  border-radius: 1.2rem;
-  padding: 0px 14px;
+  height: 70px;
+  width: 400px;
+  padding: 0px 35px;
+  border-radius: 2rem;
   border: 1px solid rgba(0, 0, 0, 0.6);
+  margin-bottom: 30px;
+}
+.span2 {
+  font-size: 18px;
+  display: block;
+  margin-bottom: 14px;
 }
 
 .passwordBox {
   width: 100%;
   display: flex;
   justify-content: end;
-  margin: 30px 0px;
   font-size: 16px;
+  margin-bottom: 30px;
 }
 
 .btn {
-  width: 95%;
-  height: 60px;
-  margin-bottom: 20px;
-  border-radius: 1.2rem;
+  width: 100%;
+  height: 67px;
+  margin-bottom: 25px;
+  border-radius: 2.3rem;
   font-size: 16px;
+  cursor: pointer;
+  background-color: linear-gradient(to left, rgba(98, 83, 225, 1), rgba(0, 0, 0, 1));
+
+  border: 1.5px solid #6253e1;
 }
diff --git a/app/src/pages/Login/Social/style.module.css b/app/src/pages/Login/Social/style.module.css
@@ -1,18 +1,16 @@
 .nameTag {
-  background-color: red;
-  padding: 20px 0px;
   display: flex;
   align-items: center;
-  height: 30px;
   width: 100%;
   justify-content: center;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.6);
+  font-size: 16px;
+  color: #bab6cd;
+
+  margin-bottom: 30px;
 }
 
 .socialBtnContainer {
   width: 100%;
-  background-color: blue;
   height: 140px;
   display: flex;
   justify-content: space-around;
@@ -21,14 +19,14 @@
 }
 
 .btn {
-  width: 30%;
-  background-color: white;
-  height: 90%;
+  width: 140px;
+  height: 140px;
   border-radius: 0.4rem;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   cursor: pointer;
   border: 4px solid black;
+  cursor: pointer;
 }
diff --git a/app/src/pages/Login/index.jsx b/app/src/pages/Login/index.jsx
@@ -7,17 +7,19 @@ const Login = () => {
   return (
     <div className={styles.container}>
       <div className={styles.loginContainer}>
-        <div className={styles.navBox}>
-          <h1 className={styles.loginH1}>로그인</h1>
-          <div className={styles.imageBox}></div>
+        <div className={styles.inner}>
+          <div className={styles.navBox}>
+            <h1 className={styles.loginH1}>로그인</h1>
+            <img src={`${process.env.PUBLIC_URL}/images/logo.png`}></img>
+          </div>
+          <span className={styles.span}>오늘부터 당신의 생각을 세상과 공유하세요</span>
+          <section className={styles.sectionForm}>
+            <Form />
+          </section>
+          <section className={styles.sectionSocial}>
+            <Social></Social>
+          </section>
         </div>
-        <span className={styles.span}>오늘부터 당신의 생각을 세상과 공유하세요</span>
-        <section className={styles.sectionForm}>
-          <Form />
-        </section>
-        <section className={styles.sectionSocial}>
-          <Social></Social>
-        </section>
       </div>
     </div>
   );

diff --git a/app/src/pages/Login/style.module.css b/app/src/pages/Login/style.module.css
@@ -6,44 +6,43 @@
   justify-content: center;
 }
 .loginContainer {
-  width: 490px;
-  height: 800px;
-  background-color: grey;
-  border-radius: 2rem;
-  padding: 1rem;
+  width: 478px;
+  height: 871px;
+  border-radius: 1.6rem;
+  padding: 10px 22px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
+.inner {
+  width: 100%;
+  height: 100%;
 }
 .loginH1 {
-  width: fit-content;
-  height: fit-content;
-  font-size: 2.6rem;
+  font-size: 46px;
+  color: #231a53;
 }
-.imageBox {
-  background-color: white;
-  width: 60px;
-  height: 50px;
+img {
+  width: 33px;
+  height: 38px;
 }
-
 .navBox {
-  width: 480px;
-  height: fit-content;
-  background-color: red;
+  width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .span {
   display: block;
-  font-size: 14px;
-  margin: 20px 0px;
+  font-size: 18px;
+  margin-top: 30px;
+  margin-bottom: 40px;
+  color: #bab6cd;
 }
 .sectionForm {
   width: 100%;
-  background-color: yellow;
-  height: 460px;
+  height: 478px;
 }
 
 .sectionSocial {
   width: 100%;
-  height: 210px;
-  background-color: yellow;
+  height: 200px;
 }
diff --git a/app/src/pages/Main/style.module.css b/app/src/pages/Main/style.module.css
@@ -1,19 +1,63 @@
-.section{padding-top: 60px; min-height: 100vh; box-sizing: border-box; background: #f8f9fa;}
-.container{max-width: 1440px; margin: 0 auto; padding: 30px 20px; box-sizing: border-box; }
+.section {
+  padding-top: 60px;
+  min-height: 100vh;
+  box-sizing: border-box;
+  background: #f8f9fa;
+}
+.container {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 30px 20px;
+  box-sizing: border-box;
+}
 
 /* 상단 네비,글쓰기 */
-.top_nav{margin-top: 30px; display: flex; justify-content: space-between;}
+.top_nav {
+  margin-top: 30px;
+  display: flex;
+  justify-content: space-between;
+}
 
 /* 카테고리 */
-.category{}
-.category ul{display: flex; flex-wrap: wrap;}
-.category ul li{height: 40px; padding: 0 20px; margin: 0 10px 10px 0; line-height: 40px; box-sizing: border-box; background: #e5edfe; cursor: pointer; border-radius: 30px;}
-.category ul li:last-child{margin-right: 0;}
-.category ul li em{color: #2d8efe;}
+.category {
+}
+.category ul {
+  display: flex;
+  flex-wrap: wrap;
+}
+.category ul li {
+  height: 40px;
+  padding: 0 20px;
+  margin: 0 10px 10px 0;
+  line-height: 40px;
+  box-sizing: border-box;
+  background: #e5edfe;
+  cursor: pointer;
+  border-radius: 30px;
+}
+.category ul li:last-child {
+  margin-right: 0;
+}
+.category ul li em {
+  color: #2d8efe;
+}
 
 /* 글쓰기 */
-.writing{}
-.writing .btn{width: 100px;height: 40px; border-radius: 20px;background: linear-gradient(90deg,#6e8efb,#6253e1); color: #fff; cursor: pointer;}
-.writing .btn em{ font-weight: 600; font-size: 16px;}
-.writing .btn .icon{margin-right: 5px; font-size: 16px; }
-
+.writing {
+}
+.writing .btn {
+  width: 100px;
+  height: 40px;
+  border-radius: 20px;
+  background: linear-gradient(90deg, #6e8efb, #6253e1);
+  color: #fff;
+  cursor: pointer;
+}
+.writing .btn em {
+  font-weight: 600;
+  font-size: 16px;
+}
+.writing .btn .icon {
+  margin-right: 5px;
+  font-size: 16px;
+}