wip: 로그인 컴포넌트 전환

'Go'를 제외한 컴포넌트 전환 수정, CSS 수정, 태그 구조 수정
#14

pages/login/index.js

@@ -23,17 +23,16 @@ export default function Login() {
     setIsLoginSuccess(false);
   };
 
-  console.log(isLoginSuccess);
-
   return (
     <div className={styles.background}>
       {!isBye && (
         <div>
           <div className={styles.logo_img} />
           {!isLoginSuccess && (
             <div>
-              <a className={styles.inputrequest}>Input your code number..</a>
               <div>
+                <a className={styles.inputrequest}>Input your code number..</a>{" "}
+                <br />
                 <input
                   name="student-id"
                   type="text"
@@ -42,53 +41,38 @@ export default function Login() {
                   onChange={onChange}
                   placeholder="code number"
                 />
-
-                <div className={styles.prove}>
-                  <a>
-                    <span style={{ color: "#F9E219" }}>학번</span>으로 대숭실대
-                    우주전사임을 증명해주세요!
-                  </a>
+                <br />
+                <a className={styles.prove}>
+                  <span style={{ color: "#F9E219" }}>학번</span>으로 대숭실대
+                  우주전사임을 증명해주세요!
+                </a>
+                <div className={styles.loginBtn} onClick={onLoginChange}>
+                  Login{">"}
                 </div>
               </div>
             </div>
           )}
+          {isLoginSuccess && (
+            <div>
+              <a className={styles.startrequest}>
+                Do you want to go <br /> hunting stardust?
+              </a>
+              <br />
+              <button className={styles.goBtn}>Go!</button>
+              <br />
+              <button className={styles.awayBtn} onClick={onByeChange}>
+                Run away?
+              </button>
+            </div>
+          )}
         </div>
       )}
-
-      {!isLoginSuccess && (
-        <div className={styles.loginBtn} onClick={onLoginChange}>
-          Login{">"}
-        </div>
-      )}
-
-      {isLoginSuccess && (
-        <div className={styles.startrequest}>
-          <a>
-            Do you want to go <br /> hunting stardust?
-          </a>
-        </div>
-      )}
-      {isLoginSuccess && (
-        <div>
-          <button className={styles.goBtn}>Go!</button>
-        </div>
-      )}
-      {isLoginSuccess && (
-        <div>
-          <button className={styles.awayBtn} onClick={onByeChange}>
-            Run away?
-          </button>
-        </div>
-      )}
-
       {isBye && (
-        <div className={styles.startrequest}>
+        <div className={styles.okBye}>
           <a>Okay, Bye...</a>
         </div>
       )}
-      <div className={styles.ssumcLogo}>
-        <a>SSUMC</a>
-      </div>
+      <a className={styles.ssumcLogo}>SSUMC</a>
     </div>
   );
 }

styles/Login.module.css

@@ -6,14 +6,14 @@
   background: url(../public/background_image.png);
   min-height: 100vh;
   background-repeat: repeat-y;
-  background-size: 100%;
+  background-size: 200%;
   overflow: scroll;
 }
 
 .logo_img {
   min-width: 200px;
   max-width: 500px;
-  margin: 80px;
+  margin-bottom: 80px;
   margin-top: 60px;
   width: 326px;
   content: url(../public/startdust_logo.png);
@@ -66,44 +66,47 @@
 }
 
 .startrequest {
-  min-width: 200px;
-  max-width: 500px;
   text-align: left;
-  line-height: 1;
-  padding-bottom: 10px;
   font-family: "NeoDunggeunmo";
-  font-size: 15px;
+  font-size: 26px;
   color: aliceblue;
 }
 
 .goBtn {
-  min-width: 200px;
-  max-width: 500px;
+  width: 334px;
   display: inline-block;
-  margin: 5px;
+  margin-top: 30px;
   margin-left: 0;
-  color: aliceblue;
+  color: #ffffff;
   background-color: transparent; /*배경 투명*/
   border: 2px solid #f9e219; /* 라인선 none 인 경우 아예 안보임*/
   padding: 5px; /* 상하좌우 크기는 여백으로 설정 */
-
-  font-size: 18px;
+  font-size: 35px;
   font-family: "NeoDunggeunmo"; /*글씨체*/
-  border-radius: 3px; /*둥글게 표현*/
+  border-radius: 4px; /*둥글게 표현*/
+  background-color: rgba(249, 226, 25, 0.1);
 }
 
 .awayBtn {
-  min-width: 200px;
-  max-width: 500px;
-  margin: 5px;
-  margin-left: 0;
-  color: aliceblue;
+  width: 334px;
+  margin-bottom: 215px;
+  margin-top: 15px;
+  color: #ffffff;
   background-color: transparent; /*배경 투명*/
   border: 2px solid aliceblue; /* 라인선 none 인 경우 아예 안보임*/
   padding: 5px; /* 상하좌우 크기는 여백으로 설정 */
-  font-size: 18px;
+  font-size: 35px;
+  font-family: "NeoDunggeunmo";
+  border-radius: 4px;
+}
+
+.okBye {
+  margin-top: 407px;
+  margin-bottom: 371px;
+  text-align: left;
   font-family: "NeoDunggeunmo";
-  border-radius: 3px;
+  font-size: 26px;
+  color: aliceblue;
 }
 
 @font-face {