diff --git a/images/icons/eyeOpen.png b/images/icons/eyeOpen.png new file mode 100644 index 00000000..2b75130b Binary files /dev/null and b/images/icons/eyeOpen.png differ diff --git a/index.html b/index.html index ca517a19..1617d59b 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,43 @@ + + 판다마켓 + + + + - - 판다마켓 + + + + + + + + + + diff --git a/login.css b/login.css index 1426c19d..2edaedd3 100644 --- a/login.css +++ b/login.css @@ -7,6 +7,7 @@ --secondary-font-color: #e5e7eb; --button-hover-color: #1967d6; --button-active-color: #1251aa; + --cool-gray-100: #f3f4f6; } @font-face { @@ -81,7 +82,7 @@ body p { padding: 1.6rem 2.4rem; font-weight: 400; border: 0.1rem solid var(--cool-gray-100); - background-color: #f3f4f6; + background-color: var(--cool-gray-100); font-size: 1.6rem; } @@ -297,3 +298,18 @@ body p { color: var(--button-color); } } + +.errDiv { + margin-top: 0.8rem; + font-size: 1.4rem; + color: #f74747; + padding-left: 1.6rem; +} + +.input-box.invalid { + border: 1px solid #f74747; +} + +.login-button.activate { + background-color: var(--button-color); +} diff --git a/pages/login.html b/pages/login.html index 2c3d062a..772115a9 100644 --- a/pages/login.html +++ b/pages/login.html @@ -7,7 +7,6 @@ -
@@ -41,17 +41,19 @@ class="input-box" placeholder="비밀번호를 입력해주세요" /> + 비밀번호아이콘
+
- +
@@ -77,5 +79,8 @@
+ + + diff --git a/pages/signup.html b/pages/signup.html index d91fa155..fc1cbbd6 100644 --- a/pages/signup.html +++ b/pages/signup.html @@ -28,6 +28,7 @@ class="input-box" placeholder="이메일을 입력해주세요" /> +
@@ -38,6 +39,7 @@ class="input-box" placeholder="닉네임을 입력해주세요" /> +
@@ -55,13 +57,14 @@ alt="비밀번호아이콘" />
+
+
- +
@@ -102,5 +106,7 @@
+ + diff --git a/scripts/loginValidate.js b/scripts/loginValidate.js new file mode 100644 index 00000000..90a75532 --- /dev/null +++ b/scripts/loginValidate.js @@ -0,0 +1,72 @@ +const email = document.getElementById('email'); +const emailError = document.getElementById('emailErrDiv'); +const password = document.getElementById('password'); +const passwordError = document.getElementById('passwordErrDiv'); +const loginButton = document.getElementById('loginButton'); + +let emailCheck = false; +let passwordCheck = false; +let isLoginPossible = false; + +function validateEmail() { + const emailValue = email.value.trim(); + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + if (emailValue === '') { + emailError.textContent = '이메일을 입력하세요.'; + email.classList.add('invalid'); + emailCheck = false; + } else if (!emailPattern.test(emailValue)) { + emailError.textContent = '잘못된 이메일 형식입니다.'; + email.classList.add('invalid'); + emailCheck = false; + } else { + emailError.textContent = ''; + email.classList.remove('invalid'); + emailCheck = true; + } + + LoginCheck(); +} + +function validatePassword() { + const passwordValue = password.value.trim(); + + if (passwordValue === '') { + passwordError.textContent = '비밀번호를 입력해주세요.'; + password.classList.add('invalid'); + passwordCheck = false; + } else if (passwordValue.length < 8) { + passwordError.textContent = '비밀번호를 8자이상 입력해주세요.'; + password.classList.add('invalid'); + passwordCheck = false; + } else { + passwordError.textContent = ''; + password.classList.remove('invalid'); + passwordCheck = true; + } + + LoginCheck(); +} + +function LoginCheck() { + if (emailCheck && passwordCheck) { + isLoginPossible = true; + loginButton.classList.add('activate'); + } else { + loginButton.classList.remove('activate'); + isLoginPossible = false; + } +} + +function Login() { + if (isLoginPossible) { + location.href = '/pages/items.html'; + } else { + window.alert('올바른 이메일/비밀번호를 입력해주세요.'); + } +} + +email.addEventListener('blur', validateEmail); +password.addEventListener('blur', validatePassword); +loginButton.addEventListener('click', Login); diff --git a/scripts/passwordIcon.js b/scripts/passwordIcon.js new file mode 100644 index 00000000..f9a154e2 --- /dev/null +++ b/scripts/passwordIcon.js @@ -0,0 +1,15 @@ +const toggleIcons = document.querySelectorAll('.passwordIcon'); + +toggleIcons.forEach((icon) => { + icon.addEventListener('click', function () { + const passwordInput = this.parentElement.querySelector('input'); + + if (passwordInput.type === 'password') { + passwordInput.type = 'text'; + this.src = '/images/icons/eyeOpen.png'; + } else { + passwordInput.type = 'password'; + this.src = '/images/icons/eyesIcon.png'; + } + }); +}); diff --git a/scripts/sigunupValidate.js b/scripts/sigunupValidate.js new file mode 100644 index 00000000..62acd302 --- /dev/null +++ b/scripts/sigunupValidate.js @@ -0,0 +1,116 @@ +const email = document.getElementById('email'); +const emailError = document.getElementById('emailErrDiv'); +const nickname = document.getElementById('name'); +const nicknameError = document.getElementById('nicknameErrDiv'); +const password = document.getElementById('password'); +const passwordError = document.getElementById('passwordErrDiv'); +const confirmPassword = document.getElementById('confirmPassword'); +const confirmError = document.getElementById('confirmErrDiv'); +const signupButton = document.getElementById('signupButton'); + +let emailCheck = false; +let nicknameCheck = false; +let passwordCheck = false; +let confirmPasswordCheck = false; +let isSignUpPossible = false; + +function validateEmail() { + const emailValue = email.value.trim(); + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + if (emailValue === '') { + emailError.textContent = '이메일을 입력하세요.'; + email.classList.add('invalid'); + emailCheck = false; + } else if (!emailPattern.test(emailValue)) { + emailError.textContent = '잘못된 이메일 형식입니다.'; + email.classList.add('invalid'); + emailCheck = false; + } else { + emailError.textContent = ''; + email.classList.remove('invalid'); + emailCheck = true; + } + signUpCheck(); +} + +function validateNickname() { + const nicknameValue = nickname.value.trim(); + + if (nicknameValue === '') { + nicknameError.textContent = '닉네임을 입력해주세요.'; + nickname.classList.add('invalid'); + nicknameCheck = false; + } else { + nicknameError.textContent = ''; + nicknameError.classList.remove('invalid'); + nicknameCheck = true; + } + signUpCheck(); +} + +function validatePassword() { + const passwordValue = password.value.trim(); + + if (passwordValue === '') { + passwordError.textContent = '비밀번호를 입력해주세요.'; + password.classList.add('invalid'); + passwordCheck = false; + } else if (passwordValue.length < 8) { + passwordError.textContent = '비밀번호를 8자이상 입력해주세요.'; + password.classList.add('invalid'); + passwordCheck = false; + } else { + passwordError.textContent = ''; + password.classList.remove('invalid'); + passwordCheck = true; + } + signUpCheck(); +} + +function validateConfirmPassword() { + const confirmValue = confirmPassword.value.trim(); + const passwordValue = password.value.trim(); + + if (confirmValue === '') { + confirmError.textContent = '비밀번호를 입력해주세요.'; + confirmPassword.classList.add('invalid'); + confirmPasswordCheck = false; + } + + if (confirmValue !== passwordValue) { + confirmError.textContent = '비밀번호가 일치하지 않습니다.'; + confirmPassword.classList.add('invalid'); + confirmPasswordCheck = false; + } else { + confirmError.textContent = ''; + confirmPassword.classList.remove('invalid'); + confirmPasswordCheck = true; + } + + signUpCheck(); +} + +function signUpCheck() { + if (emailCheck && nicknameCheck && passwordCheck && confirmPasswordCheck) { + isSignUpPossible = true; + signupButton.classList.add('activate'); + } else { + signupButton.classList.remove('active'); + isSignUpPossible = false; + } +} + +function SignUp() { + if (isSignUpPossible) { + location.href = '/pages/login.html'; + } else { + window.alert('올바른 정보들을 입력해주세요'); + } +} + +email.addEventListener('blur', validateEmail); +nickname.addEventListener('blur', validateNickname); +password.addEventListener('blur', validatePassword); +confirmPassword.addEventListener('blur', validateConfirmPassword); +signupButton.addEventListener('click', SignUp); diff --git a/signup.css b/signup.css index 84b39981..e3423e52 100644 --- a/signup.css +++ b/signup.css @@ -80,7 +80,7 @@ body p { padding: 1.6rem 2.4rem; font-weight: 400; border: 0.1rem solid var(--cool-gray-100); - background-color: #f3f4f6; + background-color: var(--cool-gray-100); font-size: 1.6rem; } @@ -222,7 +222,7 @@ body p { padding: 1.6rem 2.4rem; font-weight: 400; border: 0.1rem solid var(--cool-gray-100); - background-color: #f3f4f6; + background-color: var(--cool-gray-100); font-size: 1.6rem; } @@ -308,3 +308,17 @@ body p { color: var(--button-color); } } + +.errDiv { + margin-top: 0.8rem; + font-size: 1.4rem; + color: #f74747; + padding-left: 1.6rem; +} +.input-box.invalid { + border: 1px solid #f74747; +} + +.signup-button.activate { + background-color: var(--button-color); +} diff --git a/style.css b/style.css index 23cafe57..dbb0ab89 100644 --- a/style.css +++ b/style.css @@ -98,7 +98,6 @@ align-items: center; gap: 6.4rem; width: 98.8rem; - height: 44.4rem; } .section-text { @@ -267,38 +266,10 @@ /* ******************************************************************* */ /* 태블릿 */ @media (min-width: 768px) and (max-width: 1199px) { - .header { - width: 100%; - height: 7rem; - position: fixed; - background-color: #ffffff; - top: 0; - } - .header-content { - display: flex; - justify-content: space-between; - align-items: center; margin: 0.95rem 2.4rem; } - .header-button { - display: flex; - justify-content: center; - align-items: center; - width: 12.8rem; - height: 4.8rem; - padding: 1.2rem 2.3rem; - border-radius: 0.8rem; - background-color: var(--button-color); - color: #ffffff; - border: 0.1rem solid var(--button-color); - flex-shrink: 0; - text-decoration: none; - cursor: pointer; - font-size: 1.6rem; - } - .topLanding { width: 100%; height: 77.1rem; @@ -327,10 +298,6 @@ } .top-content-text h2 { - line-height: 5.6rem; - color: var(--main-font-color); - font-size: 4rem; - font-weight: 700; text-align: center; } @@ -357,7 +324,6 @@ align-items: center; gap: 2.4rem; width: 70.6rem; - height: 70.8rem; } .section-card.reverse { @@ -532,15 +498,7 @@ } /* 모바일 */ -@media (min-width: 375px) and (max-width: 767px) { - .header { - width: 100%; - height: 7rem; - position: fixed; - background-color: #ffffff; - top: 0; - } - +@media (max-width: 767px) { .header-content { display: flex; justify-content: space-between; @@ -548,23 +506,6 @@ margin: 0.95rem 2.4rem; } - .header-button { - display: flex; - justify-content: center; - align-items: center; - width: 12.8rem; - height: 4.8rem; - padding: 1.2rem 2.3rem; - border-radius: 0.8rem; - background-color: var(--button-color); - color: #ffffff; - border: 0.1rem solid var(--button-color); - flex-shrink: 0; - text-decoration: none; - cursor: pointer; - font-size: 1.6rem; - } - .topLanding { width: 100%; height: 54rem;