고객관리 > 청약고갹관리/회원관리 기능 추가

frontend/src/modules/custMgt/components/AdminNmPop.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="wrap bg-wrap">
+<div>
     <div class="dimmed modal26" @click="ModalClose();"></div>
 	<div class="popup-wrap modal26">
         <div class="popup modal26">

frontend/src/modules/custMgt/components/MemberBulkRegPop.vue

@@ -29,7 +29,7 @@
 						</tbody>
 					</table>
 				<div class="pop-btn2">
-					<button class="btn-pcolor">저장</button>
+					<button class="btn-pcolor" @click="saveExcel">저장</button>
 					<button class="btn-default" @click="excelPopClose">취소</button>
 				</div>
 			</div>
@@ -58,6 +58,7 @@ export default {
             varList2 : ["이름","기타1","기타2","기타3","기타4"],
             nData : [],
             oData : [],
+			totalItems: 0,
         }
     },
 	
@@ -66,8 +67,10 @@ export default {
     }, 
 	methods :{
 		// 모달 띄우기
-		excelPopOpen(adminId){
+		excelPopOpen(adminId, totalItems){
 			this.adminId = adminId;
+			this.totalItems = totalItems;
+			console.log(totalItems)
 			var excelPop = document.getElementsByClassName('modal33');
 			for(var i = 0; i < excelPop.length; i++){
 				excelPop[i].style.display = 'block';
@@ -85,7 +88,7 @@ export default {
 		// 저장 후 부모창 호출.
 		toComplete(){
 			this.getParent('custList').$refs.table.reloadData();
-			this.ModalClose();
+			this.excelPopClose();
         },
 		async doInsert(){
             if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
@@ -118,6 +121,10 @@ export default {
 			});
 		},
 		readFile(event) {
+
+			this.nData = []
+			this.oData = []
+
 			const file = event.target.files[0];
 			console.log(file.name);
 			
@@ -148,24 +155,18 @@ export default {
 				let data = reader.result;
 				let workbook = XLSX.read(data, {type: 'binary'});
 				workbook.SheetNames.forEach(sheetName => {
-					workbook.Sheets[sheetName].A1.w = "id";
-					workbook.Sheets[sheetName].B1.w = "name";
-					workbook.Sheets[sheetName].C1.w = "mdn";
-					workbook.Sheets[sheetName].D1.w = "email";
-					workbook.Sheets[sheetName].E1.w = "stat";
-					
-					// console.log(workbook.Sheets[sheetName].A1);
-					const rowObj = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
-					// const rowObj = XLSX.utils.sheet_to_json(wb.Sheets[sheetName],{raw:true});
+
+					const rowObj = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName],{raw:true});
 					tmpResult = rowObj;
-					const limitCnt = 101;
-
+					const limitCnt = 100;
 					
-					 if(rowObj.length > limitCnt){
-                        alert('100건이상은 등록되지 않습니다.');
-						return false;
-                    }
+					const totalCnt = Number(this.totalItems) + rowObj.length;
 
+					if(totalCnt > limitCnt){
+						alert('100건이상은 등록되지 않습니다.');
+						return false;
+					}
+				
 					for (const [idx,r] of rowObj.entries()) {
                         if(idx > limitCnt-1 ) {
                             break;
@@ -183,28 +184,33 @@ export default {
                                 휴대폰번호='0'+휴대폰번호;
                             }
                         }
-                        let {retVal,msg } = vm.validXlxs({이름,휴대폰번호});
+
+                        let {retVal,msg } = vm.validXlxs({ID,이름,휴대폰번호,이메일,ID잠금});
                         if(retVal){
                             const pVal = [{ name:'이름',val:이름, len:20,},
                             { name:'ID잠금',val:ID잠금, len:4,},];
 
                             const rVal = vm.isTitle(pVal);
+						
                             if(rVal.retVal){
-                                vm.nData.push({name:이름,mdn:휴대폰번호,msg});
+                                vm.nData.push({userId:ID,userNm:이름,mdn:휴대폰번호,email:이메일,stat:ID잠금,msg});
                             }else{
-                                vm.oData.push({이름,휴대폰번호,오류내용:rVal.msg});
+                                vm.oData.push({ID,이름,휴대폰번호,이메일,ID잠금,오류내용:rVal.msg});
                             }
+
                         }else{
-                            vm.oData.push({이름,휴대폰번호,오류내용:msg});
+                            vm.oData.push({ID,이름,휴대폰번호,이메일,ID잠금,오류내용:msg});
                         }
                     }
 				});
 				console.log(vm.nData);
-				// this.excelJsonData=tmpResult;
+				console.log(vm.nData.length);
+				console.log(vm.oData);
+				console.log(vm.oData.length);
 			};
 			reader.readAsBinaryString(file);
 		},
-		validXlxs({이름,휴대폰번호}){
+		validXlxs({이름,휴대폰번호,이메일}){
             if(this.isNull(이름)){
                 return {retVal:false,msg:'이름 누락'};
             }
@@ -216,7 +222,9 @@ export default {
                     return {retVal:false,msg:'휴대폰번호 형식 오류'};
                 }
             }
-
+			if(!this.emailCheck(이메일)){
+				return {retVal:false,msg:'이메일 형식 오류'};
+            }
             return {retVal:true,msg:'정상'};
         },
         isTitle(pVal) {
@@ -243,7 +251,32 @@ export default {
 				element.removeChild(element.firstChild);
 			}
 			// uploadFile
-		}
+		},
+		async saveExcel(){
+			// 
+			this.row.adminId = this.adminId;
+			this.row.list = this.nData;
+
+			try {
+				const response = await custMgtApi.insertMassUser(this.row);
+				const result = response.data;
+				console.log(result);
+				if (result != null && result.retCode == "0000") {
+					
+					// this.totalCnt = result.data.totalCnt;
+					// this.successCnt = result.data.successCnt;
+					// this.failCnt = result.data.failCnt;
+					// this.toComplete();/
+				}
+			} catch (error) {
+				console.log(error);
+				alert("실패 하였습니다.");
+			}
+
+			// 오류건수.
+			console.log(this.oData.length);
+		},
+		
 	}
 }
 </script>

