diff --git a/mainPage/mainPage.html b/mainPage/mainPage.html new file mode 100644 index 0000000..7cb5d2a --- /dev/null +++ b/mainPage/mainPage.html @@ -0,0 +1,15 @@ + + + + + + 홈페이지 + + + +
+ +
+ + + diff --git a/mainPage/mainPageFunction.js b/mainPage/mainPageFunction.js new file mode 100644 index 0000000..1d7ad3f --- /dev/null +++ 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 new file mode 100644 index 0000000..0233c1e --- /dev/null +++ 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 new file mode 100644 index 0000000..90a417c --- /dev/null +++ b/signIn/signIn.html @@ -0,0 +1,19 @@ + + + + + + 로그인 + + + +
+
+ + +
+ +
+ + + 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/signIn/signInStyle.css b/signIn/signInStyle.css new file mode 100644 index 0000000..2ac37df --- /dev/null +++ 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 new file mode 100644 index 0000000..5b9c8f0 --- /dev/null +++ b/signUp/signUp.html @@ -0,0 +1,43 @@ + + + + + + 회원가입 + + + +
+
+ + + + +
+ +
+
+ + +
+
+ + + + diff --git a/signUp/signUpFunction.js b/signUp/signUpFunction.js new file mode 100644 index 0000000..b018085 --- /dev/null +++ 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 new file mode 100644 index 0000000..8784626 --- /dev/null +++ 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 new file mode 100644 index 0000000..9527c92 --- /dev/null +++ b/topnav/topnav.html @@ -0,0 +1,18 @@ + + + + + + main + + + +
+ 로그인 + 회원가입 +
+ + + diff --git a/topnav/topnavFunction.js b/topnav/topnavFunction.js new file mode 100644 index 0000000..3a42562 --- /dev/null +++ b/topnav/topnavFunction.js @@ -0,0 +1,36 @@ +// [ +// { +// "id": "1rg", +// "url": "https://cdn2.thecatapi.com/images/1rg.jpg", +// "width": 500, +// "height": 332 +// } +// ] +fetchRandomCatImage(); + +function fetchRandomCatImage() { + const apiUrl = "https://api.thecatapi.com/v1/images/search?size=full"; + + fetch(apiUrl) + .then((response) => response.json()) + .then((data) => { + displayCatImage(data[0].url); + }) + .catch((error) => { + //console.log("aaaa"); + console.error("Error fetching cat image:", error); + }); +} + +function displayCatImage(imageUrl) { + const imageElement = document.createElement("img"); + imageElement.src = imageUrl; + imageElement.alt = "Random Cat Image"; + imageElement.style.width = "100%"; + imageElement.style.maxWidth = "500px"; + imageElement.style.maxHeight = "332px"; + imageElement.style.marginTop = "20px"; + + const container = document.querySelector(".topnav"); + container.appendChild(imageElement); +} diff --git a/topnav/topnavStyle.css b/topnav/topnavStyle.css new file mode 100644 index 0000000..79deef2 --- /dev/null +++ b/topnav/topnavStyle.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; +}