File name
Commit message
Commit date
05-22
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="content pt50 pb50">
<router-link :to="{ path: $filters.ctxPath('/login.page') }">←</router-link>
<div class="content w1200">
<div class="page-title point-font mb30">
<p>회원가입</p>
</div>
<div class="content-zone sch-full">
<div class="content">
<div class="scroll">
<div class="form-box">
<div class="form-box-title">
<p>기본정보</p>
<p><span>*</span>필수입력</p>
</div>
<div class="form-content">
<div class="layout">
<label class="form-title"><span>*</span>아이디</label>
<input type="text" class="form-control sm" v-model="mbrVO.lgnId" ref="lgnId"
minlength="5" maxlength="50" placeholder="아이디를 입력하세요."
:disabled="mbrVO.mbrId != null" />
</div>
<div class="layout">
<label class="form-title"><span>*</span>이름</label>
<input type="text" class="form-control sm" ref="mbrNm" v-model="mbrVO.mbrNm"
minlength="2" maxlength="50" placeholder="이름을 입력하세요." />
</div>
<div class="layout">
<label class="form-title">
<p><span>*</span>비밀번호</p>
</label>
<div class="form-group">
<input type="password" class="form-control sm" ref="newPswd"
v-model="pswd.newPswd" minlength="9" placeholder="영문, 숫자, 특수문자 조합 9자 이상" />
<span :class="{
'red-text': pswd.errorPwd,
}">
영문, 숫자, 특수문자를 조합하여 입력해주세요. (9자 이상)
</span>
</div>
</div>
<div class="layout">
<label class="form-title">
<p><span>*</span>비밀번호확인</p>
</label>
<input type="password" :class="{ 'form-control sm': true, 'error': pswd.pswdChk }"
ref="newPswdChk" v-model="pswd.newPswdChk" minlength="9"
placeholder="비밀번호 확인을 입력하세요." />
</div>
<!-- <template v-if="showOpt.isMblNo || showOpt.isTelNo"> -->
<div v-if="showOpt.isMblNo" class="layout">
<label class="form-title"><span>*</span>휴대폰번호</label>
<input type="text" class="form-control sm" ref="mblTelno" v-model="mbrVO.mblTelno"
@input="inputFormatPhone" maxlength="13" placeholder="휴대폰번호를 입력하세요." />
</div>
<!-- </template> -->
<div v-if="showOpt.isTelNo" class="layout">
<label class="form-title">전화번호</label>
<input type="text" class="form-control sm" ref="telno" v-model="mbrVO.telno"
@input="inputFormatTel" maxlength="13" placeholder="전화번호를 입력해주세요." />
</div>
<!-- <template v-if="showOpt.isEml || showOpt.isSmsAgree || showOpt.isEmlAgree"> -->
<div v-if="showOpt.isEml" class="layout">
<label class="form-title"><span>*</span>이메일</label>
<div class="check-area">
<input type="text" class="form-control sm" ref="emailId" v-model="email.id"
oninput="this.value = this.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '');"
placeholder="이메일을 입력하세요." :disabled="certYn"/>
<div>@</div>
<template v-if="email.select == 'self'">
<input type="text" class="form-control sm" ref="emailAddress"
v-model="email.address" :disabled="certYn"/>
</template>
<select class="form-select sm" ref="emailSelect" v-model="email.select" :disabled="certYn">
<option value="">선택하세요</option>
<option value="self">직접입력</option>
<option value="naver.com">naver.com</option>
<option value="gmail.com">gmail.com</option>
<option value="hanmail.net">hanmail.net</option>
<option value="nate.com">nate.com</option>
<option value="kakao.com">kakao.com</option>
</select>
</div>
<div v-show="!certYn">
<button class="btn sm main" @click="fnSend">
{{ !sendYn ? "인증코드 발송" : "인증코드 재발송" }}
</button>
<span v-show="sendYn">인증코드가 발송되었습니다.</span>
<div v-show="sendYn">
<div>
<input type="text" class="form-control md" ref="code" @input="inputCode" v-model="code"
maxlength="6" placeholder="인증코드를 입력하세요." />
</div>
<div class="btn-wrap">
<button v-show="!certYn" class="btn sm main" @click="fnCheck">인증코드 확인</button>
</div>
</div>
</div>
<span v-show="certYn">인증코드가 확인되었습니다.</span>
</div>
<div v-if="showOpt.isSmsAgree" class="layout">
<label class="form-title"><span>*</span>문자수신</label>
<div class="check-area">
<div class="form-check">
<input type="radio" name="smsRcptnAgreYn" id="smsY" class="mr5"
v-model="mbrVO.smsRcptnAgreYn" value="Y" />
<label for="smsY">수신</label>
</div>
<div class="form-check">
<input type="radio" name="smsRcptnAgreYn" id="smsN" class="mr5"
v-model="mbrVO.smsRcptnAgreYn" value="N" />
<label for="smsN">미수신</label>
</div>
</div>
</div>
<div v-if="showOpt.isEmlAgree" class="layout">
<label class="form-title"><span>*</span>이메일수신</label>
<div class="check-area">
<div class="form-check">
<input type="radio" name="emlRcptnAgreYn" id="y" class="mr5"
v-model="mbrVO.emlRcptnAgreYn" value="Y" />
<label for="y">수신</label>
</div>
<div class="form-check">
<input type="radio" name="emlRcptnAgreYn" id="n" class="mr5"
v-model="mbrVO.emlRcptnAgreYn" value="N" />
<label for="n">미수신</label>
</div>
</div>
</div>
<!-- </template> -->
<template v-if="showOpt.isAddr">
<div class="layout">
<label class="form-title"><span>*</span>우편번호</label>
<input type="text" class="form-control sm" v-model="mbrVO.zip" readonly />
<button :class="{
'large-btn': true,
'blue-border-btn': pageRole == 'adm',
'green-border-btn': pageRole == 'portal',
}" @click="fnZipSearch">
찾기
</button>
</div>
<div class="layout">
<label class="form-title"><span>*</span>주소</label>
<input type="text" class="form-control sm" v-model="mbrVO.addr" readonly />
</div>
<div class="layout">
<label class="form-title">
상세주소
</label>
<input type="text" class="form-control sm" ref="daddr" v-model="mbrVO.daddr"
placeholder="상세주소를 입력해주세요." />
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<div class="btn-wrap">
<button :class="{
'btn sm main': true,
// 'blue-btn': pageRole == 'adm',
// 'green-btn': pageRole == 'portal',
}" @click="fnInsert">완료
</button>
<!-- <button class="btn sm tertiary" @click="fnCancel">취소</button> -->
</div>
</div>
</div>
</template>
<script>
import { defaultUserInfoParams } from "../../../resources/js/defaultUserInfoParams";
import validateParams from "../../../resources/js/validateParams";
// import pageAuthMixin from "../../../views/common/pageAuthMixin.js";
// COMPONENETS
import UserInfoInsert from "../../component/userInfo/UserInfoInsert.vue";
import { mbrDetailProc, mbrInsertProc, emailCheckProc, mblTelnoCheckProc } from "../../../resources/api/mbrInfo";
import { sendAuthEmailProc, checkAuthEmailProc } from "../../../resources/api/email";
export default {
mixins: [validateParams],
components: {
UserInfoInsert,
},
data() {
return {
pageId: this.$store.state.mbrId, // 페이지 아이디
mbrVO: {
mbrStts: 1, // 회원상태
smsRcptnAgreYn: "Y", // 문자수신동의
emlRcptnAgreYn: "Y", // 이메일수신동의
authorList: [
{authrtNm: "사용자", authrtCd: "ROLE_USER"},
]
},
showOpt: { ...defaultUserInfoParams }, // 유저정보 표시 여부 객체
pswd: {
newPswd: null,
newPswdChk: null,
errorPwd: null,
pswdChk: null,
},
email: {
id: null,
select: "",
address: null,
},
sendYn: false, // 인증코드 발송 여부
code: null, // 인증코드
certYn: false, // 인증여부
};
},
created() {
},
methods: {
// axios: 회원가입
async fnInsert() {
// 유효성검사
if (!this.validation()) {
return;
}
// 데이터 세팅
let data = this.mbrVO;
this.fnDataSetting(data);
// 실행
try {
const response = await mbrInsertProc(data);
// alert(response.data.message);
alert("회원가입이 완료되었습니다.");
this.$router.push({
path: this.$filters.ctxPath("/login.page")
});
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// 휴대폰 번호 입력 포맷
inputFormatPhone(event) {
let input = event.target.value.replace(/[^0-9]/g, '');
if (input.length <= 3) {
this.mbrVO.mblTelno = input;
} else if (input.length <= 6) {
this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3);
} else if (input.length <= 10) {
// 10자리는 3-3-4
this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3, 6) + '-' + input.slice(6);
} else {
// 기본은 3-4-4
this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3, 7) + '-' + input.slice(7, 11);
}
},
// 전화번호 입력 포맷
inputFormatTel(event) {
let input = event.target.value.replace(/[^0-9]/g, '');
if (input.startsWith('02')) {
// 서울 지역번호 (2자리)
if (input.length <= 2) {
this.mbrVO.telno = input;
} else if (input.length <= 5) {
this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2);
} else if (input.length <= 9) {
this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2, 5) + '-' + input.slice(5);
} else {
this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2, 6) + '-' + input.slice(6, 10);
}
} else {
// 나머지 지역번호 (3자리)
if (input.length <= 3) {
this.mbrVO.telno = input;
} else if (input.length <= 6) {
this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3);
} else if (input.length <= 10) {
this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3, 6) + '-' + input.slice(6);
} else {
this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3, 7) + '-' + input.slice(7, 11);
}
}
},
// 비밀번호변경 검증
pswdCheck() {
if (this.pswd.newPswd != null && this.pswd.newPswd != "") {
const validate =
/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&()\-_=+])/;
if (
!validate.test(this.pswd.newPswd)
) {
this.pswd.errorPwd = true;
} else if (this.pswd.newPswd != null && this.pswd.newPswd != "") {
this.pswd.errorPwd = false;
}
} else {
this.pswd.errorPwd = null;
}
},
// 비밀번호변경확인 검증
pswdChkCheck() {
if (this.pswd.newPswdChk != null && this.pswd.newPswdChk != "") {
if (this.pswd.newPswd == this.pswd.newPswdChk) {
this.pswd.pswdChk = false;
} else {
this.pswd.pswdChk = true;
}
} else {
this.pswd.pswdChk = null;
}
},
// 우편번호 찾기 버튼
fnZipSearch() {
let width = 500; //팝업의 너비
let height = 600; //팝업의 높이
new window.daum.Postcode({
oncomplete: (data) => {
width: width;
height: height;
this.mbrVO.zip = data.zonecode;
this.mbrVO.addr = data.roadAddress;
},
}).open({
left: window.screen.width / 2 - width / 2,
top: window.screen.height / 2 - height / 2,
});
},
// 데이터 세팅
fnDataSetting(data) {
// 비밀번호
if (this.pswd.newPswd != null && this.pswd.newPswd != "") {
data.pswd = this.pswd.newPswd.replace(/(\s*)/g, "");
} else {
data.pswd = null;
}
// 휴대폰 번호
data.mblTelno = this.mbrVO.mblTelno.replace(/-/g, ''); // 하이픈 제거
// 전화 번호
if (this.mbrVO.telno != null) {
data.telno = this.mbrVO.telno.replace(/-/g, "");
}
// 이메일
data.eml = this.emailSum();
},
// 유효성검사
validation() {
// 아이디
if (!this.validateId(this.mbrVO.lgnId)) {
return false;
}
// 이름
if (!this.validateNm(this.mbrVO.mbrNm)) {
return false;
}
// 비밀번호
if (!this.validatePswd(this.pageId, this.pswd)) {
return false;
}
// 휴대폰번호
if (this.showOpt.isMblNo) {
if (!this.validateMblNo(this.mbrVO.mblTelno)) {
return false;
}
}
// 이메일
if (this.showOpt.isEml) {
if (!this.validateEml(this.email)) {
return false;
} else if (!this.certYn) {
alert("이메일 인증을 완료해주세요.");
this.$refs.code.focus();
return false;
}
}
// 문자수신
if (this.showOpt.isSmsAgree) {
if (!this.validateSmsAgre(this.mbrVO.smsRcptnAgreYn)) {
return false;
}
}
// 이메일수신
if (this.showOpt.isEmlAgree) {
if (!this.validateEmlAgre(this.mbrVO.emlRcptnAgreYn)) {
return false;
}
}
// 주소
if (this.showOpt.isAddr) {
if (!this.validateAddr(this.mbrVO)) {
return false;
}
}
return true;
},
// 이메일 합체
emailSum() {
if (this.email.select != "self") {
return this.email.id + "@" + this.email.select;
} else {
return this.email.id + "@" + this.email.address;
}
},
// 인증코드 발송
async fnSend() {
// 이메일 유효성검사
if (!this.validateEml(this.email)) {
return;
}
// 데이터 세팅
let data = this.mbrVO;
this.fnDataSetting(data);
// 이메일 중복 검사
if(await this.fnEmailCheck(data.eml)) {
return;
}
try {
this.sendYn = true; // 인증코드 발송
const res = await sendAuthEmailProc({email: data.eml});
if (res.status == 200) {
// alert(res.data.message);
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
this.sendYn = false; // 발송 실패시 인증코드 발송 여부 초기화
}
},
// 인증코드 입력
inputCode(event) {
const input = event.target.value.replace(/[^0-9]/g, '');
this.code = input;
},
// 인증코드 확인
async fnCheck() {
// 데이터 세팅
let eml = this.emailSum();
try {
const res = await checkAuthEmailProc({email: eml, code: this.code});
if (res.status == 200) {
this.certYn = true; // 인증 성공
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
this.$refs.code.focus();
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
}
},
// 이메일 중복 검사
async fnEmailCheck(eml) {
let result = true;
try {
const res = await emailCheckProc({eml: eml});
if (res.status == 200) {
result = false; // 중복된 이메일이 없으면 false
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
this.$refs.code.focus();
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
} finally {
return result; // 중복 검사 결과 반환
}
},
// 휴대폰번호 중복 검사
async fnMblTelnoCheck(eml) {
let result = true;
try {
const res = await mblTelnoCheckProc({eml: eml});
if (res.status == 200) {
result = false; // 중복된 이메일이 없으면 false
}
} catch (error) {
const errorData = error.response.data;
if (errorData.message != null && errorData.message != "") {
alert(error.response.data.message);
this.$refs.code.focus();
} else {
alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
}
} finally {
return result; // 중복 검사 결과 반환
}
},
// 취소
fnCancel() {
const isCheck = confirm("회원가입을 취소하시겠습니까?");
if (isCheck) {
this.$router.push({
path: this.$filters.ctxPath("/login.page"),
});
}
},
},
watch: {
// 비밀번호변경 감시
"pswd.newPswd"() {
this.pswdCheck();
this.pswdChkCheck();
},
// 비밀번호변경확인 감시
"pswd.newPswdChk"() {
this.pswdChkCheck();
},
// 회원상태 감시
"mbrVO.mbrStts"() {
if (this.mbrVO.mbrStts == 3) {
this.mbrVO.cntrlDt = new Date().toISOString().substring(0, 10);
this.$refs.cntrlRsn.focus();
} else {
this.mbrVO.cntrlDt = null;
this.mbrVO.cntrlRsn = null;
}
},
},
};
</script>