[김동희] Sprint4

js/constant/constant.js

@@ -0,0 +1 @@
+export const MIN_PW_LEN = 8;

js/login.js

@@ -0,0 +1,89 @@
+import authFormUtils from "./utils/authFormUtils.js";
+
+// DOM elements
+const inputEmail = document.querySelector("#email");
+const inputPw = document.querySelector("#password");
+const detailEmail = document.querySelector(".email-detail");
+const detailPw = document.querySelector(".password-detail");
+const togglePw = document.querySelector(".toggle-visibility");
+const loginBtn = document.querySelector(".login-btn");
+
+// variables
+const inputTags = document.querySelectorAll(".login-form input");
+const verifiationList = (() => {
+  const map = {};
+  inputTags.forEach((el) => {
+    map[el.id] = false;
+  });
+
+  return map;
+})();
+
+// function
+const verifyInputs = () => {
+  authFormUtils.verify(verifiationList)
+    ? authFormUtils.enableBtn(loginBtn)
+    : authFormUtils.disableBtn(loginBtn);
+};
+
+// initialize
+/**
+ * 뒤로 가기 등 페이지를 복구했을 때, 브라우저가 입력값을 복원하는 과정에서 요구사항의 focusout 이벤트가 발생하지 않음.
+ * 따라서, pageshow 이벤트 발생 후 email 값이 있는 경우 (입력값이 복원된 경우) 강제로 focusout 이벤트 실행
+ */
+window.addEventListener("pageshow", () => {
+  if (inputEmail.value) inputEmail.dispatchEvent(new Event("focusout"));
+});
+
+// events
+inputEmail.addEventListener("focusout", (e) => {
+  const isCorrect = authFormUtils.isCorrectEmail(e.target.value);
+
+  if (!e.target.value) {
+    authFormUtils.changeDetail(e, detailEmail, "이메일을 입력해주세요");
+    verifiationList.email = false;
+  } else if (!isCorrect) {
+    authFormUtils.changeDetail(e, detailEmail, "잘못된 이메일 형식입니다.");
+    verifiationList.email = false;
+  } else {
+    authFormUtils.changeDetail(e, detailEmail);
+    verifiationList.email = true;
+  }
+
+  verifyInputs();
+});
+
+inputPw.addEventListener("focusout", (e) => {
+  const isCorrect = authFormUtils.isCorrectPw(e.target.value);
+
+  if (!e.target.value) {
+    authFormUtils.changeDetail(e, detailPw, "비밀번호를 입력해주세요");
+    verifiationList.password = false;
+  } else if (!isCorrect) {
+    authFormUtils.changeDetail(e, detailPw, "비밀번호를 8자 이상 입력해주세요");
+    verifiationList.password = false;
+  } else {
+    authFormUtils.changeDetail(e, detailPw);
+    verifiationList.password = true;
+  }
+
+  authFormUtils.verify(verifiationList)
+    ? authFormUtils.enableBtn(loginBtn)
+    : authFormUtils.disableBtn(loginBtn);
+
+  verifyInputs();
+});
+
+togglePw.addEventListener("click", (e) => {
+  if (inputPw.type === "password") {
+    inputPw.type = "text";
+    e.target.src = "../img/icon/btn_visibility_on_24px.png";
+    e.target.alt = "비밀번호 표시 켜짐";
+    e.target.setAttribute("aria-pressed", "true");
+  } else {
+    inputPw.type = "password";
+    e.target.src = "../img/icon/btn_visibility_off_24px.png";
+    e.target.alt = "비밀번호 표시 꺼짐";
+    e.target.setAttribute("aria-pressed", "false");
+  }
+});

js/sign_up.js

