+                  <input type="text" class="form-control sm" ref="emailId" v-model="email.id" :disabled="mbrVO.socialAccountList.length > 0"

+                    oninput="this.value = this.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '');" placeholder="이메일을 입력하세요." />

+                    <input type="text" class="form-control sm" ref="emailAddress" v-model="email.address" :disabled="mbrVO.socialAccountList.length > 0"/>

+                  <select class="form-select sm" ref="emailSelect" v-model="email.select" :disabled="mbrVO.socialAccountList.length > 0">

+                    <option value="gmail.com">gmail.com</option>

+                  <!-- <span v-if="mbrVO.socialAccountList.length > 1" class="red-text">활성화된 SNS 연동 계정이 존재하여 수정이 불가능합니다.</span> -->

+      mbrVO: { socialAccountList: []},

+          case "gmail.com":

+          case "gmail.com":

+    <UserHeader v-if="path != this.$filters.ctxPath('/login.page') && path != this.$filters.ctxPath('/cmslogin.page') && !$route.path.includes('/popup.page') && !$route.path.includes('/signUp.page') && !$route.path.includes('/resetPswd.page')"/>

+  if (to.path === filters.ctxPath('/') || to.path.includes('/login.page') || to.path.includes('/cmslogin.page') || to.path.startsWith(filters.ctxPath('/cmmn/')) || to.path.includes('/signUp.page') || to.path.includes('/searchId.page') || to.path.includes('/resetPswd.page')) {

+              <p class="pl10 pr10 cursor" @click="moveSignUp">회원가입</p>

+    moveSignUp() {

+      this.$router.push({

+        path: this.$filters.ctxPath("/signUp.page"),

+      });

+    },

+

+<template>

+	<div class="content pt50 pb50">

+		<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="mbrId"

+										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="이메일을 입력하세요." />

+										<div>@</div>

+										<template v-if="email.select == 'self'">

+											<input type="text" class="form-control sm" ref="emailAddress"

+												v-model="email.address" />

+										</template>

+										<select class="form-select sm" ref="emailSelect" v-model="email.select">

+											<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>

+								<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 } from "../../../resources/api/mbrInfo";

+

+export default {

+	mixins: [validateParams],

+	components: {

+		UserInfoInsert,

+	},

+	data() {

+		return {

+			pageId: this.$store.state.mbrId, // 페이지 아이디

+			mbrVO: {

+				mbrStts: 1, // 회원상태

+				smsRcptnAgreYn: "Y", // 문자수신동의

+				emlRcptnAgreYn: "Y", // 이메일수신동의

+			},

+			showOpt: { ...defaultUserInfoParams }, // 유저정보 표시 여부 객체

+

+			pswd: {

+				newPswd: null,

+				newPswdChk: null,

+				errorPwd: null,

+				pswdChk: null,

+			},

+			email: {

+				id: null,

+				select: "",

+				address: null,

+			},

+		};

+	},

+	created() {

+		this.fnMbrViewDetail();

+	},

+	methods: {

+		// axios: 사용자 정보 상세 조회

+		async fnMbrViewDetail() {

+			console.log("fnMbrViewDetail: ", this.pageId);

+			// 데이터 세팅

+			const data = { mbrId: this.pageId };

+			// 실행

+			try {

+				const response = await mbrDetailProc(data);

+				this.mbrVO = response.data.data;

+				console.log("mbrVO: ", this.mbrVO);

+			} catch (error) {

+				const errorData = error.response.data;

+				if (errorData.message != null && errorData.message != "") {

+					alert(error.response.data.message);

+				} else {

+					alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");

+				}

+			}

+		},

+

+		// axios: 사용자 정보 상세 조회

+		async fnInsert() {

+			// 유효성검사

+			if (!this.validation()) {

+				return;

+			}

+

+			// 데이터 세팅

+			let data = this.mbrVO;

+			this.fnDataSetting(data);

+			// 실행

+			try {

+				const response = await mbrInsertProc(data);

+				alert(response.data.message);

+				this.$router.push({

+					path: this.$filters.ctxPath("/"),

+					query: {

+						pageId:

+							this.pageId == null ? response.data.data.mbrId : this.pageId,

+					},

+				});

+			} catch (error) {

+				const errorData = error.response.data;

+				if (errorData.message != null && errorData.message != "") {

+					alert(error.response.data.message);

+				} else {

+					alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");

+				}

+			}

+		},

+

+		// 표기변경

+		changeFormat() {

+			// 휴대폰번호 포맷

+			const mbl = this.mbrVO.mblTelno?.replace(/[^0-9]/g, '') || '';

+			if (mbl.length === 10) {

+				this.mbrVO.mblTelno = mbl.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');

+			} else if (mbl.length === 11) {

+				this.mbrVO.mblTelno = mbl.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');

+			}

+

+			// 전화번호 포맷

+			const tel = this.mbrVO.telno?.replace(/[^0-9]/g, '') || '';

+			if (tel.startsWith('02')) {

+				// 서울 지역번호 (2자리)

+				if (tel.length === 9) {

+					this.mbrVO.telno = tel.replace(/(\d{2})(\d{3})(\d{4})/, '$1-$2-$3');

+				} else if (tel.length === 10) {

+					this.mbrVO.telno = tel.replace(/(\d{2})(\d{4})(\d{4})/, '$1-$2-$3');

+				}

+			} else {

+				// 나머지 지역번호 (3자리)

+				if (tel.length === 10) {

+					this.mbrVO.telno = tel.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');

+				} else if (tel.length === 11) {

+					this.mbrVO.telno = tel.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');

+				}

+			}

+

+			// 이메일

+			if (this.mbrVO.eml != null) {

+				const email = this.mbrVO.eml.split("@");

+				this.email.id = email[0];

+				switch (email[1]) {

+					case "naver.com":

+					case "gmail.com":

+					case "hanmail.net":

+					case "nate.com":

+					case "kakao.com":

+						this.email.select = email[1];

+						break;

+					default:

+						this.email.select = "self";

+						this.email.address = email[1];

+						break;

+				}

+			}

+		},

+

+		// 휴대폰 번호 입력 포맷

+		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();

+

+			// 회원 상태가 차단이 아니면 차단일, 차단 사유 삭제

+			if (data.mbrStts != 3) {

+				data.cntrlDt = null;

+				data.cntrlRsn = null;

+			}

+		},

+

+		// 유효성검사

+		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;

+				}

+			}

+			// 문자수신

+			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;

+				}

+			}

+

+			if (this.pageRole == "adm") {

+				if (this.showOpt.isAuthor) {

+					// 회원상태: 차단

+					if (this.showOpt.isStts) {

+						if (!this.validateBlock(this.mbrVO)) {

+							return false;

+						}

+					}

+					// 사용자 권한

+					// if (this.mbrVO.authorList.length < 1) {

+					//   alert("사용자의 권한을 최소 1개 이상 추가하세요.");

+					//   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;

+			}

+		},

+

+		// 취소

+		fnCancel() {

+			const isCheck = confirm("작성을 취소하시겠습니까?");

+			if (isCheck) {

+				if (this.pageRole != "adm") {

+					this.$router.push({

+						path: this.routerPaths.view,

+					});

+				} else {

+					this.$router.push({

+						path: this.routerPaths.list,

+					});

+				}

+			}

+		},

+	},

+

+	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>