diff --git a/img/logo_noicon.png b/img/logo_noicon.png deleted file mode 100644 index e791f293..00000000 Binary files a/img/logo_noicon.png and /dev/null differ diff --git a/img/logo_onlyText.png b/img/logo_onlyText.png new file mode 100644 index 00000000..0260b286 Binary files /dev/null and b/img/logo_onlyText.png differ diff --git a/index.html b/index.html index fa6666b7..6b934f8d 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ @@ -76,33 +76,35 @@

믿을 수 있는
판다마켓 중고 거래

diff --git a/login.html b/login.html index a723f8b1..007e8ea3 100644 --- a/login.html +++ b/login.html @@ -4,7 +4,6 @@ 로그인 - @@ -16,14 +15,16 @@
- - +
+ + +
- +
@@ -31,26 +32,20 @@
-

- 판다마켓이 처음이신가요? 회원가입 -

+

판다마켓이 처음이신가요? 회원가입

+ + diff --git a/login.js b/login.js new file mode 100644 index 00000000..26dca8fe --- /dev/null +++ b/login.js @@ -0,0 +1,25 @@ +import { + buttonDeactivate, + requireContent, + buttonActivate, + checkPassword, + visibleIconToggle, +} from "./loginFunctions.js"; +const primary_btn = document.querySelector(".primary_btn"); +buttonDeactivate(primary_btn); + +document.getElementById("email").addEventListener("focusout", requireContent); +document.getElementById("password").addEventListener("focusout", requireContent); +document.getElementById("nickname")?.addEventListener("focusout", requireContent); +document.getElementById("password_check")?.addEventListener("focusout", (e) => { + checkPassword(e); + buttonActivate(e); +}); +primary_btn.addEventListener("click", (e) => { + e.preventDefault(); + console.log("Button clicked! Moving to ./login.html"); + window.location.href = "./login.html"; +}); +document.querySelectorAll(".visible_icon").forEach((item) => { + item.addEventListener("click", visibleIconToggle); +}); diff --git a/loginFunctions.js b/loginFunctions.js new file mode 100644 index 00000000..f894abd5 --- /dev/null +++ b/loginFunctions.js @@ -0,0 +1,103 @@ +const ERRORMESSAGE = { + wrongEmail: "잘못된 이메일 형식입니다", + wrongPassword: "비밀번호를 8자 이상 입력해주세요", + emailIsEmpty: "이메일을 입력해주세요", + passwordIsEmpty: "비밀번호를 입력해주세요", + nicknameIsEmpty: "닉네임을 입력해주세요", + passwordIsNotSame: "비밀번호가 일치하지 않습니다.", +}; + +const requireContent = (e) => { + console.log("requireContent called for:", e.target.id); + let content = e.target.value; + let emailRegex = /^[a-zA-Z0-9]+([._-][a-zA-Z0-9]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z]{2,})+$/; + + if (content) { + if (emailRegex.test(content) === false && e.target.id == "email") { + createNewMessage(ERRORMESSAGE.wrongEmail, e.target); + } else if (e.target.nextElementSibling?.tagName == "P") { + e.target.style = "border: none"; + e.target.nextElementSibling.remove(); + document.querySelector(".visible_icon").style = "bottom: 1.4rem;"; + } + if (e.target.id == "password" && content.length < 8) { + createNewMessage(ERRORMESSAGE.wrongPassword, e.target); + document.querySelector(".visible_icon").style = "bottom: 6.9rem;"; + } + } else { + let messageContent; + switch (e.target.id) { + case "email": + messageContent = ERRORMESSAGE.emailIsEmpty; + break; + case "password": + messageContent = ERRORMESSAGE.passwordIsEmpty; + break; + case "nickname": + messageContent = ERRORMESSAGE.nicknameIsEmpty; + break; + } + createNewMessage(messageContent, e.target); + document.querySelector(".visible_icon").style = "bottom: 6.9rem;"; + } +}; + +const createNewMessage = (messageContent, target) => { + target.style = "border: 1px solid red"; + if (target.nextElementSibling?.tagName == "P") { + target.nextElementSibling.innerText = messageContent; + } else { + let pTag = document.createElement("p"); + pTag.textContent = messageContent; + pTag.classList.add("plzInputText"); + target.after(pTag); + } +}; + +const buttonDeactivate = (tag) => { + tag.disabled = true; + tag.style = "background-color: var(--gray400)"; +}; + +const buttonActivate = (e) => { + const nodeList = document.getElementsByClassName("plzInputText"); + const inputs = [...document.getElementsByTagName("input")]; + let inputIsEmpty = inputs.every((input) => input.value && input.value.trim() !== ""); + if (nodeList.length !== 0 && !inputIsEmpty) { + } else { + let submit_btn = document.querySelector(".primary_btn"); + submit_btn.disabled = false; + submit_btn.style = "background-color: var(--blue)"; + } +}; + +const checkPassword = (e) => { + let password = document.getElementById("password"); + let passwordCheck = document.getElementById("password_check"); + if (password && passwordCheck) { + if (password.value !== passwordCheck.value) { + createNewMessage(ERRORMESSAGE.passwordIsNotSame, e.target); + e.target.previousElementSibling.style = "bottom: 6.9rem;"; + } else if (e.target.nextElementSibling?.tagName === "P") { + e.target.style = "border: none"; + e.target.nextElementSibling.remove(); + } + } +}; + +const visibleIconToggle = (e) => { + e.target.classList.toggle("passwordIsVisible"); + if (e.target.nextElementSibling.type == "password") { + e.target.nextElementSibling.type = "text"; + } else { + e.target.nextElementSibling.type = "password"; + } +}; +export { + requireContent, + createNewMessage, + buttonDeactivate, + buttonActivate, + checkPassword, + visibleIconToggle, +}; diff --git a/signup.html b/signup.html index 37d45158..dafc6de4 100644 --- a/signup.html +++ b/signup.html @@ -30,7 +30,7 @@
- +
@@ -38,26 +38,20 @@
-

