From 8b8c9f86fd59094beace0e053f2ef5b69fd6af0c Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 27 Feb 2025 14:57:36 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EC=B2=B4=ED=81=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/FindPassword.vue | 31 ++++++++++++++++++----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/user/FindPassword.vue b/src/components/user/FindPassword.vue
index 0260908..09866eb 100644
--- a/src/components/user/FindPassword.vue
+++ b/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>