refactor: form-validation 파일 콜백함수 리팩토링

codeit-sprint-fullstack · Oct 11, 2024 · 38705e0 · 38705e0
1 parent 733a53f
commit 38705e0
Showing 1 changed file with 64 additions and 33 deletions.
diff --git a/common/js/form-validation.js b/common/js/form-validation.js
@@ -1,6 +1,6 @@
 import { USER_DATA } from '../../data/users.js';
 import { EMAIL_REGEX } from './regex.js';
-import { showModal, closeModal } from './modal.js';
+import { showModal } from './modal.js';
 
 const form = document.getElementById('form');
 const email = document.getElementById('email');
@@ -9,8 +9,10 @@ const password = document.getElementById('password');
 const passwordConfirm = document.getElementById('password-confirm');
 const formButton = document.getElementById('form-button');
 
-// 폼 제출 시 이벤트 처리
-form.addEventListener('submit', (e) => {
+// -----폼 제출 시 이벤트 처리-----
+form.addEventListener('submit', handleFormSubmit);
+
+const handleFormSubmit = (e) => {
   e.preventDefault();
 
   // 유효성 검사
@@ -28,38 +30,43 @@ form.addEventListener('submit', (e) => {
   } else {
     alert('페이지를 찾을 수 없습니다.');
   }
-});
+};
 
-form.addEventListener('input', () => {
-  // 유효성 검사
+// -----입력 시 제출 버튼 상태 업데이트-----
+form.addEventListener('input', updateSubmitButtonState);
+
+const updateSubmitButtonState = () => {
   setSubmitButtonState();
-});
+};
 
-// 폼 제출 버튼 활성화 상태 설정
+// 제출 버튼 활성화 상태 설정 함수
 const setSubmitButtonState = () => {
   const currentPage = window.location.pathname;
+  let isValid = false;
+
+  // 공통 조건 (이메일과 비밀번호)
+  const emailValid = isValidInput(email) && isValidEmail(email.value.trim());
+  const passwordValid = isValidInput(password) && isValidPassword(password);
 
-  let isValid = '';
   if (currentPage.includes('login.html')) {
-    isValid =
-      email.value.trim() !== '' &&
-      isValidEmail(email.value.trim()) &&
-      password.value.trim() !== '' &&
-      password.value.trim().length >= 8;
+    isValid = emailValid && passwordValid;
   } else if (currentPage.includes('signup.html')) {
-    isValid =
-      email.value.trim() !== '' &&
-      isValidEmail(email.value.trim()) &&
-      nickname.value.trim() !== '' &&
-      password.value.trim() !== '' &&
-      password.value.trim().length >= 8 &&
-      passwordConfirm.value.trim() !== '' &&
+    const nicknameValid = isValidInput(nickname);
+    const passwordConfirmValid =
+      isValidInput(passwordConfirm) &&
       passwordConfirm.value.trim() === password.value.trim();
+
+    isValid =
+      emailValid && nicknameValid && passwordValid && passwordConfirmValid;
   }
 
   formButton.disabled = !isValid;
 };
 
+// 유효성 검사 함수
+const isValidInput = (input) => input.value.trim() !== '';
+const isValidPassword = (password) => password.value.trim().length >= 8;
+
 // 회원 가입 페이지 폼 제출 이벤트 처리
 const handleSignupProcess = () => {
   // 이미 가입된 이메일인지 확인
@@ -99,10 +106,13 @@ const isUserExist = (email, password) => {
   );
 };
 
-form.addEventListener('focusout', (e) => {
+// -----포커스 아웃 시 유효성 검사-----
+form.addEventListener('focusout', handleFocusOut);
+
+const handleFocusOut = (e) => {
   const validateElementId = e.target.id;
   validateForm(validateElementId);
-});
+};
 
 const validateForm = (validateElementId) => {
   const validationHandlers = {
@@ -116,15 +126,32 @@ const validateForm = (validateElementId) => {
   }
 };
 
-// ----------유효성 검사 함수들-----------
+// input 요소에 에러 메시지와 상태를 설정하는 함수
 
-const setError = (element, message) => {
+const setError = (element, message, type) => {
   const inputControl = element.parentElement;
   const errorDisplay = inputControl.querySelector('.error');
 
   errorDisplay.innerText = message;
   inputControl.classList.add('error');
   inputControl.classList.remove('success');
+
+  /* 매개변수에 type 을 추가했으나 이게 리팩토링에 관여가 되는지 아래의 코드를 만듦으로써 의문이 듦 */
+
+  // element.focus();
+
+  // const errorFocusColor = getComputedStyle(
+  //   document.documentElement
+  // ).getPropertyValue('--input-error-color');
+
+  // if (
+  //   type === 'email' ||
+  //   type === 'nickname' ||
+  //   type === 'password' ||
+  //   type === 'nickname'
+  // ) {
+  //   element.style.borderColor = errorFocusColor;
+  // }
 };
 
 const setSuccess = (element) => {
@@ -136,13 +163,13 @@ const setSuccess = (element) => {
   inputControl.classList.add('success');
 };
 
-// ----------유효성 검사 함수들-----------
+// 유효성 검사 함수들
 const validateEmail = () => {
   const emailValue = email.value.trim();
   if (emailValue === '') {
-    setError(email, '이메일을 입력해주세요.');
+    setError(email, '이메일을 입력해주세요.', 'email');
   } else if (!isValidEmail(emailValue)) {
-    setError(email, '잘못된 이메일 형식입니다.');
+    setError(email, '잘못된 이메일 형식입니다.', 'email');
   } else {
     setSuccess(email);
   }
@@ -155,7 +182,7 @@ const isValidEmail = (email) => {
 const validateNickname = () => {
   const nicknameValue = nickname.value.trim();
   if (nicknameValue === '') {
-    setError(nickname, '닉네임을 입력해주세요.');
+    setError(nickname, '닉네임을 입력해주세요.', 'nickname');
   } else {
     setSuccess(nickname);
   }
@@ -164,9 +191,9 @@ const validateNickname = () => {
 const validatePassword = () => {
   const passwordValue = password.value.trim();
   if (passwordValue === '') {
-    setError(password, '비밀번호를 입력해주세요.');
+    setError(password, '비밀번호를 입력해주세요.', 'password');
   } else if (passwordValue.length < 8) {
-    setError(password, '비밀번호를 8자 이상 입력해주세요');
+    setError(password, '비밀번호를 8자 이상 입력해주세요', 'password');
   } else {
     setSuccess(password);
   }
@@ -176,9 +203,13 @@ const validatePasswordConfirmation = () => {
   const passwordValue = password.value.trim();
   const passwordConfirmValue = passwordConfirm.value.trim();
   if (passwordConfirmValue === '') {
-    setError(passwordConfirm, '비밀번호를 입력해주세요.');
+    setError(passwordConfirm, '비밀번호를 입력해주세요.', 'password-confirm');
   } else if (passwordConfirmValue !== passwordValue) {
-    setError(passwordConfirm, '비밀번호가 일치하지 않습니다.');
+    setError(
+      passwordConfirm,
+      '비밀번호가 일치하지 않습니다.',
+      'password-confirm'
+    );
   } else {
     setSuccess(passwordConfirm);
   }