
--- client/resources/api/email.js
+++ client/resources/api/email.js
... | ... | @@ -2,15 +2,15 @@ |
2 | 2 |
|
3 | 3 |
// 이메일 인증코드 발송 |
4 | 4 |
export const sendAuthEmailProc = email => { |
5 |
- return apiClient.post(`/sys/email/sendEmailVerifyCode.json`, email); |
|
5 |
+ return apiClient.post(`/sys/email/sendEmailCertifyCode.json`, email); |
|
6 | 6 |
} |
7 | 7 |
|
8 | 8 |
// 이메일 인증코드 확인 |
9 | 9 |
export const checkAuthEmailProc = email => { |
10 |
- return apiClient.post(`/sys/email/checkEmailVerifyCode.json`, email); |
|
10 |
+ return apiClient.post(`/sys/email/checkEmailCertifyCode.json`, email); |
|
11 | 11 |
} |
12 | 12 |
|
13 | 13 |
// 2차 인증 이메일 인증코드 확인 |
14 | 14 |
export const check2ndAuthProc = email => { |
15 |
- return apiClient.post(`/sys/email/check2ndAuthEmailVerifyCode.json`, email); |
|
15 |
+ return apiClient.post(`/sys/email/check2ndAuthEmailCertifyCode.json`, email); |
|
16 | 16 |
} |
--- client/resources/api/mbrInfo.js
+++ client/resources/api/mbrInfo.js
... | ... | @@ -48,4 +48,9 @@ |
48 | 48 |
// 이메일 중복 검사 |
49 | 49 |
export const emailCheckProc = (data) => { |
50 | 50 |
return apiClient.post(`/mbr/findByCheckEmail.json`, data); |
51 |
+}; |
|
52 |
+ |
|
53 |
+// 휴대폰번호 중복 검사 |
|
54 |
+export const mblTelnoCheckProc = (data) => { |
|
55 |
+ return apiClient.post(`/mbr/findByCheckMblTelno.json`, data); |
|
51 | 56 |
};(파일 끝에 줄바꿈 문자 없음) |
+++ client/resources/api/sms.js
... | ... | @@ -0,0 +1,16 @@ |
1 | +import apiClient from "./index"; | |
2 | + | |
3 | +// SMS 인증코드 발송 | |
4 | +export const sendAuthSMSProc = sms => { | |
5 | + return apiClient.post(`/sys/sms/sendSMSCertifyCode.json`, sms); | |
6 | +} | |
7 | + | |
8 | +// SMS 인증코드 확인 | |
9 | +export const checkAuthSMSProc = sms => { | |
10 | + return apiClient.post(`/sys/sms/checkSMSCertifyCode.json`, sms); | |
11 | +} | |
12 | + | |
13 | +// 2차 인증 SMS 인증코드 확인 | |
14 | +export const check2ndAuthSMSProc = sms => { | |
15 | + return apiClient.post(`/sys/sms/check2ndAuthSMSCertifyCode.json`, sms); | |
16 | +} |
--- client/views/pages/login/ResetPswd.vue
+++ client/views/pages/login/ResetPswd.vue
... | ... | @@ -15,7 +15,8 @@ |
15 | 15 |
</li> |
16 | 16 |
</ul> |
17 | 17 |
<div class="tab-content"> |
18 |
- <div class="flex-column justify-center content" v-if="tabView === 'id' && !certYn" style="min-height: 275px"> |
|
18 |
+ <div class="flex-column justify-center content" v-if="tabView === 'id' && !certYn" |
|
19 |
+ style="min-height: 275px"> |
|
19 | 20 |
<ul class="flex align-center find-tab mb30 pd10"> |
20 | 21 |
<li v-for="(tab, idx) in idTabList" :key="idx" @click="showSubTab('id', tab.id)" :class="{ |
21 | 22 |
'gd-6 pd5 text-ct radius': true, |
... | ... | @@ -29,18 +30,19 @@ |
29 | 30 |
<div> |
30 | 31 |
<div v-show="idTabView === 'eml'" class="input-group mb20"> |
31 | 32 |
<label for="eml" class="login-label">이메일</label> |
32 |
- <input type="text" name="" id="eml" class="full-input login-input" v-model="mbrVO.eml" |
|
33 |
- placeholder="이메일을 입력하세요" ref="eml" /> |
|
33 |
+ <input type="text" name="" id="eml" class="full-input login-input" |
|
34 |
+ v-model="mbrVO.eml" placeholder="이메일을 입력하세요" ref="eml" /> |
|
34 | 35 |
</div> |
35 | 36 |
<div v-show="idTabView === 'tel'" class="input-group mb20"> |
36 | 37 |
<label for="name" class="login-label">이름</label> |
37 |
- <input type="text" name="" id="name" class="full-input login-input" v-model="mbrVO.mbrNm" |
|
38 |
- placeholder="이름을 입력하세요" ref="mbrNm" /> |
|
38 |
+ <input type="text" name="" id="name" class="full-input login-input" |
|
39 |
+ v-model="mbrVO.mbrNm" placeholder="이름을 입력하세요" ref="mbrNm" /> |
|
39 | 40 |
</div> |
40 | 41 |
<div v-show="idTabView === 'tel'" class="input-group mb20"> |
41 | 42 |
<label for="mblTelno" class="login-label">휴대폰 번호</label> |
42 |
- <input type="text" name="" id="mblTelno" class="full-input login-input" v-model="mbrVO.mblTelno" |
|
43 |
- @input="inputFormatPhone" maxlength="13" placeholder="휴대폰 번호를 입력하세요" ref="mblTelno" /> |
|
43 |
+ <input type="text" name="" id="mblTelno" class="full-input login-input" |
|
44 |
+ v-model="mbrVO.mblTelno" @input="inputFormatPhone" maxlength="13" |
|
45 |
+ placeholder="휴대폰 번호를 입력하세요" ref="mblTelno" /> |
|
44 | 46 |
</div> |
45 | 47 |
</div> |
46 | 48 |
<div> |
... | ... | @@ -65,7 +67,8 @@ |
65 | 67 |
</button> --> |
66 | 68 |
</div> |
67 | 69 |
</div> |
68 |
- <div class="flex-column justify-center content" v-if="tabView === 'pw' && !certYn" style="min-height: 275px"> |
|
70 |
+ <div class="flex-column justify-center content" v-if="tabView === 'pw' && !certYn" |
|
71 |
+ style="min-height: 275px"> |
|
69 | 72 |
<ul class="flex align-center find-tab mb30 pd10"> |
70 | 73 |
<li v-for="(tab, idx) in pwTabList" :key="idx" @click="showSubTab('pw', tab.id)" :class="{ |
71 | 74 |
'gd-6 pd5 text-ct radius': true, |
... | ... | @@ -79,23 +82,24 @@ |
79 | 82 |
<div> |
80 | 83 |
<div class="input-group mb20"> |
81 | 84 |
<label for="lgnId" class="login-label">아이디</label> |
82 |
- <input type="text" name="" id="lgnId" class="full-input login-input" v-model="mbrVO.lgnId" |
|
83 |
- placeholder="아이디를 입력하세요" ref="lgnId" /> |
|
85 |
+ <input type="text" name="" id="lgnId" class="full-input login-input" |
|
86 |
+ v-model="mbrVO.lgnId" placeholder="아이디를 입력하세요" ref="lgnId" /> |
|
84 | 87 |
</div> |
85 | 88 |
<div v-show="pwTabView === 'eml'" class="input-group mb20"> |
86 | 89 |
<label for="eml" class="login-label">이메일</label> |
87 |
- <input type="text" name="" id="eml" class="full-input login-input" v-model="mbrVO.eml" |
|
88 |
- placeholder="이메일을 입력하세요" ref="eml" /> |
|
90 |
+ <input type="text" name="" id="eml" class="full-input login-input" |
|
91 |
+ v-model="mbrVO.eml" placeholder="이메일을 입력하세요" ref="eml" /> |
|
89 | 92 |
</div> |
90 | 93 |
<div v-show="pwTabView === 'tel'" class="input-group mb20"> |
91 | 94 |
<label for="mbrNm" class="login-label">이름</label> |
92 |
- <input type="text" name="" id="mbrNm" class="full-input login-input" v-model="mbrVO.mbrNm" |
|
93 |
- placeholder="이름을 입력하세요" ref="mbrNm" /> |
|
95 |
+ <input type="text" name="" id="mbrNm" class="full-input login-input" |
|
96 |
+ v-model="mbrVO.mbrNm" placeholder="이름을 입력하세요" ref="mbrNm" /> |
|
94 | 97 |
</div> |
95 | 98 |
<div v-show="pwTabView === 'tel'" class="input-group mb20"> |
96 | 99 |
<label for="mblTelno" class="login-label">휴대폰 번호</label> |
97 |
- <input type="text" name="" id="mblTelno" class="full-input login-input" v-model="mbrVO.mblTelno" |
|
98 |
- @input="inputFormatPhone" maxlength="13" placeholder="휴대폰 번호를 입력하세요" ref="mblTelno" /> |
|
100 |
+ <input type="text" name="" id="mblTelno" class="full-input login-input" |
|
101 |
+ v-model="mbrVO.mblTelno" @input="inputFormatPhone" maxlength="13" |
|
102 |
+ placeholder="휴대폰 번호를 입력하세요" ref="mblTelno" /> |
|
99 | 103 |
</div> |
100 | 104 |
</div> |
101 | 105 |
<div> |
... | ... | @@ -127,14 +131,17 @@ |
127 | 131 |
<div v-show="tabView === 'pw'"> |
128 | 132 |
<div class="input-group mb20"> |
129 | 133 |
<label for="newPswd" class="form-control sm">새 비밀번호</label> |
130 |
- <input type="password" name="" id="newPswd" class="full-input login-input" v-model="pswd.newPswd" minlength="9" |
|
131 |
- placeholder="영문, 숫자, 특수문자 조합 9자 이상" ref="newPswd" /> |
|
132 |
- <span :class="{'red-text': pswd.errorPwd}">영문, 숫자, 특수문자를 조합하여 입력해주세요. (9자 이상)</span> |
|
134 |
+ <input type="password" name="" id="newPswd" class="full-input login-input" |
|
135 |
+ v-model="pswd.newPswd" minlength="9" placeholder="영문, 숫자, 특수문자 조합 9자 이상" |
|
136 |
+ ref="newPswd" /> |
|
137 |
+ <span :class="{ 'red-text': pswd.errorPwd }">영문, 숫자, 특수문자를 조합하여 입력해주세요. (9자 이상)</span> |
|
133 | 138 |
</div> |
134 | 139 |
<div class="input-group mb20"> |
135 |
- <label for="newPswdChk" :class="{ 'form-control sm': true, 'error': pswd.pswdChk }">새 비밀번호확인</label> |
|
136 |
- <input type="password" name="" id="newPswdChk" class="full-input login-input" v-model="pswd.newPswdChk" minlength="9" |
|
137 |
- placeholder="비밀번호 확인을 입력하세요." ref="newPswdChk" /> |
|
140 |
+ <label for="newPswdChk" :class="{ 'form-control sm': true, 'error': pswd.pswdChk }">새 |
|
141 |
+ 비밀번호확인</label> |
|
142 |
+ <input type="password" name="" id="newPswdChk" class="full-input login-input" |
|
143 |
+ v-model="pswd.newPswdChk" minlength="9" placeholder="비밀번호 확인을 입력하세요." |
|
144 |
+ ref="newPswdChk" /> |
|
138 | 145 |
</div> |
139 | 146 |
<button class="btn sm main" @click="fnSetPswd"> |
140 | 147 |
완료 |
... | ... | @@ -152,6 +159,7 @@ |
152 | 159 |
// API |
153 | 160 |
import { searchIdProc, existMbrProc, setNewPswdProc } from "../../../resources/api/mbrInfo"; |
154 | 161 |
import { sendAuthEmailProc, checkAuthEmailProc } from "../../../resources/api/email"; |
162 |
+import { sendAuthSMSProc, checkAuthSMSProc } from "../../../resources/api/sms"; |
|
155 | 163 |
|
156 | 164 |
export default { |
157 | 165 |
mixins: [validateParams], |
... | ... | @@ -248,7 +256,7 @@ |
248 | 256 |
this.pwTabView = content; |
249 | 257 |
} |
250 | 258 |
}, |
251 |
- |
|
259 |
+ |
|
252 | 260 |
// 아이디찾기 유효성검사 |
253 | 261 |
validationId() { |
254 | 262 |
if (this.idTabView === "eml") { |
... | ... | @@ -314,7 +322,7 @@ |
314 | 322 |
// 인증코드 발송 |
315 | 323 |
async fnSend() { |
316 | 324 |
// 유효성검사 |
317 |
- if(this.tabView === "id") { |
|
325 |
+ if (this.tabView === "id") { |
|
318 | 326 |
if (!this.validationId()) { |
319 | 327 |
return; |
320 | 328 |
} |
... | ... | @@ -326,9 +334,16 @@ |
326 | 334 |
return; |
327 | 335 |
} |
328 | 336 |
} |
337 |
+ // 데이터 세팅 |
|
338 |
+ let data = this.mbrVO; |
|
339 |
+ this.fnDataSetting(data); |
|
340 |
+ |
|
341 |
+ let subTab = this.tabView === "id" ? this.idTabView : this.pwTabView; // 서브 탭 확인 |
|
342 |
+ const certType = subTab === "eml" ? sendAuthEmailProc({ email: data.eml }) : sendAuthSMSProc({ mblTelno: data.mblTelno }); // 인증코드 발송 API 선택 |
|
343 |
+ |
|
329 | 344 |
try { |
330 | 345 |
this.sendYn = true; // 인증코드 발송 |
331 |
- const res = await sendAuthEmailProc({email: this.mbrVO.eml}); |
|
346 |
+ const res = await certType; |
|
332 | 347 |
if (res.status == 200) { |
333 | 348 |
// alert(res.data.message); |
334 | 349 |
} |
... | ... | @@ -351,8 +366,11 @@ |
351 | 366 |
|
352 | 367 |
// 인증코드 확인 |
353 | 368 |
async fnCheck() { |
369 |
+ let subTab = this.tabView === "id" ? this.idTabView : this.pwTabView; // 서브 탭 확인 |
|
370 |
+ const certType = subTab === "eml" ? checkAuthEmailProc({ email: this.mbrVO.eml, code: this.code }) : checkAuthSMSProc({ mblTelno: this.mbrVO.mblTelno, code: this.code }); // 인증코드 발송 API 선택 |
|
371 |
+ |
|
354 | 372 |
try { |
355 |
- const res = await checkAuthEmailProc({email: this.mbrVO.eml, code: this.code}); |
|
373 |
+ const res = await certType; |
|
356 | 374 |
if (res.status == 200) { |
357 | 375 |
this.fnSearchId(); |
358 | 376 |
} |
... | ... | @@ -375,10 +393,11 @@ |
375 | 393 |
// } |
376 | 394 |
// 데이터 세팅 |
377 | 395 |
let data = this.mbrVO; |
396 |
+ this.fnDataSetting(data); |
|
378 | 397 |
// 실행 |
379 | 398 |
try { |
380 | 399 |
const res = await searchIdProc(data); |
381 |
- if(res.status == 200) { |
|
400 |
+ if (res.status == 200) { |
|
382 | 401 |
this.mbrVO.lgnId = res.data.data; |
383 | 402 |
this.certYn = true; |
384 | 403 |
// let isCheck = confirm("회원님의 아이디는 " + lgnId + "입니다.\n로그인 페이지로 이동하시겠습니까?"); |
... | ... | @@ -423,12 +442,13 @@ |
423 | 442 |
// axios: 새 비밀번호 설정 |
424 | 443 |
async fnSetPswd() { |
425 | 444 |
// 유효성검사 |
426 |
- if (!this.validatePswd(null, this.pswd)) { |
|
427 |
- return false; |
|
428 |
- } |
|
445 |
+ if (!this.validatePswd(null, this.pswd)) { |
|
446 |
+ return false; |
|
447 |
+ } |
|
429 | 448 |
// 데이터 세팅 |
430 |
- this.mbrVO.pswd = this.pswd.newPswd; // 새 비밀번호 설정 |
|
449 |
+ // this.mbrVO.pswd = this.pswd.newPswd; // 새 비밀번호 설정 |
|
431 | 450 |
let data = this.mbrVO; |
451 |
+ this.fnDataSetting(data); |
|
432 | 452 |
// 실행 |
433 | 453 |
try { |
434 | 454 |
const res = await setNewPswdProc(data); |
... | ... | @@ -450,33 +470,46 @@ |
450 | 470 |
}, |
451 | 471 |
|
452 | 472 |
// 비밀번호변경 검증 |
453 |
- pswdCheck() { |
|
454 |
- if (this.pswd.newPswd != null && this.pswd.newPswd != "") { |
|
455 |
- const validate = |
|
456 |
- /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&()\-_=+])/; |
|
457 |
- if ( |
|
458 |
- !validate.test(this.pswd.newPswd) |
|
459 |
- ) { |
|
460 |
- this.pswd.errorPwd = true; |
|
461 |
- } else if (this.pswd.newPswd != null && this.pswd.newPswd != "") { |
|
462 |
- this.pswd.errorPwd = false; |
|
463 |
- } |
|
464 |
- } else { |
|
465 |
- this.pswd.errorPwd = null; |
|
466 |
- } |
|
467 |
- }, |
|
468 |
- // 비밀번호변경확인 검증 |
|
469 |
- pswdChkCheck() { |
|
470 |
- if (this.pswd.newPswdChk != null && this.pswd.newPswdChk != "") { |
|
471 |
- if (this.pswd.newPswd == this.pswd.newPswdChk) { |
|
472 |
- this.pswd.pswdChk = false; |
|
473 |
- } else { |
|
474 |
- this.pswd.pswdChk = true; |
|
475 |
- } |
|
476 |
- } else { |
|
477 |
- this.pswd.pswdChk = null; |
|
478 |
- } |
|
479 |
- }, |
|
473 |
+ pswdCheck() { |
|
474 |
+ if (this.pswd.newPswd != null && this.pswd.newPswd != "") { |
|
475 |
+ const validate = |
|
476 |
+ /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&()\-_=+])/; |
|
477 |
+ if ( |
|
478 |
+ !validate.test(this.pswd.newPswd) |
|
479 |
+ ) { |
|
480 |
+ this.pswd.errorPwd = true; |
|
481 |
+ } else if (this.pswd.newPswd != null && this.pswd.newPswd != "") { |
|
482 |
+ this.pswd.errorPwd = false; |
|
483 |
+ } |
|
484 |
+ } else { |
|
485 |
+ this.pswd.errorPwd = null; |
|
486 |
+ } |
|
487 |
+ }, |
|
488 |
+ // 비밀번호변경확인 검증 |
|
489 |
+ pswdChkCheck() { |
|
490 |
+ if (this.pswd.newPswdChk != null && this.pswd.newPswdChk != "") { |
|
491 |
+ if (this.pswd.newPswd == this.pswd.newPswdChk) { |
|
492 |
+ this.pswd.pswdChk = false; |
|
493 |
+ } else { |
|
494 |
+ this.pswd.pswdChk = true; |
|
495 |
+ } |
|
496 |
+ } else { |
|
497 |
+ this.pswd.pswdChk = null; |
|
498 |
+ } |
|
499 |
+ }, |
|
500 |
+ |
|
501 |
+ // 데이터 세팅 |
|
502 |
+ fnDataSetting(data) { |
|
503 |
+ // 비밀번호 |
|
504 |
+ if (this.pswd.newPswd != null && this.pswd.newPswd != "") { |
|
505 |
+ data.pswd = this.pswd.newPswd.replace(/(\s*)/g, ""); |
|
506 |
+ } else { |
|
507 |
+ data.pswd = null; |
|
508 |
+ } |
|
509 |
+ |
|
510 |
+ // 휴대폰 번호 |
|
511 |
+ data.mblTelno = this.mbrVO.mblTelno?.replace(/-/g, ''); // 하이픈 제거 |
|
512 |
+ }, |
|
480 | 513 |
}, |
481 | 514 |
|
482 | 515 |
watch: { |
... | ... | @@ -486,7 +519,7 @@ |
486 | 519 |
this.pswdChkCheck(); |
487 | 520 |
}, |
488 | 521 |
// 비밀번호변경확인 감시 |
489 |
- "pswd.newPswdChk"() { |
|
522 |
+ "pswd.newPswdChk"() { |
|
490 | 523 |
this.pswdChkCheck(); |
491 | 524 |
}, |
492 | 525 |
} |
--- client/views/pages/login/SignUp.vue
+++ client/views/pages/login/SignUp.vue
... | ... | @@ -182,7 +182,7 @@ |
182 | 182 |
// COMPONENETS |
183 | 183 |
import UserInfoInsert from "../../component/userInfo/UserInfoInsert.vue"; |
184 | 184 |
|
185 |
-import { mbrDetailProc, mbrInsertProc, emailCheckProc } from "../../../resources/api/mbrInfo"; |
|
185 |
+import { mbrDetailProc, mbrInsertProc, emailCheckProc, mblTelnoCheckProc } from "../../../resources/api/mbrInfo"; |
|
186 | 186 |
import { sendAuthEmailProc, checkAuthEmailProc } from "../../../resources/api/email"; |
187 | 187 |
|
188 | 188 |
export default { |
... | ... | @@ -362,12 +362,6 @@ |
362 | 362 |
|
363 | 363 |
// 이메일 |
364 | 364 |
data.eml = this.emailSum(); |
365 |
- |
|
366 |
- // 회원 상태가 차단이 아니면 차단일, 차단 사유 삭제 |
|
367 |
- if (data.mbrStts != 3) { |
|
368 |
- data.cntrlDt = null; |
|
369 |
- data.cntrlRsn = null; |
|
370 |
- } |
|
371 | 365 |
}, |
372 | 366 |
|
373 | 367 |
// 유효성검사 |
... | ... | @@ -438,16 +432,17 @@ |
438 | 432 |
return; |
439 | 433 |
} |
440 | 434 |
// 데이터 세팅 |
441 |
- let eml = this.emailSum(); |
|
435 |
+ let data = this.mbrVO; |
|
436 |
+ this.fnDataSetting(data); |
|
442 | 437 |
|
443 | 438 |
// 이메일 중복 검사 |
444 |
- if(await this.fnEmailCheck(eml)) { |
|
439 |
+ if(await this.fnEmailCheck(data.eml)) { |
|
445 | 440 |
return; |
446 | 441 |
} |
447 | 442 |
|
448 | 443 |
try { |
449 | 444 |
this.sendYn = true; // 인증코드 발송 |
450 |
- const res = await sendAuthEmailProc({email: eml}); |
|
445 |
+ const res = await sendAuthEmailProc({email: data.eml}); |
|
451 | 446 |
if (res.status == 200) { |
452 | 447 |
// alert(res.data.message); |
453 | 448 |
} |
... | ... | @@ -509,6 +504,27 @@ |
509 | 504 |
} |
510 | 505 |
}, |
511 | 506 |
|
507 |
+ // 휴대폰번호 중복 검사 |
|
508 |
+ async fnMblTelnoCheck(eml) { |
|
509 |
+ let result = true; |
|
510 |
+ try { |
|
511 |
+ const res = await mblTelnoCheckProc({eml: eml}); |
|
512 |
+ if (res.status == 200) { |
|
513 |
+ result = false; // 중복된 이메일이 없으면 false |
|
514 |
+ } |
|
515 |
+ } catch (error) { |
|
516 |
+ const errorData = error.response.data; |
|
517 |
+ if (errorData.message != null && errorData.message != "") { |
|
518 |
+ alert(error.response.data.message); |
|
519 |
+ this.$refs.code.focus(); |
|
520 |
+ } else { |
|
521 |
+ alert("에러가 발생했습니다.\n관리자에게 문의해주세요."); |
|
522 |
+ } |
|
523 |
+ } finally { |
|
524 |
+ return result; // 중복 검사 결과 반환 |
|
525 |
+ } |
|
526 |
+ }, |
|
527 |
+ |
|
512 | 528 |
// 취소 |
513 | 529 |
fnCancel() { |
514 | 530 |
const isCheck = confirm("회원가입을 취소하시겠습니까?"); |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?