From 4ff4e43235b8923078513364343bb56529d355ec Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Sat, 22 Feb 2025 17:44:26 +0900
Subject: [PATCH] =?UTF-8?q?=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=B0=8D=ED=9E=88=EB=8A=94=EA=B1=B0=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/FindPassword.vue | 27 ++++++++++++++++++++-------
 src/components/user/LoginForm.vue    | 16 ++++++++++++----
 src/components/user/RegisterForm.vue | 19 ++++++++++++++++++-
 3 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/src/components/user/FindPassword.vue b/src/components/user/FindPassword.vue
index bef2c59..0260908 100644
--- a/src/components/user/FindPassword.vue
+++ b/src/components/user/FindPassword.vue
@@ -40,10 +40,11 @@
                 @update:alert="pwhintResAlert = $event"
                 :value="pwhintRes"
             />
-            <div class="d-flex mt-5">
-                <RouterLink type="button" class="btn btn-secondary me-2 w-50" to="/login">취소</RouterLink>
-                <button type="button" @click="handleSubmit" class="btn btn-primary w-50">확인</button>
+            <div class="d-flex gap-2 mt-7 mb-3">
+                <BackBtn class=" w-50" @click="handleback"/>
+                <SaveBtn class="w-50" @click="handleSubmit" />
             </div>
+            <p v-if="userCheckMsg" class="invalid-feedback d-block mb-0">{{ userCheckMsg }}</p>
         </template>
     </div>
 
@@ -73,7 +74,8 @@
         <span v-if="passwordcheckError" class="invalid-feedback d-block">{{ passwordcheckError }}</span>
 
         <div class="d-grid gap-2 mt-5 mb-5">
-            <button type="button" @click="handleNewPassword" class="btn btn-primary">확인</button>
+            <SaveBtn @click="handleNewPassword" />
+            <p v-if="pwErrMsg" class="invalid-feedback d-block mb-0">{{ pwErrMsg }}</p>
         </div>
     </div>
 </template>
@@ -86,6 +88,8 @@
     import { useToastStore } from '@s/toastStore';
     import UserFormInput from '@c/input/UserFormInput.vue';
     import FormSelect from '../input/FormSelect.vue';
+    import BackBtn from '@c/button/BackBtn.vue';
+    import SaveBtn from '../button/SaveBtn.vue';
 
     const router = useRouter();
     const toastStore = useToastStore();
@@ -94,6 +98,8 @@
     const birth = ref('');
     const pwhint = ref('');
     const pwhintRes = ref('');
+    const userCheckMsg = ref("");
+    const pwErrMsg = ref("");
 
     const idAlert = ref(false);
     const birthAlert = ref(false);
@@ -117,8 +123,13 @@
         idAlert.value = false;
     };
 
+    const handleback = () => {
+        router.push('/login');
+    }
+
     // 아이디, 생년월일, 비밀번호 힌트, 답변이 일치하는 member 재설정 input 보이기
     const handleSubmit = async () => {
+        userCheckMsg.value = '';
         idAlert.value = id.value.trim() === '';
         pwhintResAlert.value = pwhintRes.value.trim() === '';
         birthAlert.value = birth.value.trim() === '';
@@ -137,7 +148,8 @@
         if (response.status === 200 && response.data.data === true) {
             resetForm.value = true;
         } else {
-            toastStore.onToast('일치하는 정보가 없습니다.', 'e');
+            userCheckMsg.value = '입력하신 정보와 일치하는 회원이 없습니다.';
+            return;
         }
     };
 
@@ -153,9 +165,10 @@
 
     // 비밀번호 업데이트
     const handleNewPassword = async () => {
+        pwErrMsg.value = '';
         passwordAlert.value = password.value.trim() === '';
         passwordcheckAlert.value = passwordcheck.value.trim() === '';
-
+        checkPw();
         if (passwordAlert.value || passwordcheckAlert.value || passwordcheckErrorAlert.value) {
             return;
         }
@@ -166,7 +179,7 @@
         });
 
         if (checkResponse.data.data === false) {
-            toastStore.onToast('기존 비밀번호와 동일한 비밀번호로 변경할 수 없습니다.', 'e');
+            pwErrMsg.value = '기존 비밀번호와 동일한 비밀번호로 변경할 수 없습니다.';
             return;
         }
 
