diff --git a/Login/login.css b/Login/login.css index e24974b1..570e1d09 100644 --- a/Login/login.css +++ b/Login/login.css @@ -59,6 +59,14 @@ main { border-color: var(--primary-100); /* 포커스 상태 테두리 색상 */ } +.input_wrapper.success-border { + border-color: var(--primary-100); +} + +.input_wrapper.error-border { + border-color: var(--error); +} + input { border: none; background-color: transparent; /* 투명 배경 */ @@ -83,6 +91,16 @@ input::placeholder { cursor: pointer; } +.error { + color: var(--error); + font-size: 14px; + margin-top: 5px; + margin-bottom: 25px; + margin-left: 10px; + font-weight: 600; + display: none; +} + .btn_login2 { width: 640px; height: 56px; @@ -94,6 +112,12 @@ input::placeholder { cursor: pointer; font-size: 20px; font-weight: 600; + cursor: not-allowed; +} + +.btn_login2.active { + background-color: var(--primary-100); + cursor: pointer; } /*sns_login*/ @@ -151,12 +175,12 @@ input::placeholder { .login_content, .btn_login2, .sns_login_content { - width: calc(100% - 32px); + margin-left: 16px; max-width: 400px; } .sns_login { - width: calc(100% - 32px); + margin-left: 16px; max-width: 400px; } } diff --git a/Login/login.html b/Login/login.html index 8548823c..8f6d957e 100644 --- a/Login/login.html +++ b/Login/login.html @@ -18,7 +18,7 @@

이메일

-
+
이메일 placeholder="이메일을 입력해주세요." />
+

비밀번호

-
+
비밀번호 />
+

+ diff --git a/Login/login.js b/Login/login.js new file mode 100644 index 00000000..1c701751 --- /dev/null +++ b/Login/login.js @@ -0,0 +1,89 @@ +document.addEventListener("DOMContentLoaded", function () { + const emailInput = document.getElementById("email"); + const emailInputBorder = document.getElementById("email_input"); + const emailError = document.getElementById("email_error"); + const passwordInput = document.getElementById("password"); + const passwordInputBorder = document.getElementById("password_input"); + const passwordError = document.getElementById("password_error"); + const loginButton = document.querySelector(".btn_login2"); + const togglePasswordIcon = document.querySelector(".input_icon"); + + /* 비밀번호 보이기 */ + togglePasswordIcon.addEventListener("click", function () { + if (passwordInput.type === "password") { + passwordInput.type = "text"; // 비밀번호 보이기 + togglePasswordIcon.src = "../img/login/btn_hidepw.svg"; + } else { + passwordInput.type = "password"; // 비밀번호 가리기 + togglePasswordIcon.src = "../img/login/btn_showpw.svg"; + } + }); + + /* 이메일 유효성 */ + function validateEmail(email) { + const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + return emailRegex.test(email); + } + + /* 비밀번호 유효성 */ + function validateInputs() { + const isEmailValid = emailInput.value && validateEmail(emailInput.value); + const isPasswordValid = + passwordInput.value && passwordInput.value.length >= 8; + const isFormValid = isEmailValid && isPasswordValid; + + if (isFormValid) { + loginButton.classList.add("active"); + loginButton.disabled = false; + } else { + loginButton.classList.remove("active"); + loginButton.disabled = true; + } + } + + /* 이메일 에러메세지 */ + function checkEmail() { + if (!emailInput.value) { + emailError.textContent = "이메일을 입력해주세요."; + emailError.style.display = "block"; + emailInputBorder.classList.add("error-border"); + } else if (!validateEmail(emailInput.value)) { + emailError.textContent = "잘못된 이메일 형식입니다."; + emailError.style.display = "block"; + emailInputBorder.classList.add("error-border"); // input 오류 + } else { + emailError.style.display = "none"; + emailInputBorder.classList.remove("error-border"); // input 오류 제거 + emailInputBorder.classList.add("success-border"); + } + validateInputs(); + } + + /* 비밀번호 에러메세지 */ + function checkPassword() { + if (passwordInput.value.length < 8) { + passwordError.textContent = "비밀번호를 8자 이상 입력해주세요."; + passwordError.style.display = "block"; + passwordInputBorder.classList.add("error-border"); + } else { + passwordError.style.display = "none"; + passwordInputBorder.classList.remove("error-border"); + passwordInputBorder.classList.add("success-border"); + } + validateInputs(); + } + + emailInput.addEventListener("input", checkEmail); + passwordInput.addEventListener("input", checkPassword); + + /* 로그인 버튼 활성화 */ + loginButton.addEventListener("click", function (event) { + if (!loginButton.classList.contains("active")) { + event.preventDefault(); // 비활성화 상태 클릭 방지 + } else { + window.location.href = "/items"; + } + }); + + validateInputs(); // 페이지 로드 시 초기 상태 체크 +}); diff --git a/Signup/signup.css b/Signup/signup.css index 5c2f84e9..e1a9ead5 100644 --- a/Signup/signup.css +++ b/Signup/signup.css @@ -13,3 +13,22 @@ main { align-items: center; grid-template-rows: 1fr 3fr; } + +.btn_signup { + width: 640px; + height: 56px; + background-color: var(--gray-400); + color: var(--gray-100); + border: none; + border-radius: 40px; + padding: 16px 124px; + cursor: pointer; + font-size: 20px; + font-weight: 600; + cursor: not-allowed; +} + +.btn_signup.active { + background-color: var(--primary-100); + cursor: pointer; +} diff --git a/Signup/signup.html b/Signup/signup.html index f60659c0..adce31d5 100644 --- a/Signup/signup.html +++ b/Signup/signup.html @@ -8,6 +8,7 @@ href="https://cdn.jsdelivr.net/npm/reset-css@4.0.1/reset.min.css" /> + @@ -18,46 +19,56 @@