From 4991e03a0eab89fb6285d8354595a4b068d290ef Mon Sep 17 00:00:00 2001 From: minyoung1101 Date: Fri, 18 Jul 2025 18:04:24 +0900 Subject: [PATCH 01/14] =?UTF-8?q?Refactor:=20=EB=9E=9C=EB=94=A9=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20meta=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=EA=B2=BD=EB=A1=9C=EB=A5=BC=20?= =?UTF-8?q?=EC=83=81=EB=8C=80=EA=B2=BD=EB=A1=9C=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index e8ba5d36..46842112 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,13 @@ - + - + 판다마켓 Date: Fri, 18 Jul 2025 19:20:58 +0900 Subject: [PATCH 02/14] =?UTF-8?q?Fix:=20classname=20-=20signup=20=EC=98=A4?= =?UTF-8?q?=ED=83=88=EC=9E=90=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- signup.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/signup.html b/signup.html index 1e9e19c0..da531ad7 100644 --- a/signup.html +++ b/signup.html @@ -15,23 +15,23 @@
-
+
- - + +
- - + +
- - + +
From f1c103a4f0735ebc847706e488c9eda3989f9890 Mon Sep 17 00:00:00 2001 From: minyoung1101 Date: Fri, 18 Jul 2025 19:33:48 +0900 Subject: [PATCH 03/14] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EC=9D=B4=EB=A9=94?= =?UTF-8?q?=EC=9D=BC=20=EC=9C=A0=ED=9A=A8=EC=84=B1=EA=B2=80=EC=82=AC=20?= =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=93=B1=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- login.css | 11 ++++++++++- login.html | 1 + signup.html | 1 + validation.js | 16 ++++++++++++++++ 4 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 validation.js diff --git a/login.css b/login.css index f60d37c9..1953a975 100644 --- a/login.css +++ b/login.css @@ -13,7 +13,7 @@ body { max-width: 64rem; margin: 0 auto; } -.login-content, #login_form, #sigunp_form { +.login-content, #login_form, #signup_form { display: flex; flex-direction: column; gap: 2.4rem; @@ -33,6 +33,15 @@ body { border: none; padding: 1.6rem 2.4rem; } +.login-input:invalid { + border: 1px solid var(--color-error); +} +.invalid-input { + color: var(--color-error); + font-size: 1.4rem; + font-weight: 600; + padding: .8rem 0 0 1.6rem; +} .password { position: relative; diff --git a/login.html b/login.html index 5e2c2ec2..1b8cf944 100644 --- a/login.html +++ b/login.html @@ -43,5 +43,6 @@ 회원가입
+ diff --git a/signup.html b/signup.html index da531ad7..935013b9 100644 --- a/signup.html +++ b/signup.html @@ -52,5 +52,6 @@ 로그인 + diff --git a/validation.js b/validation.js new file mode 100644 index 00000000..c75340c3 --- /dev/null +++ b/validation.js @@ -0,0 +1,16 @@ +function validateEmail(e) { + const p = e.target.nextElementSibling || document.createElement("p"); + if (!e.target.validity.valid) { + p.classList.add("invalid-input"); + p.textContent = e.target.value === ""? "이메일을 입력해주세요.": "잘못된 이메일 형식입니다."; + e.target.after(p); + } else { + p.remove(); + } +} + +const loginEmail = document.getElementById("login_email"); +if(loginEmail) loginEmail.addEventListener("focusout", (e) => validateEmail(e)); + +const signupEmail = document.getElementById("signup_email"); +if(signupEmail) signupEmail.addEventListener("focusout", (e) => validateEmail(e)); From e3d32a81b0f0f7646b8b6547b8bb04e64d66c27a Mon Sep 17 00:00:00 2001 From: minyoung1101 Date: Sat, 19 Jul 2025 01:02:12 +0900 Subject: [PATCH 04/14] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8/?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EC=9C=A0=ED=9A=A8?= =?UTF-8?q?=EC=84=B1=20=EA=B2=80=EC=82=AC=20=ED=95=A8=EC=88=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- login.css | 4 ++-- login.html | 2 +- signup.html | 4 ++-- validation.js | 32 +++++++++++++++++++++++--------- 4 files changed, 28 insertions(+), 14 deletions(-) diff --git a/login.css b/login.css index 1953a975..1b4073f0 100644 --- a/login.css +++ b/login.css @@ -43,14 +43,14 @@ body { padding: .8rem 0 0 1.6rem; } -.password { +.password, .password-check { position: relative; } .btn-show { position: absolute; height: 2.4rem; width: 2.4rem; - bottom: 0; + top: 3.4rem; right: 0; padding: 0; margin: 1.6rem 2.4rem; diff --git a/login.html b/login.html index 1b8cf944..b7f72bf7 100644 --- a/login.html +++ b/login.html @@ -22,7 +22,7 @@
- +
diff --git a/signup.html b/signup.html index 935013b9..a88dfbde 100644 --- a/signup.html +++ b/signup.html @@ -26,10 +26,10 @@
- +
-
+
diff --git a/validation.js b/validation.js index c75340c3..78691caf 100644 --- a/validation.js +++ b/validation.js @@ -1,16 +1,30 @@ -function validateEmail(e) { - const p = e.target.nextElementSibling || document.createElement("p"); - if (!e.target.validity.valid) { +function validateInput(e) { + const parentEl = e.target.parentElement; + const parentClassName = parentEl.className; + const targetLabel = parentEl.firstElementChild.textContent; + let p = document.querySelector(`.${parentClassName} p`); + if(!p) { + p = document.createElement("p"); p.classList.add("invalid-input"); - p.textContent = e.target.value === ""? "이메일을 입력해주세요.": "잘못된 이메일 형식입니다."; + } + + const { validity } = e.target; + if (!validity.valid) { + if (validity.valueMissing) { + p.textContent = `${targetLabel}을 입력해주세요.`; + } else if (validity.typeMismatch) { + p.textContent = "잘못된 이메일 형식입니다."; + } else if (validity.tooShort) { + p.textContent = "비밀번호를 8자 이상 입력해주세요."; + } e.target.after(p); } else { p.remove(); } } -const loginEmail = document.getElementById("login_email"); -if(loginEmail) loginEmail.addEventListener("focusout", (e) => validateEmail(e)); - -const signupEmail = document.getElementById("signup_email"); -if(signupEmail) signupEmail.addEventListener("focusout", (e) => validateEmail(e)); +const inputIds = ["login_email", 'login_password', 'signup_email','signup_name','signup_password', 'signup_password_check']; +inputIds.forEach(id=>{ + const inputEl = document.getElementById(id); + inputEl && inputEl.addEventListener("focusout", (e) => validateInput(e)); +}); From a9aec9b492e04c2106e2691594cfde87d48571cc Mon Sep 17 00:00:00 2001 From: minyoung1101 Date: Sat, 19 Jul 2025 02:31:23 +0900 Subject: [PATCH 05/14] =?UTF-8?q?Feat:=20=EC=9C=A0=ED=9A=A8=EC=84=B1?= =?UTF-8?q?=EA=B2=80=EC=82=AC=20/=20=ED=99=94=EB=A9=B4=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=ED=95=A8=EC=88=98=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- validation.js | 39 +++++++++++++++++++++++++-------------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/validation.js b/validation.js index 78691caf..bba6f227 100644 --- a/validation.js +++ b/validation.js @@ -1,30 +1,41 @@ -function validateInput(e) { +function validateInput(e, targetLabel) { + const { validity } = e.target; + if (!validity.valid) { + if (validity.valueMissing) return `${targetLabel}을 입력해주세요.`; + if (validity.typeMismatch) return "잘못된 이메일 형식입니다."; + if (validity.tooShort) return "비밀번호를 8자 이상 입력해주세요."; + } + return ""; +} + +function showValidMessage(e) { const parentEl = e.target.parentElement; const parentClassName = parentEl.className; const targetLabel = parentEl.firstElementChild.textContent; let p = document.querySelector(`.${parentClassName} p`); - if(!p) { + if (!p) { p = document.createElement("p"); p.classList.add("invalid-input"); } - const { validity } = e.target; - if (!validity.valid) { - if (validity.valueMissing) { - p.textContent = `${targetLabel}을 입력해주세요.`; - } else if (validity.typeMismatch) { - p.textContent = "잘못된 이메일 형식입니다."; - } else if (validity.tooShort) { - p.textContent = "비밀번호를 8자 이상 입력해주세요."; - } + const errMsg = validateInput(e.target, targetLabel); + if (errMsg) { + p.textContent = errMsg; e.target.after(p); } else { p.remove(); } } -const inputIds = ["login_email", 'login_password', 'signup_email','signup_name','signup_password', 'signup_password_check']; -inputIds.forEach(id=>{ +const inputIds = [ + "login_email", + "login_password", + "signup_email", + "signup_name", + "signup_password", + "signup_password_check", +]; +inputIds.forEach((id) => { const inputEl = document.getElementById(id); - inputEl && inputEl.addEventListener("focusout", (e) => validateInput(e)); + inputEl && inputEl.addEventListener("focusout", (e) => showValidMessage(e)); }); From 3ccb48db2c1cf2e44af99441d377f5ef0f7d9d15 Mon Sep 17 00:00:00 2001 From: minyoung1101 Date: Sat, 19 Jul 2025 03:03:54 +0900 Subject: [PATCH 06/14] =?UTF-8?q?Feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=ED=99=95?= =?UTF-8?q?=EC=9D=B8=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- validation.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/validation.js b/validation.js index bba6f227..7f02b8e7 100644 --- a/validation.js +++ b/validation.js @@ -1,13 +1,20 @@ -function validateInput(e, targetLabel) { +function validateInput(e, label) { const { validity } = e.target; if (!validity.valid) { - if (validity.valueMissing) return `${targetLabel}을 입력해주세요.`; - if (validity.typeMismatch) return "잘못된 이메일 형식입니다."; - if (validity.tooShort) return "비밀번호를 8자 이상 입력해주세요."; + if (validity.valueMissing) return `${label}을 입력해주세요`; + if (validity.typeMismatch) return "잘못된 이메일 형식입니다"; + if (validity.tooShort) return "비밀번호를 8자 이상 입력해주세요"; } + if(label==='비밀번호 확인' && !validatePWCheck()) return "비밀번호가 일치하지 않습니다"; + return ""; } +function validatePWCheck() { + const [pw,pwCheck] = document.querySelectorAll('input[id^=signup_password]'); + return pw.value===pwCheck.value; +} + function showValidMessage(e) { const parentEl = e.target.parentElement; const parentClassName = parentEl.className; @@ -18,7 +25,7 @@ function showValidMessage(e) { p.classList.add("invalid-input"); } - const errMsg = validateInput(e.target, targetLabel); + const errMsg = validateInput(e, targetLabel); if (errMsg) { p.textContent = errMsg; e.target.after(p); @@ -38,4 +45,4 @@ const inputIds = [ inputIds.forEach((id) => { const inputEl = document.getElementById(id); inputEl && inputEl.addEventListener("focusout", (e) => showValidMessage(e)); -}); +}); \ No newline at end of file From 2c8b8eb314036c47eeda87e55706278c43ba4e8c Mon Sep 17 00:00:00 2001 From: minyoung1101 Date: Sat, 19 Jul 2025 03:49:37 +0900 Subject: [PATCH 07/14] =?UTF-8?q?Feat:=20=EB=B9=84=EB=B0=80=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20=ED=99=95=EC=9D=B8=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?= =?UTF-8?q?=EA=B2=80=EC=A6=9D=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EA=B5=AC=EC=A1=B0=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- validation.js | 57 +++++++++++++++++++++++++-------------------------- 1 file changed, 28 insertions(+), 29 deletions(-) diff --git a/validation.js b/validation.js index 7f02b8e7..f6eb92d2 100644 --- a/validation.js +++ b/validation.js @@ -1,48 +1,47 @@ -function validateInput(e, label) { - const { validity } = e.target; +function validateInput(el, label) { + const { validity } = el; + + el.id === "signup_password_check" && setPasswordValidity(); + if (!validity.valid) { if (validity.valueMissing) return `${label}을 입력해주세요`; if (validity.typeMismatch) return "잘못된 이메일 형식입니다"; if (validity.tooShort) return "비밀번호를 8자 이상 입력해주세요"; + if (validity.customError) return el.validationMessage; + console.log(validity); } - if(label==='비밀번호 확인' && !validatePWCheck()) return "비밀번호가 일치하지 않습니다"; - return ""; } -function validatePWCheck() { - const [pw,pwCheck] = document.querySelectorAll('input[id^=signup_password]'); - return pw.value===pwCheck.value; +function setPasswordValidity() { + const [pw, pwCheck] = document.querySelectorAll("input[id^=signup_password]"); + if (pw.value !== pwCheck.value) { + pwCheck.setCustomValidity("비밀번호가 일치하지 않습니다"); + } else { + pwCheck.setCustomValidity(""); + } } function showValidMessage(e) { - const parentEl = e.target.parentElement; - const parentClassName = parentEl.className; + const inputEl = e.target; + const parentEl = inputEl.parentElement; const targetLabel = parentEl.firstElementChild.textContent; - let p = document.querySelector(`.${parentClassName} p`); - if (!p) { - p = document.createElement("p"); - p.classList.add("invalid-input"); - } - const errMsg = validateInput(e, targetLabel); + let p = parentEl.querySelector("p"); + let errMsg = validateInput(inputEl, targetLabel); + if (errMsg) { + if (!p) { + p = document.createElement("p"); + p.classList.add("invalid-input"); + inputEl.after(p); + } p.textContent = errMsg; - e.target.after(p); } else { - p.remove(); + p && p.remove(); } } -const inputIds = [ - "login_email", - "login_password", - "signup_email", - "signup_name", - "signup_password", - "signup_password_check", -]; -inputIds.forEach((id) => { - const inputEl = document.getElementById(id); - inputEl && inputEl.addEventListener("focusout", (e) => showValidMessage(e)); -}); \ No newline at end of file +const form = document.querySelectorAll("form input").forEach((inputEl) => { + inputEl.addEventListener("focusout", (e) => showValidMessage(e)); +}); From 11a92bf1876b4543fdd082ed1ae095ea2b955e04 Mon Sep 17 00:00:00 2001 From: minyoung1101 Date: Sat, 19 Jul 2025 05:38:30 +0900 Subject: [PATCH 08/14] =?UTF-8?q?Feat:=20=ED=8F=BC=20=EC=9E=85=EB=A0=A5=20?= =?UTF-8?q?=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=B0=EA=B3=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=99=9C=EC=84=B1=ED=99=94/=EB=B9=84?= =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- base.css | 2 ++ login.html | 2 +- signup.html | 2 +- validation.js | 16 +++++++++++++--- 4 files changed, 17 insertions(+), 5 deletions(-) diff --git a/base.css b/base.css index 069cd575..94e8d1dc 100644 --- a/base.css +++ b/base.css @@ -59,6 +59,8 @@ button:active { } button.inactive { background: var(--color-gray-400); + pointer-events: none; + cursor: default; } button.large { width: 100%; diff --git a/login.html b/login.html index b7f72bf7..d13573dc 100644 --- a/login.html +++ b/login.html @@ -25,7 +25,7 @@
- + - +
-
+
- +
+ diff --git a/passwordToggle.js b/passwordToggle.js new file mode 100644 index 00000000..a9d4a389 --- /dev/null +++ b/passwordToggle.js @@ -0,0 +1,10 @@ +function togglePassword(e) { + const input = e.target.parentElement.querySelector("input"); + const isOpened = input.type === "text"; + input.type = isOpened ? "password" : "text"; + e.target.classList.toggle("visible", !isOpened); +} + +const btns = document.querySelectorAll(".btn-show").forEach((btn) => { + btn.addEventListener("click", (e) => togglePassword(e)); +}); diff --git a/signup.html b/signup.html index acffcc27..45b5185f 100644 --- a/signup.html +++ b/signup.html @@ -52,6 +52,7 @@ 로그인
+ From 29fa0ed800be457806f9547ada1afb7947109649 Mon Sep 17 00:00:00 2001 From: minyoung1101 Date: Sat, 19 Jul 2025 11:59:00 +0900 Subject: [PATCH 12/14] =?UTF-8?q?Feat:=20input=ED=95=84=EB=93=9C=EC=97=90?= =?UTF-8?q?=20placeholder=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- login.html | 4 ++-- signup.html | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/login.html b/login.html index 45c2f306..e531cd92 100644 --- a/login.html +++ b/login.html @@ -18,11 +18,11 @@
- +
diff --git a/signup.html b/signup.html index 45b5185f..2361b9ac 100644 --- a/signup.html +++ b/signup.html @@ -18,20 +18,20 @@
- +
- +
- +
From e3c036ea671237c1f0b155f87a53bd655b89c5b6 Mon Sep 17 00:00:00 2001 From: minyoung1101 Date: Sat, 19 Jul 2025 12:21:19 +0900 Subject: [PATCH 13/14] =?UTF-8?q?Style:=20password=20=EC=9E=85=EB=A0=A5=20?= =?UTF-8?q?=ED=95=84=EB=93=9C=20letter-spacing=20=EC=A0=81=EC=9A=A9=20?= =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- base.css | 3 --- login.css | 3 +++ login.html | 2 +- signup.html | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/base.css b/base.css index 94e8d1dc..a1b48259 100644 --- a/base.css +++ b/base.css @@ -37,9 +37,6 @@ html { font-size: 1.6rem; font-weight: 400; } -.letter-sp-04 { - letter-spacing: .4rem; -} /* buttons */ diff --git a/login.css b/login.css index 27bfdb4b..7263661c 100644 --- a/login.css +++ b/login.css @@ -43,6 +43,9 @@ body { padding: .8rem 0 0 1.6rem; } +.password input[type='password']:not(:placeholder-shown){ + letter-spacing: 0.4rem; +} .password, .password-check { position: relative; } diff --git a/login.html b/login.html index e531cd92..7fa81cb0 100644 --- a/login.html +++ b/login.html @@ -22,7 +22,7 @@
- +
diff --git a/signup.html b/signup.html index 2361b9ac..4cb64bf8 100644 --- a/signup.html +++ b/signup.html @@ -26,12 +26,12 @@
- +
- +
From d5bc56b55cfaf1e3d18892552d0b0340d8c16c95 Mon Sep 17 00:00:00 2001 From: minyoung1101 Date: Sat, 19 Jul 2025 12:44:12 +0900 Subject: [PATCH 14/14] =?UTF-8?q?Style:=20password-check=EC=97=90=EB=8F=84?= =?UTF-8?q?=20letter-spacing=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- login.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/login.css b/login.css index 7263661c..443383db 100644 --- a/login.css +++ b/login.css @@ -43,7 +43,7 @@ body { padding: .8rem 0 0 1.6rem; } -.password input[type='password']:not(:placeholder-shown){ +input[id^='signup_password'][type='password']:not(:placeholder-shown){ letter-spacing: 0.4rem; } .password, .password-check {