[김창민]week5

landing/script/signup.js

@@ -1,91 +1,126 @@
-//변수 email과 password에 input값 선언
-const userInput = {
-  email: document.querySelector("input[name=email]"),
-  password: document.querySelector("input[name=password]"),
-  pwdCorrect: document.querySelector("input[name=pwdCorrect]"),
-};
-const { email, password, pwdCorrect } = userInput;
+//DOM, 유사 배열들을 배열로 바꿈
+const $loginForm = document.querySelector(".sign-form");
+const $emailInput = document.querySelector("input[name=email]");
+const $passwordInput = document.querySelector("input[name=password]");
+const $pwdCorrectInput = document.querySelector("input[name=pwdCorrect]");
+const $formInputList = [...document.querySelectorAll(".sign-input")];
+const $errorMsgList = [...document.querySelectorAll(".error-msg-box")];
 
-// const email = document.querySelector("input[name=email]");
-// const password = document.querySelector("input[name=password]");
 // 이메일과 비밀번호를 검사하는 정규 표현식 선언
 const regexEmail = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
 const regexPwd = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
-//변수 button에 로그인 버튼 선언
-const loginForm = document.querySelector(".sign-form");
-//변수 errorMsg 선언
-const errorMsgEmail = document.querySelector("#error-msg-email");
-const errorMsgPwd = document.querySelector("#error-msg-pwd");
-const errorMsgPwdCorrect = document.querySelector("#error-msg-pwd-correct");
+
+//key값 선언
+const keyEmail = "[email protected]";
+const keyPassword = "codeit101";
+
 //변수 eyeButtom과 eyeImg 선언
 const eyeButton = document.querySelector(".eye-button");
 const eyeButtonCorrect = document.querySelector(".eye-button-correct");
 const eyeImg = document.querySelector(".eye-button img");
 const eyeImgCorrect = document.querySelector(".eye-button-correct img");
 