@@ -0,0 +1,152 @@
+import authFormUtils from "./utils/authFormUtils.js";
+
+// DOM elements
+const inputEmail = document.querySelector("#email");
+const inputNickname = document.querySelector("#nickname");
+const inputPw = document.querySelector("#password");
+const inputPwRepeat = document.querySelector("#password-repeat");
+const detailEmail = document.querySelector(".email-detail");
+const detailNickname = document.querySelector(".nickname-detail");
+const detailPw = document.querySelector(".password-detail");
+const detailPwRepaet = document.querySelector(".password-repeat-detail");
+const togglePw = document.querySelector(".toggle-visibility");
+const togglePwRepeat = document.querySelector(".toggle-repeat-visibility");
+const signUpBtn = document.querySelector(".sign-up-btn");
+
+// variables
+const inputTags = document.querySelectorAll(".sign-up-form input");
+const verifiationList = (() => {
+  const map = {};
+  inputTags.forEach((el) => {
+    map[el.id] = false;
+  });
+
+  return map;
+})();
+
+// function
+const verifyInputs = () => {
+  authFormUtils.verify(verifiationList)
+    ? authFormUtils.enableBtn(signUpBtn)
+    : authFormUtils.disableBtn(signUpBtn);
+};
+
+// initialize
+/**
+ * 뒤로 가기 등 페이지를 복구했을 때, 브라우저가 입력값을 복원하는 과정에서 요구사항의 focusout 이벤트가 발생하지 않음.
+ * 따라서, pageshow 이벤트 발생 후 email 값이 있는 경우 (입력값이 복원된 경우) 강제로 focusout 이벤트 실행
+ */
+window.addEventListener("pageshow", () => {
+  if (inputEmail.value) inputEmail.dispatchEvent(new Event("focusout"));
+});
+
+// events
+inputEmail.addEventListener("focusout", (e) => {
+  const isCorrect = authFormUtils.isCorrectEmail(e.target.value);
+
+  if (!e.target.value) {
+    authFormUtils.changeDetail(e, detailEmail, "이메일을 입력해주세요");
+    verifiationList.email = false;
+  } else if (!isCorrect) {
+    authFormUtils.changeDetail(e, detailEmail, "잘못된 이메일 형식입니다");
+    verifiationList.email = false;
+  } else {
+    authFormUtils.changeDetail(e, detailEmail);
+    verifiationList.email = true;
+  }
+
+  verifyInputs();
+});
+
+inputNickname.addEventListener("focusout", (e) => {
+  const isCorrect = authFormUtils.isCorrectNickname(e.target.value);
+
+  if (!e.target.value) {
+    authFormUtils.changeDetail(e, detailNickname, "닉네임을 입력해주세요");
+    verifiationList.nickname = false;
+  } else if (!isCorrect) {
+    authFormUtils.changeDetail(e, detailNickname, "잘못된 닉네임 형식입니다");
+    verifiationList.nickname = false;
+  } else {
+    authFormUtils.changeDetail(e, detailNickname);
+    verifiationList.nickname = true;
+  }
+
+  verifyInputs();
+});
+
+inputPw.addEventListener("focusout", (e) => {
+  const isCorrect = authFormUtils.isCorrectPw(e.target.value);
+
+  if (!e.target.value) {
+    authFormUtils.changeDetail(e, detailPw, "비밀번호를 입력해주세요");
+    verifiationList.password = false;
+  } else if (!isCorrect) {
+    authFormUtils.changeDetail(e, detailPw, "비밀번호를 8자 이상 입력해주세요");
+    verifiationList.password = false;
+  } else {
+    authFormUtils.changeDetail(e, detailPw);
+    verifiationList.password = true;
+  }
+
+  if (inputPwRepeat.value) inputPwRepeat.dispatchEvent(new Event("focusout"));
+
+  verifyInputs();
+});
+
+inputPwRepeat.addEventListener("focusout", (e) => {
+  const isCorrect = authFormUtils.isCorrectPw(e.target.value);
+  const isSame = inputPw.value === e.target.value;
+
+  if (!e.target.value) {
+    authFormUtils.changeDetail(e, detailPwRepaet, "비밀번호를 입력해주세요");
+    verifiationList["password-repeat"] = false;
+  } else if (!isCorrect) {
+    authFormUtils.changeDetail(
+      e,
+      detailPwRepaet,
+      "비밀번호를 8자 이상 입력해주세요"
+    );
+    verifiationList["password-repeat"] = false;
+  } else if (!isSame) {
+    authFormUtils.changeDetail(
+      e,
+      detailPwRepaet,
+      "비밀번호가 일치하지 않습니다"
+    );
+    verifiationList["password-repeat"] = false;
+  } else {
+    authFormUtils.changeDetail(e, detailPwRepaet);
+    verifiationList["password-repeat"] = true;
+  }
+
+  verifyInputs();
+});
+
+togglePw.addEventListener("click", (e) => {
+  if (inputPw.type === "password") {
+    inputPw.type = "text";
+    e.target.src = "../img/icon/btn_visibility_on_24px.png";
+    e.target.alt = "비밀번호 표시 켜짐";
+    e.target.setAttribute("aria-pressed", "true");
+  } else {
+    inputPw.type = "password";
+    e.target.src = "../img/icon/btn_visibility_off_24px.png";
+    e.target.alt = "비밀번호 표시 꺼짐";
+    e.target.setAttribute("aria-pressed", "false");
+  }
+});
+
+togglePwRepeat.addEventListener("click", (e) => {
+  if (inputPwRepeat.type === "password") {
+    inputPwRepeat.type = "text";
+    e.target.src = "../img/icon/btn_visibility_on_24px.png";
+    e.target.alt = "비밀번호 반복 표시 켜짐";
+    e.target.setAttribute("aria-pressed", "true");
+  } else {
+    inputPwRepeat.type = "password";
+    e.target.src = "../img/icon/btn_visibility_off_24px.png";
+    e.target.alt = "비밀번호 반복 표시 꺼짐";
+    e.target.setAttribute("aria-pressed", "false");
+  }
+});