frontend/src/modules/custMgt/components/MemberModifyPop.vue

@@ -0,0 +1,267 @@
+<template>
+	<!-- <div class="wrap bg-wrap"> -->
+	<div>
+		<div class="dimmed memberUpdate" @click="memberUpdateModalClose();"></div>
+		<div class="popup-wrap memberUpdate">
+			<!-- 수정 확인 -->
+			<div class="popup memberUpdate popup_form">
+				<div class="pop-head">
+					<h3 class="pop-tit">사용자 ID 수정</h3>
+				</div>
+				<form autocomplete="off">
+					<table>
+						<tbody>
+							<tr>
+								<th>관리자 ID</th>
+								<td>{{adminId}}</td>
+							</tr>
+							<tr>
+								<th>ID</th>
+								<td>{{userId}}</td>
+							</tr>
+							<tr>
+								<th>비밀번호</th>
+								<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd1" v-model.trim="userPwd1"></td>
+							</tr>
+							<tr>
+								<th>비밀번호 확인</th>
+								<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd2" v-model.trim="userPwd2"></td>
+							</tr>
+							<tr>
+								<th>이름</th>
+								<td><input type="text" v-model.trim="userNm" ref="_userNm"></td>
+							</tr>
+							<tr>
+								<th>휴대폰번호</th>
+								<td><input type="text" v-model.trim="mdn" ref="_phone"></td>
+							</tr>
+							<tr>
+								<th>이메일</th>
+								<td><input type="email" v-model.trim="email" ref="_email"></td>
+							</tr>
+							<tr>
+								<th class="center">상태</th>
+								<td>
+									<input type="radio" name="userStateUpdate" value="01" id="user_popup_update_radio1" v-model="userStat">
+									<label for="user_popup_update_radio1">사용</label>
+									<input type="radio" name="userStateUpdate" value="02" id="user_popup_update_radio2" v-model="userStat">
+									<label for="user_popup_update_radio2">정지</label>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</form>
+				<div class="pop-btn2">
+					<button class="btn-pcolor" @click="memberUpdateConfirm();">저장</button>
+					<button class="btn-default" @click="memberUpdateModalClose();">취소</button>
+				</div>
+			</div>
+
+            <validation-confirm-pop ref="validationConfirmPopModal"> </validation-confirm-pop>
+
+        </div>        
+    </div>
+</template>
+
+<script>
+import api from '@/service/api';
+import custMgtApi from "../service/custMgtApi.js";
+import { utils_mixin, chkPattern2 } from '../service/mixins';
+import ValidationConfirmPop from '../components/ValidationConfirmPop.vue';
+import lodash from "lodash";
+
+export default {
+    name: "memberModifyPop",
+    mixins: [utils_mixin, chkPattern2],
+	watch:{
+		stat(){
+			console.log('watch : ', this.stat)
+		}
+	},
+    components: {
+        ValidationConfirmPop,
+    },
+    model: {
+		//prop: 'sendData',
+		//event: 'event-data'
+	},
+	//props: ['sendData'],
+    created(){
+        // this.setAuthData();
+        // this.formReset();
+    },
+	data(){
+        return{
+		    row:{},
+			madangId:'',
+			name:'',
+			mdn:'',
+			email:'',
+			auth:'',
+			stat: "",
+            userId: "",
+            adminId: "",
+			userNm:"",
+            userPwd1:"",
+            userPwd2:"",
+			code:"",
+            userStat:"",
+        }
+    },
+	methods :{
+        //사용자ID 수정 모달 Open
+        async memberUpdateModalOpen(props){
+			this.row.userId = props.userId;
+            this.adminId = props.adminId;
+			try {
+				const response = await custMgtApi.memberDetail(this.row);
+				const result = response.data;
+				console.log(result);
+				if (result != null && result.retCode == "0000") {
+					this.userId = result.data.userId;
+					this.userNm = result.data.userNm;
+					this.email = result.data.email;
+					this.mdn = result.data.mdn;
+					this.userStat = result.data.userStat;
+				} else {
+                    alert("실패 하였습니다.");
+                }
+			} catch(err) {
+				alert("실패 하였습니다.");
+			}
+            // 모달 오픈
+			var dimmed = document.getElementsByClassName('memberUpdate');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'block';
+			}
+		},
+        //사용자ID 수정 Confirm
+        memberUpdateConfirm(){
+            // confirm 팝업 노출
+            if(this.doValidate()){
+                this.$refs.validationConfirmPopModal.confirmUpdateOpen();
+            }
+        },
+        //사용자ID 수정 처리
+        async memberUpdate(){
+            this.row.userId = this.userId;
+            this.row.userPw = this.userPwd1;
+            this.row.userNm = this.userNm;            
+            this.row.userEmail = this.email;
+            this.row.mdn = this.mdn;
+            this.row.userStat = this.userStat;
+			try {
+				const response = await custMgtApi.updateUser(this.row);
+				const result = response.data;
+				console.log(result);
+				if (result != null && result.retCode == "0000") {
+                    alert('수정 완료하였습니다.');
+                    this.toComplete();
+
+				} else {
+                    alert("실패 하였습니다.");
+                }
+			} catch(err) {
+				alert("실패 하였습니다.");
+			} 
+        },
+        //사용자ID 수정 모달 Close
+        memberUpdateModalClose(){
+            var dimmed = document.getElementsByClassName('memberUpdate');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';
+			}
+        },
+        toComplete(){
+            this.row.serviceId = this.adminId;
+            this.memberUpdateModalClose();
+            this.$parent.memberDetail(this.adminId);			
+        },
+        doPwdValidate(){
+			if(this.isNull(this.userPwd2)){
+				alert("비밀번호 확인을 입력해 주세요.");
+				this.$refs._pwd2.focus();
+				return false;
+			}
+			if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
+				alert("비밀번호가 일치하지 않습니다.");
+				this.$refs._pwd2.focus();
+				return false;
+			}
+			const pwdLen = this.bytes(this.userPwd1);
+			if(!(pwdLen >= 8 && pwdLen <= 16)){
+				alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+				this.$refs._pwd1.focus();
+				return false;
+			}
+			const pEng = /[A-Za-z]/g;	// 영문자 
+			const pNum = /[0-9]/g;	// 숫자 
+			const pSpc = /[!@$%^&*]/g; // 특수문자
+			if(!(pEng.test(this.userPwd1) && pNum.test(this.userPwd1) && pSpc.test(this.userPwd1))) {
+				alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+				this.$refs._pwd1.focus();
+				return false;
+			}
+		
+			return true;
+		},
+		doValidate(){
+			if(!this.isNull(this.userPwd1)){
+				if(!this.doPwdValidate()){
+					return false;
+				}
+			}
+
+            if(this.isNull(this.userNm)){
+				alert("이름을 입력해 주세요");
+				this.$refs._userNm.focus();
+				return false;	
+			}
+
+            if(this.isNull(this.email)){
+				alert('이메일을 입력해주세요.');
+				this.$refs._email.focus();
+				return false;
+			}
+			const email = this.email;
+			if(!this.isNull(email) && !lodash.isEqual(email,'@') && !this.emailCheck(email)){
+				// alert("이메일 형식이 잘못되었습니다. 확인해 주세요");
+                // this.$refs._email.focus();
+                this.$refs.validationConfirmPopModal.validationEmailOpen();
+				
+				return false;
+			}
+
+            if(this.isNull(this.mdn)){
+				alert('휴대폰번호를 입력해주세요.');                
+				this.$refs._phone.focus();
+				return false;
+			}
+			const hp = this.mdn;
+			if(!this.isNull(hp) && !this.isMobile(hp)){
+				//alert("휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요");
+                //this.$refs._phone.focus();
+                this.$refs.validationConfirmPopModal.validationPhonenumberOpen();
+				
+				return false;
+			}
+
+            if(this.isNull(this.userStat)){
+				alert('상태를 선택 해주세요.');
+				return false;	
+			}
+
+			return true;
+		},
+        checkPhoneFocus(){
+            //this.mdn = '';
+            this.$refs._phone.focus();
+        },
+        checkEmailFocus(){
+            //this.email = '';
+            this.$refs._email.focus();
+        },
+        
+	}
+}
+</script>