- 이미 회원이신가요? 로그인 -

+

이미 회원이신가요? 로그인

+ + diff --git a/styles/login.css b/styles/login.css index 52870cb0..8168e09d 100644 --- a/styles/login.css +++ b/styles/login.css @@ -47,7 +47,7 @@ form label { width: 100%; text-align: center; display: block; - background-color: var(--blue); + background-color: var(--gray400); color: #ffffff; padding: 1.2rem 0; font-size: 2rem; @@ -74,6 +74,7 @@ form label { width: 2.4rem; height: 2.4rem; position: absolute; + z-index: 9999; right: 2.4rem; bottom: 1.4rem; } @@ -116,3 +117,13 @@ form label { max-width: 40rem; } } + +.plzInputText { + padding: 2rem; + font-size: 1.5rem; + color: red; +} + +.passwordIsVisible { + background-image: url("../img/btn_visibility_on.svg"); +} diff --git a/styles/style.css b/styles/style.css index 6165664d..d3fccabf 100644 --- a/styles/style.css +++ b/styles/style.css @@ -22,7 +22,7 @@ button:active { z-index: 1; } nav { - width: calc(100% - 200px); + width: calc(100% - 20rem); height: 4rem; display: flex; justify-content: space-between; @@ -134,32 +134,32 @@ nav > button > a { footer { background-color: var(--gray900); width: 100%; - height: 11.875em; + height: 16rem; +} +#footer_wrapper { + width: calc(100% - 80rem); margin: auto; - display: grid; - grid-template-columns: 1fr 0.2fr 0.2fr 1fr; - justify-items: center; - padding: 2.4rem; + display: flex; + justify-content: space-between; + padding: 2.4rem 0; box-sizing: border-box; } - footer ul { display: flex; } - +.privacy { + margin-right: -16rem; +} .copyright { color: var(--gray400); } -.info:nth-child(2n) { - margin: 0 1.28rem; -} .info a { color: var(--gray200); } .sns { - padding: 0 0.2em; - width: 50%; + margin-right: 1.2rem; + width: 1.8rem; } @media (768px <= width <= 1199px) { @@ -202,11 +202,13 @@ footer ul { .card { flex-direction: column; gap: 2.4rem; + padding: 2.4rem; } .card img { - width: 69.6rem; + width: 100%; } .card-title { + /* width: 69.6rem; */ font-size: 1.8rem; margin-bottom: 1.6rem; } @@ -225,19 +227,36 @@ footer ul { text-align: center; } footer { - grid-template-columns: 1fr 0.5fr 0.5fr 1fr; + background-color: var(--gray900); + width: 100%; + height: 16rem; + } + #footer_wrapper { + width: calc(100% - 28rem); + margin: auto; + display: flex; + justify-content: space-between; + padding: 2.4rem 0; + box-sizing: border-box; + } + footer ul { + display: flex; + } + .privacy { + /* margin-right: -16rem; */ } } @media (375px <= width <= 767px) { nav { - width: calc(100% - 16px); + width: calc(100% - 1.6rem); } #header .logo_img { width: 10.3rem; - background-image: url("../img/logo_noicon.png"); + background-image: url("../img/logo_onlyText.png"); background-size: contain; background-repeat: no-repeat; + background-position: center; } .banner { @@ -255,7 +274,7 @@ footer ul { font-weight: 700; font-size: 4rem; margin-bottom: 2.4rem; - letter-spacing: -0.4rem; + /* letter-spacing: -0.4rem; */ text-align: center; } #banner-content button { @@ -297,7 +316,8 @@ footer ul { text-align: center; } - footer { + #footer_wrapper { + width: calc(100% - 6.4rem); padding: 3.2rem; display: grid; grid-template: 1fr 3fr 1fr/ 1fr 1fr 1fr; @@ -313,4 +333,7 @@ footer ul { grid-row: 3; font-size: 1.6rem; } + .faq { + justify-content: center; + } }