Merge pull request #139 from naynara87/Bascic-나윤주-m4

[나윤주] sprint4

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+assets/.DS_Store

assets/js/auth/form-validation.js

@@ -0,0 +1,138 @@
+export const form = document.querySelector('.form');
+export const inputList = form.querySelectorAll("input");
+export const submitBtn = document.querySelector('#submitBtn');
+export const VALIDATE_LIST = Object.freeze({
+  EMAIL: 'val-email',
+  NICKNAME: 'val-nickname',
+  PASSWORD: 'val-password',
+  CONFIRM_PASSWORD: 'val-confirm-password',
+})
+// 유효값에 대한 정의
+export const validate = {
+  errorPlacement: function (e, message) {
+    const inputFormDiv = e.parentNode;
+    let errorDiv = inputFormDiv.querySelector('.error-message');
+    if (!errorDiv) {
+      errorDiv = document.createElement('div');
+      errorDiv.classList.add('error-message');
+    }
+    errorDiv.innerHTML = message;
+    inputFormDiv.appendChild(errorDiv);
+
+  },
+  showError: function (e, message) {
+    const inputFormDiv = e.parentNode;
+    inputFormDiv.classList.remove('valid');
+    e.classList.add('error-border');
+    e.dataset.valid = 'false';
+    this.errorPlacement(e, message);
+  },
+  success: function (e) {
+    const inputFormDiv = e.parentNode;
+    let errorDiv = inputFormDiv.querySelector('.error-message');
+    e.classList.remove('error-border');
+    if (errorDiv) {
+      errorDiv.remove();
+    }
+    inputFormDiv.classList.add('valid');
+    e.dataset.valid = 'true';
+  },
+  messages: {
+    [VALIDATE_LIST.EMAIL]: {
+      required: '이메일을 입력해주세요.',
+      pattern: '잘못된 이메일형식입니다.',
+    },
+    [VALIDATE_LIST.NICKNAME]: '닉네임을 입력해주세요.',
+    [VALIDATE_LIST.PASSWORD]: {
+      required: '비밀번호를 입력해주세요.',
+      minlength: '비밀번호를 8자 이상 입력해주세요.',
+    },
+    [VALIDATE_LIST.CONFIRM_PASSWORD]: {
+      required: '비밀번호를 입력해주세요.',
+      minlength: '비밀번호를 8자 이상 입력해주세요.',
+      equalTo: '비밀번호가 일치하지 않습니다.',
+    }
+  },
+  rules: {
+    [VALIDATE_LIST.EMAIL]: {
+      required: true,
+      pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/,
+    },
+    [VALIDATE_LIST.NICKNAME]: {
+      required: true,
+    },
+    [VALIDATE_LIST.PASSWORD]: {
+      required: true,
+      minlength: 8,
+    },
+    [VALIDATE_LIST.CONFIRM_PASSWORD]: {
+      required: true,
+      minlength: 8,
+      equalTo: '#password',
+    }
+  }
+}
+
+// input 유효값 check
+export function checkInputs(input) {
+  const inputType = input.name;
+  const inputValName = `val-${inputType}`;
+  const value = input.value.trim();
+  const rules = validate.rules[inputValName];
+  const message = validate.messages[inputValName];
+
+  // Specific validation checks 
+  if (inputType === 'email') {
+    if (rules.required && !value) {
+      validate.showError(input, message.required);
+      return false;
+    }
+    if (value && !rules.pattern.test(value)) {
+      validate.showError(input, message.pattern);
+      return false;
+    }
+    validate.success(input);
+    return true;
+  } else if (inputType === 'nickname') {
+    if (rules && !value) {
+      validate.showError(input, message);
+      return false;
+    }
+    validate.success(input);
+    return true;
+  } else if (inputType === 'password') {
+    if (rules.required && !value) {
+      validate.showError(input, message.required);
+      return false;
+    }
+    if (value && value.length < rules.minlength) {
+      validate.showError(input, message.minlength);
+      return false;
+    }
+    validate.success(input);
+
+  } else if (inputType === 'confirm-password') {
+    if (rules.required && !value) {
+      validate.showError(input, message.required);
+      return false;
+    }
+    if (value && value.length < rules.minlength) {
+      validate.showError(input, message.minlength);
+      return false;
+    }
+    if (value && value !== document.querySelector('#password').value) {
+      validate.showError(input, message.equalTo);
+      return false;
+    }
+    validate.success(input);
+    return true;
+  }
+}
+
+// form 전체에 대한 검증
+export function checkAllInput() {
+  let formSubmitDone = [...form.querySelectorAll('input')].every(input => input.dataset.valid === 'true');
+  submitBtn.disabled = !formSubmitDone;
+  return formSubmitDone;
+}
+

assets/js/auth/login.js