frontend/src/modules/custMgt/components/MemberRegPop.vue

@@ -0,0 +1,296 @@
+<template>
+	<!-- <div class="wrap bg-wrap"> -->
+	<div>
+		<div class="dimmed memberInsert" @click="memberInsertModalClose();"></div>
+		<div class="popup-wrap memberInsert">
+			<!-- 수정 확인 -->
+			<div class="popup memberInsert popup_form">
+				<div class="pop-head">
+					<h3 class="pop-tit">사용자 ID 생성</h3>
+				</div>
+				<form autocomplete="off">
+					<table>
+						<tbody>
+							<tr>
+								<th>관리자 ID</th>
+								<td>{{adminId}}</td>
+							</tr>
+							<tr>
+								<th>ID</th>
+								<td><input type="text" v-model.trim="userId" ref="_userId"></td>
+							</tr>
+							<tr>
+								<th>비밀번호</th>
+								<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd1" v-model.trim="userPwd1"></td>
+							</tr>
+							<tr>
+								<th>비밀번호 확인</th>
+								<td><input type="password" @keypress="onlyPassword" @input="onlyPassword" required minlength="8" maxlength="16" ref="_pwd2" v-model.trim="userPwd2"></td>
+							</tr>
+							<tr>
+								<th>이름</th>
+								<td><input type="text" v-model.trim="userNm" ref="_userNm"></td>
+							</tr>
+							<tr>
+								<th>휴대폰번호</th>
+								<td><input type="text" v-model.trim="mdn" ref="_phone"></td>
+							</tr>
+							<tr>
+								<th>이메일</th>
+								<td><input type="email" v-model.trim="email" ref="_email"></td>
+							</tr>
+							<tr>
+								<th class="center">상태</th>
+								<td>
+									<input type="radio" name="userStateInsert" value="01" id="user_popup_insert_radio1" v-model="stat">
+									<label for="user_popup_insert_radio1">사용</label>
+									<input type="radio" name="userStateInsert" value="02" id="user_popup_insert_radio2" v-model="stat">
+									<label for="user_popup_insert_radio2">정지</label>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</form>
+				<div class="pop-btn2">
+					<button class="btn-pcolor" @click="memberInsertConfirm();">저장</button>
+					<button class="btn-default" @click="memberInsertModalClose();">취소</button>
+				</div>
+			</div>
+
+            <validation-confirm-pop ref="validationConfirmPopModal"> </validation-confirm-pop>
+
+        </div>        
+    </div>
+</template>
+
+<script>
+import api from '@/service/api';
+import custMgtApi from "../service/custMgtApi.js";
+import { utils_mixin, chkPattern2 } from '../service/mixins';
+import ValidationConfirmPop from '../components/ValidationConfirmPop.vue';
+import lodash from "lodash";
+
+export default {
+    name: "memberRegPop",
+    mixins: [utils_mixin, chkPattern2],
+	watch:{
+		stat(){
+			console.log('watch : ', this.stat)
+		}
+	},
+    components: {
+        ValidationConfirmPop,
+    },
+    model: {
+		//prop: 'sendData',
+		//event: 'event-data'
+	},
+	//props: ['sendData'],
+    created(){
+        // this.setAuthData();
+        // this.formReset();
+    },
+	data(){
+        return{
+		    row:{},
+			madangId:'',
+            adminId:'',
+			name:'',
+			mdn:'',
+			email:'',
+			auth:'',
+			stat: "",
+            userId:"",
+			userNm:"",
+            userPwd1:"",
+            userPwd2:"",
+			code:"",
+            userTotalCnt:0,
+        }
+    },
+	methods :{
+        //사용자ID 생성 모달 Open
+        async memberInsertModalOpen(props){			
+            this.adminId = props.adminId;
+            this.userTotalCnt = props.userTotalCnt;
+
+            // 모달 오픈
+			var dimmed = document.getElementsByClassName('memberInsert');
+			for(var i = 0; i < dimmed.length; i++){
+			    dimmed[i].style.display = 'block';
+            }
+		},
+        //사용자ID 생성 Confirm
+        memberInsertConfirm(){
+            // confirm 팝업 노출
+            if(this.doValidate()){
+                this.$refs.validationConfirmPopModal.confirmInsertOpen();
+            }
+        },
+        //사용자ID 수정 처리
+        async memberInsert(){
+            this.row.adminId = this.adminId;
+            this.row.userId = this.userId;
+            this.row.userPw = this.userPwd1;
+            this.row.userNm = this.userNm;            
+            this.row.userEmail = this.email;
+            this.row.mdn = this.mdn;
+            this.row.userStat = this.stat;
+			try {
+				const response = await custMgtApi.insertUser(this.row);
+				const result = response.data;
+				console.log(result);
+				if (result != null && result.retCode == "0000") {
+                    alert('사용자 생성 완료하였습니다.');
+                    this.toComplete();
+                } else if(result != null && result.retCode == "4018"){
+                    // 이미 사용중인 ID
+                    this.$refs.validationConfirmPopModal.validationIdDuplicateOpen();
+				} else {
+                    alert("실패 하였습니다.");
+                }
+			} catch(err) {
+				alert("실패 하였습니다.");
+			} 
+        },
+        //사용자ID 생성 모달 Close
+        memberInsertModalClose(){
+            var dimmed = document.getElementsByClassName('memberInsert');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';
+			}
+            //this.formReset();
+        },
+        toComplete(){
+            this.row.serviceId = this.adminId;
+            this.memberInsertModalClose();
+            this.$parent.memberDetail(this.adminId);			
+        },
+        setAuthData() {
+			// 권한 옵션.
+			api.commAuth().then(response => {
+				this.authType = response.data.data.list;
+			});
+		},
+		// formReset(){
+        //     var targetAdminId = this.adminId;
+		// 	Object.assign(this.$data, this.$options.data());
+        //     this.adminId = targetAdminId;
+		// },
+        doPwdValidate(){
+            
+			if(this.isNull(this.userPwd2)){
+				alert("비밀번호 확인을 입력해 주세요.");
+				this.$refs._pwd2.focus();
+				return false;
+			}
+			if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
+				alert("비밀번호가 일치하지 않습니다.");
+				this.$refs._pwd2.focus();
+				return false;
+			}
+			const pwdLen = this.bytes(this.userPwd1);
+			if(!(pwdLen >= 8 && pwdLen <= 16)){
+				alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+				this.$refs._pwd1.focus();
+				return false;
+			}
+			const pEng = /[A-Za-z]/g;	// 영문자 
+			const pNum = /[0-9]/g;	// 숫자 
+			const pSpc = /[!@$%^&*]/g; // 특수문자
+			if(!(pEng.test(this.userPwd1) && pNum.test(this.userPwd1) && pSpc.test(this.userPwd1))) {
+				alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+				this.$refs._pwd1.focus();
+				return false;
+			}
+		
+			return true;
+		},
+		doValidate(){
+            if(this.userTotalCnt >= 100){
+                // 사용자등록제한_최대100개까지
+                this.$refs.validationConfirmPopModal.validationMaxlimitOpen();
+                return false;
+            } 			
+
+            if(this.isNull(this.userId)){
+				alert("ID를 입력해 주세요");
+				this.$refs._userId.focus();
+				return false;	
+			}
+
+            if(this.isNull(this.userPwd1)){
+				alert("비밀번호를 입력해 주세요");
+				this.$refs.__pwd1.focus();
+				return false;	
+			}
+
+            if(this.isNull(this.userPwd2)){
+				alert("비밀번호 확인을 입력해 주세요");
+				this.$refs.__pwd2.focus();
+				return false;	
+			}
+
+            if(!this.isNull(this.userPwd1)){
+				if(!this.doPwdValidate()){
+					return false;
+				}
+			}
+
+            if(this.isNull(this.userNm)){
+				alert("이름을 입력해 주세요");
+				this.$refs._userNm.focus();
+				return false;	
+			}
+
+            if(this.isNull(this.email)){
+				alert('이메일을 입력해주세요.');
+				this.$refs._email.focus();
+				return false;
+			}
+			const email = this.email;
+			if(!this.isNull(email) && !lodash.isEqual(email,'@') && !this.emailCheck(email)){
+				// alert("이메일 형식이 잘못되었습니다. 확인해 주세요");
+                // this.$refs._email.focus();
+                this.$refs.validationConfirmPopModal.validationEmailOpen();
+				
+				return false;
+			}
+
+            if(this.isNull(this.mdn)){
+				alert('휴대폰번호를 입력해주세요.');                
+				this.$refs._phone.focus();
+				return false;
+			}
+			const hp = this.mdn;
+			if(!this.isNull(hp) && !this.isMobile(hp)){
+				//alert("휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요");
+                //this.$refs._phone.focus();
+                this.$refs.validationConfirmPopModal.validationPhonenumberOpen();
+				
+				return false;
+			}
+
+            if(this.isNull(this.stat)){
+				alert('상태를 선택 해주세요.');
+				return false;	
+			}
+
+			return true;
+		},
+        checkPhoneFocus(){
+            //this.mdn = '';
+            this.$refs._phone.focus();
+        },
+        checkEmailFocus(){
+            //this.email = '';
+            this.$refs._email.focus();
+        },
+        checkIdDupFocus(){
+            //this.email = '';
+            this.$refs._userId.focus();
+        },
+        
+	}
+}
+</script>

