[오정민] Sprint4

auth.js

@@ -0,0 +1,22 @@
+const showErrorMessage = (target, errorMessageDiv) => {
+  target.classList.add("error");
+  errorMessageDiv.style.display = "block";
+  target.setAttribute("data-valid", "false");
+};
+
+const hideErrorMessage = (target, errorMessageDiv) => {
+  target.classList.remove("error");
+  errorMessageDiv.style.display = "none";
+  target.setAttribute("data-valid", "true");
+};
+
+const activeButton = (button) => {
+  button.disabled = false;
+  button.classList.add("enabled");
+};
+const disableButton = (button) => {
+  button.disabled = true;
+  button.classList.remove("enabled");
+};
+
+export { showErrorMessage, hideErrorMessage, activeButton, disableButton };

login/index.html

@@ -35,7 +35,7 @@
               placeholder="이메일을 입력해주세요"
               autofocus
             />
-            <div class="error-message email">이메일을 입력해주세요.</div>
+            <div class="error-message email"></div>
           </div>
 
           <div class="form-content">
@@ -58,17 +58,18 @@
                   alt="비밀번호를 보여주는 눈 모양 아이콘"
                   width="24px"
                   height="24px"
+                  data-valid="false"
                 />
               </button>
             </div>
-            <div class="error-message password">비밀번호를 입력해주세요.</div>
+            <div class="error-message password"></div>
           </div>
 
           <button
             class="form-login-btn"
             type="button"
             value="로그인"
-            disabled="true"
+            onclick="window.location.href = '../items/index.html'"
           >
             로그인
           </button>
@@ -101,6 +102,6 @@
       </div>
     </main>
 
-    <script src="script.js"></script>
+    <script type="module" src="script.js"></script>
   </body>
 </html>

login/script.js

@@ -1,74 +1,82 @@
-const inputEmail = document.getElementById("input-email");
-const errorMsgEmail = document.querySelector(".error-message.email");
-let flagEmail = 0;
-inputEmail.addEventListener("focusout", ({ target }) => {
-  const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
+const VALID_EMAIL_PATTERN = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/;
+
+const emailInput = document.getElementById("input-email");
+const passwordInput = document.getElementById("input-password");
+
+const emailErrorMessage = document.querySelector(".error-message.email");
+const passwordErrorMessage = document.querySelector(".error-message.password");
+
+const passwordVisibilityButton = document.querySelector(".password-show-btn");
+const passwordVisibilityIcon = document.querySelector(".password-show-icon");
+const loginButton = document.querySelector(".form-login-btn");
+
+const handleFocusOutEmailInput = ({ target }) => {
   if (target.value === "") {
-    target.classList.add("error");
-    errorMsgEmail.style.display = "block";
-    flagEmail = 0;
-  } else if (!pattern.test(target.value)) {
-    target.classList.add("error");
-    errorMsgEmail.style.display = "block";
-    errorMsgEmail.textContent = "잘못된 이메일 형식입니다.";
-    flagEmail = 0;
-  } else {
-    target.classList.remove("error");
-    errorMsgEmail.style.display = "none";
-    flagEmail = 1;
+    showErrorMessage(target, emailErrorMessage);
+    emailErrorMessage.textContent = "이메일을 입력해주세요.";
+    disableButton(loginButton);
+    return;
+  }
+  if (!VALID_EMAIL_PATTERN.test(target.value)) {
+    showErrorMessage(target, emailErrorMessage);
+    emailErrorMessage.textContent = "잘못된 이메일 형식입니다.";
+    disableButton(loginButton);
+    return;
   }
+  hideErrorMessage(target, emailErrorMessage);
   checkInputs();
-});
+};
+emailInput.addEventListener("focusout", handleFocusOutEmailInput);
 
-const inputPassword = document.getElementById("input-password");
-const errorMsgPassword = document.querySelector(".error-message.password");
-let flagPassword = 0;
-inputPassword.addEventListener("focusout", ({ target }) => {
+const handleFocusOutPasswordInput = ({ target }) => {
   if (target.value === "") {
-    target.classList.add("error");
-    errorMsgPassword.style.display = "block";
-    flagPassword = 0;
-  } else if (target.value.length < 8) {
-    target.classList.add("error");
-    errorMsgPassword.style.display = "block";
-    errorMsgPassword.textContent = "비밀번호를 8자 이상 입력해주세요.";
-    flagPassword = 0;
-  } else {
-    target.classList.remove("error");
-    errorMsgPassword.style.display = "none";
-    flagPassword = 1;
+    showErrorMessage(target, passwordErrorMessage);
+    passwordErrorMessage.textContent = "비밀번호를 입력해주세요.";
+    disableButton(loginButton);
+    return;
   }
+  if (target.value.length < 8) {
+    showErrorMessage(target, passwordErrorMessage);
+    passwordErrorMessage.textContent = "비밀번호를 8자 이상 입력해주세요.";
+    disableButton(loginButton);
+    return;
+  }
+  hideErrorMessage(target, passwordErrorMessage);
   checkInputs();
-});
+};
+passwordInput.addEventListener("focusout", handleFocusOutPasswordInput);
 
 // 버튼 활성화를 위한 input 유효성 검사
