From ff869f544b08b7682e5c5f408ec1c7e75d3bced4 Mon Sep 17 00:00:00 2001 From: jiwonll <166104093+jiwonll@users.noreply.github.com> Date: Thu, 5 Feb 2026 20:54:51 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- images/preview.svg | 16 -------- index.css | 4 +- index.html | 48 ++++++++++++------------ login.css | 51 ++++++++++++++++++++++++- login.html | 35 +++++++++-------- login.js | 91 +++++++++++++++++++++++++++++++++++++++++++++ signup.css | 55 +++++++++++++++++++++++++-- signup.html | 10 ++++- signup.js | 93 ++++++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 339 insertions(+), 64 deletions(-) delete mode 100644 images/preview.svg create mode 100644 login.js create mode 100644 signup.js diff --git a/images/preview.svg b/images/preview.svg deleted file mode 100644 index 096699a..0000000 --- a/images/preview.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/index.css b/index.css index ece32d7..04c2622 100644 --- a/index.css +++ b/index.css @@ -3,7 +3,7 @@ a { text-decoration: none; } -header { +.header-content { width: 1120px; margin: 9.5px auto; position: sticky; @@ -127,7 +127,7 @@ div > h1 { height: 172px; } -footer { +.footer { background-color: #111827; height: 160px; margin: auto; diff --git a/index.html b/index.html index 159703e..3ea8628 100644 --- a/index.html +++ b/index.html @@ -91,32 +91,34 @@

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

diff --git a/login.css b/login.css index 10f17ed..2a7ce0e 100644 --- a/login.css +++ b/login.css @@ -83,8 +83,7 @@ img[src*="logo"] { } .password-input { - background-image: url("images/login_page/eyes-close.svg"); - background-repeat: no-repeat; + width: 640px; display: flex; background-position: right 24px center; } @@ -132,3 +131,51 @@ img[src*="logo"] { gap: 8px; } } + +.error { + border: 1px solid red; +} + +.error-text { + color: red; + font: 600 14px/24px "Pretendard"; + margin-top: -8px; + margin-left: 16px; + +} +.disabled { + background-color: #9ca3af; +} + +.login-button { + cursor: pointer; + margin-top: 24px; +} + +.login-button.disabled { + cursor: not-allowed; +} + +.password-wrapper { + position: relative; + height: 56px; +} + +.toggle-eye { + position: absolute; + right: 24px; + top: 50%; + transform: translateY(-50%); +} + +.eyeBtn{ + cursor: pointer; + +} + +.password-wrapper .error-text{ + position: absolute; + top: calc(100% + 16px); + + +} diff --git a/login.html b/login.html index e5ea3d8..56afaed 100644 --- a/login.html +++ b/login.html @@ -20,44 +20,49 @@
- +
- +
+ + +
- +
-

- 간편 로그인하기 -

+

간편 로그인하기

- + - +
-
- 판다마켓이 처음이신가요? + 판다마켓이 처음이신가요? 회원가입
- + diff --git a/login.js b/login.js new file mode 100644 index 0000000..dc3ab5d --- /dev/null +++ b/login.js @@ -0,0 +1,91 @@ +const emailInput = document.querySelector("#email"); +const passwordInput = document.querySelector("#password"); +const loginBtn = document.querySelector(".login-button"); + +const emailError = document.createElement("p"); +const passwordError = document.createElement("p"); + +emailError.classList.add("error-text"); +passwordError.classList.add("error-text"); + +emailInput.parentNode.appendChild(emailError); +passwordInput.parentNode.appendChild(passwordError); + +const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + +let isEmail = false; +let isPassword = false; + +function validateEmail() { + const emailValue = emailInput.value.trim(); + + if (emailValue === "") { + emailError.textContent = "이메일을 입력해주세요"; + emailInput.classList.add("error"); + isEmail = false; + } else if (!emailRegex.test(emailValue)) { + emailError.textContent = "잘못된 이메일 형식입니다."; + emailInput.classList.add("error"); + isEmail = false; + } else { + emailError.textContent = ""; + emailInput.classList.remove("error"); + isEmail = true; + } + updateButtonState(); + +} + +function validatePassword() { + const passwordValue = passwordInput.value.trim(); + + if (passwordValue === "") { + passwordError.textContent = "비밀번호를 입력해주세요."; + passwordInput.classList.add("error"); + isPassword = false; + } else if (passwordValue.length < 8) { + passwordError.textContent = "비밀번호를 8자 이상 입력해주세요"; + passwordInput.classList.add("error"); + isPassword = false; + } else { + passwordError.textContent = ""; + passwordInput.classList.remove("error"); + isPassword = true; + } + updateButtonState(); +} + +function updateButtonState() { + loginBtn.disabled = !(isEmail && isPassword); + + if (loginBtn.disabled == true) { + loginBtn.classList.add("disabled"); + } else { + loginBtn.classList.remove("disabled"); + } +} + +emailInput.addEventListener("focusout", validateEmail); +emailInput.addEventListener("input", validateEmail); + +passwordInput.addEventListener("focusout", validatePassword); +passwordInput.addEventListener("input", validatePassword); + +loginBtn.addEventListener("click", (e) => { + if (loginBtn.disabled) return; + + window.location.href = "/items"; +}); + +const eyeBtn = document.querySelector(".toggle-eye"); +eyeBtn.classList.add("eyeBtn"); + +eyeBtn.addEventListener("click", () => { + if (passwordInput.type === "password") { + passwordInput.type = "text"; + eyeBtn.src = "images/login_page/eyes-open.svg"; + } else { + passwordInput.type = "password"; + eyeBtn.src = "images/login_page/eyes-close.svg"; + } +}); diff --git a/signup.css b/signup.css index 9e141e6..1a00b01 100644 --- a/signup.css +++ b/signup.css @@ -83,14 +83,12 @@ img[src*="logo"] { } .password-input { - background-image: url("images/login_page/eyes-close.svg"); - background-repeat: no-repeat; + background-position: right 24px center; } .password-input-repeat { - background-image: url("images/login_page/eyes-open.svg"); - background-repeat: no-repeat; + background-position: right 24px center; } @@ -142,3 +140,52 @@ img[src*="logo"] { gap: 8px; } } + + +.error { + border: 1px solid red; +} + +.error-text { + color: red; + font: 600 14px/24px "Pretendard"; + margin-top: -8px; + margin-left: 16px; + +} +.disabled { + background-color: #9ca3af; +} + +.login-button { + cursor: pointer; + margin-top: 24px; +} + +.login-button.disabled { + cursor: not-allowed; +} + +.password-wrapper { + position: relative; + height: 56px; +} + +.toggle-eye { + position: absolute; + right: 24px; + top: 50%; + transform: translateY(-50%); +} + +.eyeBtn{ + cursor: pointer; + +} + +.password-wrapper .error-text{ + position: absolute; + top: calc(100% + 16px); + + +} diff --git a/signup.html b/signup.html index 3fc5b16..f3fddc8 100644 --- a/signup.html +++ b/signup.html @@ -30,12 +30,18 @@
- +
+ + +
- +
+ + +