frontend/src/modules/custMgt/components/MemoTotalPop.vue

@@ -0,0 +1,268 @@
+<template>
+	<!-- <div class="wrap bg-wrap"> -->
+	<div>
+		<div class="dimmed memoTotal" @click="memoTotalModalClose();"></div>
+		<div class="popup-wrap memoTotal">
+			<!-- 수정 확인 -->
+			<div class="popup memoTotal popup_form b-popup">
+				<div class="pop-head">
+					<h3 class="pop-tit">전체 메모보기</h3>
+				</div>
+					<table class="table-c">
+                        <!--
+                        <thead>
+							<tr>
+								<th>내용</th>
+								<th>작성자</th>
+								<th>작성일</th>
+								<th>삭제</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td class="memo">작성한 메모 내용이 노출됩니다. <br/>
+								해당영역은 최대 5줄까지 노출되며 이후 우측 스크롤이 생성됩니다.<br/>
+								작성한 메모 내용이 노출됩니다. <br/>
+								해당영역은 최대 5줄까지 노출되며 이후 우측 스크롤이 생성됩니다.<br/>
+								작성한 메모 내용이 노출됩니다.</td>
+								<td>관리자</td>
+								<td>2022-03-10</td>
+								<td><button type="button" class="button white btn-a">삭제</button></td>
+							</tr>
+						</tbody>
+                        -->	
+
+                        <custom-grid
+						ref="table"
+						:totalItems="'totalItems'"
+						:url="grid.url"
+						:pagePerRows="grid.pagePerRows"
+						:initialRequest="grid.initialRequest"
+						:pagination="grid.pagination"
+						:isCheckbox="grid.isCheckbox"
+						:columns="grid.columns"
+						:noDataStr="grid.noDataStr"
+						:addCls="grid.addCls"
+						:header="grid.headder"        
+					></custom-grid>
+
+					</table>
+				<div class="pop-btn2">
+					
+					<button class="btn-default" @click="memoTotalModalClose();">닫기</button>
+				</div>
+			</div>
+
+        </div>        
+    </div>
+</template>
+
+<script>
+import customGrid from "@/components/CustomGrid";
+import api from '@/service/api';
+import custMgtApi from "../service/custMgtApi.js";
+
+class CustomATagRenderer {
+    constructor(props) {
+        this.props = props;
+        // const el = document.createElement('a');
+        const el = document.createElement('button');
+        el.href = 'javascript:void(0);';
+        //el.className = 'btn_text';
+        el.className = 'button white btn-a';
+        //el.innerText= String(props.colValue)
+        el.innerText= String('삭제')
+        this.el = el;
+    }
+
+    getElement() {
+        return this.el;
+    }
+
+    addEvent(selEl) {
+        selEl.addEventListener("click", () => {
+            const { callback } = this.props["cgrido" + this.props.colName].options;
+            callback(this.props);
+        });
+    }
+}
+
+export default {
+    name: "memoTatalListPop",
+    model: {
+		//prop: 'sendData',
+		//event: 'event-data'
+	},
+	//props: ['sendData'],
+    // props: [],
+    created(){
+        // this.setAuthData();
+        // this.formReset();
+    },
+	data(){
+        return{
+            memorow: {},
+            totalItems: 0,
+            // 테이블 리스트 데이터
+            perPageCnt: 10,
+            userId: '',
+            grid: {
+				url: '/api/v1/bo/custMgt/allMemoList',
+				pagePerRows: 10,
+				pagination: true,           
+				isCheckbox: false,        // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
+				initialRequest: false,
+				addCls: 'box_OFvis',
+
+				columns: [                       
+					{ name: 'memo', header: '내용', align: 'center', cls:'memo'},
+					{ name: 'register', header: '작성자', align: 'center'},
+					{ name: 'regDt', header: '작성일', align: 'center'},
+					{ name: 'delete', header: '삭제', align: 'center', renderer: {
+                        type: CustomATagRenderer
+                            ,options: {
+                                callback: this.deleteMemo,
+                            }
+                        }
+                    },
+                    { name: 'seqNo', header: '내용일련번호', align: 'center', hidden: true},
+				],
+				noDataStr: '검색 결과가 없습니다.',
+				params: {
+                    userId: '',
+                }    
+			},
+		    
+        }
+    },
+    components:{
+        customGrid: customGrid, 
+    },
+    created(){
+
+    },
+    mounted() {
+        let pageMemo = 1;
+            // 페이지 정보 및 검색 조건
+            const getCondition_memo = this.$store.getters['searchcondition/getSearchCondition'];
+            console.log('getCondition_memo : '+getCondition_memo);
+
+	        // store에 저장된 페이지 정보 및 검색 조건을 불러오기
+            let isKeepMemo = false;
+            if (getCondition_memo) {
+            this.grid.pagePerRows = getCondition_memo.perPage;
+            this.grid.params = getCondition_memo.params;      
+            pageMemo = getCondition_memo.page;
+            isKeepMemo = true;
+        }
+    
+    // this.search(isKeep);   
+  },
+	methods :{
+        search: function(isKeep) {
+            console.log('this.perPageCnt:'+this.perPageCnt);
+            console.log(this.grid.params);	  
+            this.$refs.table.search(this.grid.params, isKeep);
+            this.sendStoreData();
+        },
+        sendStoreData: function() {
+            const getP_memo = this.$refs.table.getPagination();
+            this.$store.commit('searchcondition/updateSearchCondition', {
+                page: getP_memo._currentPage,        
+		        perPage: this.perPageCnt,        
+                params: {
+                    userId : this.userId,
+                }
+            });
+
+            const getCondition_memo = this.$store.getters['searchcondition/getSearchCondition'];
+            console.log("getCondition_memo : "+ getCondition_memo.perPage);
+        },
+        //메모전체 모달 Open
+        async memoTotalModalOpen(props){			
+            this.grid.params.userId = props.adminId;
+            this.userId = props.adminId;
+
+            console.log(props.adminId);            
+
+            // 메모 모달팝업 오픈
+            var dimmed = document.getElementsByClassName('memoTotal');
+			for(var i = 0; i < dimmed.length; i++){
+			    dimmed[i].style.display = 'block';
+            }  
+            
+            // 리스트 그리드 오픈
+            let page = 1;
+            // 페이지 정보 및 검색 조건
+            const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+            console.log('getCondition : '+getCondition);
+
+	        // store에 저장된 페이지 정보 및 검색 조건을 불러오기
+            let isKeep = false;
+            if (getCondition) {
+                this.grid.pagePerRows = getCondition.perPage;
+                this.grid.params = getCondition.params;      
+                page = getCondition.page;
+                isKeep = true;
+            }
+            this.search(isKeep);       
+			
+		},
+        //메모전체 모달 Close
+        memoTotalModalClose(){
+            var dimmed = document.getElementsByClassName('memoTotal');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';
+			}
+            //this.formReset();
+        },
+        toComplete(){
+            this.row.serviceId = this.adminId;
+            this.memoTotalModalClose();
+            this.$parent.memberDetail(this.adminId);			
+        },
+        deleteMemo: function(props) {
+            console.log(props);
+            var param = {};
+            param.seqNo = props.seqNo;
+            param.userId = this.userId;
+            this.deleteMemoConfirm(param);                 
+        },
+        async deleteMemoConfirm(target){            
+
+            if(window.confirm('삭제 하시겠습니까?')){
+                try {
+			        const response = await custMgtApi.deleteMemo(target);
+			        const result = response.data;
+			        console.log(result);
+			        if (result != null && result.retCode == "0000") {
+                        // alert('삭제 성공');
+				        // 그리드 reload
+                        // 리스트 그리드 오픈
+                        let page = 1;
+                        // 페이지 정보 및 검색 조건
+                        const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+                        console.log('getCondition : '+getCondition);
+
+	                    // store에 저장된 페이지 정보 및 검색 조건을 불러오기
+                        let isKeep = false;
+                        if (getCondition) {
+                            this.grid.pagePerRows = getCondition.perPage;
+                            this.grid.params = getCondition.params;      
+                            page = getCondition.page;
+                            isKeep = true;
+                        }
+                        this.search(isKeep);
+			        } else {
+                        alert("실패 하였습니다.");
+                    }
+		        } catch (error) {
+			        console.log(error);
+			        alert("실패 하였습니다.");
+		        }
+            }
+        }
+        
+	}
+}
+</script>

