From 7b5bd58a4f25e5e529091c56801e2a0b4942b9e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=84=9C=EC=98=88=EC=A7=84?= Date: Mon, 29 Apr 2024 15:48:18 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=EC=84=9C=EC=98=88=EC=A7=84=203=EC=A3=BC?= =?UTF-8?q?=EC=B0=A8=20=EC=8B=A4=EC=8A=B5=20=EA=B3=BC=EC=A0=9C=20=EC=A0=9C?= =?UTF-8?q?=EC=B6=9C=ED=95=A9=EB=8B=88=EB=8B=A4.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sign-in-style.css | 45 ++++++++++++++++++++++++++++++++++++++++++ sign-in.html | 20 +++++++++++++++++++ sign-up-style.css | 50 +++++++++++++++++++++++++++++++++++++++++++++++ sign-up.html | 28 ++++++++++++++++++++++++++ topnav-style.css | 29 +++++++++++++++++++++++++++ topnav.html | 17 ++++++++++++++++ 6 files changed, 189 insertions(+) create mode 100644 sign-in-style.css create mode 100644 sign-in.html create mode 100644 sign-up-style.css create mode 100644 sign-up.html create mode 100644 topnav-style.css create mode 100644 topnav.html diff --git a/sign-in-style.css b/sign-in-style.css new file mode 100644 index 0000000..deb560d --- /dev/null +++ b/sign-in-style.css @@ -0,0 +1,45 @@ +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); +} +.logIn, +.id, +.pw { + display: block; + text-align: center; + font-size: 18px; + text-decoration: none; + padding: 10px; + margin: 5px; +} +.move { + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-size: 18px; + padding: 10px; + margin: 5px; +} diff --git a/sign-in.html b/sign-in.html new file mode 100644 index 0000000..f622e44 --- /dev/null +++ b/sign-in.html @@ -0,0 +1,20 @@ + + + + + + 로그인 + + + +
+

로그인

+
+ + +
+ +
+ + + diff --git a/sign-up-style.css b/sign-up-style.css new file mode 100644 index 0000000..ee82395 --- /dev/null +++ b/sign-up-style.css @@ -0,0 +1,50 @@ +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; + gap: 5px; +} +.inputInfor { + display: flex; + flex-direction: column; + flex-wrap: wrap; + padding: 0; + width: 350px; + /* 표시 */ + border: 1px solid; + border-color: rgb(16, 9, 144); + gap: 5px; +} +.move { + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 0; + gap: 5px; +} +.sign-up, +.id, +.pw, +.pw-check, +.student-number, +.major, +.phone-number, +.signup, +.cancle { + display: block; + text-align: center; + font-size: 18px; + text-decoration: none; + padding: 10px; +} diff --git a/sign-up.html b/sign-up.html new file mode 100644 index 0000000..3e9ddc3 --- /dev/null +++ b/sign-up.html @@ -0,0 +1,28 @@ + + + + + + 회원가입 + + + +
+

회원가입

