feat: show-password 기능을 모듈로 분리

dani784601 · Oct 18, 2024 · 39c78a9 · 39c78a9
1 parent 181316a
commit 39c78a9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 55 deletions.
diff --git a/src/pages/sign-in.html b/src/pages/sign-in.html
@@ -87,19 +87,10 @@
     </dialog>
   </main>
   <script type="module">
-    import { setVisibleInput } from '/src/utils/formUtils.js'
+    import { toggleInputVisibility, setValidationMsg } from '/src/utils/formUtils.js'
     const controller = new AbortController();
     const signal = controller.signal;
-    const errMsgType = {
-      email: {
-        invalid: '이메일 형식이 올바르지 않습니다.',
-        empty: '이메일을 입력해주세요.'
-      },
-      password: {
-        invalid: '비밀번호는 8자 이상이어야 합니다.',
-        empty: '비밀번호를 입력해주세요.'
-      }
-    }
+
 
     window.addEventListener('DOMContentLoaded', () => {
       const userEmail = document.getElementById('email');
@@ -108,8 +99,16 @@
       const submitBtn = document.querySelector('button[type="button"]');
       const dialog = document.querySelector('dialog');
 
+      userEmail.addEventListener('change', (e) => {
+        setValidationMsg(e.target);
+      }, { signal: signal });
+
+      userPassword.addEventListener('change', (e) => {
+        setValidationMsg(e.target);
+      }, { signal: signal })
+
       showPassword.addEventListener('click', (e) => {
-        setVisibleInput(e);
+        toggleInputVisibility(e.target);
       });
 
       submitBtn.onclick = () => {
@@ -127,44 +126,6 @@
           }
         }
       }
-
-      userEmail.addEventListener('change', () => {
-        const errMsg = userEmail.nextElementSibling;
-        if (userEmail.validity.valid === false) {
-          errMsg.classList.add('fade-in');
-          submitBtn.classList.replace('bg-primary', 'bg-gray400');
-          errMsg.textContent = userEmail.value.length > 0 ? errMsgType.email.invalid : errMsgType.email.empty;
-        } else {
-          errMsg.classList.replace('fade-in', 'fade-out');
-          setTimeout(() => {
-            errMsg.textContent = '';
-          }, 300);
-          if (userPassword.validity.valid) {
-            submitBtn.classList.replace('bg-gray400', 'bg-primary');
-          }
-        }
-      }, { signal: signal });
-
-      userPassword.addEventListener('change', () => {
-        const errMsg = userPassword.parentElement.nextElementSibling;
-        if (userPassword.validity.valid === false) {
-          submitBtn.classList.replace('bg-primary', 'bg-gray400');
-          if (userPassword.validity.tooShort) {
-            errMsg.classList.add('fade-in');
-            errMsg.textContent = errMsgType.password.invalid;
-          } else {
-            errMsg.textContent = errMsgType.password.empty;
-          }
-        } else {
-          errMsg.classList.replace('fade-in', 'fade-out');
-          setTimeout(() => {
-            errMsg.textContent = '';
-          }, 300);
-          if (userEmail.validity.valid) {
-            submitBtn.classList.replace('bg-gray400', 'bg-primary');
-          }
-        }
-      }, { signal: signal })
     });
 
     window.addEventListener('beforeunload', () => {

diff --git a/src/pages/sign-up.html b/src/pages/sign-up.html
@@ -118,10 +118,11 @@
     }
     window.addEventListener('DOMContentLoaded', () => {
       const form = document.querySelector('form');
-      const visibleBtn = form.querySelectorAll('input[name="show-password"]');
+      const showPwdBtn = form.querySelectorAll('input[name="show-password"]');
       const inputs = form.querySelectorAll('input[required]');
       const button = form.querySelector('button');
       const userInputs = { email: '', nickname: '', password: '', '[check-password]': '' };
+
       for (const input of inputs) {
         userInputs[input.id] = input;
         input.addEventListener('change', () => {
@@ -151,7 +152,8 @@
           }
         }, { signal: signal });
       }
-      for (const btn of visibleBtn) {
+
+      for (const btn of showPwdBtn) {
         btn.addEventListener('click', (e) => {
           setVisibleInput(e);
         }, { signal: signal });

diff --git a/src/utils/formUtils.js b/src/utils/formUtils.js
@@ -1,4 +1,26 @@
-export const setVisibleInput = (e) => {
-  const pwdInput = e.target.previousElementSibling;
-  pwdInput.type = e.target.checked ? 'text' : 'password';
+const errMsgType = {
+  email: {
+    invalid: '이메일 형식이 올바르지 않습니다.',
+    empty: '이메일을 입력해주세요.'
+  },
+  password: {
+    invalid: '비밀번호는 8자 이상이어야 합니다.',
+    empty: '비밀번호를 입력해주세요.'
+  }
+}
+
+export const toggleInputVisibility = (target) => {
+  const pwdInput = target.previousElementSibling;
+  pwdInput.type = target.checked ? 'text' : 'password';
+}
+
+/**
+ *
+ * @param { HTMLInputElement } target
+ */
+export const setValidationMsg = (target) => {
+  const errMsg = target.parentElement.querySelector('.form-error-msg');
+  const { valid } = target.validity;
+  console.log(valid)
+
 }