frontend/src/modules/custMgt/components/ValidationConfirmPop.vue

@@ -89,7 +89,7 @@
 		</div>
 
 			<!-- 사용자 등록 - 휴대폰번호 형식 체크 -->
-        <div class="dimmed valication-phonenumber" @click="valicationPhonenumberClose();"></div>
+        <div class="dimmed valication-phonenumber" @click="validationPhonenumberClose();"></div>
         <div class="popup-wrap valication-phonenumber">
 			<div class="popup valication-phonenumber">
 				<div class="pop-head">
@@ -99,7 +99,7 @@
 					<p>휴대폰번호를 확인해 주세요.</p>
 				</div>
 				<div class="pop-btn1">
-					<button class="btn-pcolor" @click="valicationPhonenumberClose();">확인</button>
+					<button class="btn-pcolor" @click="validationPhonenumberClose();">확인</button>
 				</div>
 			</div>	
 		</div>
@@ -138,6 +138,23 @@
 			</div>	
 		</div>
 
+        <!-- 사용자 수정(청약고객:sub) 확인 -->
+        <div class="dimmed confirm-update-sub" @click="confirmUpdateSubClose();"></div>
+        <div class="popup-wrap confirm-update-sub">
+			<div class="popup confirm-update-sub">
+				<div class="pop-head">
+					<h3 class="pop-tit">사용자(청약고객) 수정 확인</h3>
+				</div>
+				<div class="pop-cont">
+					<p>변경된 내용을 저장하시겠습니까?</p>
+				</div>
+				<div class="pop-btn2">
+					<button class="btn-pcolor" @click="confirmUpdateSub();">확인</button>
+					<button class="btn-default" @click="confirmUpdateSubClose();">취소</button>
+				</div>
+			</div>	
+		</div>
+
 			<!-- 사용자 ID 생성 파일 업로드 - 성공 -->
         <div class="dimmed success-fileupload" @click="successFileuploadClose();"></div>
         <div class="popup-wrap success-fileupload">
