Feature/login

pages/login/index.js

@@ -0,0 +1,78 @@
+import Link from "next/link";
+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 = (e) => {
+    const { name, value } = e.target;
+    console.log(name, value);
+    setCodeNumber(value);
+  };
+
+  const [isLoginSuccess, setIsLoginSuccess] = useState(false);
+  const [isBye, setIsBye] = useState(false);
+
+  const onLoginChange = () => {
+    setIsLoginSuccess((prev) => !prev);
+  };
+
+  const onByeChange = () => {
+    setIsBye((prev) => !prev);
+    setIsLoginSuccess(false);
+  };
+
+  return (
+    <div className={styles.background}>
+      {!isBye && (
+        <div>
+          <div className={styles.logo_img} />
+          {!isLoginSuccess && (
+            <div>
+              <div>
+                <a className={styles.inputrequest}>Input your code number..</a>{" "}
+                <br />
+                <input
+                  name="student-id"
+                  type="text"
+                  value={codeNumber}
+                  className={styles.inputBox}
+                  onChange={onChange}
+                  placeholder="code number"
+                />
+                <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>
+      )}
+      {isBye && (
+        <div className={styles.okBye}>
+          <a>Okay, Bye...</a>
+        </div>
+      )}
+      <a className={styles.ssumcLogo}>SSUMC</a>
+    </div>
+  );
+}

styles/Login.module.css

@@ -0,0 +1,118 @@
+.background {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: url(../public/background_image.png);
+  min-height: 100vh;
+  background-repeat: repeat-y;
+  background-size: 200%;
+  overflow: scroll;
+}
+
+.logo_img {
+  min-width: 200px;
+  max-width: 500px;
+  margin-bottom: 80px;
+  margin-top: 60px;
+  width: 326px;
+  content: url(../public/startdust_logo.png);
+}
+
+.inputrequest {
+  text-align: left;
+  font-family: "NeoDunggeunmo";
+  font-size: 16px;
+  color: #ffffff;
+}
+
+.inputBox {
+  margin-top: 10px;
+  margin-bottom: 8px;
+  margin-left: 0;
+  width: 334px;
+  color: #ffffff;
+  background-color: transparent; /*배경 투명*/
+  border: 2px solid #f9e219; /* 라인선*/
+  padding: 11px; /* 상하좌우 크기는 여백으로 설정 */
+  padding-left: 18px;
+  padding-right: 18px;
+  font-size: 24px;
+  font-family: "NeoDunggeunmo";
+  border-radius: 4px;
+}
+
+.prove {
+  font-size: 14px;
+  font-family: "NeoDunggeunmo";
+  color: aliceblue;
+}
+
+.loginBtn {
+  margin-top: 55px;
+  margin-bottom: 241px;
+  text-align: center;
+  font-family: "NeoDunggeunmo";
+  color: #f9e219;
+  font-size: 24px;
+}
+
+.ssumcLogo {
+  margin-bottom: 12px;
+  text-align: center;
+  font-family: "NeoDunggeunmo";
+  color: #ffffff;
+  font-size: 24px;
+}
+
+.startrequest {
+  text-align: left;
+  font-family: "NeoDunggeunmo";
+  font-size: 26px;
+  color: aliceblue;
+}
+
+.goBtn {
+  width: 334px;
+  display: inline-block;
+  margin-top: 30px;
+  margin-left: 0;
+  color: #ffffff;
+  background-color: transparent; /*배경 투명*/
+  border: 2px solid #f9e219; /* 라인선 none 인 경우 아예 안보임*/
+  padding: 5px; /* 상하좌우 크기는 여백으로 설정 */
+  font-size: 35px;
+  font-family: "NeoDunggeunmo"; /*글씨체*/
+  border-radius: 4px; /*둥글게 표현*/
+  background-color: rgba(249, 226, 25, 0.1);
+}
+
+.awayBtn {
+  width: 334px;
+  margin-bottom: 215px;
+  margin-top: 15px;
+  color: #ffffff;
+  background-color: transparent; /*배경 투명*/
+  border: 2px solid aliceblue; /* 라인선 none 인 경우 아예 안보임*/
+  padding: 5px; /* 상하좌우 크기는 여백으로 설정 */
+  font-size: 35px;
+  font-family: "NeoDunggeunmo";
+  border-radius: 4px;
+}
+
+.okBye {
+  margin-top: 407px;
+  margin-bottom: 371px;
+  text-align: left;
+  font-family: "NeoDunggeunmo";
+  font-size: 26px;
+  color: aliceblue;
+}
+
+@font-face {
+  font-family: "NeoDunggeunmo";
+  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/NeoDunggeunmo.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: normal;
+}