[함헌규] sprint3

assets/scripts/constants/messages.js

@@ -0,0 +1,11 @@
+import { VALIDATION_VALUES } from "./validationValues.js";
+
+export const ERROR_MESSAGES = {
+  inputEmail: "이메일을 입력해주세요.",
+  invalidEmail: "잘못된 이메일 형식입니다",
+  inputPassword: "비밀번호를 입력해주세요.",
+  inputValidLengthPassword: `비밀번호를 ${VALIDATION_VALUES.passwordLength}자 이상 입력해주세요.`,
+  passwordNotMatch: "비밀번호가 일치하지 않습니다.",
+  emailAlreadyInUse: "사용 중인 이메일입니다",
+  inputNickname: "닉네임을 입력해주세요.",
+};

assets/scripts/constants/names.js

@@ -0,0 +1,6 @@
+export const KEYS = {
+  email: "email",
+  nickname: "nickname",
+  password: "password",
+  confirmPassword: "confirmPassword",
+};

assets/scripts/constants/userData.js

@@ -0,0 +1,8 @@
+export const USER_DATA = [
+  { email: "codeit1@codeit.com", password: "codeit101!" },
+  { email: "codeit2@codeit.com", password: "codeit202!" },
+  { email: "codeit3@codeit.com", password: "codeit303!" },
+  { email: "codeit4@codeit.com", password: "codeit404!" },
+  { email: "codeit5@codeit.com", password: "codeit505!" },
+  { email: "codeit6@codeit.com", password: "codeit606!" },
+];

assets/scripts/constants/validationValues.js

@@ -0,0 +1,3 @@
+export const VALIDATION_VALUES = {
+  passwordLength: 8,
+};

assets/scripts/core/sign.js

@@ -0,0 +1,101 @@
+import $ from "../utils/query.js";
+
+class Sign {
+  constructor() {
+    // 인풋 값의 유효성 상태를 저장하는 객체
+    this.inputValidState = {};
+    // 페이지의 인풋 DOM요소
+    this.inputs = {};
+    // 인풋 값의 유효성검사 메소드
+    this.validateMethods = {};
+  }
+
+  init() {
+    this.handleInputFocusout();
+    this.setFormSubmit();
+    this.setCloseButton();
+    this.handleToggleButton();
+  }
+
+  setState(newState) {
+    this.inputValidState = {
+      ...this.inputValidState,
+      ...newState,
+    };
+    $("#submit-button").disabled = Object.values(this.inputValidState).some((state) => !state);
+  }
+
+  toggleInputError(e, message = "") {
+    const errorMessageNode = e.target.closest("section").querySelector(".message");
+    errorMessageNode.innerText = message;
+    if (message.length) {
+      e.target.classList.add("error");
+      errorMessageNode.setAttribute("aria-hidden", false);
+      return errorMessageNode.classList.add("show");
+    }
+    e.target.classList.remove("error");
+    errorMessageNode.setAttribute("aria-hidden", true);
+    errorMessageNode.classList.remove("show");
+  }
+
+  handleInputFocusout() {
+    for (const key in this.inputs) {
+      this.inputs[key].addEventListener("focusout", (e) => {
+        const { value } = e.target;
+        const message = this.validateMethods[key](value);
+        this.toggleInputError(e, message);
+        this.setState({ [key]: message.length === 0 });
+      });
+    }
+  }
+
+  setFormSubmit() {
+    $("form").addEventListener("submit", (e) => {
+      e.preventDefault();
+      this.onSubmit();
+    });
+  }
+
+  showModal(message) {
+    $("#modal-container").classList.add("show");
+    $("#error-message").innerText = message;
+  }
+
+  setCloseButton() {
+    $("#modal-close-button").addEventListener("click", () => {
+      $("#modal-container").classList.remove("show");
+    });
+  }
+
+  getValues() {
+    return Object.values(this.inputs).reduce((acc, input, index) => {
+      return { ...acc, [Object.keys(this.inputs)[index]]: input.value };
+    }, {});
+  }
+
+  onSubmit() {}
+
+  handleSubmitSuccess() {
+    window.location.href = "../items/index.html";
+  }
+
+  handleSubmitFailure(message) {
+    this.showModal(message);
+  }
+
+  togglePasswordVisibility(e) {
+    const { target } = e;
+    target.classList.toggle("fa-eye-slash");
+    target.classList.toggle("fa-eye");
+    const input = target.closest("div").querySelector("input");
+    input.type === "text" ? (input.type = "password") : (input.type = "text");
+  }
+
+  handleToggleButton() {
+    document
+      .querySelectorAll(".eye-icon")
+      .forEach((icon) => icon.addEventListener("click", this.togglePasswordVisibility));
+  }
+}
+
+export default Sign;