+
+ + + + + + +
+
+ + +
+
+ + + + diff --git a/topnav-style.css b/topnav-style.css new file mode 100644 index 0000000..79deef2 --- /dev/null +++ b/topnav-style.css @@ -0,0 +1,29 @@ +body { + background-color: rgb(172, 191, 220); + height: 100vh; + margin: 0; +} + +.topnav { + /* text-align: center; */ + display: flex; + flex-direction: column; /*방향:세로축*/ + flex-wrap: wrap; + justify-content: center; /*가로축-중심축 */ + align-items: center; /* 세로축-교차축 */ + height: 100vh; +} + +.signin-link, +.signup-link { + display: block; + text-align: center; + background-color: rgb(17, 20, 186); + font-size: 20px; + color: beige; + text-decoration: none; + padding: 10px; + border: 1px solid; + margin: 5px; + border-color: black; +} diff --git a/topnav.html b/topnav.html new file mode 100644 index 0000000..4f2c0d2 --- /dev/null +++ b/topnav.html @@ -0,0 +1,17 @@ + + + + + + main + + + +
+ + +
+ + + + From 2790785f319badd82af2a954cd69b0068e165759 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=84=9C=EC=98=88=EC=A7=84?= Date: Sun, 5 May 2024 00:00:57 +0900 Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20js=20=EC=8B=A4=EC=8A=B5=20?= =?UTF-8?q?=EB=B0=8F=20css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sign-in-function.js | 9 +++++ sign-in-style.css | 3 +- sign-in.html | 3 +- sign-up-function.js | 81 +++++++++++++++++++++++++++++++++++++++++++++ sign-up-style.css | 18 ++++++---- sign-up.html | 25 +++++++++++--- topnav.html | 3 +- 7 files changed, 125 insertions(+), 17 deletions(-) create mode 100644 sign-in-function.js create mode 100644 sign-up-function.js diff --git a/sign-in-function.js b/sign-in-function.js new file mode 100644 index 0000000..2337b82 --- /dev/null +++ b/sign-in-function.js @@ -0,0 +1,9 @@ +const loginBtn = document.querySelector(".login"); +const id = document.querySelector(".id"); +const pw = document.querySelector(".pw"); +loginBtn.addEventListener("click", () => move()); +function move() { + if (id.value == 0 || pw.value == 0) { + alert("id, pw를 입력해주세요"); + } +} diff --git a/sign-in-style.css b/sign-in-style.css index deb560d..2ac37df 100644 --- a/sign-in-style.css +++ b/sign-in-style.css @@ -25,7 +25,6 @@ body { border: 1px solid; border-color: rgb(16, 9, 144); } -.logIn, .id, .pw { display: block; @@ -35,7 +34,7 @@ body { padding: 10px; margin: 5px; } -.move { +.login { display: flex; flex-direction: row; flex-wrap: wrap; diff --git a/sign-in.html b/sign-in.html index f622e44..c067f24 100644 --- a/sign-in.html +++ b/sign-in.html @@ -8,12 +8,11 @@ diff --git a/sign-up-function.js b/sign-up-function.js new file mode 100644 index 0000000..6b7aae1 --- /dev/null +++ b/sign-up-function.js @@ -0,0 +1,81 @@ +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() { + if (!idCheck(id)) { + console.log("a"); + alert("유효하지 않은 이메일 주소입니다."); + } else if (!pwCheck(pw, passwordCheck)) { + alert("비밀번호를 다시 확인해주세요."); + } else { + alert("회원가입이 완료되었습니다!"); + } +} + +cancleBtn.addEventListener("click", cancle); +function cancle() { + window.location.href = "sign-in.html"; +} diff --git a/sign-up-style.css b/sign-up-style.css index ee82395..8784626 100644 --- a/sign-up-style.css +++ b/sign-up-style.css @@ -13,27 +13,25 @@ body { height: 100vh; /* 화면 고정 */ padding: 0; - gap: 5px; + margin: 0; } .inputInfor { display: flex; flex-direction: column; flex-wrap: wrap; padding: 0; - width: 350px; + width: 500px; /* 표시 */ border: 1px solid; border-color: rgb(16, 9, 144); - gap: 5px; } .move { display: flex; flex-direction: row; flex-wrap: wrap; padding: 0; - gap: 5px; } -.sign-up, + .id, .pw, .pw-check, @@ -42,9 +40,17 @@ body { .phone-number, .signup, .cancle { - display: block; + 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/sign-up.html b/sign-up.html index 3e9ddc3..a5ad888 100644 --- a/sign-up.html +++ b/sign-up.html @@ -8,13 +8,28 @@ - + diff --git a/signIn/signInFunction.js b/signIn/signInFunction.js new file mode 100644 index 0000000..7045030 --- /dev/null +++ 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/sign-in-style.css b/signIn/signInStyle.css similarity index 100% rename from sign-in-style.css rename to signIn/signInStyle.css diff --git a/sign-up.html b/signUp/signUp.html similarity index 88% rename from sign-up.html rename to signUp/signUp.html index a5ad888..5b9c8f0 100644 --- a/sign-up.html +++ b/signUp/signUp.html @@ -4,7 +4,7 @@ 회원가입 - + - + diff --git a/sign-up-function.js b/signUp/signUpFunction.js similarity index 79% rename from sign-up-function.js rename to signUp/signUpFunction.js index 6b7aae1..b018085 100644 --- a/sign-up-function.js +++ b/signUp/signUpFunction.js @@ -65,17 +65,34 @@ 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)) { - console.log("a"); 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 = "sign-in.html"; + window.location.href = "/FrontEnd24-1/topnav/topnav.html"; } diff --git a/sign-up-style.css b/signUp/signUpStyle.css similarity index 100% rename from sign-up-style.css rename to signUp/signUpStyle.css diff --git a/topnav.html b/topnav.html deleted file mode 100644 index 87daa6a..0000000 --- a/topnav.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - main - - - -
- - -
- - - diff --git a/topnav/topnav.html b/topnav/topnav.html new file mode 100644 index 0000000..9527c92 --- /dev/null +++ b/topnav/topnav.html @@ -0,0 +1,18 @@ + + + + + + main + + + +
+ + +
+ + + diff --git a/topnav-function.js b/topnav/topnavFunction.js similarity index 100% rename from topnav-function.js rename to topnav/topnavFunction.js diff --git a/topnav-style.css b/topnav/topnavStyle.css similarity index 100% rename from topnav-style.css rename to topnav/topnavStyle.css