diff --git a/login.html b/login.html
index 69557abd1..8ae981d98 100644
--- a/login.html
+++ b/login.html
@@ -39,11 +39,13 @@
placeholder="비밀번호를 입력해 주세요"
required
>
- ![]()
+ 
+
비밀번호를 입력해 주세요
비밀번호를 8자 이상 입력해 주세요
diff --git a/scripts/auth.js b/scripts/auth.js
index fba077161..bfb21f2f6 100644
--- a/scripts/auth.js
+++ b/scripts/auth.js
@@ -3,14 +3,16 @@ document.addEventListener("DOMContentLoaded", () => {
let isNicknameValid = false;
let isPasswordValid = false;
let isPasswordConfirmationValid = false;
+
+ const emailRegex = /^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
- const loginForm = document.querySelector('.login-form');
- const signupForm = document.querySelector('.signup-form');
- const emailInput = document.querySelector('#email');
- const nicknameInput = document.querySelector('#nickname');
- const passwordInput = document.querySelector('#password');
- const passwordConfirmationInput = document.querySelector('#passwordConfirmation');
- const submitButton = document.querySelector('button[type="submit"]');
+ const loginForm = document.querySelector(".login-form");
+ const signupForm = document.querySelector(".signup-form");
+ const emailInput = document.querySelector("#email");
+ const nicknameInput = document.querySelector("#nickname");
+ const passwordInput = document.querySelector("#password");
+ const passwordConfirmationInput = document.querySelector("#passwordConfirmation");
+ const submitButton = document.querySelector("button[type='submit']");
// 오류 메세지 노출 함수
function showError(input, errorClass) {
@@ -27,14 +29,12 @@ document.addEventListener("DOMContentLoaded", () => {
}
// 이메일 형식 유효성 검사
- function validateEmailString(email) {
- const emailRegex = /^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
+ function isEmailValidFormat(email) {
return emailRegex.test(email);
}
// 이메일 필드 유효성 검사
function checkEmailValidity() {
- // 입력 필드 선택 후 아무것도 입력 안 하고 필드 focus out하는 경우 걸러내기 위함
const emailValue = emailInput.value.trim();
// 오류 메세지 및 입력 필드 상태 초기화
@@ -44,7 +44,7 @@ document.addEventListener("DOMContentLoaded", () => {
if (!emailValue) {
showError(emailInput, "email-empty-error");
- } else if (!validateEmailString(emailValue)) {
+ } else if (!isEmailValidFormat(emailValue)) {
showError(emailInput, "email-invalid-error");
} else {
isEmailValid = true;
@@ -127,6 +127,25 @@ document.addEventListener("DOMContentLoaded", () => {
submitButton.disabled = !isFormValid;
}
+ // 비밀번호 토글 버튼 동작
+ function togglePasswordVisibility(event) {
+ const button = event.currentTarget;
+ const inputField = button.parentElement.querySelector("input");
+ const toggleIcon = button.querySelector(".password-toggle-icon");
+
+ // 비밀번호가 표시된 상태인지 확인
+ const isPasswordVisible = inputField.type === "text";
+
+ inputField.type = isPasswordVisible ? "password" : "text";
+ toggleIcon.src = isPasswordVisible ? "/images/icons/eye-invisible.svg" : "/images/icons/eye-visible.svg"
+ toggleIcon.alt = isPasswordVisible ? "비밀번호 숨김 상태 아이콘" : "비밀번호 표시 상태 아이콘";
+ }
+
+ // 비밀번호 토글 버튼에 이벤트 리스너 추가
+ const toggleButtons = document.querySelectorAll(".password-toggle-button");
+ toggleButtons.forEach((button) =>
+ button.addEventListener("click", togglePasswordVisibility)
+ );
// 입력 필드에 이벤트 리스너 추가
if (emailInput) {
@@ -144,11 +163,35 @@ document.addEventListener("DOMContentLoaded", () => {
passwordConfirmationInput.addEventListener("input", checkPasswordConfirmationValidity);
}
+ // 폼 제출 전 이벤트 리스너 제거
+ function removeEventListeners() {
+ if (emailInput) {
+ emailInput.removeEventListener("focusout", checkEmailValidity);
+ }
+ if (nicknameInput) {
+ nicknameInput.removeEventListener("focusout", checkNicknameValidity);
+ }
+ if (passwordInput) {
+ passwordInput.removeEventListener("focusout", checkPasswordValidity);
+ passwordInput.removeEventListener("input", checkPasswordValidity);
+ }
+ if (passwordConfirmationInput) {
+ passwordConfirmationInput.removeEventListener("focusout", checkPasswordConfirmationValidity);
+ passwordConfirmationInput.removeEventListener("input", checkPasswordConfirmationValidity);
+ }
+
+ // 비밀번호 토글 버튼의 이벤트 리스너 제거
+ toggleButtons.forEach((button) =>
+ button.removeEventListener("click", togglePasswordVisibility)
+ );
+ }
+
// 이후 기능 추가 후 수정 (현재는 단순히 특정 페이지로 이동)
// 로그인 폼 처리
if (loginForm) {
loginForm.addEventListener("submit", (event) => {
event.preventDefault();
+ removeEventListeners(); // 폼 제출 시 이벤트 제거
window.location.href = "/index.html";
});
}
@@ -156,6 +199,7 @@ document.addEventListener("DOMContentLoaded", () => {
if (signupForm) {
signupForm.addEventListener("submit", (event) => {
event.preventDefault();
+ removeEventListeners(); // 폼 제출 시 이벤트 제거
window.location.href = "/login.html";
});
}
diff --git a/signup.html b/signup.html
index 95a241d84..e1adf7b31 100644
--- a/signup.html
+++ b/signup.html
@@ -50,11 +50,13 @@
placeholder="비밀번호를 입력해 주세요"
required
>
- ![]()
+
+
비밀번호를 입력해 주세요
비밀번호를 8자 이상 입력해 주세요
@@ -69,11 +71,13 @@
placeholder="비밀번호를 다시 한 번 입력해 주세요"
required
/>
- 
+
비밀번호가 일치하지 않습니다.
diff --git a/styles/auth.css b/styles/auth.css
index 0883fec10..5ac37ba05 100644
--- a/styles/auth.css
+++ b/styles/auth.css
@@ -1,26 +1,6 @@
.auth-container {
max-width: 64rem;
margin: 0 auto;
-
- @media (max-width: 767px) {
- max-width: 40rem;
- padding: 0 1.6rem;
- }
-}
-
-.auth-container.login {
- margin-top: 15rem;
-
- @media (max-width: 1199px) {
- margin-top: 12rem;
- }
-
- @media (max-width: 767px) {
- margin-top: 8rem;
- }
-}
-
-.auth-container.signup {
margin-top: 6rem;
@media (max-width: 1199px) {
@@ -28,7 +8,9 @@
}
@media (max-width: 767px) {
+ max-width: 40rem;
margin-top: 2.4rem;
+ padding: 0 1.6rem;
}
}
@@ -109,7 +91,7 @@ input:focus {
display: none;
}
-.toggle-password {
+.password-toggle-button {
position: absolute;
right: 2.4rem;
cursor: pointer;
diff --git a/styles/home.css b/styles/home.css
index b6b8e59ca..743e772ae 100644
--- a/styles/home.css
+++ b/styles/home.css
@@ -22,11 +22,12 @@ nav {
border-bottom: 0.1rem solid var(--color-grey);
@media (max-width: 1199px) {
- max-width: 70rem;
+ padding: 0 5rem;
+ margin: 0;
}
@media (max-width: 767px) {
- max-width: 40rem;
+ padding: 0 2rem;
}
}
@@ -62,11 +63,11 @@ main {
width: 100%;
@media (max-width: 1199px) {
- max-width: 70rem;
+ max-width: 100rem;
}
@media (max-width: 767px) {
- max-width: 40rem;
+ max-width: 70rem;
}
}
@@ -156,12 +157,11 @@ main {
width: 100%;
@media (max-width: 1199px) {
- max-width: 69.6rem;
- padding: 0 2.5rem;
+ padding: 0 3rem;
}
@media (max-width: 767px) {
- max-width: 344rem;
+ padding: 0 2rem;
}
}
@@ -271,12 +271,11 @@ footer {
font-size: 1.6rem;
@media (max-width: 1199px) {
- max-width: 70rem;
- padding: 3.2rem 0 10.8rem;
+ padding: 3.2rem 5rem 10.8rem;
}
@media (max-width: 767px) {
- max-width: 40rem;
+ padding: 3.2rem 2rem 6.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
@@ -284,7 +283,6 @@ footer {
"footer-menu socialMedia"
"copyright .";
gap: 2.5rem;
- padding: 3.2rem 0 6.5rem;
}
}