assets/scripts/login.js

@@ -0,0 +1,43 @@
+import $ from "./utils/query.js";
+import { USER_DATA } from "./constants/userData.js";
+import { ERROR_MESSAGES } from "./constants/messages.js";
+import Sign from "./core/sign.js";
+import { validator } from "./utils/validator.js";
+import { KEYS } from "./constants/names.js";
+
+class LoginForm extends Sign {
+  constructor() {
+    super();
+    this.inputValidState = {
+      [KEYS.email]: false,
+      [KEYS.password]: false,
+    };
+    this.inputs = {
+      [KEYS.email]: $("#email"),
+      [KEYS.password]: $("#password"),
+    };
+    this.validateMethods = {
+      [KEYS.email]: validator.validateEmail,
+      [KEYS.password]: validator.validatePassword,
+    };
+  }
+
+  onSubmit() {
+    const values = this.getValues();
+    const matchingAccount = USER_DATA.find((data) => data.email === values.email);
+    matchingAccount?.password === values.password
+      ? this.handleLoginSuccess()
+      : this.handleLoginFailure(ERROR_MESSAGES.passwordNotMatch);
+  }
+
+  handleLoginSuccess() {
+    super.handleSubmitSuccess();
+    // 이후 추가 로직 작성
+  }
+  handleLoginFailure(message) {
+    super.handleSubmitFailure(message);
+    // 이후 추가 로직 작성
+  }
+}
+
+new LoginForm().init();

assets/scripts/signup.js

@@ -0,0 +1,52 @@
+import $ from "./utils/query.js";
+import { ERROR_MESSAGES } from "./constants/messages.js";
+import { USER_DATA } from "./constants/userData.js";
+import Sign from "./core/sign.js";
+import { validator } from "./utils/validator.js";
+import { KEYS } from "./constants/names.js";
+
+class signupForm extends Sign {
+  constructor() {
+    super();
+    this.inputValidState = {
+      [KEYS.email]: false,
+      [KEYS.nickname]: false,
+      [KEYS.password]: false,
+      [KEYS.confirmPassword]: false,
+    };
+    this.inputs = {
+      [KEYS.email]: $("#email"),
+      [KEYS.nickname]: $("#nickname"),
+      [KEYS.password]: $("#password"),
+      [KEYS.confirmPassword]: $("#confirm-password"),
+    };
+    this.validateMethods = {
+      [KEYS.email]: validator.validateEmail,
+      [KEYS.nickname]: validator.validateNickname,
+      [KEYS.password]: validator.validatePassword,
+      [KEYS.confirmPassword]: validator.validatePassword,
+    };
+  }
+
+  onSubmit() {
+    const values = this.getValues();
+    const emailAlreadyInUse = USER_DATA.find((data) => data.email === values.email);
+    const passwordMatch = values.password === values.confirmPassword;
+    emailAlreadyInUse
+      ? this.handleSignupFailure(ERROR_MESSAGES.emailAlreadyInUse)
+      : !passwordMatch
+      ? this.handleSignupFailure(ERROR_MESSAGES.passwordNotMatch)
+      : this.handleSignupSuccess();
+  }
+
+  handleSignupSuccess() {
+    super.handleSubmitSuccess();
+    // 이후 추가 로직 작성
+  }
+  handleSignupFailure(message) {
+    super.handleSubmitFailure(message);
+    // 이후 추가 로직 작성
+  }
+}
+
+new signupForm().init();

assets/scripts/utils/query.js

@@ -0,0 +1,3 @@
+const $ = (query) => document.querySelector(query);
+
+export default $;

assets/scripts/utils/validator.js

@@ -0,0 +1,27 @@
+import { VALIDATION_VALUES } from "../constants/validationValues.js";
+import { ERROR_MESSAGES } from "../constants/messages.js";
+
+const emailRegex = /^[a-z0-9]+@[a-z]+\.[a-z]{2,}(\.[a-z]{2,})?$/;
+
+export const validator = {
+  validateEmail(email) {
+    if (!email.length) return ERROR_MESSAGES.inputEmail;
+    if (!emailRegex.test(email)) return ERROR_MESSAGES.invalidEmail;
+    return "";
+  },
+  validatePassword(password) {
+    if (!password.length) return ERROR_MESSAGES.inputPassword;
+    if (password.length < VALIDATION_VALUES.passwordLength)
+      return ERROR_MESSAGES.inputValidLengthPassword;
+    return "";
+  },
+  validateNickname(nickname) {
+    if (!nickname.length) return ERROR_MESSAGES.inputNickname;
+    return "";
+  },
+
+  validatePasswordConfirm(password, confirmPassword) {
+    if (password !== confirmPassword) return ERROR_MESSAGES.passwordNotMatch;
+    return "";
+  },
+};