diff --git a/src/components/user/LoginForm.vue b/src/components/user/LoginForm.vue
index d176fed..90b4859 100644
--- a/src/components/user/LoginForm.vue
+++ b/src/components/user/LoginForm.vue
@@ -13,6 +13,7 @@
 
             <div class="d-grid gap-2 mt-7 mb-5">
                 <button type="submit" @click="handleSubmit" class="btn btn-primary">로그인</button>
+                <p v-if="errorMessage" class="invalid-feedback d-block mb-0">{{ errorMessage }}</p>
             </div>
 
             <div class="mb-3 d-flex justify-content-around">
@@ -29,7 +30,6 @@
 <script setup>
     import $api from '@api';
     import router from '@/router';
-    import { useRoute } from 'vue-router';
     import { ref } from 'vue';
     import UserFormInput from '@c/input/UserFormInput.vue';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
@@ -39,9 +39,9 @@
     const idAlert = ref(false);
     const passwordAlert = ref(false);
     const remember = ref(false);
+    const errorMessage = ref("");
 
     const userStore = useUserInfoStore();
-    const route = useRoute();
 
     const handleIdChange = value => {
         id.value = value;
@@ -53,7 +53,8 @@
         passwordAlert.value = false;
     };
 
-const handleSubmit = async () => {
+    const handleSubmit = async () => {
+        errorMessage.value = '';
         idAlert.value = id.value.trim() === '';
         passwordAlert.value = password.value.trim() === '';
 
@@ -61,16 +62,23 @@ const handleSubmit = async () => {
             return;
         }
 
+
         $api.post('user/login', {
             loginId: id.value,
             password: password.value,
             remember: remember.value,
-        }, { headers: { 'X-Page-Route': route.path } })
+        }, { headers: { isLogin: true } })
         .then(res => {
             if (res.status === 200) {
                 userStore.userInfo();
                 router.push('/');
             }
+        }).catch(error => {
+            if (error.response) {
+                error.config.isLoginRequest = true;
+                errorMessage.value = error.response.data.message;
+                console.clear();
+            }
         });
     };
 </script>
diff --git a/src/components/user/RegisterForm.vue b/src/components/user/RegisterForm.vue
index 1924e21..2953ea3 100644
--- a/src/components/user/RegisterForm.vue
+++ b/src/components/user/RegisterForm.vue
@@ -141,9 +141,11 @@
                 :is-alert="phoneAlert"
                 @update:data="phone = $event"
                 @update:alert="phoneAlert = $event"
+                @blur="checkPhoneDuplicate"
                 :maxlength="11"
                 :value="phone"
             />
+            <span v-if="phoneError" class="invalid-feedback d-block">{{ phoneError }}</span>
 
             <div class="d-flex mt-5">
                 <RouterLink type="button" class="btn btn-secondary me-2 w-50" to="/login">취소</RouterLink>
@@ -181,6 +183,7 @@
     const detailAddress = ref('');
     const postcode = ref('');   // 우편번호
     const phone = ref('');
+    const phoneError = ref('');
     const color = ref(''); // 선택된 color
     const mbti = ref('');  // 선택된 MBTI
     const pwhint = ref('');  // 선택된 pwhint
@@ -196,6 +199,7 @@
     const birthAlert = ref(false);
     const addressAlert = ref(false);
     const phoneAlert = ref(false);
+    const phoneErrorAlert = ref(false);
 
     const toastStore = useToastStore();
 
@@ -251,6 +255,19 @@
         }
     };
 
+    // 전화번호 중복체크
+    const checkPhoneDuplicate = async () => {
+        const response = await $api.get(`/user/checkPhone?memberTel=${phone.value}`);
+
+        if (!response.data.data) {
+            phoneErrorAlert.value = true;
+            phoneError.value = '이미 사용 중인 전화번호입니다.';
+        } else {
+            phoneErrorAlert.value = false;
+            phoneError.value = '';
+        }
+    };
+
     // 컬러, mbti, 비밀번호 힌트 목록 불러오기
     const { colorList, mbtiList, pwhintList } = commonApi({
         loadColor: true, colorType: 'YON',
@@ -298,7 +315,7 @@
         }
 
         if (profilAlert.value || idAlert.value || idErrorAlert.value || passwordAlert.value || passwordcheckAlert.value ||
-            passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value || addressAlert.value || phoneAlert.value) {
+            passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value || addressAlert.value || phoneAlert.value || phoneErrorAlert.value) {
             return;
         }