wip: 로그인 화면

전환되는 component 작업
#14

pages/login/index.js

@@ -1,33 +1,40 @@
+import { func } from "prop-types";
 import { useEffect, useRef, useState } from "react";
 import styles from "../../styles/Login.module.css";
 
 
 export default function Login(){
-
-    const[codeNumber,setCodeNumber]=useState("");
-    const onChange = (event) => {
-        console.log(event.target.value);
+    const [codeNumber, setCodeNumber] = useState("");
+    const onChange = (e) => {
+        const { name, value } = e.target
+        console.log(name, value)
+        setCodeNumber( value )
     }
-return(
-    <div className={styles.background}>
-        <div className={styles.logo_img}/>
-            <div><a className={styles.inputrequest}>Input your code number...</a>
-                <div>
-                    <input
-                        id="id"
-                        type="text"
-                        value={codeNumber}
-                        className={styles.inputBox}
-                        onChange={onChange}
-                        placeholder="code number"/>
-                    <div className={styles.prove}>
-                        <a><span style={{color:"#F9E219"}}>학번</span>으로 대숭실대 우주전사임을 증명해주세요!</a>
+
+    return(
+        <div className={styles.background}>
+            <div className={styles.logo_img}/>
+                <div><a className={styles.inputrequest}>Input your code number...</a>
+                    <div>
+                        <input
+                            name="student-id"
+                            type="text"
+                            value={codeNumber}
+                            className={styles.inputBox}
+                            onChange={onChange}
+                            placeholder="code number"/>
+
+                        <div className={styles.prove}>
+                            <a><span style={{color:"#F9E219"}}>학번</span>으로 대숭실대 우주전사임을 증명해주세요!</a>
+                        </div>
                     </div>
+
                 </div>
-
-            </div>
-            <div className={styles.loginBtn}><a href="/login">Login{">"}</a></div>
-            <div className={styles.ssumcBtn}><a>SSUMC</a></div>
-    </div>  
-)
+                <div className={styles.loginBtn}><a href="/login">Login{">"}</a></div>
+                <div className={styles.ssumcLogo}><a>SSUMC</a></div>
+                <div className={styles.startrequest}><a>Do you want to go <br/> hunting stardust?</a></div>
+                <div><button className={styles.goBtn}>Go!</button></div>
+                <div><button className={styles.awayBtn}>Run away?</button></div>
+        </div>  
+    )
 }

styles/Login.module.css

@@ -32,18 +32,20 @@
     content: url(../public/startdust_logo.png);
 
   }
+
 .inputrequest{
-    margin-top: 10px;
-    padding-top: 30px;
+    min-width: 200px; 
+    max-width: 500px;
+    text-align: left;
+    line-height: 1.5;
     padding-right: 20px;
-    padding-bottom: 20px;
     font-family: "NeoDunggeunmo";
     font-size: 10px;
     color: aliceblue;
 }
 
 .inputBox{
-    margin: 5px;
+    margin: 7px;
     margin-left: 0;
     color: aliceblue;
     background-color:transparent; /*배경 투명*/
@@ -72,22 +74,55 @@
     font-size: 13px;
 }
 
-.ssumcBtn{
+.ssumcLogo{
     margin: 30px;
     text-align: center;
     font-family: "NeoDunggeunmo";
     color: aliceblue;
     font-size: 13px;
 }
 
-@keyframes fadein {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
+.startrequest{
+  min-width: 200px; 
+  max-width: 500px;
+  text-align: left;
+  line-height: 1;
+  padding-bottom: 10px;
+  font-family: "NeoDunggeunmo";
+  font-size: 15px;
+  color: aliceblue;
+}
+
+.goBtn{
+  min-width: 200px; 
+  max-width: 500px;
+  display:inline-block;
+  margin: 5px;
+  margin-left: 0;
+  color: aliceblue;
+  background-color:transparent; /*배경 투명*/
+  border:1px solid #F9E219; /* 라인선 none 인 경우 아예 안보임*/
+  padding:5px; /* 상하좌우 크기는 여백으로 설정 */ 
+
+  font-size:18px; 
+  font-family: "NeoDunggeunmo"; /*글씨체*/
+  border-radius: 3px; /*둥글게 표현*/
+}
+
+.awayBtn{
+  min-width: 200px; 
+  max-width: 500px;
+  margin: 5px;
+  margin-left: 0;
+  color: aliceblue;
+  background-color:transparent; /*배경 투명*/
+  border:1px solid aliceblue; /* 라인선 none 인 경우 아예 안보임*/
+  padding:5px; /* 상하좌우 크기는 여백으로 설정 */ 
+  font-size:18px; 
+  font-family: "NeoDunggeunmo";
+  border-radius: 3px;
+}
+
  @font-face {
     font-family: "NeoDunggeunmo";
     src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/NeoDunggeunmo.woff")