@@ -177,8 +194,6 @@ export default {
 				dimmed[i].style.display = 'block';
 			}
 
-            //this.$parent.
-
         },
         //사용자등록 - 최초등록
         confirmInsert(){
@@ -187,7 +202,7 @@ export default {
 				dimmed[i].style.display = 'none';
 			}
 
-            //this.$parent.
+            this.$parent.memberInsert();
 
         },
         //사용자등록 - 최초등록 Close
@@ -237,7 +252,7 @@ export default {
 				dimmed[i].style.display = 'none';                
 			}
 
-            this.$parent.updateAdminInfo();
+            this.$parent.memberUpdate();
 
         },
         // 사용자 수정 Close
@@ -247,7 +262,31 @@ export default {
 				dimmed[i].style.display = 'none';
 			}
 
-            this.toComplete();
+        },
+        //사용자 수정(청약고객-sub) 확인 Open
+        confirmUpdateSubOpen(){
+            var dimmed = document.getElementsByClassName('confirm-update-sub');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'block';
+			}
+
+        },
+        //사용자 수정(청약고객-sub) 확인
+        confirmUpdateSub(){
+            var dimmed = document.getElementsByClassName('confirm-update-sub');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';                
+			}
+
+            this.$parent.updateAdminInfo();
+
+        },
+        // 사용자 수정(청약고객-sub) Close
+        confirmUpdateSubClose(){
+            var dimmed = document.getElementsByClassName('confirm-update-sub');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';
+			}
 
         },
         // 이메일 형식 체크 Open