-const loginBtn = document.querySelector(".form-login-btn");
-function checkInputs() {
-  if (flagEmail && flagPassword) {
-    loginBtn.disabled = false;
-    loginBtn.classList.add("enabled");
-    loginBtn.addEventListener("click", () => {
-      window.location.href = "../items/index.html";
-    });
-  } else {
-    loginBtn.disabled = true;
-    loginBtn.classList.remove("enabled");
+const checkInputs = () => {
+  const isValid =
+    emailInput.getAttribute("data-valid") === "true" &&
+    passwordInput.getAttribute("data-valid") === "true";
+  if (isValid) {
+    activeButton(loginButton);
+    return;
   }
-}
+  disableButton(loginButton);
+};
 
 // 비밀번호 문자열 보이거나 가리기
-let flagVisibility = 0; // 0 = 비밀번호 가리기, 1 = 비밀번호 보이기
-const pwVisibilityIcon = document.querySelector(".password-show-btn");
-pwVisibilityIcon.addEventListener("click", () => {
-  if (!flagVisibility) {
-    inputPassword.type = "text";
-    document.querySelector(".password-show-icon").src =
-      "../asset/icon/btn_visibility_on.png";
-    flagVisibility = 1;
-  } else {
-    inputPassword.type = "password";
-    document.querySelector(".password-show-icon").src =
-      "../asset/icon/btn_visibility_off.png";
-    flagVisibility = 0;
-  }
-});
+const handleTogglePasswordVisibilityButton = ({ target }) => {
+  const isPasswordVisible =
+    passwordVisibilityIcon.getAttribute("data-valid") === "true";
+  const inputType = isPasswordVisible ? "password" : "text";
+  const iconType = isPasswordVisible ? "off" : "on";
+
+  passwordInput.type = inputType;
+  passwordVisibilityIcon.src = `../asset/icon/btn_visibility_${iconType}.png`;
+  target.setAttribute("data-valid", `${!isPasswordVisible}`);
+};
+passwordVisibilityButton.addEventListener(
+  "click",
+  handleTogglePasswordVisibilityButton
+);
+
+import {
+  showErrorMessage,
+  hideErrorMessage,
+  activeButton,
+  disableButton,
+} from "../auth.js";

signup/index.html

@@ -37,7 +37,7 @@
               placeholder="이메일을 입력해주세요"
               autofocus
             />
-            <div class="error-message email">이메일을 입력해주세요.</div>
+            <div class="error-message email"></div>
           </div>
 
           <div class="form-content">
@@ -48,7 +48,7 @@
               name="nickname"
               placeholder="닉네임을 입력해주세요"
             />
-            <div class="error-message nickname">닉네임을 입력해주세요.</div>
+            <div class="error-message nickname"></div>
           </div>
 
           <div class="form-content">
@@ -71,10 +71,11 @@
                   alt="비밀번호를 보여주는 눈 모양 아이콘"
                   width="24px"
                   height="24px"
+                  data-valid="false"
                 />
               </button>
             </div>
-            <div class="error-message password">비밀번호를 입력해주세요.</div>
+            <div class="error-message password"></div>
           </div>
 
           <div class="form-content">
@@ -97,15 +98,19 @@
                   alt="비밀번호를 보여주는 눈 모양 아이콘"
                   width="24px"
                   height="24px"
+                  data-valid="false"
                 />
               </button>
             </div>
-            <div class="error-message password-check">
-              비밀번호가 일치하지 않습니다.
-            </div>
+            <div class="error-message password-check"></div>
           </div>
 
-          <button class="form-signup-btn" type="button" value="회원가입">
+          <button
+            class="form-signup-btn"
+            type="button"
+            value="회원가입"
+            onclick="window.location.href = '../signup/index.html'"
+          >
             회원가입
           </button>
         </form>
@@ -137,6 +142,6 @@
       </div>
     </main>
 
-    <script src="script.js"></script>
+    <script type="module" src="script.js"></script>
   </body>
 </html>