Skip to content

[이민서] Sprint4 #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kich555 merged 3 commits into from
Nov 17, 2024
Merged

[이민서] Sprint4 #152

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d37cbfd
refactor(auth): 이벤트 리스너 제거 함수 추가 및 리팩토링
LMS10 Nov 14, 2024
ba1ee56
feat(auth): 비밀번호 표시/숨기기 아이콘 토글 기능 추가
LMS10 Nov 14, 2024
046a96c
style: 반응형 디자인 여백 수정
LMS10 Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 24 additions & 4 deletions scripts/auth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ 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');
Expand All @@ -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();

// 오류 메세지 및 입력 필드 상태 초기화
Expand All @@ -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;
Expand Down Expand Up @@ -144,18 +144,38 @@ 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);
}
}

Copy link
Collaborator

@kich555 kich555 Nov 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙋 지금 함수도 나쁘진 않은데요 ㅎ 아래와 같이 코드를 데이터로 추상화하여 로직을 일반화하고, 데이터만 변경하여 동작을 조절할 수 있게 한다면 보다 유연하고 가독성도 좋은 코드가 될 수 있지 않을까요 ㅎ

function removeEventListeners() {
  const inputs = [
    { element: emailInput, events: ["focusout"], handler: checkEmailValidity },
    { element: nicknameInput, events: ["focusout"], handler: checkNicknameValidity },
    { element: passwordInput, events: ["focusout", "input"], handler: checkPasswordValidity },
    { element: passwordConfirmationInput, events: ["focusout", "input"], handler: checkPasswordConfirmationValidity },
  ];

  inputs.forEach(({ element, events, handler }) => {
    if (!element) return;
      events.forEach((eventType) => {
        element.removeEventListener(eventType, handler);
      });
  });
}

// 이후 기능 추가 후 수정 (현재는 단순히 특정 페이지로 이동)
// 로그인 폼 처리
if (loginForm) {
loginForm.addEventListener("submit", (event) => {
event.preventDefault();
removeEventListeners(); // 폼 제출 시 이벤트 제거
window.location.href = "/index.html";
Comment on lines +194 to 195
Copy link
Collaborator

@kich555 kich555 Nov 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

window.location.href = "/index.html" 를 사용하면 어차피 새로운 페이지로 넘어가면서 기존 페이지의 스크립트와 이벤트 리스너는 자동으로 해제됩니다. 때문에 removeEventListeners()를 굳이 할 필요가 있을까? 싶긴 하네요 ㅎㅎ

하지만 연습이라는 의미에서는 좋습니다~

});
}
// 회원가입 폼 처리
if (signupForm) {
signupForm.addEventListener("submit", (event) => {
event.preventDefault();
removeEventListeners(); // 폼 제출 시 이벤트 제거
window.location.href = "/login.html";
});
}
Expand Down