@@ -265,6 +304,8 @@ export default {
 				dimmed[i].style.display = 'none';
 			}
 
+            this.$parent.checkEmailFocus();
+
         },
         // 아이디 중복 체크 Open
         validationIdDuplicateOpen(){
@@ -281,6 +322,8 @@ export default {
 				dimmed[i].style.display = 'none';
 			}
 
+            this.$parent.checkIdDupFocus();
+
         },
         // 최대 등록 제한 Open
          validationMaxlimitOpen(){
@@ -297,9 +340,11 @@ export default {
 				dimmed[i].style.display = 'none';
 			}
 
+            this.$parent.toComplete();
+
         },
         // 휴대폰번호 형식 체크 Open
-        valicationPhonenumberOpen(){
+        validationPhonenumberOpen(){
             var dimmed = document.getElementsByClassName('valication-phonenumber');
 			for(var i = 0; i < dimmed.length; i++){
 				dimmed[i].style.display = 'block';
@@ -307,11 +352,12 @@ export default {
 
         },
         // 휴대폰번호 형식 체크 Close
-        valicationPhonenumberClose(){
+        validationPhonenumberClose(){
             var dimmed = document.getElementsByClassName('valication-phonenumber');
 			for(var i = 0; i < dimmed.length; i++){
 				dimmed[i].style.display = 'none';
 			}
+            this.$parent.checkPhoneFocus();
 
         },
         // 사용자 ID 생성 파일 업로드 - 성공 Open