@@ -0,0 +1,51 @@
+import {
+  form,
+  inputList,
+  checkInputs,
+  checkAllInput,
+} from './form-validation.js';
+
+inputList.forEach((input) => {
+  input.addEventListener('blur', function () {
+    this.parentNode.classList.add('is-error');
+    checkInputs(input);
+  });
+  input.addEventListener('keyup', () => {
+    checkInputs(input);
+    checkAllInput();
+  })
+});
+
+// form 제출
+form.addEventListener('submit', function (event) {
+  event.preventDefault();
+  if (checkAllInput) {
+    alert('로그인성공');
+    window.location.href = '/items.html';
+  }
+});
+
+// 패스워드 보기
+function passwordToggle(e) {
+  let button = e.currentTarget;
+  let passwordInput = button.parentElement.querySelector('input');
+  let toggleIcon = document.createElement('i');
+  toggleIcon.classList.add('icon');
+
+  const shouldShowPassword = passwordInput.type === 'password';
+  passwordInput.type = shouldShowPassword ? 'text' : 'password';
+
+  toggleIcon.classList.toggle('ic_visible_on', !shouldShowPassword);
+  toggleIcon.classList.toggle('ic_visible_off', shouldShowPassword);
+
+  const ariaLabel = shouldShowPassword ? '비밀번호 숨기기' : '비밀번호 보기';
+  this.setAttribute("aria-label", ariaLabel);
+
+  button.innerHTML = '';
+  button.appendChild(toggleIcon);
+}
+
+const passwordToggleBtns = document.querySelectorAll('.password-toggle-button');
+passwordToggleBtns.forEach(btn => {
+  btn.addEventListener('click', passwordToggle);
+});

assets/js/auth/signup.js

@@ -0,0 +1,52 @@
+import {
+  form,
+  inputList,
+  checkInputs,
+  checkAllInput,
+} from './form-validation.js';
+
+inputList.forEach((input) => {
+  input.addEventListener('blur', function () {
+    this.parentNode.classList.add('is-error');
+    checkInputs(input);
+  });
+  input.addEventListener('keyup', () => {
+    checkInputs(input);
+    checkAllInput();
+  })
+});
+
+// form 제출
+form.addEventListener('submit', function (event) {
+  event.preventDefault();
+  if (checkAllInput) {
+    alert('회원가입성공');
+    window.location.href = '/signup.html';
+  }
+});
+
+
+// 패스워드 보기
+function passwordToggle(e) {
+  let button = e.currentTarget;
+  let passwordInput = button.parentElement.querySelector('input');
+  let toggleIcon = document.createElement('i');
+  toggleIcon.classList.add('icon');
+
+  const shouldShowPassword = passwordInput.type === 'password';
+  passwordInput.type = shouldShowPassword ? 'text' : 'password';
+
+  toggleIcon.classList.toggle('ic_visible_on', !shouldShowPassword);
+  toggleIcon.classList.toggle('ic_visible_off', shouldShowPassword);
+
+  const ariaLabel = shouldShowPassword ? '비밀번호 숨기기' : '비밀번호 보기';
+  this.setAttribute("aria-label", ariaLabel);
+
+  button.innerHTML = '';
+  button.appendChild(toggleIcon);
+}
+
+const passwordToggleBtns = document.querySelectorAll('.password-toggle-button');
+passwordToggleBtns.forEach(btn => {
+  btn.addEventListener('click', passwordToggle);
+});

assets/js/signup2.js → assets/js/auth/signup2.js

@@ -2,8 +2,6 @@ const form = document.querySelector("form");
 const inputList = form.querySelectorAll("input");
 const submitBtn = form.querySelector("#submitBtn");
 
-submitBtn.disabled = true;
-
 inputList.forEach((input) => {
   input.addEventListener("keyup", function () {
     checkInputs(input);
@@ -98,31 +96,8 @@ form.addEventListener("submit", (e) => {
   }
 });
 
-
-
 // 패스워드 토글기능
-let passwordToggleBtns = document.querySelectorAll('.password-toggle-button');
-
-function passwordToggle(e) {
-  let button = e.currentTarget;
-  let passwordInput = button.parentElement.querySelector('input');
-  let toggleIcon = document.createElement('i');
-  toggleIcon.classList.add('icon');
-  if (passwordInput.type == "password") {
-    passwordInput.type = "text";
-    toggleIcon.classList.remove('ic_visible_on');
-    toggleIcon.classList.add('ic_visible_off')
-    this.setAttribute("aria-label", "비밀번호 숨기기");
-  } else {
-    passwordInput.type = "password";
-    toggleIcon.classList.remove('ic_visible_off');
-    toggleIcon.classList.add('ic_visible_on');
-    this.setAttribute("aria-label", "비밀번호 보기");
-  }
-  button.innerHTML = '';
-  button.appendChild(toggleIcon);
-}
-
+const passwordToggleBtns = document.querySelectorAll('.password-toggle-button');
 passwordToggleBtns.forEach(btn => {
   btn.addEventListener('click', passwordToggle);
 });