[이민서] Sprint4

login.html

@@ -39,11 +39,13 @@
             placeholder="비밀번호를 입력해 주세요"
             required
             >
-          <img
-            class="toggle-password"
+          <button type="button" class="password-toggle-button">
+            <img
+            class="password-toggle-icon"
             src="/images/icons/eye-invisible.svg"
-            alt="비밀번호 숨김"
+            alt="비밀번호 숨김 상태 아이콘"
             >
+          </button>
         </div>
         <span class="password-empty-error error-message">비밀번호를 입력해 주세요</span>
         <span class="password-invalid-error error-message">비밀번호를 8자 이상 입력해 주세요</span>

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,18 +163,43 @@ 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";
     });
   }
   // 회원가입 폼 처리
   if (signupForm) {
     signupForm.addEventListener("submit", (event) => {
       event.preventDefault();
+      removeEventListeners();  // 폼 제출 시 이벤트 제거
       window.location.href = "/login.html";
     });
   }

signup.html

@@ -50,11 +50,13 @@
           placeholder="비밀번호를 입력해 주세요"
           required
           >
-          <img
-            class="toggle-password"
+          <button type="button" class="password-toggle-button">
+            <img
+            class="password-toggle-icon"
             src="/images/icons/eye-invisible.svg"
-            alt="비밀번호 숨김"
+            alt="비밀번호 숨김 상태 아이콘"
             >
+          </button>
         </div>
         <span class="password-empty-error error-message">비밀번호를 입력해 주세요</span>
         <span class="password-invalid-error error-message">비밀번호를 8자 이상 입력해 주세요</span>
@@ -69,11 +71,13 @@
             placeholder="비밀번호를 다시 한 번 입력해 주세요"
             required
           />
-          <img
-            src="images/icons/eye-invisible.svg"
-            alt="비밀번호 숨김"
-            class="toggle-password"
-          />
+          <button type="button" class="password-toggle-button">
+            <img
+            class="password-toggle-icon"
+            src="/images/icons/eye-invisible.svg"
+            alt="비밀번호 숨김 상태 아이콘"
+            >
+          </button>
         </div>
         <span class="password-confirmation-error error-message">비밀번호가 일치하지 않습니다.</span>
       </div>

styles/auth.css

@@ -1,34 +1,16 @@
 .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) {
     margin-top: 4.8rem;
   }
 
   @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;

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,20 +271,18 @@ 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;
     grid-template-areas:
       "footer-menu socialMedia"
       "copyright .";
     gap: 2.5rem;
-    padding: 3.2rem 0 6.5rem;
   }
 }