BCSDLab-Edu · Yejin0070 · Apr 29, 2024 · May 4, 2024 · May 16, 2024 · May 21, 2024
diff --git a/mainPage/mainPage.html b/mainPage/mainPage.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>홈페이지</title>
+    <link rel="stylesheet" href="mainPageStyle.css" />
+  </head>
+  <body>
+    <div class="logOutBox">
+      <button class="logOut">로그아웃</button>
+    </div>
+    <script src="mainPageFunction.js"></script>
+  </body>
+</html>
diff --git a/mainPage/mainPageFunction.js b/mainPage/mainPageFunction.js
@@ -0,0 +1,9 @@
+const logOutBtn = document.querySelector(".logOut");
+logOutBtn.addEventListener("click", () => storageReset());
+function storageReset() {
+  // 현재 저장된 모든 스토리지 초기화
+  localStorage.clear();
+  sessionStorage.clear();
+  //쿠키 초기화도..?해야할까..
+  window.location.href = "/FrontEnd24-1/topnav/topnav.html";
+}
diff --git a/mainPage/mainPageStyle.css b/mainPage/mainPageStyle.css
@@ -0,0 +1,25 @@
+body {
+  background-color: rgb(172, 191, 220);
+  height: 100vh;
+  margin: 0;
+}
+.logOutBox {
+  /* text-align: center; */
+  display: flex;
+  flex-direction: column; /*방향:세로축*/
+  flex-wrap: wrap;
+  justify-content: center; /*가로축-중심축  */
+  align-items: center; /* 세로축-교차축 */
+  height: 100vh;
+  /* 화면 고정 */
+  padding: 0;
+  margin: 0;
+}
+.logOut {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-size: 18px;
+  padding: 10px;
+  margin: 5px;
+}
diff --git a/signIn/signIn.html b/signIn/signIn.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>로그인</title>
+    <link rel="stylesheet" , href="signInStyle.css" />
+  </head>
+  <body>
+    <div class="signIn">
+      <div class="inputInfor">
+        <input class="id" placeholder="아이디를 입력하세요." />
+        <input class="pw" placeholder="비밀번호를 입력하세요." />
+      </div>
+      <button class="login">로그인</button>
+    </div>
+    <script src="signInFunction.js"></script>
+  </body>
+</html>
diff --git a/signIn/signInFunction.js b/signIn/signInFunction.js
@@ -0,0 +1,39 @@
+const loginBtn = document.querySelector(".login");
+const id = document.querySelector(".id");
+const pw = document.querySelector(".pw");
+loginBtn.addEventListener("click", () => move());
+let count = 0;
+function move() {
+  const users = JSON.parse(localStorage.getItem("users")) || [];
+  const user_input = { id: id.value, pw: pw.value };
+  let check = false;
+  if (id.value == "" || pw.value == "") {
+    alert("id, pw를 입력해주세요");
+  }
+  for (i = 0; i < users.length; i++) {
+    if (users[i].id === user_input.id || users[i].pw === user_input.pw) {
+      check = true;
+      //일치하는 유저 찾으면 루프를 종료해야함!!
+      break;
+    }
+  }
+  if (!check) {
+    alert("id 또는 PW가 일치하지 않습니다.");
+    count++;
+    // 잘못된 id/pw를 5회 이상 입력한 경우
+    if (count == 5) {
+      //cookie에 로그인금지 flag 생성 후 로그인 해당 값을 이용해 로그인 막기. 단, expiretime은 1시간으로 한다.
+      document.cookie = "loginBan=true; path=/; max-age=3600;";
+      alert("로그인이 5회 이상 실패하여 1시간 동안 로그인할 수 없습니다.");
+    }
+  } else {
+    // 로그인 버튼 클릭 시 로그인을 시도한 ID를 모든 스토리지(cookie, session storage, local storage)에 저장
+    // cookie의 expiretime은 72시간으로 한다.
+    sessionStorage.setItem("users", JSON.stringify(users));
+    document.cookie =
+      "users = " + JSON.stringify(users) + "; path=/; max-age=259200;";
+    window.location.href = "/FrontEnd24-1/mainPage/mainPage.html";
+  }
+}
+
+// 개발자도구 > Application 의 각 스토리지 스크린샷 캡쳐
diff --git a/signIn/signInStyle.css b/signIn/signInStyle.css
@@ -0,0 +1,44 @@
+body {
+  background-color: rgb(172, 191, 220);
+  height: 100vh;
+  margin: 0;
+}
+.signIn {
+  /* text-align: center; */
+  display: flex;
+  flex-direction: column; /*방향:세로축*/
+  flex-wrap: wrap;
+  justify-content: center; /*가로축-중심축  */
+  align-items: center; /* 세로축-교차축 */
+  height: 100vh;
+  /* 화면 고정 */
+  padding: 0;
+  margin: 0;
+}
+.inputInfor {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  padding: 0;
+  width: 350px;
+  /* 표시 */
+  border: 1px solid;
+  border-color: rgb(16, 9, 144);
+}
+.id,
+.pw {
+  display: block;
+  text-align: center;
+  font-size: 18px;
+  text-decoration: none;
+  padding: 10px;
+  margin: 5px;
+}
+.login {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-size: 18px;
+  padding: 10px;
+  margin: 5px;
+}
diff --git a/signUp/signUp.html b/signUp/signUp.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>회원가입</title>
+    <link rel="stylesheet" , href="/FrontEnd24-1/signUp/signUpStyle.css" />
+  </head>
+  <body>
+    <div class="signUp">
+      <div class="inputInfor">
+        <input class="id" placeholder="아이디를 입력하세요." />
+        <input
+          class="pw"
+          placeholder="비밀번호를 입력하세요."
+          type="password"
+        />
+        <input
+          class="pw-check"
+          placeholder="비밀번호를 확인하세요"
+          type="password"
+        />
+        <input
+          class="student-number"
+          placeholder="학번을 입력하세요."
+          maxlength="10"
+        />
+        <div
+          class="major"
+          contenteditable
+          placeholder="전공을 입력하세요."
+        ></div>
+        <input class="phone-number" placeholder="전화번호를 입력하세요." />
+      </div>
+      <div class="move">
+        <button class="signup">회원가입</button>
+        <button class="cancle">취소</button>
+      </div>
+    </div>
+
+    <script src="/FrontEnd24-1/signUp/signUpFunction.js"></script>
+  </body>
+</html>
diff --git a/signUp/signUpFunction.js b/signUp/signUpFunction.js
@@ -0,0 +1,98 @@
+const id = document.querySelector(".id");
+const pw = document.querySelector(".pw");
+const passwordCheck = document.querySelector(".pw-check");
+const stdNum = document.querySelector(".student-number");
+const major = document.querySelector(".major");
+const phNum = document.querySelector(".phone-number");
+const signUpBtn = document.querySelector(".signup");
+const cancleBtn = document.querySelector(".cancle");
+
+function idCheck(id) {
+  id_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
+  if (!id_regex.test(id.value)) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+function pwCheck(pw, passwordCheck) {
+  if (pw.value != passwordCheck.value) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+function majorChange(stdNum) {
+  console.log("a");
+  const midStdNum = String(stdNum.value).substring(4, 7);
+  if (midStdNum == "136") {
+    return "컴퓨터공학부";
+  } else if (midStdNum == "120") {
+    return "기계공학부";
+  } else if (midStdNum == "140") {
+    return "메카트로닉스공학부";
+  } else if (midStdNum == "161") {
+    return "전기전자통신공학부";
+  } else if (midStdNum == "151") {
+    return "디자인공학과";
+  } else if (midStdNum == "172") {
+    return "건축공학과";
+  } else if (midStdNum == "174") {
+    return "에너지신소재화학공학부";
+  } else if (midStdNum == "180") {
+    return "산업경영학부";
+  } else {
+    return "";
+  }
+}
+stdNum.addEventListener("change", () => {
+  major.innerText = majorChange(stdNum);
+});
+
+function phNumChange(phNum) {
+  const phNumChanged = phNum.value;
+  const length = phNumChanged.length;
+  if (length >= 9) {
+    let numbers = phNumChanged
+      .replace(/[^0-9]/g, "")
+      .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
+    phNum.value = numbers;
+  }
+}
+phNum.addEventListener("input", () => phNumChange(phNum));
+
+signUpBtn.addEventListener("click", () => signUp());
+function signUp() {
+  const newUser = {
+    id: id.value,
+    pw: pw.value,
+    studentNUmber: stdNum.value,
+    major: major.value,
+    phoneNumber: phNum.value,
+  };
+  const users = JSON.parse(localStorage.getItem("users")) || [];
+  if (!idCheck(id)) {
+    alert("유효하지 않은 이메일 주소입니다.");
+  } else if (!pwCheck(pw, passwordCheck)) {
+    alert("비밀번호를 다시 확인해주세요.");
+  } else {
+    users.push(newUser);
+    localStorage.setItem("users", JSON.stringify(users));
+    alert("회원가입이 완료되었습니다!");
+    //폼 초기화
+    id.value = "";
+    pw.value = "";
+    passwordCheck.value = "";
+    stdNum.value = "";
+    major.value = "";
+    phNum.value = "";
+    window.location.href = "/FrontEnd24-1/signIn/signIn.html";
+  }
+}
+
+cancleBtn.addEventListener("click", cancle);
+function cancle() {
+  window.location.href = "/FrontEnd24-1/topnav/topnav.html";
+}
diff --git a/signUp/signUpStyle.css b/signUp/signUpStyle.css
@@ -0,0 +1,56 @@
+body {
+  background-color: rgb(172, 191, 220);
+  height: 100vh;
+  margin: 0;
+}
+.signUp {
+  /* text-align: center; */
+  display: flex;
+  flex-direction: column; /*방향:세로축*/
+  flex-wrap: wrap;
+  justify-content: center; /*가로축-중심축  */
+  align-items: center; /* 세로축-교차축 */
+  height: 100vh;
+  /* 화면 고정 */
+  padding: 0;
+  margin: 0;
+}
+.inputInfor {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  padding: 0;
+  width: 500px;
+  /* 표시 */
+  border: 1px solid;
+  border-color: rgb(16, 9, 144);
+}
+.move {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 0;
+}
+
+.id,
+.pw,
+.pw-check,
+.student-number,
+.major,
+.phone-number,
+.signup,
+.cancle {
+  border: 1px solid rgb(0, 0, 0);
+  background-color: rgb(255, 255, 255);
+  text-align: center;
+  font-size: 18px;
+  text-decoration: none;
+  padding: 10px;
+  margin: 5px;
+}
+
+.major:empty:before {
+  display: block;
+  content: attr(placeholder);
+  color: #717171;
+}
diff --git a/topnav/topnav.html b/topnav/topnav.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>main</title>
+    <link href="/FrontEnd24-1/topnav/topnavStyle.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="topnav">
+      <a class="signin-link" href="/FrontEnd24-1/signIn/signIn.html">로그인</a>
+      <a class="signup-link" href="/FrontEnd24-1/signUp/signUp.html"
+        >회원가입</a
+      >
+    </div>
+    <script src="/FrontEnd24-1/topnav/topnavFunction.js"></script>
+  </body>
+</html>