js/utils/authFormUtils.js

@@ -0,0 +1,49 @@
+import { MIN_PW_LEN } from "../constant/constant.js";
+
+export const isCorrectEmail = (str) => {
+  const emailRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  return emailRegex.test(str);
+};
+
+export const isCorrectNickname = (str) => {
+  return true;
+};
+
+export const isCorrectPw = (pw) => {
+  return MIN_PW_LEN <= pw.length;
+};
+
+export const changeDetail = (event, detailElement, text = "") => {
+  const action = text ? "add" : "remove";
+  const action2 = !text ? "add" : "remove";
+  event.target.classList[action]("incorrect-input");
+  event.target.classList[action2]("correct-input");
+  detailElement.textContent = text;
+  text
+    ? detailElement.classList.remove("hidden")
+    : detailElement.classList.add("hidden");
+};
+
+export const verify = (verifiationList) => {
+  const verifiations = Object.values(verifiationList);
+  return verifiations.includes(false) ? false : true;
+};
+
+export const disableBtn = (btnElement) => {
+  btnElement.disabled = true;
+};
+
+export const enableBtn = (btnElement) => {
+  btnElement.disabled = false;
+};
+
+const authFormUtils = {
+  isCorrectEmail,
+  isCorrectNickname,
+  isCorrectPw,
+  changeDetail,
+  verify,
+  disableBtn,
+  enableBtn,
+};
+export default authFormUtils;

login.html

@@ -16,16 +16,22 @@
         <a class="logo" href="/" aria-label="홈으로 이동">
           <img src="./img/logo/lg.png" width="396" height="132" />
         </a>
-        <form method="POST" class="login-form" name="login-form">
+        <form
+          method="POST"
+          action="./items.html"
+          class="login-form"
+          name="login-form"
+        >
           <div class="input-box">
             <label for="email">이메일</label>
             <input
               id="email"
               type="email"
               name="email"
-              placeholder="입력"
+              placeholder="이메일을 입력해주세요"
               autocomplete="email"
             />
+            <span class="email-detail hidden"></span>
           </div>
           <div class="input-box">
             <label for="password">비밀번호</label>
@@ -35,15 +41,19 @@
               name="password"
               placeholder="비밀번호를 입력해주세요"
             />
+            <span class="password-detail hidden"></span>
             <img
-              class="toggle-visiblity"
-              src="./img/icon/btn_visibility_on_24px.png"
-              alt="비밀번호 표시 토글 버튼"
+              class="toggle-visibility"
+              src="./img/icon/btn_visibility_off_24px.png"
+              alt="비밀번호 표시 꺼짐"
+              aria-pressed="false"
               width="24"
               height="24"
             />
           </div>
-          <button type="submit" class="login-btn">로그인</button>
+          <button type="submit" disabled class="login-btn disable-btn">
+            로그인
+          </button>
         </form>
 
         <div class="oauth flex-between-center">
@@ -74,5 +84,7 @@
         </p>
       </div>
     </main>
+
+    <script type="module" src="./js/login.js"></script>
   </body>
 </html>