비밀번호 체크 수정

src/components/user/FindPassword.vue

@@ -68,20 +68,21 @@
             :is-alert="passwordcheckAlert"
             @update:data="passwordcheck = $event"
             @update:alert="passwordcheckAlert = $event"
-            @blur="checkPw"
+            @input="checkPw"
             :value="passwordcheck"
         />
         <span v-if="passwordcheckError" class="invalid-feedback d-block">{{ passwordcheckError }}</span>
 
-        <div class="d-grid gap-2 mt-5 mb-5">
-            <SaveBtn @click="handleNewPassword" />
-            <p v-if="pwErrMsg" class="invalid-feedback d-block mb-0">{{ pwErrMsg }}</p>
+        <div class="d-flex gap-2 mt-7 mb-3">
+                <BackBtn class=" w-50" @click="handleback"/>
+                <SaveBtn class="w-50" @click="handleNewPassword" />
         </div>
+        <p v-if="pwErrMsg" class="invalid-feedback d-block mb-0">{{ pwErrMsg }}</p>
     </div>
 </template>
 
 <script setup>
-    import { ref } from 'vue';
+    import { ref, watch } from 'vue';
     import $api from '@api';
     import commonApi from '@/common/commonApi';
     import { useRouter } from 'vue-router';
@@ -112,7 +113,7 @@
 
     const passwordAlert = ref(false);
     const passwordcheckAlert = ref(false);
-    const passwordcheckErrorAlert = ref(false);
+    const passwordMismatch = ref(false);
 
     const { pwhintList } = commonApi({
         loadPwhint: true,
@@ -127,6 +128,13 @@
         router.push('/login');
     }
 
+    // 비밀번호와 비밀번호 확인이 변경될 때마다 유효성 검사
+    watch([password, passwordcheck], () => {
+        if (passwordcheck.value !== '') {
+            checkPw();
+        }
+    });
+
     // 아이디, 생년월일, 비밀번호 힌트, 답변이 일치하는 member 재설정 input 보이기
     const handleSubmit = async () => {
         userCheckMsg.value = '';
@@ -153,13 +161,13 @@
         }
     };
 
-    const checkPw = async () => {
+    const checkPw = () => {
         if (password.value !== passwordcheck.value) {
             passwordcheckError.value = '비밀번호가 일치하지 않습니다.';
-            passwordcheckErrorAlert.value = true;
+            passwordMismatch.value = true;
         } else {
             passwordcheckError.value = '';
-            passwordcheckErrorAlert.value = false;
+            passwordMismatch.value = false;
         }
     };
 
@@ -168,8 +176,10 @@
         pwErrMsg.value = '';
         passwordAlert.value = password.value.trim() === '';
         passwordcheckAlert.value = passwordcheck.value.trim() === '';
+
         checkPw();
-        if (passwordAlert.value || passwordcheckAlert.value || passwordcheckErrorAlert.value) {
+
+        if (passwordAlert.value || passwordcheckAlert.value || passwordMismatch.value) {
             return;
         }
 
@@ -192,6 +202,5 @@
             toastStore.onToast('비밀번호가 재설정 되었습니다.', 's');
             router.push('/login');
         }
-
     };
 </script>