-//이메일 포커스 아웃 이벤트 발생 시 유효성 검사
-email.addEventListener("focusout", (event) => {
-  if (!event.target.value) {
-    email.style.borderColor = "black";
-    errorMsgEmail.style.color = "red";
-    errorMsgEmail.innerHTML = "이메일을 입력해주세요.";
-  } else if (!regexEmail.test(event.target.value)) {
-    email.style.borderColor = "red";
-    errorMsgEmail.style.color = "red";
-    errorMsgEmail.innerHTML = "올바른 이메일 주소가 아닙니다.";
-  } else {
-    errorMsgEmail.innerHTML = "";
-  }
-});
-//비밀번호 포커스 아웃 인벤트 발생 시 유효성 검사
-password.addEventListener("focusout", (event) => {
-  if (!event.target.value) {
-    password.style.borderColor = "black";
-    errorMsgPwd.style.color = "red";
-    errorMsgPwd.innerHTML = "비밀번호를 입력해주세요.";
-  } else if (!regexPwd.test(event.target.value)) {
-    password.style.borderColor = "red";
-    errorMsgPwd.style.color = "red";
-    errorMsgPwd.innerHTML = "올바른 비밀번호가 아닙니다.";
-  } else {
-    errorMsgPwd.innerHTML = "";
+//유효성 검사 함수
+const validator = {
+  required: {
+    validate: (value) => Boolean(value),
+    message: (name) => `${name} 입력해주세요`,
+  },
+  needEmailChar: {
+    validate: (value) => regexEmail.test(value),
+    message: `올바른 이메일 주소를 입력해주세요`,
+  },
+  needPasswordChar: {
+    validate: (value) => regexPwd.test(value),
+    message: `비밀번호는 문자와 숫자가 들어가고 8자리 이상이어야 합니다`,
+  },
+  needPwdCorrect: {
+    validate: (value) => $passwordInput.value === value,
+    message: `비밀번호와 다릅니다`,
+  },
+};
+
+// input의 종류별로 행해질 유효성 검사를 배열로 구분한다
+const validationMap = {
+  email: ["required", "needEmailChar"],
+  password: ["required", "needPasswordChar"],
+  pwdCorrect: ["needPwdCorrect"],
+};
+
+// form input의 각 요소에서 이벤트 발생 시 handleInputFocusout 함수를 실행한다
+$formInputList.forEach(($input) =>
+  $input.addEventListener("focusout", (event) => {
+    handleInputFocusout(event);
+  })
+);
+
+// errorStatus 제거 함수
+function removeErrorStatus($target) {
+  const { name } = $target;
+  const errorMsgNode = document.getElementById(`error-msg-${name}`);
+
+  if (errorMsgNode) {
+    errorMsgNode.textContent = "";
+    $target.classList.remove("error-msg");
   }
-});
-//비밀번호 확인 포커스 아웃 인벤트 발생 시 유효성 검사
-pwdCorrect.addEventListener("focusout", (event) => {
-  if (!(password.value === pwdCorrect.value)) {
-    pwdCorrect.style.borderColor = "red";
-    errorMsgPwdCorrect.style.color = "red";
-    errorMsgPwdCorrect.innerHTML = "비밀번호가 다릅니다.";
-  } else {
-    errorMsgPwdCorrect.innerHTML = "";
+}
+
+// errorStatus 추가 함수
+function createErrorStatus($target, invalidKey) {
+  const { name } = $target;
+  const nameMap = {
+    email: "이메일을",
+    password: "비밀번호를",
+  };
+  const errorMsgNode = document.getElementById(`error-msg-${name}`);
+  $target.classList.add("error-msg");
+
+  // errorMsgNode가 undefined인지 확인하고 validator[invalidKey]가 존재하는지도 확인
+  if (errorMsgNode && validator[invalidKey]) {
+    errorMsgNode.textContent = validator[invalidKey].message?.(nameMap[name]);
   }
-});
-/*form태그는 버튼을 누르면 링크를 이동하는 기본동작이 있다
-form에서 submit할 때 이메일과 비밀번호가 일치하면 기존 페이지 대신 ./folder로 이동*/
-loginForm.addEventListener("submit", (event) => {
-  if (email.value === keyEmail && password.value === keyPassword) {
+}
+
+// 포커스 아웃 이벤트 발생 시 제어하는 함수
+function handleInputFocusout({ target }) {
+  const { value, name } = target;
+
+  const invalidKey = validationMap[name].find((key) =>
+    // validator[key]가 undefined인지 확인하고, undefined가 아니면 validator[key].validate(value)를 실행
+    validator[key] ? !validator[key].validate(value) : false
+  );
+
+  // invalidKey가 존재하고 validator[invalidKey]도 존재하면 createErrorStatus를 실행
+  if (invalidKey && validator[invalidKey])
+    createErrorStatus(target, invalidKey);
+  else removeErrorStatus(target);
+}
+
+//key값 확인 후 ./folder/로 이동시킴
+$loginForm.addEventListener("submit", (event) => {
+  if ($emailInput.value === keyEmail && $passwordInput.value === keyPassword) {
     event.preventDefault();
     window.location.replace("./folder/");
   }
 });
+
 //eye-button 눌렀을 때 비밀번호 보이게 바뀜
 eyeButton.addEventListener("click", () => {
-  if (password.type === "password") {
-    password.type = "text";
+  if ($passwordInput.type === "password") {
+    $passwordInput.type = "text";
     eyeImg.src = "./images/eye-on.svg";
-  } else if (password.type === "text") {
-    password.type = "password";
+  } else if ($passwordInput.type === "text") {
+    $passwordInput.type = "password";
     eyeImg.src = "./images/eye-off.svg";
   }
 });
 //eye-button-correct 눌렀을 때 비밀번호 보이게 바뀜
 eyeButtonCorrect.addEventListener("click", () => {
-  if (pwdCorrect.type === "password") {
-    pwdCorrect.type = "text";
+  if ($pwdCorrectInput.type === "password") {
+    $pwdCorrectInput.type = "text";
     eyeImgCorrect.src = "./images/eye-on.svg";
-  } else if (pwdCorrect.type === "text") {
-    pwdCorrect.type = "password";
+  } else if ($pwdCorrectInput.type === "text") {
+    $pwdCorrectInput.type = "password";
     eyeImgCorrect.src = "./images/eye-off.svg";
   }
 });

landing/signup.html

@@ -39,7 +39,7 @@
               name="email"
               placeholder="내용 입력"
             />
-            <div id="error-msg-email"></div>
+            <div class="error-msg-box" id="error-msg-email"></div>
           </div>
           <div class="sign-input-box sign-password">
             <label class="sign-input-label">비밀번호</label>
@@ -49,7 +49,7 @@
               name="password"
               placeholder="내용 입력"
             />
-            <div id="error-msg-pwd"></div>
+            <div class="error-msg-box" id="error-msg-pwd"></div>
             <button class="eye-button" type="button">
               <img src="./images/eye-off.svg" />
             </button>
@@ -62,7 +62,7 @@
               name="pwdCorrect"
               placeholder="내용 입력"
             />
-            <div id="error-msg-pwd-correct"></div>
+            <div class="error-msg-box" id="error-msg-pwdCorrect"></div>
             <button class="eye-button-correct" type="button">
               <img src="./images/eye-off.svg" />
             </button>

landing/src/sign.css

@@ -168,8 +168,13 @@ header {
 
 #error-msg-email,
 #error-msg-pwd,
-#error-msg-pwd-correct {
+#error-msg-pwdCorrect {
   position: absolute;
   top: 10rem;
   inset-inline: auto;
+  color: #ff5b56;
+}
+/*클래스로 변환할 에러 메시지*/
+.error-msg {
+  border-color: #ff5b56;
 }