리스크관리 / 유치채널현황 관리 / 채널관리 추가

frontend/src/assets/css/style.css

@@ -539,58 +539,95 @@ header .user_wrap .user_info .logout {
 }
 
 /* input cal + search-box*/
-.w35{width:35%;}
-.contents .table.table_form.m50{margin-bottom: 50px;}
+/*.w35{width:35%;}*/
+/*.contents .table.table_form.m50{margin-bottom: 50px;}*/
 
-.contents .input_box.cal{
-	display: inline-block;
-	width: 27.34%;
+/*.contents .input_box.cal{*/
+/*	display: inline-block;*/
+/*	width: 27.34%;*/
+/*}*/
+
+/*.contents .input_box.cal label {*/
+/*    display: block;*/
+/*}*/
+
+/*.contents .input_box.cal .txt{*/
+/*	display: inline-block;*/
+/*}*/
+
+/*.contents .input_box.cal p{*/
+/*	display: inline-flex;*/
+/*	margin-left: 10px;*/
+/*}*/
+
+/*.contents .input_box.cal input {*/
+/*    display: inline-block;*/
+/*    width: 48%;*/
+/*    float: left;*/
+/*	background: #fff url(../images/icon-calender.png) no-repeat right 6% center;*/
+/*}*/
+
+/*.contents .input_box.cal input {*/
+/*  display: inline-block;*/
+/*  width: 48%;*/
+/*  float: left;*/
+/*  background: #fff url(../images/icon-calender.png) no-repeat right 6% center;*/
+/*}*/
+
+/*.contents .input_box.cal span {*/
+/*  display: inline-block;*/
+/*  width: 48%;*/
+/*  float: left;*/
+/*  background: #fff url(../images/icon-calender.png) no-repeat right 6% center;*/
+/*}*/
+
+.custom_input.icon_date input[type="text"] {
+  width: 52%;
+  float: left;
+  background: #fff url(../images/icon-calender.png) no-repeat right 6% center;
+}
+.custom_input.icon_date input[type="text"]:focus {
+  border-color: #cccccc;
+  background-color: #f6f6f6;
+  color: #898989;
 }
 
-.contents .input_box.cal label {
-    display: block;
-} 
-
-.contents .input_box.cal .txt{
-	display: inline-block;
-}
-
-.contents .input_box.cal p{
-	display: inline-flex;
-	margin-left: 10px;
-}
-
-.contents .input_box.cal input {
-    display: inline-block;
-    width: 48%;
-    float: left;
-	background: #fff url(../images/icon-calender.png) no-repeat right 6% center;
-}
-.contents .input_box.cal input + input{
+.contents .input_box.cal span + input{
 	margin-left: 5%;
 }
 
-.contents .input_box.cal.one{
-	width: 13.67%;
+
+.vdp-datepicker__calendar header {
+  display: block;
+  line-height: 40px;
+  height: 40px;
 }
 
-.contents .input_box.cal.one input{
-	width: 100%;
-}
+/*.contents .input_box.cal input + input{*/
+/*	margin-left: 5%;*/
+/*}*/
 
-.contents .input_box.cal.one + .btn-a{
-	margin-right: 10px;
-}
+/*.contents .input_box.cal.one{*/
+/*	width: 13.67%;*/
+/*}*/
 
-.contents .input_box.cal .term{
-	display: flex;
-    justify-content: space-around;
-    align-items: center;
-}
+/*.contents .input_box.cal.one input{*/
+/*	width: 100%;*/
+/*}*/
 
-.contents .input_box.cal .term input:nth-child(1){
-	margin-right: 4%;
-}
+/*.contents .input_box.cal.one + .btn-a{*/
+/*	margin-right: 10px;*/
+/*}*/
+
+/*.contents .input_box.cal .term{*/
+/*	display: flex;*/
+/*    justify-content: space-around;*/
+/*    align-items: center;*/
+/*}*/
+
+/*.contents .input_box.cal .term input:nth-child(1){*/
+/*	margin-right: 4%;*/
+/*}*/
 
 .contents .input_box .search-box {
   background: #fff url(../images/icon-search.png) no-repeat 6% center/14px auto;	
@@ -1003,12 +1040,12 @@ header .user_wrap .user_info .logout {
   position: relative; font-size: 14px;
 }
 
-.contents .table table td a {
+.contents .table table td a, .popup.popup_form table td a {
   text-decoration: underline;
   color: #333333;
 }
 
-.contents .table table td a:hover {
+.contents .table table td a:hover, .popup.popup_form table td a:hover {
   color: #eb008b;
 }
 
@@ -1156,6 +1193,15 @@ header .user_wrap .user_info .logout {
   margin-left: 8px;
 }
 
+.contents .table.table_form .check.system .label_group{
+	height: 30px;
+}
+
+.contents .table.table_form .check.system .label_group label{
+	padding-left: 30px;
+	margin:0;
+}
+
 .popup .pop-cont-detail {
   font-size: 16px;
   color: #666666;
@@ -1163,6 +1209,7 @@ header .user_wrap .user_info .logout {
   background-color: #f5f6f8;
   padding: 15px;
   margin-top: 13px;
+  width: 100%;
 }
 
 .popup .pop-cont-detail li {
@@ -1190,8 +1237,9 @@ header .user_wrap .user_info .logout {
   width: 525px;
 }
 
-.popup.popup_form .info .count {
+.popup.popup_form .info {
   margin-bottom: 12px;
+  padding: 0;
 }
 
 .popup.popup_form .pop-head {
@@ -1232,6 +1280,10 @@ header .user_wrap .user_info .logout {
   height: 50px;
 }
 
+.popup.popup_form .table-c tr:hover{
+	background-color: #fafaff;
+}
+
 .popup.popup_form table tr:last-child {
   border-bottom: none;
 }
@@ -1348,15 +1400,7 @@ header .user_wrap .user_info .logout {
   border: none;
   min-width: 80px;
   margin-left: 10px;
-}
-
-.popup .button.grey {
-  background-color: #35354f;
-  font-size: 16px;
-}
-
-.popup .button.grey:hover {
-  background-color: #0a0b24;
+  font-weight: 500;
 }
 
 /*customer popup*/
@@ -1448,6 +1492,7 @@ header .user_wrap .user_info .logout {
     align-items: center;	
 	justify-content: normal;
 	font-size: 16px;
+	padding: 0;
 }
 
 .popup.popup_form .popup-btn2.bulk button:nth-child(1)::before{
@@ -1511,7 +1556,7 @@ header .user_wrap .user_info .logout {
 	margin: 0 0 0 5px;
 }
 
-.popup.popup_form.register{
+.popup.popup_form.w700{
 	width:700px;
 }
 
@@ -1548,10 +1593,10 @@ header .user_wrap .user_info .logout {
 	background: url(../images/icon-add-b.png) no-repeat center center;
 }
 
-.popup.popup_form.register .input_add div:nth-child(2){
-	width: 89%;
-    padding-top: 5px;
-}
+/*.popup.popup_form.register .input_add div:nth-child(2){*/
+/*	width: 89%;*/
+/*    padding-top: 5px;*/
+/*}*/
 
 .popup .button.white{
 	background-color: #fff;
@@ -1684,6 +1729,11 @@ header .user_wrap .user_info .logout {
 .popup.popup_form table .input_add input{
 	width: 85%;
 }
+
+.popup .input_search input + .button.btn-p2color{
+	width:25% !important;
+}
+
 .essential{
 	display: flex;
     align-items: flex-start;

frontend/src/components/CustomGrid.vue

@@ -619,9 +619,9 @@ export default {
       for (var i = first; i <= last; i++) {
         let actCls = '';                
         if (i == this.currentIndex) {          
-          actCls = 'v:class="active"';
+          actCls = 'class="active"';
         }
-        pData += '<li><a href="javascript:void(0);" @click="movePage(' + i + ')" ' + actCls + '>' + i + '</a></li>';
+        pData += '<li ' + actCls + '><a href="javascript:void(0);" @click="movePage(' + i + ')" >' + i + '</a></li>';
       }
       pData += '</ul>'
       pData += '<div class="arrow-btn">'

frontend/src/components/LoginPopup.vue

@@ -1,30 +1,7 @@
 <template>
-  
-	
-	
 
 <!-- 버튼 -->
-<div class="wrap bg-wrap">
-
-
-<!-- <div class="popup-btn-wrap">		
-			<button class="trigger" onclick="ModalOpen('modal01');">로그인실패: 확인</button>
-			<button class="trigger" onclick="ModalOpen('modal02');">로그인실패: 5회</button>
-			<button class="trigger" onclick="ModalOpen('modal03');">로그인실패: 상태</button>
-			<button class="trigger" onclick="ModalOpen('modal04');">보안 알림</button>
-			<button class="trigger" onclick="ModalOpen('modal05');">중복 로그인</button>
-			<button class="trigger" onclick="ModalOpen('modal06');">휴대폰번호 확인</button>
-			<button class="trigger" onclick="ModalOpen('modal07');">인증번호: 발송</button>
-			<button class="trigger" onclick="ModalOpen('modal08');">인증번호: 입력</button>
-			<button class="trigger" onclick="ModalOpen('modal09');">인증실패: 인증번호</button>
-			<button class="trigger" onclick="ModalOpen('modal10');">인증실패: 시간초과</button>
-			<button class="trigger" onclick="ModalOpen('modal11');">인증실패: 5회</button>
-			<button class="trigger" onclick="ModalOpen('modal12');">비밀번호 초기화 문자 발송</button>
-			<button class="trigger" onclick="ModalOpen('modal13');">아이디 오류</button>
-			<button class="trigger" onclick="ModalOpen('modal14');">비밀번호 오류</button>
-			<button class="trigger" onclick="ModalOpen('modal15');">비밀번호 패턴 오류</button>
-			<button class="trigger" onclick="ModalOpen('modal16');">비밀번호 정상 변경</button>
-		</div> -->
+<div>
 
 <!--	s: 팝업	-->
 		<div class="dimmed" @click="ModalClose();"></div>
@@ -43,7 +20,8 @@
 					<button class="btn-pcolor" @click="ModalClose();">확인</button>
 				</div>
 			</div>
-			
+
+
 			<!-- 로그인실패: 5회 -->
 			<div class="popup modal02">
 				<div class="pop-head">
@@ -300,9 +278,7 @@ export default {
 </script>
 
 <style>
-
-		.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
-		.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
-		.popup-btn-wrap button:hover {background: #000; color: #fff;}
-
+.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
+.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
+.popup-btn-wrap button:hover {background: #000; color: #fff;}
 </style>

frontend/src/components/NavBar.vue

@@ -84,7 +84,7 @@ export default {
       });
     },    
     clickMenu(link){
-       
+
        this.$router.push({
             path: link
         }); 

frontend/src/components/modal/commonModal.vue

@@ -0,0 +1,128 @@
+<template>
+	<!-- <div class="wrap bg-wrap"> -->
+	<div>
+
+    <div class="dimmed modal01" @click="alertModalCancel();"></div>
+    <div class="popup-wrap modal01">
+      <!-- 로그인실패: 확인 -->
+      <div class="popup modal01">
+        <div class="pop-head">
+          <h3 class="pop-tit">{{title}}</h3>
+        </div>
+        <div class="pop-cont">
+          <p>{{ msg1 }}</p>
+          <p v-if="msg2 !== ''">{{ msg2 }}</p>
+          <p v-if="msg3 !== ''">{{ msg3 }}</p>
+          <p v-if="msg4 !== ''">{{ msg4 }}</p>
+        </div>
+        <div class="popup-btn1">
+          <button class="btn-pcolor" @click="alertModalClose();">확인</button>
+        </div>
+      </div>
+    </div>
+
+		<div class="dimmed confirm" @click="confirmModalCancel();"></div>
+		<div class="popup-wrap confirm">
+			<!-- 수정 확인 -->
+			<div class="popup confirm">
+				<div class="pop-head">
+					<h3 class="pop-tit">{{title}}</h3>
+				</div>
+				<div class="pop-cont">
+          <p>{{ msg1 }}</p>
+          <p v-if="msg2 !== ''">{{ msg2 }}</p>
+          <p v-if="msg3 !== ''">{{ msg3 }}</p>
+          <p v-if="msg4 !== ''">{{ msg4 }}</p>
+				</div>
+				<div class="pop-btn2">
+					<button class="btn-pcolor" @click="confirmModalClose();">확인</button>
+					<button class="btn-default" @click="confirmModalCancel();">취소</button>
+				</div>
+			</div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+    name: "confirm",
+	data(){
+        return{
+		      row:{},
+          title:'',
+          msg1: '',
+          msg2: '',
+          msg3: '',
+          msg4: '',
+        }
+    },
+	methods :{
+    alertModalOpen(props){
+      console.log(props)
+      var dimmed = document.getElementsByClassName('modal01');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'block';
+      }
+      this.title = props.title;
+      this.msg1 = props.msg1;
+      this.msg2 = props.msg2;
+      this.msg3 = props.msg3;
+      this.msg4 = props.msg4;
+    },
+    alertModalClose(){
+      var dimmed = document.getElementsByClassName('modal01');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'none';
+      }
+    },
+    alertModalCancel(){
+      var dimmed = document.getElementsByClassName('modal01');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'none';
+      }
+    },
+        // 모달 오픈
+		confirmModalOpen(props){
+			var dimmed = document.getElementsByClassName('confirm');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'block';
+			}
+
+      this.title = props.title;
+      this.msg1 = props.msg1;
+      this.msg2 = props.msg2;
+      this.msg3 = props.msg3;
+      this.msg4 = props.msg4;
+		},
+		// 모달 끄기(ok)
+		confirmModalClose(){
+			var dimmed = document.getElementsByClassName('confirm');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';
+			}
+            
+      this.row.result = true;
+      // 부모 함수 호출.
+      this.$parent.confirmCalbackFnc(this.row);
+		},
+        // 모달 끄기(취소)
+		confirmModalCancel(){
+			var dimmed = document.getElementsByClassName('confirm');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';
+			}
+
+      this.row.result = false;
+      // 부모 함수 호출.
+      this.$parent.confirmCalbackFnc(this.row);
+		},		
+	}
+}
+</script>
+
+<style>
+    .popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
+    .popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
+    .popup-btn-wrap button:hover {background: #000; color: #fff;}
+</style>

frontend/src/modules/attractMgt/router/index.js

@@ -1,10 +1,19 @@
 import ChannelList from '../views/ChannelList'
+import ChannelDetail from '../views/ChannelDetail'
 
 export default [
   {
-    path: '/attractMgt/channelList',    
-    component: ChannelList,    
-    name: 'channelList',     
+    path: '/attractMgt/channelList',
+    component: ChannelList,
+    name: 'channelList',
+    props: true,
+    meta: { public: true }
+  },
+  {
+    path: '/attractMgt/channelDetail',
+    component: ChannelDetail,
+    name: 'channelDetail',
+    props: true,
     meta: { public: true }
   }
 ]

frontend/src/modules/attractMgt/service/channelMgtApi.js

@@ -0,0 +1,41 @@
+import httpClient from '@/common/http-client';
+import channelExcelHeader from "@/modules/attractMgt/service/mock/channelExcelHeader.json";
+
+
+// 공통 코드.
+const getCommCode = (params) => {
+    return httpClient.post('/api/v1/bo/comm/getCode', params, { withCredentials: false });
+}
+
+// 유치채널현황 엑셀다운로드 목록 조회
+const channelListExcel = (params) => {
+    return httpClient.post('/api/v1/bo/attractMgt/channelListExcel', params);
+}
+
+// channelDetail
+const channelDetail = (params) => {
+    return httpClient.post('/api/v1/bo/attractMgt/channelDetail', params, { withCredentials: false});
+}
+
+const getExcelHeader = category => {
+    // 엑셀에 출력할 Header 정보를 Mockup 데이터로 관리한다.
+    return new Promise(function(resolve, reject) {
+        let header = [];
+        switch (category) {
+            case 'CHANNEL':
+                header = channelExcelHeader.header;
+                break;
+            default:
+                header = '';
+                break;
+        }
+        resolve(header);
+    });
+};
+
+export default {
+    getCommCode,
+    getExcelHeader,
+    channelListExcel,
+    channelDetail,
+}

frontend/src/modules/attractMgt/service/mock/channelExcelHeader.json

@@ -0,0 +1,46 @@
+{
+  "header": [
+    [
+      {
+        "key": "no",
+        "name": "NO"
+      },
+      {
+        "key": "subsDt",
+        "name": "가입일"
+      },
+      {
+        "key": "norgNm",
+        "name": "유치업체"
+      },
+      {
+        "key": "loginId",
+        "name": "마당ID(이름)"
+      },
+      {
+        "key": "custNm",
+        "name": "고객사명"
+      },
+      {
+        "key": "bizrno",
+        "name": "사업자등록번호"
+      },
+      {
+        "key": "userNm",
+        "name": "이름"
+      },
+      {
+        "key": "subsSttusCd",
+        "name": "상태"
+      },
+      {
+        "key": "custTyCd",
+        "name": "구분"
+      },
+      {
+        "key": "sndCnt",
+        "name": "전체발송건수"
+      }
+    ]
+  ]
+}

frontend/src/modules/attractMgt/views/ChannelDetail.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">유치현황관리</h3>
+        <p class="breadcrumb">유치현황관리 &gt; 유치고객 상세정보</p>
+      </div>
+      <div class="info">
+        <div class="title">상세 정보</div>
+      </div>
+      <div class="table table_form m50">
+        <form autocomplete="off">
+          <table>
+            <colgroup>
+              <col style="width:140px">
+              <col style="width:auto">
+              <col style="width:auto">
+              <col style="width:140px">
+              <col style="width:auto">
+              <col style="width:auto">
+            </colgroup>
+            <tbody>
+            <tr class="tr_input w75">
+              <th>가입일</th>
+              <td colspan="2"><input type="text" disabled value="2022-03-05"></td>
+              <th>상태</th>
+              <td colspan="2"><input type="text" disabled value="사용"></td>
+            </tr>
+            <tr class="tr_input w75">
+              <th>고객사</th>
+              <td colspan="2"><input type="text" disabled value="홍길동"></td>
+              <th>요금제</th>
+              <td colspan="2"><input type="text" disabled value="요금제1"></td>
+            </tr>
+            <tr class="tr_input w75">
+              <th>대표자</th>
+              <td colspan="2"><input type="text" disabled value="홍길동"></td>
+              <th>사용자 구분</th>
+              <td colspan="2"><input type="text" disabled value="법인사업자"></td>
+            </tr>
+            <tr class="tr_input">
+              <th>사업자등록번호</th>
+              <td colspan="2">
+                <div class="input-bnumber">
+                  <input type="text" disabled="" value="110">
+                  <input type="text" disabled="" value="16">
+                  <input type="text" disabled="" value="123456">
+                </div>
+              </td>
+              <th>법인등록번호</th>
+              <td colspan="2">
+                <div class="input-double">
+                  <input type="text" disabled="" value="123456">
+                  <input type="text" disabled="" value="1234567">
+                </div>
+              </td>
+            </tr>
+            <tr class="tr_input">
+              <th>사업장 주소</th>
+              <td colspan="5">
+                <div class="input-address">
+                  <input type="text" disabled="" value="12345">
+                  <input type="text" disabled="" value="서울 마포구 월드컵북로 416">
+                  <input type="text" disabled="" value="유플러스 상암사옥">
+                </div>
+              </td>
+            </tr>
+            <tr class="tr_input">
+              <th>유치자명</th>
+              <td colspan="2">
+                <div class="input-double">
+                  <input type="text" disabled value="Uplus02">
+                  <input type="text" disabled value="김철수">
+                </div>
+              </td>
+              <th>관리자명</th>
+              <td colspan="2">
+                <div class="input-double">
+                  <input type="text" disabled value="Uplus02">
+                  <input type="text" disabled value="김철수">
+                  <button type="button" class="button grey btn-a">변경</button>
+                </div>
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </form>
+      </div>
+      <div class="info">
+        <div class="count">발송건수
+          <p>( 최근 3년 사용 전월까지 확인 가능하며, 청구금액은 유큐브에서 확인 가능합니다. )</p>
+        </div>
+        <div class="button_group">
+          <button type="button" class="button blue download">엑셀 다운로드</button>
+        </div>
+
+      </div>
+      <div class="table calculate">
+        <table>
+          <colgroup>
+            <col width="16%">
+            <col width="16%">
+            <col width="16%">
+            <col width="16%">
+            <col width="16%">
+            <col width="20%">
+          </colgroup>
+          <thead>
+          <tr>
+            <th rowspan="2">날짜</th>
+            <th colspan="5">채널별 발송 건수</th>
+          </tr>
+          <tr class="total">
+            <th>전체</th>
+            <th>SMS</th>
+            <th>LMS</th>
+            <th>MMS</th>
+            <th>알림톡</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td>합계</td>
+            <td>360,000</td>
+            <td>360,000</td>
+            <td>360,000</td>
+            <td>360,000</td>
+            <td>1,440,000</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="pop-btn2">
+        <button class="btn-pcolor" type="button">저장</button>
+        <button class="btn-default" type="button">취소</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '@/service/api';
+
+export default {
+	name: "subsDetail",
+	data(){
+        return{
+			row: {},
+
+			props: {},
+        }
+    },
+	props: {
+		// serviceId: {
+		// 	type: String,
+		// 	default: "",
+		// },
+	},
+	components: {
+	},
+	created(){
+		this.$store.commit("login/isLogin", true);
+    	this.$store.commit("login/isAuthChk", true);
+    }, 
+	methods :{
+
+	}
+}
+
+
+
+</script>

frontend/src/modules/attractMgt/views/ChannelList.vue

@@ -1,107 +1,392 @@
 <template>
-	<div class="contents">
-		<div class="contents_wrap">
-			<div class="top_wrap">
-				<h3 class="title">유치채널 목록조회</h3>
-				<p class="breadcrumb">시스템관리 &gt; 권한 관리</p>
-			</div>
-			<div class="info">
-				<div class="count">총 <span>4</span>건</div>
-				<div class="button_group">
-					<button type="button" class="button blue add" onclick="location.href='system_right_add.html';">권한 추가</button>
-				</div>
-			</div>
-			<div class="table">
-				<table>
-					<colgroup>
-						<col width="10%"/>
-						<col width="20%"/>
-						<col width="20%"/>
-						<col width="15%"/>
-						<col width="20%"/>
-						<col width="15%"/>
-					</colgroup>
-					<thead>
-						<tr>
-							<th>NO</th>
-							<th>코드</th>
-							<th>권한명</th>
-							<th>상태</th>
-							<th>등록일</th>
-							<th></th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td>4</td>
-							<td>Admin_01</td>
-							<td>슈퍼관리자</td>
-							<td>사용</td>
-							<td>2022-03-10</td>
-							<td class="two_btn_group">
-								<button type="button" class="button grey" onclick="location.href='system_right_modify.html';">수정</button>
-								<button type="button" class="button white delete">삭제</button>
-							</td>
-						</tr>
-						<tr>
-							<td>3</td>
-							<td>Admin_01</td>
-							<td>슈퍼관리자</td>
-							<td>사용</td>
-							<td>2022-03-10</td>
-							<td class="two_btn_group">
-								<button type="button" class="button grey">수정</button>
-								<button type="button" class="button white delete">삭제</button>
-							</td>
-						</tr>
-						<tr>
-							<td>2</td>
-							<td>Admin_01</td>
-							<td>슈퍼관리자</td>
-							<td>사용</td>
-							<td>2022-03-10</td>
-							<td class="two_btn_group">
-								<button type="button" class="button grey">수정</button>
-								<button type="button" class="button white delete">삭제</button>
-							</td>
-						</tr>
-						<tr>
-							<td>1</td>
-							<td>Admin_01</td>
-							<td>슈퍼관리자</td>
-							<td>사용</td>
-							<td>2022-03-10</td>
-							<td class="two_btn_group">
-								<button type="button" class="button grey">수정</button>
-								<button type="button" class="button white delete">삭제</button>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">유치채널현황</h3>
+        <p class="breadcrumb">유치현황관리 &gt; 유치채널현황</p>
+      </div>
+      <form autocomplete="off" class="search_form">
+        <div class="search_wrap">
+          <div class="group">
+            <div class="input_box cal">
+              <label for="right" class="label">조회기간</label>
+              <div class="term">
+                <span class="custom_input icon_date">
+                  <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      :disabled-dates="disabledSDate"
+                      v-model="startDate"
+                      @selected="selectedStartDate(0)"
+                      @closed="closeDate('start')"
+                  ></vuejs-datepicker>
+                </span>~
+                <span class="custom_input icon_date">
+                  <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      :disabled-dates="disabledEDate"
+                      v-model="endDate"
+                      @selected="selectedEndDate(0)"
+                      @closed="closeDate('end')"
+                  ></vuejs-datepicker>
+                </span>
+              </div>
+            </div>
+            <div class="select_box id">
+              <label for="subsSttusCd" class="label">상태</label>
+              <select name="subsSttusCd" id="subsSttusCd" v-model="grid.params.subsSttusCd">
+                <option value="" selected>전체</option>
+                <option v-for="(option, i) in subsSttusCdList" v-bind:value="option.code" v-bind:key="i">
+                  {{ option.codeNm }}
+                </option>
+              </select>
+            </div>
+            <div class="select_box">
+              <label for="custTyCd" class="label">구분</label>
+              <select name="custTyCd" id="custTyCd" v-model="grid.params.custTyCd">
+                <option value="" selected>전체</option>
+                <option v-for="(option, i) in custTyCdList" v-bind:value="option.code" v-bind:key="i">
+                  {{ option.codeNm }}
+                </option>
+              </select>
+            </div>
+            <div class="input_box">
+              <label for="right" class="label">유치자 마당ID</label>
+              <input class="" type="text" id="" placeholder="검색어 입력" v-model="grid.params.loginId"/>
+            </div>
+            <div class="input_box">
+              <label for="right" class="label">유치업체</label>
+              <input class="" type="text" id="" placeholder="검색어 입력" v-model="grid.params.norgNm"/>
+            </div>
+          </div>
+          <div class="group">
+            <div class="select_box">
+              <label for="right" class="label">상세검색</label>
+              <select name="" id="" v-model="grid.params.searchType">
+                <option value="01">고객사명</option>
+                <option value="02">이름</option>
+                <option value="03">사업자등록번호(생년월일)</option>
+              </select>
+            </div>
+            <div class="input_box">
+              <input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.searchText"/>
+            </div>
+            <button type="button" class="button grey" @click="search">조회</button>
+          </div>
+        </div>
+      </form>
+      <div class="info">
+        <div class="count">총 <span>{{ totalItems }}</span>건
+          <div class="select_box NumberSe">
+            <select name="" id="" v-model="perPageCnt" @change="changePerPage()">
+              <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>
+            </select>
+          </div>
+        </div>
+        <div class="button_group">
+          <button type="button" class="button blue download" @click="excelDown();">엑셀 다운로드</button>
+        </div>
+
+      </div>
+
+      <div class="table">
+        <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>
+      </div>
+
+      <common-modal ref="commmonModal"></common-modal>
+
+    </div>
+
+
+
+
+  </div>
 </template>
 
 <script>
+import commonModal from "@/components/modal/commonModal";
+import customGrid from '@/components/CustomGrid';
+import moment from 'moment';
+import api from '@/service/api.js';
+import channelMgtApi from "../service/channelMgtApi.js";
+import xlsx from '@/common/excel';
+
+class CustomATagRenderer {
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText= String(props.colValue)
+    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: 'channelList',
   data() {
     return {
-      
+
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
+      sDateDiv: 'day',
+      startDate: new Date(),
+      endDate: new Date(),
+
+      row:{},
+      pageType:'CHANNEL',
+      subsSttusCdList:[],
+      custTyCdList:[],
+      openPicker: false,
+      // 테이블 리스트 데이터
+      perPageCnt: 50,
+      options: [
+        { text: '20', value: 20},
+        { text: '50', value: 50},
+        { text: '100', value: 100}
+      ],
+      totalItems: 0,
+      grid: {
+        url: '/api/v1/bo/attractMgt/channelList',
+        pagePerRows: 50,
+        pagination: true,
+        isCheckbox: false,        // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
+        initialRequest: false,
+        addCls: 'box_OFvis',
+
+        columns: [
+          { name: 'no', header: 'No', align: 'center', width: '6%'},
+          { name: 'subsDt', header: '가입일', align: 'center', width: '11%'},
+          { name: 'norgNm', header: '유치업체', align: 'center', width: '10%'},
+          { name: 'loginId', header: '마당ID(이름)', align: 'center', width: '10%', renderer: {
+              type: CustomATagRenderer
+              , options: {
+                callback: this.channelDetail,
+              }
+            }
+          },
+          { name: 'custNm', header: '고객사명', align: 'center', width: '10%'},
+          { name: 'bizrno', header: '사업자등록번호(생년월일)', align: 'center', width: '12%'},
+          { name: 'userNm', header: '이름', align: 'center', width: '10%'},
+          { name: 'subsSttusCd', header: '상태', align: 'center', width: '10%'},
+          { name: 'custTyCd', header: '구분', align: 'center', width: '10%'},
+          { name: 'sndCnt', header: '전체발송건수', align: 'center', width: '11%'}
+        ],
+        noDataStr: '검색 결과가 없습니다.',
+        params: {
+          searchType: '',
+          searchText: '',
+          subsStDt: '',
+          subsEdDt: '',
+          subsSttusCd: '',
+          loginId: '',
+          norgNm: ''
+        },
+        excelHeader: []
+      }
     };
-  },  
+  },
   components: {
-    
+    customGrid: customGrid,
+    commonModal,
+    vuejsDatepicker,
+  },
+  created(){
+    this.$store.commit("login/isLogin", true);
+    this.$store.commit("login/isAuthChk", true);
+    this.setCodeData();
+    this.getExcelHeader();
+    this.setPeriodDay(0);
   },
   destroyed() {
-      
+
   },
   mounted() {
-    
+    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);
   },
   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();
+    },
+    changePerPage: function(){ 	// 페이지당 조회할 개수
+      this.grid.pagePerRows = this.perPageCnt;
+      this.search(true);
+    },
+    sendStoreData: function() {
+      const getP = this.$refs.table.getPagination();
+      console.log("==========getP : " + getP._currentPage);
+      this.$store.commit('searchcondition/updateSearchCondition', {
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
+        params: this.grid.params
+      });
+
+      const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+      console.log("getCondition : "+ getCondition.perPage);
+    },
+    async getExcelDataDown() {
+      try {
+        let response;
+        const params = {
+          subsStDt: this.grid.params.subsStDt,
+          subsEdDt: this.grid.params.subsEdDt,
+          searchType1: this.grid.params.searchType,
+          searchText1: this.grid.params.searchText,
+          loginId: this.grid.params.loginId,
+          norgNm: this.grid.params.norgNm
+        };
+
+        response = await channelMgtApi.channelListExcel(params);
+
+        const result = response.data;
+        if (result != null && result.retCode == "0000") {
+          return result.data;
+        }else{
+          return false;
+        }
+      } catch (err) {
+        return false;
+      }
+    }, // end of getExcelDataDown
+    async excelDown() {
+
+      if (this.$refs.table.getData().length <= 0) {
+        this.row.title = '유치채녈현황';
+        this.row.msg1 = '조회된 데이터가 없습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+        return false;
+      }
+
+      let today = moment().format('YYYYMMDDHHmmss');
+      const saveFileName = `유치채널현황_${today}.xlsx`;
+
+      const data = await this.getExcelDataDown();
+      let options = {
+        header: this.excelHeader,
+        dataOrder: 'header'
+      };
+      // console.log(data);
+      xlsx.export(data.list, saveFileName, options).then(() => {});
+    },
+    getExcelHeader() {
+      // 헤더를 mockup으로 관리한다.
+      channelMgtApi.getExcelHeader(this.pageType).then(res => {
+        this.excelHeader = res;
+      });
+    },
+    channelDetail(props){
+      //TODO 전달값 셋팅 필요.
+      this.$router.push({ name: 'channelDetail', params: this.row });
+    },
+    setCodeData() {
+      // 상태 옵션 셋팅.
+      api.commCode({'grpCd' : 'SUBS_STTUS_CD'}).then(response => {
+        this.subsSttusCdList = response.data.data.list;
+      });
+
+      api.commCode({'grpCd' : 'CUST_TY_CD'}).then(response => {
+        this.custTyCdList = response.data.data.list;
+      });
+    },
+    setPeriodDay(day) {
+      this.periodDay = day;
+      this.endDate = new Date();
+      this.startDate = moment(this.endDate)
+          .subtract(day, 'day')
+          .toDate();
+
+      this.closeDate('start');
+      this.closeDate('end');
+    },
+
+    selectedStartDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+      if (this.startDate > this.endDate) {
+        this.startDate = this.endDate;
+      }
+      console.log(this.disabledSDate)
+      // this.grid.params.startDt = day
+    },
+    selectedEndDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+    },
+    closeDate(type) {
+      if (type != undefined && type != null) {
+        if (type == 'start') {
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: this.endDate };
+        } else if (type == 'end') {
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: new Date() };
+        }
+      }
+    },
+    customFormatter: function(date) {
+      if (this.sDateDiv == 'month') {
+        return moment(date).format('YYYY-MM');
+      } else if (this.sDateDiv == 'year') {
+        return moment(date).format('YYYY');
+      } else {
+        return moment(date).format('YYYY-MM-DD');
+      }
+    },
+  },
+  beforeRouteLeave(to, from, next) {
+
+    const getP = this.$refs.table.getPagination();
+    console.log("==========getP : " + getP._currentPage);
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      page: getP._currentPage,
+      perPage: this.perPageCnt,
+      params: this.grid.params
+    });
+    // 라우트 하기전 실행
+    next();
+  },
 };
-</script>
+</script>

frontend/src/modules/calculate/views/CalcList.vue

@@ -1,151 +1,318 @@
 <template>
- 
-		<div class="contents">
-			<div class="contents_wrap">
-				<div class="top_wrap">
-					<h3 class="title">정산이력목록조회</h3>
-					<p class="breadcrumb">시스템관리 &gt; 관리자/유치채널 관리</p>
-				</div>
-				<form autocomplete="off" class="search_form">
-					<div class="search_wrap">
-						<div class="select_box">
-							<label for="right" class="label">권한</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="대리점">대리점</option>
-								<option value="운영자">운영자</option>
-							</select>
-						</div>
-						<div class="select_box">
-							<label for="right" class="label">상태</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="사용">사용</option>
-								<option value="중지">중지</option>
-							</select>
-						</div>
-						<div class="input_box id">
-							<label for="id1" class="label">ID</label>
-                            <input type="text" id="id1" placeholder="검색어 입력"/>
-						</div>
-						<div class="input_box">
-							<label for="name" class="label">이름(대리점명)</label>
-                            <input type="text" id="name" placeholder="검색어 입력"/>
-						</div>
-						<button type="button" class="button grey">조회</button>
-					</div>
-				</form>
-				<div class="info">
-					<div class="count">총 <span>100</span>건</div>
-					<div class="button_group">
-						<button type="button" class="button blue admin">관리자 등록</button>
-						<button type="button" class="button blue channel">유지채널 등록</button>
-						<button type="button" class="button white delete">삭제</button>
-					</div>
-				</div>
-				<!-- <div class="table">
-					<table>
-						<colgroup>
-                            <col width="5%"/>
-                            <col width="15%"/>
-                            <col width="15%"/>
-                            <col width="20%"/>
-                            <col width="20%"/>
-                            <col width="5%"/>
-                            <col width="20%"/>
-                        </colgroup>
-						<thead>
-							<tr>
-								<th><input type="checkbox" id="admin_check1"><label for="admin_check1"></label></th>
-								<th>NO</th>
-								<th>권한</th>
-								<th>이름(대리점명)</th>
-								<th>ID</th>
-								<th>상태</th>
-								<th>등록일</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td><input type="checkbox" checked id="admin_check2"><label for="admin_check2"></label></td>
-								<td>10</td>
-								<td>대리점</td>
-								<td>유플러스</td>
-								<td><a href="javascript:void(0)">uplus1</a></td>
-								<td>사용</td>
-								<td>2022-03-10</td>
-							</tr>							
-						</tbody>
-					</table>
-				</div> -->
-            <div class="table">    
-                    <custom-grid
-                        ref="table"
-                        :totalItems="'totalItems'"
-                        :url="testList.url"
-                        :perPage="testList.perPage"
-                        :initialRequest="testList.initialRequest"
-                        :pagination="testList.pagination"
-                        :isCheckbox="testList.isCheckbox"
-                        :columns="testList.columns"
-                        :noDataStr="testList.noDataStr"
-                        :addCls="testList.addCls"
-                        :header="testList.header"        
-                    ></custom-grid>
+
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">정산이력</h3>
+        <p class="breadcrumb">정산 &gt; 정산이력</p>
+      </div>
+      <form autocomplete="off" class="search_form">
+        <div class="search_wrap">
+          <div class="group">
+            <div class="input_box cal">
+              <label for="right" class="label txt">조회기간</label>
+              <p>전월 최대 3개월까지 조회 가능합니다.</p>
+              <div class="term">
+                <span class="custom_input icon_date">
+                  <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      :disabled-dates="disabledSDate"
+                      :minimumView="sDateDiv"
+                      :maximumView="sDateDiv"
+                      v-model="startDate"
+                      @selected="selectedStartDate(0)"
+                      @closed="closeDate('start')"
+                  ></vuejs-datepicker>
+                </span>
+                <span class="hypen">~</span>
+                <span class="custom_input icon_date">
+                  <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      :disabled-dates="disabledEDate"
+                      :minimumView="sDateDiv"
+                      :maximumView="sDateDiv"
+                      v-model="endDate"
+                      @selected="selectedEndDate(0)"
+                      @closed="closeDate('end')"
+                  ></vuejs-datepicker>
+                </span>
+              </div>
             </div>
-			</div>
-		</div>
+          </div>
+          <div class="group">
+            <div class="input_box">
+              <label for="right" class="label">고객사명</label>
+              <input class="search-box" type="text" id="" placeholder="검색어 입력"/>
+            </div>
+            <div class="input_box">
+              <label for="right" class="label">사업자번호 (생년월일)</label>
+              <input class="search-box" type="text" id="" placeholder="검색어 입력"/>
+            </div>
+            <button type="button" class="button grey">조회</button>
+          </div>
+        </div>
+      </form>
+      <div class="info">
+        <div class="count">총 <span>100</span>건
+          <div class="select_box NumberSe">
+            <select name="" id="">
+              <option value="20">20</option>
+              <option value="50" selected>50</option>
+              <option value="100">100</option>
+            </select>
+          </div>
+        </div>
+        <div class="button_group">
+          <button type="button" class="button blue download">엑셀 다운로드</button>
+        </div>
+
+      </div>
+      <div class="table calculate scroll">
+        <table>
+          <thead>
+          <tr>
+            <th rowspan="2">날짜</th>
+            <th rowspan="2">고객사명<br>(이름)</th>
+            <th rowspan="2">사업자번호<br>(생년월일)</th>
+            <th rowspan="2">요금제</th>
+            <th rowspan="2">시작금액</th>
+            <th rowspan="2">사용금액</th>
+            <th rowspan="2">이월금액</th>
+            <th rowspan="2">종량금액</th>
+            <th rowspan="2">소멸금액</th>
+            <th rowspan="2">청구금액</th>
+            <th colspan="5">채널별 발송 건수</th>
+          </tr>
+          <tr class="total">
+            <th>전체</th>
+            <th>SMS</th>
+            <th>LMS</th>
+            <th>MMS</th>
+            <th>알림톡</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td>2022-02</td>
+            <td>유플러스01</td>
+            <td>229-81-39938</td>
+            <td>요금제1<br>(50,000)</td>
+            <td class="price">50,000</td>
+            <td class="price">50,000</td>
+            <td>-</td>
+            <td>-</td>
+            <td>-</td>
+            <td class="price">100,000</td>
+            <td>84,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+          </tr>
+          <tr>
+            <td>2022-02</td>
+            <td>홍길동</td>
+            <td>850505</td>
+            <td>요금제1<br>(50,000)</td>
+            <td class="price">100,000</td>
+            <td class="price">150,000</td>
+            <td>-</td>
+            <td class="price">50,000</td>
+            <td>-</td>
+            <td class="price">150,000</td>
+            <td>84,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+          </tr>
+          <tr>
+            <td>2022-02</td>
+            <td>유플러스01</td>
+            <td>229-81-39938</td>
+            <td>요금제1<br>(50,000)</td>
+            <td class="price">50,000</td>
+            <td class="price">50,000</td>
+            <td>-</td>
+            <td>-</td>
+            <td>-</td>
+            <td class="price">100,000</td>
+            <td>84,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+          </tr>
+          <tr>
+            <td>2022-02</td>
+            <td>유플러스01</td>
+            <td>229-81-39938</td>
+            <td>요금제1<br>(50,000)</td>
+            <td class="price">50,000</td>
+            <td class="price">50,000</td>
+            <td>-</td>
+            <td>-</td>
+            <td>-</td>
+            <td class="price">100,000</td>
+            <td>84,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+          </tr>
+          <tr>
+            <td>2022-02</td>
+            <td>유플러스01</td>
+            <td>229-81-39938</td>
+            <td>요금제1<br>(50,000)</td>
+            <td class="price">50,000</td>
+            <td class="price">50,000</td>
+            <td>-</td>
+            <td>-</td>
+            <td>-</td>
+            <td class="price">100,000</td>
+            <td>84,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+          </tr>
+          <tr>
+            <td>2022-02</td>
+            <td>홍길동</td>
+            <td>850505</td>
+            <td>요금제1<br>(50,000)</td>
+            <td class="price">100,000</td>
+            <td class="price">150,000</td>
+            <td>-</td>
+            <td class="price">50,000</td>
+            <td>-</td>
+            <td class="price">150,000</td>
+            <td>84,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+          </tr>
+          <tr>
+            <td>2022-02</td>
+            <td>홍길동</td>
+            <td>850505</td>
+            <td>요금제1<br>(50,000)</td>
+            <td class="price">100,000</td>
+            <td class="price">150,000</td>
+            <td>-</td>
+            <td class="price">50,000</td>
+            <td>-</td>
+            <td class="price">150,000</td>
+            <td>84,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+          </tr>
+          <tr>
+            <td>2022-02</td>
+            <td>홍길동</td>
+            <td>850505</td>
+            <td>요금제1<br>(50,000)</td>
+            <td class="price">100,000</td>
+            <td class="price">150,000</td>
+            <td>-</td>
+            <td class="price">50,000</td>
+            <td>-</td>
+            <td class="price">150,000</td>
+            <td>84,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+          </tr>
+          <tr>
+            <td>2022-02</td>
+            <td>홍길동</td>
+            <td>850505</td>
+            <td>요금제1<br>(50,000)</td>
+            <td class="price">100,000</td>
+            <td class="price">150,000</td>
+            <td>-</td>
+            <td class="price">50,000</td>
+            <td>-</td>
+            <td class="price">150,000</td>
+            <td>84,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+          </tr>
+          <tr>
+            <td>2022-02</td>
+            <td>홍길동</td>
+            <td>850505</td>
+            <td>요금제1<br>(50,000)</td>
+            <td class="price">100,000</td>
+            <td class="price">150,000</td>
+            <td>-</td>
+            <td class="price">50,000</td>
+            <td>-</td>
+            <td class="price">150,000</td>
+            <td>84,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+            <td>21,000,000</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="pagination">
+        <div class="arrow-btn">
+          <button class="btn-first" onClick=""></button>
+          <button class="btn-prev" onClick=""></button>
+        </div>
+        <ul>
+          <li class="active"><a href="javascript:void(0)">1</a></li>
+          <li><a href="javascript:void(0)">2</a></li>
+          <li><a href="javascript:void(0)">3</a></li>
+          <li><a href="javascript:void(0)">4</a></li>
+          <li><a href="javascript:void(0)">5</a></li>
+          <li><a href="javascript:void(0)">999</a></li>
+        </ul>
+        <div class="arrow-btn">
+          <button class="btn-next" onClick=""></button>
+          <button class="btn-last" onClick=""></button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
+import moment from "moment";
+import lodash from 'lodash';
 //import api from '../service/api';
 export default {
   name: 'calcList',
   data() {
     return {
-      testList: {
-        url: '/api/v1/bo/sysMgt/adminList',
-        perPage: 20,
-        pagination: true,
-        isCheckbox: true,
-        initialRequest: false,
-        addCls: 'box_OFvis',
-
-
-        header: [
-          [
-            { header: 'NO', childNames: [] },
-            { header: '권한', childNames: [] },
-            { header: '이름(대리점명)', childNames: [] },
-            { header: 'ID', childNames: [] },
-            { header: '상태', childNames: [] },
-            { header: '등록일', childNames: [] }
-          ]
-        ],
-
-        columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: 60 },
-          { name: 'auth', header: '권한', align: 'left', width: 160 },
-          { name: 'name', header: '이름(대리점명)', align: 'center', width: 130},
-          { name: 'adminId', header: 'ID', align: 'center', width: 130},
-          { name: 'adminStat', header: '상태', align: 'center', width: 130},      
-          { name: 'regDt', header: '등록일', width: 90, cls: 'td_line' }
-        ],
-        noDataStr: '검색 결과가 없습니다.',        
-        // params: {
-        //   apprResult: '',
-        //   searchType: '',
-        //   searchText: '',
-        //   startDate: '',
-        //   endDate: ''
-        // },
-        excelHeader: []
-      }    
-    };
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
+      sDateDiv: 'month',
+      startDate: new Date(),
+      endDate: new Date(),
+    }
   },  
   components: {
-    customGrid: customGrid
+    customGrid: customGrid,
+    vuejsDatepicker,
+  },
+  created(){
+    this.$store.commit("login/isLogin", true);
+    this.$store.commit("login/isAuthChk", true);
+    this.setPeriodDay(0);
   },
   destroyed() {
       
@@ -160,6 +327,53 @@ export default {
       console.log(this.testList.params);
       this.$refs.table.search(this.testList.params, isKeep);
     },
+    setPeriodDay(day) {
+      this.periodDay = day;
+      this.endDate = new Date();
+      this.startDate = moment(this.endDate)
+          .subtract(day, 'day')
+          .toDate();
+
+      this.closeDate('start');
+      this.closeDate('end');
+    },
+
+    selectedStartDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+      if (this.startDate > this.endDate) {
+        this.startDate = this.endDate;
+      }
+      // console.log(this.disabledSDate)
+      // this.grid.params.startDt = day
+    },
+    selectedEndDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+    },
+    closeDate(type) {
+      if (type != undefined && type != null) {
+        if (type == 'start') {
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: this.endDate };
+        } else if (type == 'end') {
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: new Date() };
+        }
+      }
+    },
+    customFormatter: function(date) {
+        console.log(this.sDateDiv)
+      if (this.sDateDiv == 'month') {
+        return moment(date).format('YYYY-MM');
+      } else if (this.sDateDiv == 'year') {
+        return moment(date).format('YYYY');
+      } else {
+        return moment(date).format('YYYY-MM-DD');
+      }
+    },
   }
 };
 </script>

frontend/src/modules/channelMgt/views/TmpltList.vue

@@ -41,9 +41,9 @@
                 </select>
             </div>
           </div>
-					<div class="button_group">
-						<button type="button" class="button blue admin" @click="excelDown();">엑셀다운로드</button>
-					</div>
+<!--					<div class="button_group">-->
+<!--						<button type="button" class="button blue admin" @click="excelDown();">엑셀다운로드</button>-->
+<!--					</div>-->
 				</div>
             <div class="table">
               <custom-grid
@@ -59,6 +59,9 @@
                 :addCls="grid.addCls"
                 :header="grid.headder"        
               ></custom-grid>
+
+              <common-modal ref="commmonModal"></common-modal>
+
             </div>
 			</div>
 		</div>
@@ -69,6 +72,7 @@ import customGrid from '@/components/CustomGrid';
 import channelMgtApi from '../service/channelMgtApi';
 import xlsx from '@/common/excel';
 import moment from 'moment';
+import commonModal from "@/components/modal/commonModal";
 
 class customBRegNo {
     constructor(props) {
@@ -217,7 +221,8 @@ export default {
   },  
   components: {
     customGrid: customGrid,
-    channelMgtApi
+    channelMgtApi,
+    commonModal,
   },
     created(){            
     this.$store.commit("login/isLogin", true);
@@ -297,7 +302,9 @@ export default {
     }, // end of getExcelDataDown
     async excelDown() {
       if (this.$refs.table.getData().length <= 0) {
-        alert('조회된 데이터가 없습니다.');
+        this.row.title = '채널관리';
+        this.row.msg1 = '조회된 데이터가 없습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
         return false;
       }
 

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

@@ -1,6 +1,6 @@
 <template>
-<!--<div>-->
-<!--  <div class="dimmed modal26" @click="ModalClose();"></div>-->
+<div>
+  <div class="dimmed modal26" @click="ModalClose();"></div>
 	<div class="popup-wrap modal26">
         <div class="popup modal26">
 				<div class="pop-head">
@@ -22,16 +22,17 @@
 		</div>
 
         <search-id-popup ref="searchIdPopModal"> </search-id-popup>
-
+      <common-modal ref="commmonModal"></common-modal>
 
     </div>
-<!--</div>-->
+</div>
 </template>
 
 <script>
 import api from '@/service/api';
 import custMgtApi from "../service/custMgtApi.js";
 import SearchIdPopup from '../components/SearchIdPopup.vue';
+import commonModal from "@/components/modal/commonModal";
 
 export default {
     name: "adminNmPop",
@@ -56,7 +57,8 @@ export default {
         }
     },
     components: {
-        SearchIdPopup,
+      SearchIdPopup,
+      commonModal,
     },
     model: {
 		//prop: 'sendData',
@@ -69,11 +71,13 @@ export default {
     },
     methods : {
         // 마당ID 조회
-        async searchMadangId(){
-            if(!this.madangId){
-				alert('마당ID를 입력해주세요');
-				this.$refs.madangId.focus();
-				return false;
+      async searchMadangId(){
+        if(!this.madangId){
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '마당ID를 입력해주세요.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+          this.$refs.madangId.focus();
+          return false;
 			}
 			var params = {
         		"adminId": this.madangId

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

@@ -40,6 +40,9 @@
 					<button class="btn-pcolor download" @click="excelDown();">엑셀 다운로드</button>
 				</div>
 			</div>
+
+      <common-modal ref="commmonModal"></common-modal>
+
         </div>
     </div>
 </template>
@@ -49,6 +52,7 @@
 import custMgtApi from "../service/custMgtApi.js";
 import xlsx from '@/common/excel';
 import moment from 'moment';
+import commonModal from "@/components/modal/commonModal";
 
 export default {
 	name: "carryOverListPop",
@@ -60,6 +64,9 @@ export default {
             pageType: 'CARRY',
         }
     },
+  components: {
+    commonModal,
+  },
 	created(){
         this.getExcelHeader();
     }, 
@@ -78,7 +85,9 @@ export default {
                     this.totalCnt = result.data.totalCnt;
 				}
 			} catch(err) {
-				alert("실패 하였습니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			}
 			var dimmed = document.getElementsByClassName('modal25');
 			for(var i = 0; i < dimmed.length; i++){
@@ -98,8 +107,11 @@ export default {
         },
         excelDown() {
             if (this.list.length <= 0) {
-                alert('조회된 데이터가 없습니다.');
-                return false;
+              this.row.title = '청약고객관리';
+              this.row.msg1 = '조회된 데이터가 없습니다.';
+              this.$refs.commmonModal.alertModalOpen(this.row);
+
+              return false;
             }
 
             let today = moment().format('YYYYMMDDHHmmss');

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

@@ -33,6 +33,7 @@
 					<button class="btn-default" @click="excelPopClose">취소</button>
 				</div>
 			</div>
+      <common-modal ref="commmonModal"></common-modal>
 		</div>
 	</div>
 </template>
@@ -44,6 +45,7 @@ import { utils_mixin, chkPattern2 } from '../service/mixins';
 import xlsx from '@/common/excel';
 import moment from 'moment';
 import XLSX from 'xlsx';
+import commonModal from "@/components/modal/commonModal";
 
 export default {
 	name: "memberBulkRegPop",
@@ -61,7 +63,9 @@ export default {
 			totalItems: 0,
         }
     },
-	
+  components: {
+    commonModal,
+  },
 	created(){ 
 		this.getExcelHeader();
     }, 
@@ -96,11 +100,15 @@ export default {
 					const response = await custMgtApi.insertTestId(this.row);
 					const result = response.data;
 					if (result != null && result.retCode == "0000") {
-						alert('저장 하였습니다.');
+            this.row.title = '청약고객관리';
+            this.row.msg1 = '저장 하였습니다.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
 						this.toComplete();
 					}
                 } catch(err) {
-                	alert("실패 하였습니다.");
+                  this.row.title = '청약고객관리';
+                  this.row.msg1 = '실패 하였습니다.';
+                  this.$refs.commmonModal.alertModalOpen(this.row);
                 }
             }
         },
@@ -145,10 +153,12 @@ export default {
 			let tmpResult = {};
 			const vm = this;
 			reader.onerror = (e) => {
-                alert('파일을 읽는 동안 에러가 발생 했습니다.');
-            }
-            reader.onloadend = (e) => {
-            }
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '파일을 읽는 동안 에러가 발생 했습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+      }
+      reader.onloadend = (e) => {
+      }
 
 
 			reader.onload = (e) => {
@@ -163,7 +173,9 @@ export default {
 					const totalCnt = Number(this.totalItems) + rowObj.length;
 
 					if(totalCnt > limitCnt){
-						alert('100건이상은 등록되지 않습니다.');
+            this.row.title = '청약고객관리';
+            this.row.msg1 = '100건이상은 등록되지 않습니다.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
 						return false;
 					}
 				
@@ -270,7 +282,9 @@ export default {
 				}
 			} catch (error) {
 				console.log(error);
-				alert("실패 하였습니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			}
 
 			// 오류건수.

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

@@ -58,6 +58,7 @@
 			</div>
 
             <validation-confirm-pop ref="validationConfirmPopModal"> </validation-confirm-pop>
+            <common-modal ref="commmonModal"></common-modal>
 
         </div>        
     </div>
@@ -69,6 +70,7 @@ import custMgtApi from "../service/custMgtApi.js";
 import { utils_mixin, chkPattern2 } from '../service/mixins';
 import ValidationConfirmPop from '../components/ValidationConfirmPop.vue';
 import lodash from "lodash";
+import commonModal from "@/components/modal/commonModal";
 
 export default {
     name: "memberModifyPop",
@@ -79,7 +81,8 @@ export default {
 		}
 	},
     components: {
-        ValidationConfirmPop,
+      ValidationConfirmPop,
+      commonModal,
     },
     model: {
 		//prop: 'sendData',
@@ -91,23 +94,23 @@ export default {
         // this.formReset();
     },
 	data(){
-        return{
-		    row:{},
+    return{
+      row:{},
 			madangId:'',
 			name:'',
 			mdn:'',
 			email:'',
 			auth:'',
 			stat: "",
-            userId: "",
-            adminId: "",
+      userId: "",
+      adminId: "",
 			userNm:"",
-            userPwd1:"",
-            userPwd2:"",
+      userPwd1:"",
+      userPwd2:"",
 			code:"",
-            userStat:"",
-        }
-    },
+      userStat:"",
+    }
+  },
 	methods :{
         //사용자ID 수정 모달 Open
         async memberUpdateModalOpen(props){
@@ -124,10 +127,14 @@ export default {
 					this.mdn = result.data.mdn;
 					this.userStat = result.data.userStat;
 				} else {
-                    alert("실패 하였습니다.");
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
                 }
 			} catch(err) {
-				alert("실패 하였습니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			}
             // 모달 오픈
 			var dimmed = document.getElementsByClassName('memberUpdate');
@@ -155,14 +162,20 @@ export default {
 				const result = response.data;
 				console.log(result);
 				if (result != null && result.retCode == "0000") {
-                    alert('수정 완료하였습니다.');
-                    this.toComplete();
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '수정 완료하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+          this.toComplete();
 
 				} else {
-                    alert("실패 하였습니다.");
-                }
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+        }
 			} catch(err) {
-				alert("실패 하였습니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			} 
         },
         //사용자ID 수정 모달 Close
@@ -179,18 +192,24 @@ export default {
         },
         doPwdValidate(){
 			if(this.isNull(this.userPwd2)){
-				alert("비밀번호 확인을 입력해 주세요.");
+				this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호 확인을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
-				alert("비밀번호가 일치하지 않습니다.");
+				this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호가 일치하지 않습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			const pwdLen = this.bytes(this.userPwd1);
 			if(!(pwdLen >= 8 && pwdLen <= 16)){
-				alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return false;
 			}
@@ -198,7 +217,9 @@ export default {
 			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.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return false;
 			}
@@ -212,14 +233,18 @@ export default {
 				}
 			}
 
-            if(this.isNull(this.userNm)){
-				alert("이름을 입력해 주세요");
+      if(this.isNull(this.userNm)){
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '이름을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._userNm.focus();
 				return false;	
 			}
 
-            if(this.isNull(this.email)){
-				alert('이메일을 입력해주세요.');
+      if(this.isNull(this.email)){
+				this.row.title = '청약고객관리';
+        this.row.msg1 = '이메일을 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._email.focus();
 				return false;
 			}
@@ -232,8 +257,10 @@ export default {
 				return false;
 			}
 
-            if(this.isNull(this.mdn)){
-				alert('휴대폰번호를 입력해주세요.');                
+      if(this.isNull(this.mdn)){
+				this.row.title = '청약고객관리';
+        this.row.msg1 = '휴대폰번호를 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._phone.focus();
 				return false;
 			}
@@ -241,26 +268,28 @@ export default {
 			if(!this.isNull(hp) && !this.isMobile(hp)){
 				//alert("휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요");
                 //this.$refs._phone.focus();
-                this.$refs.validationConfirmPopModal.validationPhonenumberOpen();
+        this.$refs.validationConfirmPopModal.validationPhonenumberOpen();
 				
 				return false;
 			}
 
-            if(this.isNull(this.userStat)){
-				alert('상태를 선택 해주세요.');
+      if(this.isNull(this.userStat)){
+				this.row.title = '청약고객관리';
+        this.row.msg1 = '상태를 선택 해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				return false;	
 			}
 
 			return true;
 		},
-        checkPhoneFocus(){
-            //this.mdn = '';
-            this.$refs._phone.focus();
-        },
-        checkEmailFocus(){
-            //this.email = '';
-            this.$refs._email.focus();
-        },
+    checkPhoneFocus(){
+        //this.mdn = '';
+        this.$refs._phone.focus();
+    },
+    checkEmailFocus(){
+        //this.email = '';
+        this.$refs._email.focus();
+    },
         
 	}
 }

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

@@ -58,7 +58,7 @@
 			</div>
 
             <validation-confirm-pop ref="validationConfirmPopModal"> </validation-confirm-pop>
-
+            <common-modal ref="commmonModal"></common-modal>
         </div>        
     </div>
 </template>
@@ -69,6 +69,7 @@ import custMgtApi from "../service/custMgtApi.js";
 import { utils_mixin, chkPattern2 } from '../service/mixins';
 import ValidationConfirmPop from '../components/ValidationConfirmPop.vue';
 import lodash from "lodash";
+import commonModal from "@/components/modal/commonModal";
 
 export default {
     name: "memberRegPop",
@@ -79,7 +80,8 @@ export default {
 		}
 	},
     components: {
-        ValidationConfirmPop,
+      ValidationConfirmPop,
+      commonModal,
     },
     model: {
 		//prop: 'sendData',
@@ -94,20 +96,20 @@ export default {
         return{
 		    row:{},
 			madangId:'',
-            adminId:'',
+      adminId:'',
 			name:'',
 			mdn:'',
 			email:'',
 			auth:'',
 			stat: "",
-            userId:"",
+      userId:"",
 			userNm:"",
-            userPwd1:"",
-            userPwd2:"",
+      userPwd1:"",
+      userPwd2:"",
 			code:"",
-            userTotalCnt:0,
-        }
-    },
+      userTotalCnt:0,
+    }
+  },
 	methods :{
         //사용자ID 생성 모달 Open
         async memberInsertModalOpen(props){			
@@ -141,16 +143,22 @@ export default {
 				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();
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '사용자 생성 완료하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+          this.toComplete();
+        } else if(result != null && result.retCode == "4018"){
+            // 이미 사용중인 ID
+          this.$refs.validationConfirmPopModal.validationIdDuplicateOpen();
 				} else {
-                    alert("실패 하였습니다.");
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
                 }
 			} catch(err) {
-				alert("실패 하였습니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			} 
         },
         //사용자ID 생성 모달 Close
@@ -180,18 +188,24 @@ export default {
         doPwdValidate(){
             
 			if(this.isNull(this.userPwd2)){
-				alert("비밀번호 확인을 입력해 주세요.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호 확인을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
-				alert("비밀번호가 일치하지 않습니다.");
+				this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호가 일치하지 않습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			const pwdLen = this.bytes(this.userPwd1);
 			if(!(pwdLen >= 8 && pwdLen <= 16)){
-				alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+				this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return false;
 			}
@@ -199,7 +213,9 @@ export default {
 			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.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return false;
 			}
@@ -207,89 +223,101 @@ export default {
 			return true;
 		},
 		doValidate(){
-            if(this.userTotalCnt >= 100){
-                // 사용자등록제한_최대100개까지
-                this.$refs.validationConfirmPopModal.validationMaxlimitOpen();
-                return false;
-            } 			
+      if(this.userTotalCnt >= 100){
+          // 사용자등록제한_최대100개까지
+          this.$refs.validationConfirmPopModal.validationMaxlimitOpen();
+          return false;
+      }
 
-            if(this.isNull(this.userId)){
-				alert("ID를 입력해 주세요");
+      if(this.isNull(this.userId)){
+        this.row.title = '청약고객관리';
+        this.row.msg1 = 'ID를 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._userId.focus();
 				return false;	
 			}
 
-            if(this.isNull(this.userPwd1)){
-				alert("비밀번호를 입력해 주세요");
+      if(this.isNull(this.userPwd1)){
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호를 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs.__pwd1.focus();
 				return false;	
 			}
 
-            if(this.isNull(this.userPwd2)){
-				alert("비밀번호 확인을 입력해 주세요");
+      if(this.isNull(this.userPwd2)){
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호 확인을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs.__pwd2.focus();
 				return false;	
 			}
 
-            if(!this.isNull(this.userPwd1)){
+      if(!this.isNull(this.userPwd1)){
 				if(!this.doPwdValidate()){
 					return false;
 				}
 			}
 
-            if(this.isNull(this.userNm)){
-				alert("이름을 입력해 주세요");
+      if(this.isNull(this.userNm)){
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '이름을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._userNm.focus();
 				return false;	
 			}
 
-            if(this.isNull(this.email)){
-				alert('이메일을 입력해주세요.');
+      if(this.isNull(this.email)){
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '이메일을 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				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();
+
+        this.$refs.validationConfirmPopModal.validationEmailOpen();
 				
 				return false;
 			}
 
-            if(this.isNull(this.mdn)){
-				alert('휴대폰번호를 입력해주세요.');                
+      if(this.isNull(this.mdn)){
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '휴대폰번호를 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				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();
+
+        this.$refs.validationConfirmPopModal.validationPhonenumberOpen();
 				
 				return false;
 			}
 
-            if(this.isNull(this.stat)){
-				alert('상태를 선택 해주세요.');
+      if(this.isNull(this.stat)){
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '상태를 선택 해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				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();
-        },
+    checkPhoneFocus(){
+        //this.mdn = '';
+        this.$refs._phone.focus();
+    },
+    checkEmailFocus(){
+        //this.email = '';
+        this.$refs._email.focus();
+    },
+    checkIdDupFocus(){
+        //this.email = '';
+        this.$refs._userId.focus();
+    },
         
 	}
 }

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

@@ -51,6 +51,8 @@
 					
 					<button class="btn-default" @click="memoTotalModalClose();">닫기</button>
 				</div>
+
+        <common-modal ref="commmonModal"></common-modal>
 			</div>
 
         </div>        
@@ -61,6 +63,7 @@
 import customGrid from "@/components/CustomGrid";
 import api from '@/service/api';
 import custMgtApi from "../service/custMgtApi.js";
+import commonModal from "@/components/modal/commonModal";
 
 class CustomATagRenderer {
     constructor(props) {
@@ -95,18 +98,14 @@ export default {
 	},
 	//props: ['sendData'],
     // props: [],
-    created(){
-        // this.setAuthData();
-        // this.formReset();
-    },
 	data(){
-        return{
-            memorow: {},
-            totalItems: 0,
-            // 테이블 리스트 데이터
-            perPageCnt: 10,
-            userId: '',
-            grid: {
+    return{
+        memorow: {},
+        totalItems: 0,
+        // 테이블 리스트 데이터
+        perPageCnt: 10,
+        userId: '',
+        grid: {
 				url: '/api/v1/bo/custMgt/allMemoList',
 				pagePerRows: 10,
 				pagination: true,           
@@ -136,7 +135,8 @@ export default {
         }
     },
     components:{
-        customGrid: customGrid, 
+        customGrid: customGrid,
+      commonModal,
     },
     created(){
 
@@ -239,26 +239,30 @@ export default {
                         // alert('삭제 성공');
 				        // 그리드 reload
                         // 리스트 그리드 오픈
-                        let page = 1;
-                        // 페이지 정보 및 검색 조건
-                        const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
-                        console.log('getCondition : '+getCondition);
+                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);
+              // 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("실패 하였습니다.");
-                    }
+                this.memorow.title = '청약고객관리';
+                this.memorow.msg1 = '실패 하였습니다.';
+                this.$refs.commmonModal.alertModalOpen(this.memorow);
+              }
 		        } catch (error) {
 			        console.log(error);
-			        alert("실패 하였습니다.");
+              this.memorow.title = '청약고객관리';
+              this.memorow.msg1 = '실패 하였습니다.';
+              this.$refs.commmonModal.alertModalOpen(this.memorow);
 		        }
             }
         }

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

@@ -51,6 +51,7 @@
 					<button class="btn-default" @click="ModalClose();">취소</button>
 					<button class="btn-pcolor" @click="doInsert">저장</button>
 				</div>
+        <common-modal ref="commmonModal"></common-modal>
 			</div>
 		</div>
 	</div>
@@ -61,6 +62,8 @@ import api from '@/service/api';
 import custMgtApi from "../service/custMgtApi.js";
 import { utils_mixin, chkPattern2 } from '../service/mixins';
 import lodash from "lodash";
+import commonModal from "@/components/modal/commonModal";
+import ValidationConfirmPop from "@/modules/custMgt/components/ValidationConfirmPop";
 
 export default {
 	name: "subsRegPop",
@@ -89,29 +92,40 @@ export default {
 		event: 'event-data'
 	},
 	props: ['sendData'],
+  components: {
+    commonModal,
+  },
 	created(){            
 		this.formReset();
     }, 
 	methods :{
 		doPwdValidate(){
 			if(this.isNull(this.userPwd1)){
-				alert("비밀번호를 입력해 주세요.");
+				this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호를 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return false;
 			}
 			if(this.isNull(this.userPwd2)){
-				alert("비밀번호 확인을 입력해 주세요.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호 확인을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
-				alert("비밀번호가 일치하지 않습니다.");
+				this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호가 일치하지 않습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			const pwdLen = this.bytes(this.userPwd1);
 			if(!(pwdLen >= 8 && pwdLen <= 16)){
-				alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+				this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return false;
 			}
@@ -119,7 +133,9 @@ export default {
 			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.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return;
 			}
@@ -128,7 +144,9 @@ export default {
 		},
 		doValidate(){
 			if(this.isNull(this.userId)){
-				alert("아이디를 입력해 주세요.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '아이디를 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._userId.focus();
 				return false;
 			}
@@ -136,34 +154,46 @@ export default {
 				return false;
 			}
 			if(this.isNull(this.userNm)){
-				alert("이름을 입력해 주세요");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '이름을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._userNm.focus();
 				return false;
 			}
 			if(this.isNull(this.mdn)){
-				alert('휴대폰번호를 입력해주세요.');
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '휴대폰번호를 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._phone.focus();
 				return false;
 			}
 			const hp = this.mdn;
 			if(!this.isNull(hp) && !this.isMobile(hp)){
-				alert("휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._phone.focus();
 				return false;
 			}
 			if(this.isNull(this.email)){
-				alert('이메일을 입력해주세요.');
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '이메일을 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._email.focus();
 				return false;
 			}
 			const email = this.email;
 			if(!this.isNull(email) && !lodash.isEqual(email,'@') && !this.emailCheck(email)){
-				alert("이메일 형식이 잘못되었습니다. 확인해 주세요");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '이메일 형식이 잘못되었습니다. 확인해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._email.focus();
 				return false;
 			}
 			if(this.isNull(this.userStat)){
-				alert('상태를 선택 해주세요.');
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '상태를 선택 해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				// this.$refs._auth.focus();
 				return false;
 			}
@@ -200,19 +230,23 @@ export default {
 			this.ModalClose();
         },
 		async doInsert(){
-            if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
-                try {
+      if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
+        try {
 					const response = await custMgtApi.insertTestId(this.row);
 					const result = response.data;
 					if (result != null && result.retCode == "0000") {
-						alert('저장 하였습니다.');
+            this.row.title = '청약고객관리';
+            this.row.msg1 = '저장 하였습니다.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
 						this.toComplete();
 					}
-                } catch(err) {
-                	alert("실패 하였습니다.");
-                }
-            }
-        },
+        } catch(err) {
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+        }
+      }
+    },
 		formReset(){
 			//this.$refs.adminRegForm.reset();
 		},

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

@@ -51,6 +51,9 @@
 					<button class="btn-default" @click="ModalClose();">취소</button>
 					<button class="btn-pcolor" @click="doInsert">저장</button>
 				</div>
+
+        <common-modal ref="commmonModal"></common-modal>
+
 			</div>
 		</div>
 	</div>
@@ -61,6 +64,8 @@ import api from '@/service/api';
 import custMgtApi from "../service/custMgtApi.js";
 import { utils_mixin, chkPattern2 } from '../service/mixins';
 import lodash from "lodash";
+import commonModal from "@/components/modal/commonModal";
+import ValidationConfirmPop from "@/modules/custMgt/components/ValidationConfirmPop";
 
 export default {
 	name: "subsRegPop",
@@ -71,7 +76,7 @@ export default {
 		}
 	},
 	data(){
-        return{
+    return{
 			row: {},
 			userId:'',
 			name:'',
@@ -79,39 +84,50 @@ export default {
 			email:'',
 			userStat: '',
 			userNm:"",
-            userPwd1:"",
-            userPwd2:"",
+      userPwd1:"",
+      userPwd2:"",
 			code:"",
-        }
-    },
+    }
+  },
 	model: {
 		prop: 'sendData',
 		event: 'event-data'
 	},
 	props: ['sendData'],
+  components: {
+    commonModal,
+  },
 	created(){            
 		this.formReset();
     }, 
 	methods :{
 		doPwdValidate(){
 			if(this.isNull(this.userPwd1)){
-				alert("비밀번호를 입력해 주세요.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호를 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return false;
 			}
 			if(this.isNull(this.userPwd2)){
-				alert("비밀번호 확인을 입력해 주세요.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호 확인을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
-				alert("비밀번호가 일치하지 않습니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호가 일치하지 않습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			const pwdLen = this.bytes(this.userPwd1);
 			if(!(pwdLen >= 8 && pwdLen <= 16)){
-				alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return false;
 			}
@@ -119,7 +135,9 @@ export default {
 			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.row.title = '청약고객관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return;
 			}
@@ -128,7 +146,9 @@ export default {
 		},
 		doValidate(){
 			if(this.isNull(this.userId)){
-				alert("아이디를 입력해 주세요.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '아이디를 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._userId.focus();
 				return false;
 			}
@@ -136,34 +156,46 @@ export default {
 				return false;
 			}
 			if(this.isNull(this.userNm)){
-				alert("이름을 입력해 주세요");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '이름을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._userNm.focus();
 				return false;
 			}
 			if(this.isNull(this.mdn)){
-				alert('휴대폰번호를 입력해주세요.');
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '휴대폰번호를 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._phone.focus();
 				return false;
 			}
 			const hp = this.mdn;
 			if(!this.isNull(hp) && !this.isMobile(hp)){
-				alert("휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._phone.focus();
 				return false;
 			}
 			if(this.isNull(this.email)){
-				alert('이메일을 입력해주세요.');
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '이메일을 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._email.focus();
 				return false;
 			}
 			const email = this.email;
 			if(!this.isNull(email) && !lodash.isEqual(email,'@') && !this.emailCheck(email)){
-				alert("이메일 형식이 잘못되었습니다. 확인해 주세요");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '이메일 형식이 잘못되었습니다. 확인해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._email.focus();
 				return false;
 			}
 			if(this.isNull(this.userStat)){
-				alert('상태를 선택 해주세요.');
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '상태를 선택 해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				// this.$refs._auth.focus();
 				return false;
 			}
@@ -200,19 +232,23 @@ export default {
 			this.ModalClose();
         },
 		async doInsert(){
-            if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
-                try {
+      if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
+        try {
 					const response = await custMgtApi.insertTestId(this.row);
 					const result = response.data;
 					if (result != null && result.retCode == "0000") {
-						alert('저장 하였습니다.');
+            this.row.title = '청약고객관리';
+            this.row.msg1 = '저장 하였습니다.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
 						this.toComplete();
 					}
-                } catch(err) {
-                	alert("실패 하였습니다.");
-                }
-            }
-        },
+        } catch(err) {
+            this.row.title = '청약고객관리';
+            this.row.msg1 = '실패 하였습니다.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
+        }
+      }
+    },
 		formReset(){
 			//this.$refs.adminRegForm.reset();
 		},

frontend/src/modules/custMgt/views/MemberAdminDetail.vue

@@ -145,6 +145,7 @@
 			<member-reg-pop ref="memberRegPop"> </member-reg-pop>
 			<member-modify-pop ref="memberModifyPop"> </member-modify-pop>
 			<memo-total-pop ref="memoTatalListPop"> </memo-total-pop>
+      <common-modal ref="commmonModal"></common-modal>
 
 		</div>
 	</div>
@@ -157,6 +158,7 @@ import MemberBulkRegPop from '../components/MemberBulkRegPop';
 import MemberRegPop from '../components/MemberRegPop';
 import MemberModifyPop from '../components/MemberModifyPop';
 import MemoTotalPop from '../components/MemoTotalPop';
+import commonModal from "@/components/modal/commonModal";
 
 export default {
     name: 'memberAdminDetail',
@@ -196,10 +198,11 @@ export default {
 		},
 	},
   components: {
-	MemberBulkRegPop,
-	MemberRegPop,
-	MemberModifyPop,
-	MemoTotalPop,
+    MemberBulkRegPop,
+    MemberRegPop,
+    MemberModifyPop,
+    MemoTotalPop,
+    commonModal,
   },
   created(){            
 	this.memberDetail(this.$route.params.serviceId);
@@ -240,6 +243,13 @@ export default {
     },
   },
   methods: {
+	valAlert(props){
+			//alert("호출됨!");
+			this.$refs.commmonModal.alertModalOpen(props);
+		},
+	valConfirm(props){
+		this.$refs.commmonModal.confirmModalOpen(props);
+	},
     async memberDetail(serviceId){
 		this.row.userId = serviceId;
 		try {
@@ -267,7 +277,9 @@ export default {
 			}
 		} catch (error) {
 			console.log(error);
-			alert("실패 하였습니다.");
+      this.row.title = '청약고객관리';
+      this.row.msg1 = '실패 하였습니다.';
+      this.$refs.commmonModal.alertModalOpen(this.row);
 		}
 
 	},
@@ -286,17 +298,24 @@ export default {
 			const result = response.data;
 			if (result != null && result.retCode == "0000") {
 
-				alert("저장 완료하였습니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '저장 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				
 			}else if(result != null && result.retCode == "4019"){
-				alert("발송한도금액이 정액한도금액보다 작습니다.");
-
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '발송한도금액이 정액한도금액보다 작습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			}else {
-				alert("실패 하였습니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			}
 		} catch (error) {
 			console.log(error);
-			alert("실패 하였습니다.");
+      this.row.title = '청약고객관리';
+      this.row.msg1 = '실패 하였습니다.';
+      this.$refs.commmonModal.alertModalOpen(this.row);
 		}
 
 	},
@@ -333,12 +352,16 @@ export default {
 				let response = await custMgtApi.deleteUser(this.row);
 				const result = response.data;
 				if (result != null && result.retCode == "0000") {
-					alert("저장 완료하였습니다.");
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '저장 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
           this.memberDetail(serviceId);
 				}
 			} catch (error) {
 				console.log(error);
-				alert("실패 하였습니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			}
 		}
 	},

frontend/src/modules/custMgt/views/MemberDetail.vue

@@ -71,6 +71,7 @@
 			</div>
 
 			<validation-confirm-pop ref="validationConfirmPopModal"> </validation-confirm-pop>
+      <common-modal ref="commmonModal"></common-modal>
 
 		</div>
 		
@@ -83,6 +84,7 @@ import custMgtApi from "../service/custMgtApi.js";
 import { utils_mixin, chkPattern2 } from '../service/mixins';
 import ValidationConfirmPop from '../components/ValidationConfirmPop.vue';
 import lodash from "lodash";
+import commonModal from "@/components/modal/commonModal";
 
 export default {
     name: 'memberDetail',
@@ -92,10 +94,7 @@ export default {
 			console.log('watch : ', this.stat)
 		}
 	},
-	components: {
-        ValidationConfirmPop,
-    },
-    data() {
+  data() {
 		return {
 			row:{},  
 			userNm:'',
@@ -123,6 +122,8 @@ export default {
 		},
 	},
   components: {
+    commonModal,
+    ValidationConfirmPop,
   },
   created(){            
 	this.memberDetail(this.$route.params.serviceId);
@@ -161,7 +162,9 @@ export default {
 			}
 		} catch (error) {
 			console.log(error);
-			alert("실패 하였습니다.");
+      this.row.title = '청약고객관리';
+      this.row.msg1 = '실패 하였습니다.';
+      this.$refs.commmonModal.alertModalOpen(this.row);
 		}
 
 	},
@@ -180,14 +183,20 @@ export default {
 				const result = response.data;
 				console.log(result);
 				if (result != null && result.retCode == "0000") {
-                    alert('저장 완료하였습니다.');
-                    this.toComplete();
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '저장 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+          this.toComplete();
 
 				} else {
-                    alert("실패 하였습니다.");
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
                 }
 			} catch(err) {
-				alert("실패 하였습니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			} 
     },
 	// 저장 후 부모창 호출.
@@ -196,55 +205,67 @@ export default {
 	},
 	doValidate(){
 			
-            if(this.isNull(this.userNm)){
-				alert("이름을 입력해 주세요");
+      if(this.isNull(this.userNm)){
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '이름을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._userNm.focus();
 				return false;	
 			}
 
-            if(this.isNull(this.email)){
-				alert('이메일을 입력해주세요.');
+    if(this.isNull(this.email)){
+      this.row.title = '청약고객관리';
+      this.row.msg1 = '이메일을 입력해주세요.';
+      this.$refs.commmonModal.alertModalOpen(this.row);
 				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();
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '이메일 형식이 잘못되었습니다. 확인해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+        this.$refs._email.focus();
+        //this.$refs.validationConfirmPopModal.validationEmailOpen();
 				
 				return false;
 			}
 
-            if(this.isNull(this.mdn)){
-				alert('휴대폰번호를 입력해주세요.');                
+      if(this.isNull(this.mdn)){
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '휴대폰번호를 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				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();
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+        this.$refs._phone.focus();
+        //this.$refs.validationConfirmPopModal.validationPhonenumberOpen();
 				
 				return false;
 			}
 
-            if(this.isNull(this.stat)){
-				alert('상태를 선택 해주세요.');
+      if(this.isNull(this.stat)){
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '상태를 선택 해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				return false;	
 			}
 
 			return true;
 		},
-        checkPhoneFocus(){
-            //this.mdn = '';
-            this.$refs._phone.focus();
-        },
-        checkEmailFocus(){
-            //this.email = '';
-            this.$refs._email.focus();
-        },
+    checkPhoneFocus(){
+        //this.mdn = '';
+        this.$refs._phone.focus();
+    },
+    checkEmailFocus(){
+        //this.email = '';
+        this.$refs._email.focus();
+    },
   },
 };
 </script>

frontend/src/modules/custMgt/views/MemberList.vue

@@ -17,8 +17,28 @@
 						<div class="group">
 						<div class="input_box cal">
 							<label for="right" class="label">조회기간</label>
-							<input class="" type="text" id="" v-model="grid.params.startDt"/>
-							<input class="" type="text" id="" v-model="grid.params.endDt"/>
+              <div class="term">
+                <span class="custom_input icon_date">
+                  <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      :disabled-dates="disabledSDate"
+                      v-model="startDate"
+                      @selected="selectedStartDate(0)"
+                      @closed="closeDate('start')"
+                  ></vuejs-datepicker>
+                </span>~
+                <span class="custom_input icon_date">
+                  <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      :disabled-dates="disabledEDate"
+                      v-model="endDate"
+                      @selected="selectedEndDate(0)"
+                      @closed="closeDate('end')"
+                  ></vuejs-datepicker>
+                </span>
+              </div>
 						</div>
 						<div class="select_box id">
 							<label for="right" class="label">상태</label>
@@ -87,6 +107,7 @@
 				</div>
 
         <testId-reg-pop ref="testIdRegPop"> </testId-reg-pop>
+        <common-modal ref="commmonModal"></common-modal>
 
 			</div>
 		</div>
@@ -98,6 +119,7 @@ import customGrid from '@/components/CustomGrid';
 import TestIdRegPop from '../components/TestIdRegPop';
 import moment from 'moment';
 import api from '@/service/api.js';
+import commonModal from "@/components/modal/commonModal";
 
 class CustomATagRenderer {
     constructor(props) {
@@ -126,12 +148,12 @@ export default {
   data() {
     return {
       // 달력 데이터      
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
       sDateDiv: 'day',
-      eDateDiv: 'year',      
-      startDate: null,
-      endDate: null,
-      disabledSDate: { from: new Date()},
-      disabledEDate: { to: new Date()},
+      startDate: new Date(),
+      endDate: new Date(),
+
       statType: [],
       userType: [],
 
@@ -184,11 +206,14 @@ export default {
   components: {
     customGrid: customGrid, 
     TestIdRegPop,
+    commonModal,
+    vuejsDatepicker,
   },
   created(){            
     this.$store.commit("login/isLogin", true);
     this.$store.commit("login/isAuthChk", true);
-    this.setCodeData();   	
+    this.setCodeData();
+    this.setPeriodDay(0);
   },  
   destroyed() {
     this.$store.commit('searchcondition/updateSearchCondition', {
@@ -274,6 +299,52 @@ export default {
         this.userType = response.data.data.list;
       });
     },
+    setPeriodDay(day) {
+      this.periodDay = day;
+      this.endDate = new Date();
+      this.startDate = moment(this.endDate)
+          .subtract(day, 'day')
+          .toDate();
+
+      this.closeDate('start');
+      this.closeDate('end');
+    },
+
+    selectedStartDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+      if (this.startDate > this.endDate) {
+        this.startDate = this.endDate;
+      }
+      console.log(this.disabledSDate)
+      // this.grid.params.startDt = day
+    },
+    selectedEndDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+    },
+    closeDate(type) {
+      if (type != undefined && type != null) {
+        if (type == 'start') {
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: this.endDate };
+        } else if (type == 'end') {
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: new Date() };
+        }
+      }
+    },
+    customFormatter: function(date) {
+      if (this.sDateDiv == 'month') {
+        return moment(date).format('YYYY-MM');
+      } else if (this.sDateDiv == 'year') {
+        return moment(date).format('YYYY');
+      } else {
+        return moment(date).format('YYYY-MM-DD');
+      }
+    },
   },
   beforeRouteLeave(to, from, next) {
 

frontend/src/modules/custMgt/views/SubsDetail.vue

@@ -169,6 +169,7 @@
 				<!--수정 확인 모달-->
 				<validation-confirm-pop ref="validationConfirmPop"></validation-confirm-pop>
 				<!--관리자명 조회 모달-->
+        <common-modal ref="commmonModal"></common-modal>
 
 			</div>
       <admin-nm-pop ref="adminNmPop"></admin-nm-pop>
@@ -184,6 +185,7 @@ import CarryOverListPop from '../components/CarryOverListPop';
 import ValidationConfirmPop from '../components/ValidationConfirmPop';
 //import SearchIDPop from '@/components/modal/searchID';
 import AdminNmPop from '../components/AdminNmPop';
+import commonModal from "@/components/modal/commonModal";
 
 export default {
 	name: "subsDetail",
@@ -234,15 +236,20 @@ export default {
 		//SearchIDPop,
 		ValidationConfirmPop,
 		AdminNmPop,
+    commonModal,
 	},
 	created(){
 		this.$store.commit("login/isLogin", true);
-    	this.$store.commit("login/isAuthChk", true);
+    this.$store.commit("login/isAuthChk", true);
 		console.log(this.$route.params.serviceId);
 		this.subsDetail(this.$route.params.serviceId);
 		// checkVaildBizNum
-    }, 
+  },
 	methods :{
+		callAlert(props){
+			//alert("호출됨!");
+			this.$refs.commmonModal.alertModalOpen(props);
+		},
 		doValidate(){
 			// if(this.isNull(this.userId)){
 			// 	alert("아이디를 입력해 주세요.");
@@ -320,7 +327,9 @@ export default {
 					}
 				}
 			} catch (error) {
-				alert("실패 하였습니다.");
+				this.row.title = '청약고객관리';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			}
 
 		},
@@ -335,13 +344,19 @@ export default {
 				const result = response.data;
 				console.log(result);
 				if (result != null && result.retCode == "0000") {
-					alert('저장 하였습니다.');
+					this.row.title = '청약고객관리';
+          this.row.msg1 = '저장 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
 					this.toComplete();
 				} else {
-					alert("실패 하였습니다.");
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
 				}
 			} catch (error) {
-				alert("실패 하였습니다.");
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 			}
 
 		},
@@ -355,13 +370,14 @@ export default {
 				// console.log(this.row);
 				// this.$refs.confirmPop.confirmModalOpen(this.row);
 				this.$refs.validationConfirmPop.confirmUpdateSubOpen();
+        // this.$refs.commmonModal.confirmModalOpen(this.row);
 			}
 			
 		},
 		confirmCalbackFnc: function(props){
 			console.log(props);
 			if(props.result){
-				this.doInsert(props.result);
+				// this.doInsert(props.result);
 			}
 		},
 		searchIDPopOpen: function(){

frontend/src/modules/custMgt/views/SubsList.vue

@@ -17,8 +17,28 @@
 						<div class="group">
 						<div class="input_box cal">
 							<label for="right" class="label">조회기간</label>
-							<input class="" type="text" id="" v-model="grid.params.startDt"/>
-							<input class="" type="text" id="" v-model="grid.params.endDt"/>
+              <div class="term">
+                <span class="custom_input icon_date">
+                  <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      :disabled-dates="disabledSDate"
+                      v-model="startDate"
+                      @selected="selectedStartDate(0)"
+                      @closed="closeDate('start')"
+                  ></vuejs-datepicker>
+                </span>~
+                <span class="custom_input icon_date">
+                  <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      :disabled-dates="disabledEDate"
+                      v-model="endDate"
+                      @selected="selectedEndDate(0)"
+                      @closed="closeDate('end')"
+                  ></vuejs-datepicker>
+                </span>
+              </div>
 						</div>
 						<div class="select_box id">
 							<label for="right" class="label">상태</label>
@@ -93,7 +113,9 @@
 						:header="grid.headder"        
 					></custom-grid>
 				</div>
-        
+
+        <common-modal ref="commmonModal"></common-modal>
+
 			</div>
 		</div>
 </template>
@@ -104,6 +126,7 @@ import moment from 'moment';
 import api from '@/service/api.js';
 import custMgtApi from "../service/custMgtApi.js";
 import xlsx from '@/common/excel';
+import commonModal from "@/components/modal/commonModal";
 
 class CustomATagRenderer {
     constructor(props) {
@@ -132,13 +155,12 @@ export default {
   data() {
     return {
       // 달력 데이터      
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
       sDateDiv: 'day',
-      eDateDiv: 'year',      
-      startDate: null,
-      endDate: null,
-      disabledSDate: { from: new Date()},
-      disabledEDate: { to: new Date()},
-      
+      startDate: new Date(),
+      endDate: new Date(),
+
       statType: [],
       userType: [],
       row:{},
@@ -192,13 +214,16 @@ export default {
     };
   },  
   components: {
-    customGrid: customGrid
+    customGrid: customGrid,
+    commonModal,
+    vuejsDatepicker,
   },
   created(){            
     this.$store.commit("login/isLogin", true);
     this.$store.commit("login/isAuthChk", true);
     this.setCodeData();
     this.getExcelHeader();
+    this.setPeriodDay(0);
   },  
   destroyed() {
       
@@ -221,6 +246,18 @@ export default {
     }
     this.search(isKeep);
   },  
+  beforeRouteLeave(to, from, next) {
+
+    const getP = this.$refs.table.getPagination();
+    console.log("==========getP : " + getP._currentPage);
+    this.$store.commit('searchcondition/updateSearchCondition', {
+      page: getP._currentPage,
+      perPage: this.perPageCnt,
+      params: this.grid.params
+    });
+    // 라우트 하기전 실행
+    next();
+  },
   methods: {
     search: function(isKeep) {
       console.log('this.perPageCnt'+this.perPageCnt);
@@ -243,8 +280,8 @@ export default {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP._currentPage);
       this.$store.commit('searchcondition/updateSearchCondition', {
-        page: getP._currentPage,        
-        perPage: this.perPageCnt,        
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
         params: this.grid.params
       });
 
@@ -287,7 +324,9 @@ export default {
     }, // end of getExcelDataDown
     async excelDown() {
       if (this.$refs.table.getData().length <= 0) {
-        alert('조회된 데이터가 없습니다.');
+        this.row.title = '청약고객관리';
+        this.row.msg1 = '조회된 데이터가 없습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
         return false;
       }
 
@@ -308,18 +347,52 @@ export default {
         this.excelHeader = res;
       });
     },
-  },
-  beforeRouteLeave(to, from, next) {
+    setPeriodDay(day) {
+      this.periodDay = day;
+      this.endDate = new Date();
+      this.startDate = moment(this.endDate)
+          .subtract(day, 'day')
+          .toDate();
 
-    const getP = this.$refs.table.getPagination();
-    console.log("==========getP : " + getP._currentPage);
-    this.$store.commit('searchcondition/updateSearchCondition', {
-      page: getP._currentPage,        
-      perPage: this.perPageCnt,        
-      params: this.grid.params
-    });  
-    // 라우트 하기전 실행 
-    next();
+      this.closeDate('start');
+      this.closeDate('end');
+    },
+
+    selectedStartDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+      if (this.startDate > this.endDate) {
+        this.startDate = this.endDate;
+      }
+      console.log(this.disabledSDate)
+      // this.grid.params.startDt = day
+    },
+    selectedEndDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+    },
+    closeDate(type) {
+      if (type != undefined && type != null) {
+        if (type == 'start') {
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: this.endDate };
+        } else if (type == 'end') {
+          this.disabledSDate = { from: this.endDate };
+          this.disabledEDate = { to: this.startDate, from: new Date() };
+        }
+      }
+    },
+    customFormatter: function(date) {
+      if (this.sDateDiv == 'month') {
+        return moment(date).format('YYYY-MM');
+      } else if (this.sDateDiv == 'year') {
+        return moment(date).format('YYYY');
+      } else {
+        return moment(date).format('YYYY-MM-DD');
+      }
+    },
   },
 };
 </script>

frontend/src/modules/login/views/LoginAuth.vue

@@ -37,241 +37,268 @@
 
       </div>
         <login-popup ref="LoginPopup"> </login-popup>
+        <common-modal ref="commmonModal"></common-modal>
     </div>		 
 
 </template>
 
 <script>
-  import { mapGetters } from 'vuex';
-  import api from '../service/api';
-  import tokenSvc from '@/common/token-service';
-  import LoginPopup from '@/components/LoginPopup.vue'
-  //import * as utils from '@/common/utils';
+import { mapGetters } from 'vuex';
+import api from '../service/api';
+import tokenSvc from '@/common/token-service';
+import LoginPopup from '@/components/LoginPopup.vue'
+import commonModal from "@/components/modal/commonModal";
 
-  export default {
-    name: 'Params',
-        props: {
-            userId: {
-                type: String,
-                default : ''
-            }
-        },
-    data: function() {
-      return {       
-        errors: [],
-        mdn: '01012341234',
-        confirmNum: '',
-        userId: '',
-        isAuthNum: false,        
-        isLogin: true,
-        pwd: '',
-        text: '',
-        number: '',
-        timer: null,
-        timeCounter: 180,
-        timerStr: "03:00"
-      };
-    },
-        components: {
-        LoginPopup : LoginPopup
-    },
-    created() {                  
-      if(!!tokenSvc.getToken()){        
-        this.$store.commit("login/isLogin", true);      
-        this.$store.commit("login/isAuthChk", true);
-        this.$router.push({ path: '/' });
-      }else{        
-        if(!this.getLogin){
-          this.$router.push({ path: '/login' });
-        }
-      }  
-    },
-    mounted() {      
-      if (localStorage.hubwebUserId) {  
-        this.userId = localStorage.hubwebUserId;
+export default {
+  name: 'Params',
+  props: {
+      userId: {
+          type: String,
+          default : ''
+      }
+  },
+  data: function() {
+    return {
+      row:{},
+      errors: [],
+      mdn: '',
+      confirmNum: '',
+      userId: '',
+      isAuthNum: false,
+      isLogin: true,
+      pwd: '',
+      text: '',
+      number: '',
+      timer: null,
+      timeCounter: 180,
+      timerStr: "03:00"
+    };
+  },
+  components: {
+    LoginPopup : LoginPopup
+    ,commonModal
+  },
+  created() {
+    if(!!tokenSvc.getToken()){
+      this.$store.commit("login/isLogin", true);
+      this.$store.commit("login/isAuthChk", true);
+      this.$router.push({ path: '/' });
+    }else{
+      if(!this.getLogin){
+        this.$router.push({ path: '/login' });
+      }
+    }
+  },
+  mounted() {
+    if (localStorage.hubwebUserId) {
+      this.userId = localStorage.hubwebUserId;
+    }
+    this.isLogin = this.getLogin;
+    this.pwd = this.getPwd;
+  },
+  computed: {
+    ...mapGetters({
+      getLogin: 'login/isLogin',
+      getErrorPage: 'login/isErrorPage',
+      getAuthChk: 'login/isAuthChk',
+      getPwd: 'login/getPwd'
+    }),
+  },
+  watch: {
+    getLogin(data) {
+      if (data != null && data != '' && data == true) {
+        this.isLogin = true;
+      } else {
+        this.isLogin = false;
       }
-      this.isLogin = this.getLogin;      
-      this.pwd = this.getPwd;
     },
-    computed: {
-      ...mapGetters({
-        getLogin: 'login/isLogin',
-        getErrorPage: 'login/isErrorPage',
-        getAuthChk: 'login/isAuthChk',
-        getPwd: 'login/getPwd'
-      }), 
-    },
-    watch: {
-      getLogin(data) {        
-        if (data != null && data != '' && data == true) {
-          this.isLogin = true;        
-        } else {
-          this.isLogin = false;                
-        }      
+    getPwd(data) {
+      if(data != null && data != ''){
+        this.pwd = data;
+      }
+    }
+  },
+  destroyed() {
+    let cont = document.querySelector(".wrap");
+    cont.classList.remove("bg-wrap");
+  },
+  methods: {
+      // 2차 인증번호 요청
+      async authNum(){
+        var vm = this;
+        let userId =  vm.$route.params.userId;
+        if(!this.isLogin){
+          vm.$store.commit("login/isLogin", false);
+          vm.$store.commit("login/isAuthChk", false);
+          vm.$router.push({ path: '/'});
+          return;
+        }
+          if (vm.mdn == null || vm.mdn.trim() == "" || vm.mdn.length < 11 || !vm.mdn){
+            // vm.ModalOpen('modal06');
+            this.row.title = '휴대폰번호 확인';
+            this.row.msg1 = '휴대폰번호를 확인해 주세요.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
+            return false;
+          }
+        var params = {
+              "oprtrId": userId,
+              "hpNo": this.mdn,
+              "isLogin" : this.isLogin
+          }
+        try {
+          const response = await api.authNum(params)
+          console.log(response);
+          var rsp = response.data;
+          if(rsp.retCode == '0000'){
+            this.timerStop(this.timer);
+            this.timer = this.timerStart();
+            this.row.title = '인증번호 발송';
+            this.row.msg1 = '인증번호를 발송하였습니다.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
+            // vm.ModalOpen('modal07');
+            // console.log('시간 3:00 카운트 하기');
+            this.isAuthNum = true;
+          }else if (!this.timer) {
+            this.timerStop(this.timer);
+            this.timer = null;
+            this.row.title = '인증번호 발송';
+            this.row.msg1 = '인증번호를 발송하였습니다.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
+            // vm.ModalOpen('modal06');
+            // 실패 -> 실패 코드에 따라 실패 팝업 보여주기
+            //인증시간 초과 후 “시간초과!” 문구로 변경
+          }
+        } catch(err) {
+          this.row.title = '로그인';
+          this.row.msg1 = '실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+        }
       },
-      getPwd(data) {
-        if(data != null && data != ''){
-          this.pwd = data;
+
+      // 2차 인증 확인
+      async ajaxAuth(){
+        var vm = this;
+        let userId =  vm.$route.params.userId;
+        if (!vm.formCheck()){
+          alert(vm.errors[0]);
+          return false;
         }
-      }
-    },
-    destroyed() {
-      let cont = document.querySelector(".wrap");
-      cont.classList.remove("bg-wrap");
-    },
-    methods: {
-        // 2차 인증번호 요청
-        authNum(){             
-          var vm = this;       
-          let userId =  vm.$route.params.userId;
-          if(!this.isLogin){
+
+        if(this.timeCounter == 0){
+          this.ModalOpen('modal10');
+          return false;
+        }
+        var params = {
+            "oprtrId": userId,
+            "hpNo": this.mdn,
+            "chrVal": this.confirmNum,
+            "isLogin": this.isLogin,
+            "oprtrPw": this.pwd
+        }
+
+          //인증번호 확인
+        try {
+          const response = await api.confirmNum(params)
+          const rsp = response.data;
+          console.log("RESULT_CODE : "+rsp.retCode);
+          if(rsp.retCode == '0000'){
+             vm.$store.commit("login/isLogin", true);
+             //var nextUrl = rsp.data.nextUrl;
+             //vm.$router.push({ path: nextUrl});
+             vm.$router.push({ path: '/'});
+          }else if (rsp.retCode == '4008'){
+            this.row.title = '휴대폰번호 확인';
+            this.row.msg1 = '휴대폰번호를 확인해주세요.';
+            this.row.msg2 = '아이디에 등록된 휴대폰번호로만 인증이 가능합니다.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
+          }else if (rsp.retCode == '4009'){
+            this.row.title = '인증실패';
+            this.row.msg1 = '인증시간 초과되었습니다.';
+            this.row.msg2 = '다시 휴대폰번호를 입력해주세요.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
+          }else if (rsp.retCode == '4010'){
+            this.row.title = '인증실패';
+            this.row.msg1 = '잘못된 인증번호입니다.';
+            this.row.msg2 = '5회 실패 시 로그아웃됩니다.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
+          }else if (rsp.retCode == '4011'){
+            this.row.title = '인증실패';
+            this.row.msg1 = '인증번호 5회 실패하였습니다.';
+            this.row.msg2 = '로그아웃되어 다시 로그인해주세요.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
             vm.$store.commit("login/isLogin", false);
             vm.$store.commit("login/isAuthChk", false);
             vm.$router.push({ path: '/'});
-            return;
           }
-            if (vm.mdn == null || vm.mdn.trim() == "" || vm.mdn.length < 11 || !vm.mdn){
-              vm.ModalOpen('modal06');
-              return false;
-            } 
-          var params = {                
-                "oprtrId": userId,
-                "hpNo": this.mdn,
-                "isLogin" : this.isLogin
-            }
-          api.authNum(params).then(response => {
-            console.log(response);
-            var rsp = response.data;
-            if(rsp.retCode == '0000'){
-              this.timerStop(this.timer);              
-              this.timer = this.timerStart();
-              vm.ModalOpen('modal07');
-              // console.log('시간 3:00 카운트 하기');
-              this.isAuthNum = true;          
-            }else if (!this.timer) {
-              this.timerStop(this.timer);
-              this.timer = null;    
-              vm.ModalOpen('modal06');        
-              // 실패 -> 실패 코드에 따라 실패 팝업 보여주기 
-              //인증시간 초과 후 “시간초과!” 문구로 변경
-            }
-          }).catch(response =>{
-            
-            console.log(response);
-          });
-        },
+        } catch(err) {
+          //alert("실패 하였습니다.");
+          this.row.title = '인증번호';
+          this.row.msg1 = '실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+        }
+      },
+      formCheck: function() {
+          this.errors = [];
+          if(!this.mdn){
+            this.row.title = '휴대폰번호 확인';
+            this.row.msg1 = '휴대폰번호를 확인해 주세요.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
+          } else if(!this.isAuthNum){
+            this.row.title = '인증번호 입력';
+            this.row.msg1 = '인증요청을 먼저 해주세요.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
+          }else if(!this.confirmNum){
+            this.row.title = '인증번호 입력';
+            this.row.msg1 = '인증번호를 입력하세요.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
+          }
+          return this.errors.length == 0;
+      },
 
-        // 2차 인증 확인 
-        ajaxAuth: function(){
-            var vm = this;
-            let userId =  vm.$route.params.userId;
-            if (!vm.formCheck()){
-              alert(vm.errors[0]);
-              return false;
-            } 
-            
-            if(this.timeCounter == 0){
-              this.ModalOpen('modal10');
-              return false;
-            }
-
-
-            var params = {                
-                "oprtrId": userId,
-                "hpNo": this.mdn,
-                "chrVal": this.confirmNum,
-                "isLogin": this.isLogin,
-                "oprtrPw": this.pwd
-            }
-
-            //인증번호 확인
-            api.confirmNum(params).then(function(response){
-                var rsp = response.data;
-                console.log("RESULT_CODE : "+rsp.retCode);
-                if(rsp.retCode == '0000'){
-                   vm.$store.commit("login/isLogin", true);                   
-                   //var nextUrl = rsp.data.nextUrl;
-                   //vm.$router.push({ path: nextUrl});
-                   vm.$router.push({ path: '/'});
-                }else if(rsp.retCode == '4008') { //휴대폰번호 확인 
-                  vm.ModalOpen('modal06');
-
-                }
-                // else if(rsp.retCode == '4009') { //인증실패: 시간초과
-                //   vm.ModalOpen('modal10');
-                // } 
-                else{
-                  if(rsp.retCode == '4010') { //인증실패: 인증번호
-                    vm.ModalOpen('modal09');
-                  } 
-                  else if(rsp.retCode == '4011') { //인증실패: 5회
-                    vm.ModalOpen('modal11');
-                    // vm.$router.go(-1)
-                  }
-                   return;
-
-                } 
-                //  else{
-                // }                
-            });
-        },
-        formCheck: function() {
-            this.errors = [];
-            if(!this.mdn){
-              this.ModalOpen('modal06');
-            } else if(!this.isAuthNum){
-              this.errors.push('인증요청을 먼저 해주세요.');
-            }else if(!this.confirmNum){
-              this.ModalOpen('modal08');
-            }
-
-            return this.errors.length == 0;
-        },
-
-      clickMenu(link){
-       this.$router.push({
-            path: link
-        }); 
-        },
-      
-      ModalOpen: function(target){      
-      this.$refs.LoginPopup.ModalOpen(target);
-    },
-    timerStart: function() { 
-    // 1초에 한번씩 start 호출
-      this.timeCounter = 180; 
-      var interval = setInterval(() => {
-      this.timeCounter--; 
-      //1초씩 감소 
-      this.timerStr = this.prettyTime();
-      if (this.timeCounter <= 0) 
-      {
-        this.timerStop(interval); 
-      }
-      }, 1000);
-      
-      return interval; 
-    }, 
-
-      timerStop: function(Timer) 
-       { 
-        clearInterval(Timer);
-       this.timeCounter = 0; 
-       }, 
-
-       prettyTime: function() { 
-         // 시간 형식으로 변환 리턴
-          let time = this.timeCounter / 60; 
-          let minutes = parseInt(time);
-          let secondes = Math.round((time - minutes) * 60);
-
-           return ( 
-             minutes.toString().padStart(2, "0") + 
-             ":" 
-             + secondes.toString().padStart(2, "0") 
-                  );
-         },
+    clickMenu(link){
+     this.$router.push({
+          path: link
+      });
+      },
 
+    ModalOpen: function(target){
+    this.$refs.LoginPopup.ModalOpen(target);
+  },
+  timerStart: function() {
+  // 1초에 한번씩 start 호출
+    this.timeCounter = 180;
+    var interval = setInterval(() => {
+    this.timeCounter--;
+    //1초씩 감소
+    this.timerStr = this.prettyTime();
+    if (this.timeCounter <= 0)
+    {
+      this.timerStop(interval);
     }
-  };
+    }, 1000);
+
+    return interval;
+  },
+
+    timerStop: function(Timer)
+     {
+      clearInterval(Timer);
+     this.timeCounter = 0;
+     },
+
+     prettyTime: function() {
+       // 시간 형식으로 변환 리턴
+        let time = this.timeCounter / 60;
+        let minutes = parseInt(time);
+        let secondes = Math.round((time - minutes) * 60);
+
+         return (
+           minutes.toString().padStart(2, "0") +
+           ":"
+           + secondes.toString().padStart(2, "0")
+                );
+     },
+
+  }
+};
 </script>

frontend/src/modules/login/views/LoginMain.vue

@@ -1,142 +1,167 @@
 <template>  
-<div class="wrap bg-wrap">
-		<div class="login-box adm-login">
-			<div class="wbox">
-				<div class="logo"></div>
-				<h3 class="title">관리자 로그인</h3>
-				<!-- <form action=""> -->
-					<div class="login-form">
-						<li><input type="text" placeholder="아이디" v-model="userId"></li>
-						<li><input type="password" placeholder="비밀번호" v-model="userPwd" @keyup.enter="ajaxlogin"></li>
-						<li>
-							<span class="lcont"><input type="checkbox" id="id-remember" ref="chkSaveId" checked><label for="id-remember">아이디 저장</label></span>
-							<span class="rcont"><button class="btn-pwreset" @click="clickMenu('/view/login/resetPassword')">비밀번호 초기화</button></span>
-						</li>
-						<li><button class="btn-pcolor" v-on:click="ajaxlogin">로그인</button></li>
-					</div>
-				<!-- </form> -->
-				<div class="login-notice">
-					<div>
-						<li>비밀번호 분실 시 비밀번호 초기화를 이용해주세요.</li>
-						<li>비밀번호는 90일이내 변경하여 안전히 관리해주세요.</li>
-					</div>
-				</div>
-			</div>
-       
-		</div>
-    <login-popup ref="LoginPopup"> </login-popup>
-    </div> 
+  <div class="wrap bg-wrap">
+      <div class="login-box adm-login">
+        <div class="wbox">
+          <div class="logo"></div>
+          <h3 class="title">관리자 로그인</h3>
+          <!-- <form action=""> -->
+            <div class="login-form">
+              <li><input type="text" placeholder="아이디" v-model="userId"></li>
+              <li><input type="password" placeholder="비밀번호" v-model="userPwd" @keyup.enter="ajaxlogin"></li>
+              <li>
+                <span class="lcont"><input type="checkbox" id="id-remember" ref="chkSaveId" checked><label for="id-remember">아이디 저장</label></span>
+                <span class="rcont"><button class="btn-pwreset" @click="clickMenu('/view/login/resetPassword')">비밀번호 초기화</button></span>
+              </li>
+              <li><button class="btn-pcolor" @click="ajaxlogin">로그인</button></li>
+            </div>
+          <!-- </form> -->
+          <div class="login-notice">
+            <div>
+              <li>비밀번호 분실 시 비밀번호 초기화를 이용해주세요.</li>
+              <li>비밀번호는 90일이내 변경하여 안전히 관리해주세요.</li>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <login-popup ref="LoginPopup"> </login-popup>
+      <common-modal ref="commmonModal"></common-modal>
+    </div>
 </template>
 
 <script>
-  import api from '../service/api';
-  import LoginPopup from '@/components/LoginPopup.vue';
-  import tokenSvc from '@/common/token-service';
-  //import * as utils from '@/common/utils';
+import api from '../service/api';
+import LoginPopup from '@/components/LoginPopup.vue';
+import tokenSvc from '@/common/token-service';
+import commonModal from "@/components/modal/commonModal";
 
-  export default {
-    data: function() {
-      return {
-        errors: [],
-        corpId: '',
-        userId: '',
-        userPwd: ''
-      };
-    },
-    created() {            
-      // 로그인 페이지 진입시
-      if(!!tokenSvc.getToken()){        
-        this.$store.commit("login/isLogin", true);      
-        this.$store.commit("login/isAuthChk", true);
-        this.$router.push({ path: '/' });
-      }else{
-        this.$store.commit("login/isLogin", false);
-        this.$store.commit("login/isAuthChk", false);
-        this.$store.commit("login/isErrorPage", false);
+export default {
+  data: function() {
+    return {
+      row:{},
+      errors: [],
+      corpId: '',
+      userId: '',
+      userPwd: ''
+    };
+  },
+  created() {
+    // 로그인 페이지 진입시
+    if(!!tokenSvc.getToken()){
+      this.$store.commit("login/isLogin", true);
+      this.$store.commit("login/isAuthChk", true);
+      this.$router.push({ path: '/' });
+    }else{
+      this.$store.commit("login/isLogin", false);
+      this.$store.commit("login/isAuthChk", false);
+      this.$store.commit("login/isErrorPage", false);
+    }
+  },
+  mounted() {
+    this.$refs.chkSaveId.checked = true;
+
+    if (localStorage.hubwebUserId) {
+      this.userId = localStorage.hubwebUserId;
+    }
+  },
+  destroyed() {
+    let cont = document.querySelector(".wrap");
+    cont.classList.remove("login-wrap");
+  },
+  components: {
+    LoginPopup : LoginPopup,
+    commonModal,
+  },
+  methods: {
+    chgChkUserId() {
+      if (this.$refs.chkSaveId.checked == true) {
+        localStorage.hubwebUserId = this.userId;
+      } else {
+        delete localStorage.hubwebUserId;
       }
     },
-    mounted() {    
-      this.$refs.chkSaveId.checked = true;
-
-      if (localStorage.hubwebUserId) {  
-        this.userId = localStorage.hubwebUserId;
+    toRegister(){
+      this.$router.push({ name: 'register'});
+    },
+    async ajaxlogin() {
+        
+      var vm = this;
+      vm.errmsg = null;
+      // if (!vm.formCheck()) return false;
+      console.log(this.userId)
+      if (!this.userId){
+        this.row.title = '로그인 실패';
+        this.row.msg1 = '아이디,비밀번호를 확인해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+        return false;
+      }
+      if (!this.userPwd){
+        this.row.title = '비밀번호 오류';
+        this.row.msg1 = '비밀번호를 확인해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+        return false;
       }
-    },
-    destroyed() {
-      let cont = document.querySelector(".wrap");
-      cont.classList.remove("login-wrap");      
-    },
-    components: {
-        LoginPopup : LoginPopup
-    },
-    methods: {
-      chgChkUserId() {
-        if (this.$refs.chkSaveId.checked == true) {
-          localStorage.hubwebUserId = this.userId;
-        } else {
-          delete localStorage.hubwebUserId;
-        }
-      },
-      toRegister(){
-        this.$router.push({ name: 'register'});
-      },
-      formCheck: function() {
-        this.errors = [];
-        
 
-        if (!this.userId) this.errors.push('아이디를 입력해 주세요.');
-        if (!this.userPwd) this.errors.push('비밀번호를 입력해 주세요.');
+      let oprtrId = this.userId;
+      let oprtrPw = this.userPwd;
 
-        return this.errors.length == 0;
-      },
-      ajaxlogin: function() {
-        
-        var vm = this;
-        vm.errmsg = null;
-
-        if (!vm.formCheck()) return false;
-        
-        let oprtrId = this.userId;
-        let oprtrPw = this.userPwd;
-        
-        // FormData 객체를 파라미터로 넘기면 Content-Type: multipart/form-data; 요청을 한다.
-        // 일반 Object를 파라미터로 넘기면 Content-Type: application/json;charset=UTF-8 요청을 한다.
-        var params = {          
-          "oprtrId": this.userId,
-          "oprtrPw": this.userPwd,
-        }        
+      // FormData 객체를 파라미터로 넘기면 Content-Type: multipart/form-data; 요청을 한다.
+      // 일반 Object를 파라미터로 넘기면 Content-Type: application/json;charset=UTF-8 요청을 한다.
+      var params = {
+        "oprtrId": this.userId,
+        "oprtrPw": this.userPwd,
+      }
         //로그인버튼을 누를시 상황
-        api.login(params).then(function(response) {    
-          
-          var rsp = response.data;     
+      try {
+        const response = await api.login(params)
+        const rsp = response.data;
+        console.log(rsp);
 
-          if(rsp.retCode == '0000'){            
-            var path = rsp.data.nextUrl;
-            console.log(path);
-            vm.chgChkUserId();            
-            vm.$store.commit("login/isLogin", true);
-            vm.$store.commit("login/savePwd", oprtrPw);
-            vm.$router.push({ name: 'loginAuth',params: {userId : oprtrId}});
-          } else if(rsp.retCode == '4004') { // ID/PWD 불일치
-            vm.errors.push('로그인 실패하였습니다. (5회 실패 시 계정 잠김)');
-            vm.ModalOpen('modal01');
-          } else if(rsp.retCode == '4005') { // ID/PWD 불일치 횟수초과로 계정 잠김
-            // msg = '5회 이상 로그인 실패하여 해당 아이디에 대한 계정이 잠금처리되었습니다.\n관리자에게 문의하세요.';
-            vm.ModalOpen('modal02');
-          } else if(rsp.retCode == '4006') {
-            // msg = '비밀번호를 변경하신지 90일이 지났습니다.\n비밀번호 변경 화면으로 이동합니다.';
-            vm.chgChkUserId();
-            vm.ModalOpen('modal04');
-          } else if(rsp.retCode == '4007') {
-             // msg = '관리자 승인 후 이용할 수 있습니다.';
-            vm.ModalOpen('modal03');
-         } else {            
-            vm.$store.commit("login/isLogin", false);
-            return;
-          }
-        });
+        if(rsp.retCode == '0000'){
+          var path = rsp.data.nextUrl;
+          console.log(path);
+          vm.chgChkUserId();
+          vm.$store.commit("login/isLogin", true);
+          vm.$store.commit("login/savePwd", oprtrPw);
+          vm.$router.push({ name: 'loginAuth',params: {userId : oprtrId}});
+        } else if(rsp.retCode == '4003') { // ID 조회 없음.
+          this.row.title = '로그인 실패';
+          this.row.msg1 = '등록되지 않은 아이디입니다.';
+          this.row.msg2 = '아이디를 다시 확인하세요';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+        } else if(rsp.retCode == '4004') { // ID/PWD 불일치
+          this.row.title = '비밀번호 오류';
+          this.row.msg1 = '비밀번호를 확인해주세요.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+        } else if(rsp.retCode == '4005') { // ID/PWD 불일치 횟수초과로 계정 잠김 4005
+          this.row.title = '로그인 실패';
+          this.row.msg1 = '로그인 5회 실패하였습니다.';
+          this.row.msg2 = '비밀번호 초기화 후 비밀번호를 변경해 주세요.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+        } else if(rsp.retCode == '4006') {
+          // msg = '비밀번호를 변경하신지 90일이 지났습니다.\n비밀번호 변경 화면으로 이동합니다.';
+          this.row.title = '로그인 실패';
+          this.row.msg1 = '비밀번호를 변경하지 않은지 90일이';
+          this.row.msg2 = '지났습니다. 비밀번호를 변경하여';
+          this.row.msg3 = '이용 부탁드립니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+        } else if(rsp.retCode == '4007') {
+          this.row.title = '로그인 실패';
+          this.row.msg1 = '아이디 상태를 확인해 주세요.';
+          this.row.msg2 = '(사용중인 상태만 로그인 가능합니다.)';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+       } else {
+          vm.$store.commit("login/isLogin", false);
+          return;
+        }
+      } catch(err) {
+        //alert("실패 하였습니다.");
+        this.row.title = '로그인';
+        this.row.msg1 = '실패 하였습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+      }
 
-      },
+    },
 
 
       clickMenu(link){

frontend/src/modules/login/views/ResetPassword.vue

@@ -1,115 +1,124 @@
 <template>
 
-    <div class="wrap bg-wrap">
+  <div class="wrap bg-wrap">
 
-        <!-- s: 패스워드초기화 -->
-        <div class="login-box pw-reset">
-            <div class="logo"></div>
-            <div class="wbox">
-                <h3 class="title">비밀번호 초기화</h3>
-                <!-- <form action=""> -->
-                    <div class="login-form">
-                        <div>
-
-                            <input type="text" placeholder="아이디를 입력하세요" v-model="userId"></div>
-                            <div class="button_group">
-                                <button class="btn-pcolor" @click="ajaxReset">비밀번호 초기화 문자 발송하기</button>
-                                <button class="btn-default" @click="clickMenu('/login')">취소</button>
-                            </div>
-                        </div>
-                    <!-- </form> -->
-                    <div class="login-notice">
-                        <div>
-                            <li>초기화된 비밀번호는 등록된 휴대폰 문자메시지로 발송됩니다.</li>
-                            <li>휴대폰 번호 변경 시 관리자로 문의해주세요.</li>
-                        </div>
-                    
+      <!-- s: 패스워드초기화 -->
+      <div class="login-box pw-reset">
+        <div class="logo"></div>
+        <div class="wbox">
+          <h3 class="title">비밀번호 초기화</h3>
+          <!-- <form action=""> -->
+            <div class="login-form">
+              <div>
+                <input type="text" placeholder="아이디를 입력하세요" v-model="userId"></div>
+                <div class="button_group">
+                    <button class="btn-pcolor" @click="ajaxReset">비밀번호 초기화 문자 발송하기</button>
+                    <button class="btn-default" @click="clickMenu('/login')">취소</button>
                 </div>
-            </div>
-            <div>
-                
-            </div>
-            </div>
-        
-        <login-popup ref="LoginPopup"> </login-popup>
-    
+              </div>
+            <!-- </form> -->
+            <div class="login-notice">
+              <div>
+                  <li>초기화된 비밀번호는 등록된 휴대폰 문자메시지로 발송됩니다.</li>
+                  <li>휴대폰 번호 변경 시 관리자로 문의해주세요.</li>
+              </div>
+          </div>
+        </div>
+      </div>
 
-</div>
+      <login-popup ref="LoginPopup"> </login-popup>
+      <common-modal ref="commmonModal"></common-modal>
+
+  </div>
 
 </template>
 
 <script>
 import api from '../service/api';
 import LoginPopup from '@/components/LoginPopup.vue';
+import commonModal from "@/components/modal/commonModal";
+
 export default {
-    name: 'resetPassword',
-    data: function() {
-        return {
-            errors: [],
-            userId: '',
-        }
-    },
-    created() {
-      this.$store.commit("login/isLogin", false);
-      this.$store.commit("login/isAuthChk", false);
-    },
-    components: {
-        LoginPopup
-    },
-    methods: {
-    formCheck: function() 
+  name: 'resetPassword',
+  data: function() {
+      return {
+          errors: [],
+          userId: '',
+      }
+  },
+  created() {
+    this.$store.commit("login/isLogin", false);
+    this.$store.commit("login/isAuthChk", false);
+  },
+  components: {
+    LoginPopup,
+    commonModal,
+  },
+  methods: {
+  formCheck: function()
+  {
+      this.errors = [];
+      if (!this.userId) {
+        this.row.title = '아이디 오류';
+        this.row.msg1 = '아이디를 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+          // this.errors.push('아이디를 입력해 주세요.');
+      }
+
+      return this.errors.length == 0;
+  },
+
+  async ajaxReset(){
+    var vm = this;
+    //vm.errmsg = null;
+    if (!vm.formCheck()) return false;
+
+    var params =
     {
-        this.errors = [];      
-        if (!this.userId) {
-            this.errors.push('아이디를 입력해 주세요.');
-        }
-            
-        return this.errors.length == 0;
-    },
-
-        ajaxReset: function(){            
-            var vm = this;
-            //vm.errmsg = null;
-            if (!vm.formCheck()) return false;
-
-            var params = 
-            {
-                "userId": this.userId,
-                //"userPwd": this.userPwd,
-            }       
-            api.resetPassword(params).then(function(response){
-                var rsp = response.data;
-                console.log("RESULT_CODE : "+rsp.retCode);
-                
-                if(rsp.retCode == '0000'){
-                    // vm.$store.commit("login/isLogin", true);
-                   //vm.$store.commit("login/isAuthChk", true);
-
-                   vm.ModalOpen('modal12');
-                    //vm.$router.push({ path : 'view/login'});
-                
-                } else if(rsp.retCode == '4003') {
-                    vm.ModalOpen('modal13');
-                } else {
-                    return;
-                }
-                document.getElementsByClassName('modal12')[0].getElementsByClassName('btn-pcolor')[0].addEventListener('click',() => {
-                vm.$router.push({path: '/login'});
-                });
-            });
-        }
-        ,
-        clickMenu(link) {
-
-            this
-                .$router
-                .push({path: link});
-        },
-
-        ModalOpen: function(target){      
-         this.$refs.LoginPopup.ModalOpen(target);
-        },
+        "userId": this.userId,
+        //"userPwd": this.userPwd,
     }
+    try {
+      const response = await api.resetPassword(params)
+      const rsp = response.data;
+      console.log("RESULT_CODE : "+rsp.retCode);
+
+      if(rsp.retCode == '0000'){
+          // vm.$store.commit("login/isLogin", true);
+         //vm.$store.commit("login/isAuthChk", true);
+        this.row.title = '비밀번호 초기화';
+        this.row.msg1 = '해당 아이디에 저장되어 있는 핸드폰번호로';
+        this.row.msg2 = '비밀번호 초기화 문자가 발송되었습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+         // vm.ModalOpen('modal12');
+          //vm.$router.push({ path : 'view/login'});
+
+      } else if(rsp.retCode == '4003') {
+        this.row.title = '비밀번호 초기화';
+        this.row.msg1 = '등록되지 않은 아이디입니다.';
+        this.row.msg2 = '아이디를 다시 확인하세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+          // vm.ModalOpen('modal13');
+      }
+      // document.getElementsByClassName('modal12')[0].getElementsByClassName('btn-pcolor')[0].addEventListener('click',() => {
+      // vm.$router.push({path: '/login'});
+  } catch(err) {
+      //alert("실패 하였습니다.");
+      this.row.title = '비밀번호 초기화';
+      this.row.msg1 = '실패 하였습니다.';
+      this.$refs.commmonModal.alertModalOpen(this.row);
+      return false;
+    }
+  }
+      ,
+      clickMenu(link) {
+          this.$router.push({path: link});
+      },
+
+      ModalOpen: function(target){
+       this.$refs.LoginPopup.ModalOpen(target);
+      },
+  }
 }
 </script>
 

frontend/src/modules/login/views/UpdatePassword.vue

@@ -1,25 +1,26 @@
 <template>
 <div class="wrap bg-wrap">
 <!--	s: 비밀번호변경	-->
-		<div id="cpf" class="login-box pw-change">
-			<div class="logo"></div>
-			<div class="wbox">
-				<h3 class="title">비밀번호 변경</h3>
-				<p class="desc">임시비밀번호로 로그인할 경우 비밀번호를 변경 후<br>서비스 이용이 가능합니다.</p>
-				<form @submit.prevent="changedPwd">
-					<ul class="pw-form">
-						<div><input id="oldPw" type="password" placeholder="기존 비밀번호를 입력하세요"  v-model="oldPw" ref="oldPw"></div>
-						<div>
-              <input id="newPw" type="password" placeholder="새로운 비밀번호를 입력하세요" required minlength="8" maxlength="16" v-model.trim="newPw" ref="_newPw">
-            </div>
-						<div><input type="password" placeholder="새로운 비밀번호를 다시 한 번 입력하세요" required minlength="8" maxlength="16"  v-model.trim="newPw2"  ref="_newPw2"></div>
-						<div><button class="btn-pcolor" @click="changedPwd()">비밀번호 변경하기</button></div>
-					</ul>
-				</form>
-			</div>
-		</div>	
-        <login-popup ref="LoginPopup"> </login-popup>
+  <div id="cpf" class="login-box pw-change">
+    <div class="logo"></div>
+    <div class="wbox">
+      <h3 class="title">비밀번호 변경</h3>
+      <p class="desc">임시비밀번호로 로그인할 경우 비밀번호를 변경 후<br>서비스 이용이 가능합니다.</p>
+      <form @submit.prevent="changedPwd">
+        <ul class="pw-form">
+          <div><input id="oldPw" type="password" placeholder="기존 비밀번호를 입력하세요"  v-model="oldPw" ref="oldPw"></div>
+          <div>
+            <input id="newPw" type="password" placeholder="새로운 비밀번호를 입력하세요" required minlength="8" maxlength="16" v-model.trim="newPw" ref="_newPw">
+          </div>
+          <div><input type="password" placeholder="새로운 비밀번호를 다시 한 번 입력하세요" required minlength="8" maxlength="16"  v-model.trim="newPw2"  ref="_newPw2"></div>
+          <div><button class="btn-pcolor" @click="changedPwd()">비밀번호 변경하기</button></div>
+        </ul>
+      </form>
     </div>
+  </div>
+  <login-popup ref="LoginPopup"> </login-popup>
+  <common-modal ref="commmonModal"></common-modal>
+</div>
   
 
 </template>
@@ -31,8 +32,8 @@ import { mapGetters } from 'vuex';
 import LoginPopup from '@/components/LoginPopup.vue';
 import tokenSvc from '@/common/token-service';
 import { commonPwdView, validation } from '../service/mixins';
-  // import { chkPattern } from '@/common/vue-mixins';
-  // import * as utils from '@/common/utils';
+import commonModal from "@/components/modal/commonModal";
+
 export default {
   mixins: [commonPwdView, validation],
   data: function() {
@@ -89,7 +90,8 @@ export default {
           },
 
     components: {
-        LoginPopup : LoginPopup
+        LoginPopup : LoginPopup,
+        commonModal,
     },
 
     methods: {
@@ -108,20 +110,26 @@ export default {
       },
 
       doPwdValidate(){
-        debugger;
+        //debugger;
         if(lodash.isNil(this.newPw)){
-          alert("비밀번호 확인을 입력해 주세요.");
+          this.row.title = '비밀번호 변경';
+          this.row.msg1 = '비밀번호 확인을 입력해 주세요.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
           this.$refs._newPw2.focus();
           return false;
         }
         if(!lodash.isEqual(this.newPw, this.newPw2)){
-          alert("비밀번호가 일치하지 않습니다.");
+          this.row.title = '비밀번호 변경';
+          this.row.msg1 = '비밀번호가 일치하지 않습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
           this.$refs._newPw2.focus();
           return false;
         }
         const pwdLen = this.bytes(this.newPw);
         if(!(pwdLen >= 8 && pwdLen <= 16)){
-          alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+          this.row.title = '비밀번호 변경';
+          this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
           this.$refs._newPw2.focus();
           return false;
         }
@@ -129,7 +137,9 @@ export default {
         const pNum = /[0-9]/g;	// 숫자 
         const pSpc = /[!@$%^&*]/g; // 특수문자
         if(!(pEng.test(this.newPw) && pNum.test(this.newPw) && pSpc.test(this.newPw))) {
-          alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+          this.row.title = '비밀번호 변경';
+          this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
           this.$refs._newPw2.focus();
           return;
         }
@@ -155,26 +165,31 @@ export default {
 
             if(rsp.retCode == '0000') {
               // vm.chgChkUserId();
-
-              if(vm.ModalOpen('modal16')){
-                vm.$router.push({ path: '/login' });
-              }
+              this.row.title = '비밀번호 변경';
+              this.row.msg1 = '비밀번호가 정상적으로 변경되었습니다.';
+              this.row.msg2 = '변경된 비밀번호로 다시 로그인 해주세요.';
+              this.$refs.commmonModal.alertModalOpen(this.row);
+              // if(vm.ModalOpen('modal16')){
+              vm.$router.push({ path: '/login' });
+              // }
             } else if(rsp.retCode == '4016') {
-              vm.ModalOpen('modal14')
+              this.row.title = '비밀번호 변경';
+              this.row.msg1 = '비밀번호를 확인해주세요.';
+              this.$refs.commmonModal.alertModalOpen(this.row);
+              // vm.ModalOpen('modal14')
             } else if(rsp.retCode == '4017') {
-              vm.ModalOpen('modal15')
+              this.row.title = '비밀번호 오류';
+              this.row.msg1 = '비밀번호를 사용할 수 없습니다.';
+              this.row.msg2 = '비밀번호는 영문/숫자/특수기호를 혼합하여';
+              this.row.msg3 = '8~16자리로 설정해주세요.';
+              this.$refs.commmonModal.alertModalOpen(this.row);
+              // vm.ModalOpen('modal15')
             } else if(rsp.retCode == '4003') {
-              if(vm.ModalOpen('modal14')) {
-                //수정사항 : 모달오픈 -> 기존비밀번호 포커스
-                alert('1');
-              }
-              
-              //   //this.$refs.oldPw.focus();
-                // alert('비밀번호 유효성체크'); 
-                // vm.$refs.oldPw.focus();
-              }
-              else { 
-              return;
+              this.row.title = '아이디 오류';
+              this.row.msg1 = '등록되지 않은 아이디입니다.';
+              this.row.msg1 = '아이디를 다시 확인하세요';
+              this.$refs.commmonModal.alertModalOpen(this.row);
+
             }
           });
 

frontend/src/modules/riskMgt/components/InsertIntrcpPop.vue

@@ -14,14 +14,17 @@
 						<tbody>
 							<tr>
 								<th>발신번호</th>
-								<td><input type="number" v-model.trim="blckSndrno" ref="blckSndrno"></td>
+								<td><input type="number" placeholder="- 자 제외 숫자만 입력" maxlength="11" v-model.trim="blckSndrno" v-on:keyup="onlyNum" @input="onlyNum" ref="_blckSndrno"></td>
 							</tr>
 							<tr>
 								<th>발송타입</th>
-								<td>
-									<div class="select_box">
-										<select name="" id="" v-model.trim="sndblckTpCd" ref="sndblckTpCd">
-                                            <option v-for="(option, i) in tpType" v-bind:value="option.code" v-bind:key="i">
+								<td v-if="code === null || code === ''">
+									<div v:class="select_box">
+										<select name="" id="right" v-model.trim="sndblckTpCd" ref="sndblckTpCd">
+											<option v-for="(option, i) in tpType" 
+											:value="sndblckTpCd"
+											v-bind:key="i"
+											>
                                                 {{ option.codeNm }}
                                             </option> 
 											<!-- <option value="">문자</option>
@@ -33,9 +36,9 @@
 							<tr>
 								<th>차단사유</th>
 								<td>
-									<div class="select_box">
+									<div>
 										<select name="" id="" v-model.trim="blckRsnCd" ref="blckRsnCd">
-											<option v-for="(option, i) in rsnType" v-bind:value="option.code" v-bind:key="i">
+											<option v-for="(option, i) in rsnType" :value="blckRsnCd" v-bind:key="i">
                                                 {{ option.codeNm }}
                                             </option> 
 										</select>
@@ -49,33 +52,24 @@
 						</tbody>
 					</table>
 				</form>
-				<div class="pop-btn2">
+				<div class="popup-btn2">
 					<button class="btn-pcolor" @click="doInsert">등록</button>
 					<button class="btn-default" @click="ModalClose();">취소</button>
 				</div>
+				<common-modal ref="commmonModal"></common-modal>
 			</div>
         </div>
-            <!-- 신규등록 - 등록 선택 -->
-			 <div class="popup modal54">
-				<div class="pop-head">
-					<div class="pop-tit">신규등록</div>
-				</div>
-				<div class="pop-cont">
-					<div>작성된 내용으로 등록 하시겠습니까?</div>
-				</div>
-				<div class="pop-btn2">
-					<button class="btn-pcolor">확인</button>
-					<button class="btn-default" onclick="ModalClose();">취소</button>
-				</div>
-			</div>
     </div>
             
 </template>
 <script>
 import api from '@/service/api';
 import riskMgtApi from '../service/riskMgtApi'
+import { utils_mixin, chkPattern2 } from '../service/mixins';
+import commonModal from "@/components/modal/commonModal";
 import lodash from "lodash";
 export default {
+	mixins: [utils_mixin, chkPattern2],
     data(){
         return{
             row: {},
@@ -85,6 +79,7 @@ export default {
             sndblckTpCd: '',
             blckRsnCd: '',
             meno: '',
+			code:"",
             
             // params: {
             //     'blckSndrno' : ''
@@ -98,6 +93,9 @@ export default {
         // this.setCodeDate();  
 		this.formReset();
     },
+	  components: {
+    commonModal,
+  },
     methods :{
         //모달 띄우기
         ModalOpen(){
@@ -131,7 +129,10 @@ export default {
 					const response = await riskMgtApi.insertIntrcp(this.row);
 					const result = response.data;
 					if (result != null && result.retCode == "0000") {
-						alert('저장 하였습니다.');
+						this.row.title = '청약고객관리';
+         				this.row.msg1 = '저장 하였습니다.';
+						console.log(this.row);
+           				this.$refs.commmonModal.alertModalOpen(this.row);
 						this.toComplete();
 					}
                 } catch(err) {
@@ -150,23 +151,23 @@ export default {
         });
        },
 
-        isNull(obj){
-          if(lodash.isNil(obj) || lodash.trim(obj) == ''){
-            return true;
-          }
-          return false;
-        },
-
        doValidate(){
-			if(this.isNull(this.blckSndrno)){
-				alert("번호입력.");
+		   if(this.isNull(this.blckSndrno)){
+			  this.row.title = '청약고객관리';
+         	  this.row.msg1 = '저장 하였습니다.';
+           	  this.$refs.commmonModal.alertModalOpen(this.row);
+			   this.$refs._blckSndrno.focus();
+			   return false;
+		   }
+		const hp = this.blckSndrno;
+			if(!this.isNull(hp) && !this.isMobile(hp)){
+				alert("발신번호 형식이 잘못되었습니다. 확인 해주세요.");
+				this.row.title = '청약고객관리';
+         	  this.row.msg1 = '저장 하였습니다.';
+           	  this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._blckSndrno.focus();
 				return false;
 			}
-			if(this.isNull(this.meno)){
-				alert('메모입력');
-				return false;
-			}
 			this.row.blckSndrno=this.blckSndrno;
             this.row.sndblckTpCd = this.sndblckTpCd;
             this.row.blckRsnCd = this.blckRsnCd;

frontend/src/modules/riskMgt/components/InsertMsgPop.vue

@@ -1,5 +1,8 @@
 <template>
-
+	<!-- <div class="wrap bg-wrap"> -->
+    <div>
+		<div class="dimmed" @click="ModalClose();"></div>
+		<div class="popup-wrap">
   <!-- 메시지 차단 신규 등록 -->
 			<div class="popup popup_form modal57">
 				<div class="pop-head">
@@ -11,31 +14,26 @@
 							<tr>
 								<th>차단문구</th>
 								<td class="input_add">
-									<input type="text" value="">
-									<button class="button white add" onclick=""></button>
+									<input v-model="word" ref="_word">
+									<button type="button" class="button white add" @click="doAdd"></button>
 								</td>
 							</tr>
 							<tr>
-								<td colspan="2" class="registration">
+								<td colspan="2" class="registration" value="">
 									<ul>
-										<li>
-											<span>도박<a href="#"><img src="./images/icon-del.png"/></a></span>
-										</li>
-										<li>
-											<span>광고<a href="#"><img src="./images/icon-del.png"/></a></span>
-										</li>
-										<li>
-											<span>술<a href="#"><img src="./images/icon-del.png"/></a></span>
-										</li>
+                                        <li v-for="(item, i) in msgBlckwordList" v-bind:key="item.word">
+                                          <span> {{ item.word }}<a href="#" @click="doDel(item, i)"><img src="@/assets/images/icon-del.png"/></a> </span>
+                                               <!-- <button type="button" @click="doDel(item, i)">x</button> -->
+                                        </li>
 									</ul>
 								</td>
 							</tr>
 							<tr>
 								<th>조건</th>
 								<td>
-									<input type="radio" name="state" value="AND" id="popup_radio3" checked="">
+									<input type="radio" name="state" value="01" id="popup_radio3" v-model="blckContCd" >
 									<label for="popup_radio3">AND</label>
-									<input type="radio" name="state" value="OR" id="popup_radio4">
+									<input type="radio" name="state" value="02" id="popup_radio4" v-model="blckContCd">
 									<label for="popup_radio4">OR</label>
 								</td>
 							</tr>
@@ -43,35 +41,166 @@
 								<th>차단사유</th>
 								<td>
 									<div>
-										<select name="" id="">
-											<option value="일반">일반</option>
-											<option selected value="대출">대출</option>
-											<option value="의약품">의약품</option>
-											<option value="도박출">도박</option>
-											<option value="스미싱">스미싱</option>
-											<option value="기타">기타</option>
+										<select name="" id="" v-model.trim="blckRsnCd" ref="blckRsnCd">
+											<option v-for="(option, i) in rsnType" 
+                                            :value="blckRsnCd" 
+                                            v-bind:key="i"
+                                            :selected="blckRsnCd === option.code">
+                                                {{ option.codeNm }}
+                                            </option> 
 										</select>
 									</div>
 								</td>
 							</tr>
 							<tr>
 								<th>메모</th>
-								<td class="sender"><textarea class="memo_text"></textarea></td>
+								<td class="sender"><textarea class="memo_text" v-model.trim="memo" ref="memo"></textarea></td>
 							</tr>
 							
 						</tbody>
 					</table>
 				</form>
 				<div class="popup-btn2">
-					<button class="btn-pcolor">저장</button>
-					<button class="btn-default" onClick="ModalClose();">취소</button>
+					<button class="btn-pcolor" @click="doInsert">저장</button>
+					<button class="btn-default" @click="ModalClose();">취소</button>
 				</div>
 			</div>
-
+        </div>
+        </div>
 </template>
 
 <script>
+import api from '@/service/api';
+import riskMgtApi from '../service/riskMgtApi';
+import lodash from "lodash";
+import { utils_mixin, chkPattern2 } from '../service/mixins';
 export default {
+	mixins: [utils_mixin, chkPattern2],
+    data(){
+        return{
+
+		  row: {},
+        //   msgBlckword: {
+        //     word:'',
+        //   },
+          msgBlckwordList: [
+            {  seqNo: '' , word : '도박'},
+            // {  word : '스팸'},
+          ],
+		  rsnType: [],
+          tpType: [],
+        //   seqNo: '', // 일련번호
+          word: '', // 차단문구
+		  blckSndrno:'',
+		  sndblckTpCd:'',
+          blckRsnCd: '', // 차단사유
+		  blckYn:'',
+          blckContCd:'', //차단 조건
+		  chgDt:'',
+		  regId: '',
+          regDt: '',
+          memo: '', // 메모
+
+        }
+    },
+    created(){
+        this.formReset();
+    },
+
+    methods :{
+        ModalOpen(){
+            this.formReset();
+			var dimmed = document.getElementsByClassName('dimmed');
+			dimmed[0].style.display = 'block';
+			var wrap = document.getElementsByClassName('popup-wrap');
+			wrap[0].style.display = 'block';
+			var obj = document.getElementsByClassName('modal57');
+			obj[0].style.display = 'block';
+            this.setCodeDate();
+		},
+		// 모달 끄기
+		ModalClose(){
+			//this.formReset();
+			var dimmed = document.getElementsByClassName('dimmed');
+			dimmed[0].style.display = 'none';
+			var wrap = document.getElementsByClassName('popup-wrap');
+			wrap[0].style.display = 'none';
+			var popup = document.getElementsByClassName('modal57');
+			popup[0].style.display = 'none';
+			
+		},
+
+        setCodeDate(){
+        // 발송타입
+        api.commCode({'grpCd' : 'SNDBLCK_TP_CD'}).then(response => {
+            this.tpType = response.data.data.list;
+        });
+        api.commCode({'grpCd' : 'SNDBLCK_RSN_CD'}).then(response => {
+            this.rsnType = response.data.data.list;
+        });
+       },
+
+        async doInsert(){
+            if(this.doValidate() && window.confirm('등록 하시겠습니까?')){
+                try {
+					const response = await riskMgtApi.msgIntrcpList(this.row);
+					const result = response.data;
+					if (result != null && result.retCode == "0000") {
+						alert('저장 하였습니다.');
+					}
+						this.toComplete();
+                } catch(err) {
+                	alert("실패 하였습니다.");
+                }
+            }
+        },
+
+        doValidate(){    
+			if(this.isNull(this.word)){
+				this.$refs._word.focus();
+				return false;
+			}
+
+            this.row.blckRsnCd = this.blckRsnCd;
+            this.row.blckContCd = this.blckContCd;
+            this.row.memo = this.memo;
+            this.row.blckYn = this.blckYn;
+            this.row.list = this.msgBlckwordList
+            return true;
+
+        },
+
+        toComplete(){
+			this.$parent.$refs.table.reloadData();
+			this.ModalClose();
+        },
+        //신규등록 팝업에서 문구 추가 버튼
+        doAdd: function() {
+            if(this.msgBlckwordList.length < 10){
+                this.msgBlckwordList.push({
+                    //seqNo: '',
+                    word: this.word
+                });      
+                this.word = '';
+            }
+        },
+        //신규등록 팝업에서 문구 삭제 버튼
+        doDel(item, i){
+            localStorage.removeItem(item);
+            this.msgBlckwordList.splice(i, 1);
+        },
+        formReset(){
+			var type= this.insertType;
+			Object.assign(this.$data, this.$options.data());
+			this.insertType = type;
+		},
+
+
+
+
+        
+
+    },
 
 }
-</script>
+</script>

frontend/src/modules/riskMgt/components/IntrcpDetailPopup.vue

@@ -20,7 +20,7 @@
 							<tr>
 								<th>발송타입</th>
 								<td>
-									<div class="select_box">
+									<div>
 										<select name="" id="" v-model.trim="sndblckTpCd" ref="sndblckTpCd">
 											<option v-for="(option, i) in tpType" v-bind:value="option.code" v-bind:key="i">
                                                 {{ option.codeNm }}
@@ -32,7 +32,7 @@
 							<tr>
 								<th>차단사유</th>
 								<td>
-									<div class="select_box">
+									<div>
 										<select name="" id="" v-model.trim="blckRsnCd" ref="blckRsnCd">
 											<option v-for="(option, i) in rsnType" v-bind:value="option.code" v-bind:key="i">
                                                 {{ option.codeNm }}
@@ -57,7 +57,7 @@
 						</tbody>
 					</table>
 				</form>
-				<div class="pop-btn2 pop-btn3">
+				<div class="popup-btn2 pop-btn3">
 					<button class="btn-pcolor" @click="IntrcpUpdateModal();">수정</button>
 					<button class="btn-default" @click="IntrcpDetailModalClose();">취소</button>
 					<button class="btn-p2color" @click="IntrcpDeleteModal()">삭제</button>
@@ -131,10 +131,12 @@ export default {
 				dimmed[i].style.display = 'none';
 			}
 		},
+		//삭제버튼
 		async IntrcpDeleteModal(){
+			this.setCodeDate();
 			if(window.confirm('삭제 하시겠습니까?')){
 			try {
-				let response = await riskMgtApi.deleteIntrcp(this.row);
+				const response = await riskMgtApi.deleteIntrcp(this.row);
 				const result = response.data;
 				if (result != null && result.retCode == "0000") {
 				alert('삭제 하였습니다.');
@@ -147,10 +149,11 @@ export default {
 				}
 			}
     	},
+		//수정버튼
 		async IntrcpUpdateModal(){
-			if(window.confirm('수정 하시겠습니까?')){
+			if(this.doValidate() && window.confirm('수정 하시겠습니까?')){
 			try {
-				let response = await riskMgtApi.updateIntrcp(this.row);
+				const response = await riskMgtApi.updateIntrcp(this.row);
 				const result = response.data;
 				if (result != null && result.retCode == "0000") {
 				alert('수정 하였습니다.');
@@ -172,13 +175,23 @@ export default {
 			popup[0].style.display = 'none';
 			
 		},
-
+		
 		toComplete(){
 			this.$parent.$refs.table.reloadData();
-			alert('1');
-			this.ModalClose();
+			this.IntrcpDetailModalClose();
         },
 
+		doValidate(){
+			this.row.blckSndrno=this.blckSndrno;
+            this.row.sndblckTpCd = this.sndblckTpCd;
+			this.row.blckYn = this.blckYn;
+			this.row.chgDt = this.chgDt;
+            this.row.blckRsnCd = this.blckRsnCd;
+			this.row.chgId = this.chgId;
+			this.row.meno=this.meno;
+			return true;
+		},
+
 		
 
 		

frontend/src/modules/riskMgt/components/IntrcpMsgDetail.vue

@@ -0,0 +1,268 @@
+<template>
+	<!-- <div class="wrap bg-wrap"> -->
+    <div>
+		<div class="dimmed modal58" @click="ModalClose();"></div>
+		<div class="popup-wrap modal58">
+  <!-- 메시지 차단 신규 등록 -->
+			<div class="popup modal58 popup_form">
+				<div class="pop-head">
+					<h3 class="pop-tit">메시지 차단 상세</h3>
+				</div>
+				<form autocomplete="off">
+					<table>
+						<tbody>
+							<tr>
+								<th>차단문구</th>
+								<td class="input_add">
+									<input v-model="word">
+									<button type="button" class="button white add" @click="doAdd"></button>
+								</td>
+							</tr>
+							<tr>
+								<td colspan="2" class="registration" value="">
+									<ul>
+                                        <li v-for="(item, i) in msgBlckwordList" v-bind:key="item.word">
+                                           <span> {{ item.word }}<a href="#" @click="doDel(item, i)"><img src="@/assets/images/icon-del.png"/></a> </span>
+                                               <!--<button type="button" @click="doDel(item, i)"></button> -->
+                                        </li>
+									</ul>
+								</td>
+							</tr>
+							<tr>
+								<th>조건</th>
+								<td>
+									<input type="radio" name="state" value="01" id="popup_radio3" v-model="blckContCd" >
+									<label for="popup_radio3">AND</label>
+									<input type="radio" name="state" value="02" id="popup_radio4" v-model="blckContCd">
+									<label for="popup_radio4">OR</label>
+								</td>
+							</tr>
+							<tr>
+								<th>차단사유</th>
+								<td>
+									<div class="select_box">
+										<select name="" id="" v-model.trim="blckRsnCd" ref="blckRsnCd">
+											<option v-for="(option, i) in rsnType" 
+                                            v-bind:value="option.code" 
+                                            v-bind:key="i"
+                                            :selected="blckRsnCd === option.code">
+                                                {{ option.codeNm }}
+                                            </option> 
+										</select>
+									</div>
+								</td>
+							</tr>
+							<tr>
+								<th>메모</th>
+								<td class="sender"><textarea class="memo_text" v-model.trim="memo" ref="memo"></textarea></td>
+							</tr>
+							<tr>
+								<th>차단여부</th>
+								<td>
+									<input type="radio" name="state01" value="AND" id="popup_radio7">
+									<label for="popup_radio7">해제</label>
+									<input type="radio" name="state01" value="OR" id="popup_radio8">
+									<label for="popup_radio8">차단</label>
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</form>
+				<div class="popup-btn2 pop-btn3">
+                    <button class="btn-pcolor" @click="MsgIntrcpUpdateModal()">수정</button>
+					<button class="btn-default" @click="IntrcpDetailModalClose();">취소</button>
+                    <button class="btn-p2color" @click="MsgIntrcpDeleteModal()">삭제</button>
+                </div>
+			</div>
+        </div>
+        </div>
+</template>
+
+<script>
+import api from '@/service/api';
+import riskMgtApi from '../service/riskMgtApi';
+export default {
+    data(){
+        return{
+        
+		  row: {},
+          msgBlckwordList: [],
+		  rsnType: [],
+          tpType: [],
+          word: '', // 차단문구
+		  blckSndrno:'',
+		  sndblckTpCd:'',
+          blckRsnCd: '', // 차단사유
+		  blckYn:'',
+          blckContCd:'', //차단 조건
+		  chgDt:'',
+		  regId: '',
+          regDt: '',
+          memo: '', // 메모
+          seqNo: '',
+		  props: {},
+        }
+    },
+    created(){
+        this.formReset();
+    },
+
+    methods :{
+        ModalOpen(){
+            this.formReset();
+			var dimmed = document.getElementsByClassName('dimmed');
+			dimmed[0].style.display = 'block';
+			var wrap = document.getElementsByClassName('popup-wrap');
+			wrap[0].style.display = 'block';
+			var obj = document.getElementsByClassName('modal58');
+			obj[0].style.display = 'block';
+            this.setCodeDate();
+		},
+		// 모달 끄기
+		ModalClose(){
+			//this.formReset();
+			var dimmed = document.getElementsByClassName('dimmed');
+			dimmed[0].style.display = 'none';
+			var wrap = document.getElementsByClassName('popup-wrap');
+			wrap[0].style.display = 'none';
+			var popup = document.getElementsByClassName('modal58');
+			popup[0].style.display = 'none';
+			
+		},
+        async IntrcpMsgDetailModalOpen(props){
+			this.setCodeDate();
+            // console.log(props);
+			this.row.seqNo = props.seqNo;
+			try {
+				const response = await riskMgtApi.msgIntrcpDetail(this.row);
+				const result = response.data;
+				console.log(result);
+				if (result != null && result.retCode == "0000") {
+					this.blckContCd = result.data.blckContCd;
+					this.blckRsnCd = result.data.blckRsnCd;
+					this.memo = result.data.memo;
+					this.blckYn = result.data.blckYn;
+					this.msgBlckwordList = result.data.list;
+					// this.row.chgDt = result.data.chgDt;
+					// this.row.regId = result.data.regId;
+                    // this.row.list = result.data.msgBlckwordList
+				}
+			} catch(err) {
+				alert("실패 하였습니다.");
+			}
+			console.log('-----------')
+			console.log(this.row)
+			var dimmed = document.getElementsByClassName('modal58');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'block';
+			}
+			
+		},
+
+        setCodeDate(){
+        // 발송타입
+        api.commCode({'grpCd' : 'SNDBLCK_TP_CD'}).then(response => {
+            this.tpType = response.data.data.list;
+        });
+        api.commCode({'grpCd' : 'SNDBLCK_RSN_CD'}).then(response => {
+            this.rsnType = response.data.data.list;
+        });
+       },
+
+        doValidate(){    
+            this.row.blckRsnCd = this.blckRsnCd;
+            this.row.blckContCd = this.blckContCd;
+            this.row.memo = this.memo;
+            this.row.blckYn = this.blckYn;
+			this.row.chgId = this.regId;
+			this.row.chgDt = this.chgDt
+            this.row.list = this.msgBlckwordList
+            return true;
+
+        },
+
+        toComplete(){
+			this.$parent.$refs.table.reloadData();
+			this.IntrcpDetailModalClose();
+        },
+        //신규등록 팝업에서 문구 추가 버튼
+        doAdd: function() {
+            if(this.msgBlckwordList.length < 10){
+                this.msgBlckwordList.push({
+                    //seqNo: '',
+                    word: this.word
+                });      
+                
+            }
+        },
+        //신규등록 팝업에서 문구 삭제 버튼
+        doDel(item, i){
+            localStorage.removeItem(item);
+            this.msgBlckwordList.splice(i, 1);
+        },
+        formReset(){
+			var type= this.insertType;
+			Object.assign(this.$data, this.$options.data());
+			this.insertType = type;
+		},
+
+		//삭제버튼
+		async MsgIntrcpDeleteModal(){
+			this.setCodeDate();
+			if(window.confirm('삭제 하시겠습니까?')){
+			try {
+				const response = await riskMgtApi.deleteMsgIntrcp(this.row);
+				const result = response.data;
+				if (result != null && result.retCode == "0000") {
+				alert('삭제 하였습니다.');
+				// grid.reloadData();
+				// this.$refs.table.reloadData();
+				this.toComplete();
+				}
+			} catch(err) {
+				alert("실패 하였습니다.");
+				}
+			}
+    	},
+
+		//수정버튼
+		async MsgIntrcpUpdateModal(){
+			if(this.doValidate() && window.confirm('수정 하시겠습니까?')){
+			try {
+				const response = await riskMgtApi.updateMsgIntrcp(this.row);
+				const result = response.data;
+				if (result != null && result.retCode == "0000") {
+				alert('수정 하였습니다.');
+				}
+				this.toComplete();
+			} catch(err) {
+				alert("실패 하였습니다.");
+				}
+			}
+    	},
+
+		IntrcpDetailModalClose(){
+			//this.formReset();
+			var dimmed = document.getElementsByClassName('modal58');
+			for(var i = 0; i < dimmed.length; i++){
+				dimmed[i].style.display = 'none';
+			}
+		},
+
+		ModalClose(){
+			//this.formReset();
+			var dimmed = document.getElementsByClassName('dimmed');
+			dimmed[0].style.display = 'none';
+			var wrap = document.getElementsByClassName('popup-wrap');
+			wrap[0].style.display = 'none';
+			var popup = document.getElementsByClassName('modal58');
+			popup[0].style.display = 'none';
+			
+		},
+
+        
+
+    },
+
+}
+</script>

frontend/src/modules/riskMgt/service/mixins.js

@@ -0,0 +1,353 @@
+import lodash from "lodash";
+
+const utils_mixin = {
+      methods:{
+      /** * 이메일 형식 체크 * * @param 데이터 */
+      emailCheck(email,rtnArrYn) {
+          if(this.isNull(rtnArrYn)){
+            rtnArrYn='N';
+          }
+          // var regExp = /(^[A-Za-z0-9_\.\-]+)@([A-Za-z0-9\-]+\.[A-Za-z0-9\-]+)/;
+          var regExp = /^([0-9a-zA-Z_\.\-]([-_.]?[0-9a-zA-Z_\.\-])*)@([0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$)/i;//이메일 정규식
+  
+          if(regExp.test(email) == false) {
+            // 이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
+            if(rtnArrYn == 'Y'){
+                return email;
+              }
+            return false;
+          }else{
+              var myArray = regExp.exec(email);
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return true;
+          }
+  
+        },
+        /** * 전화번호 포맷으로 변환 * * @param 데이터 */
+        formatPhone(phoneNum,fmt,rtnArrYn) {
+          if(this.isNull(fmt)){
+            fmt='';
+          }
+          if(this.isNull(rtnArrYn)){
+            fmt='N';
+          }
+          if(this.isPhone(phoneNum)) {
+            var rtnNum;
+            var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+            if(regExp.test(phoneNum)){
+              myArray = regExp.exec(phoneNum);
+              rtnNum = myArray[1]+fmt + myArray[2]+fmt+myArray[3];
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return rtnNum;
+            } else {
+              regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+              if(regExp.test(phoneNum)){
+                myArray = regExp.exec(phoneNum);
+                rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
+                if(rtnArrYn == 'Y'){
+                  return myArray;
+                }
+                return rtnNum;
+              } else {
+                return phoneNum;
+              }
+            }
+          } else {
+            return phoneNum;
+          }
+        },
+        /** * 핸드폰번호 포맷으로 변환 * * @param 데이터 */
+        formatMobile(phoneNum,fmt,rtnArrYn) {
+  
+          if(this.isNull(fmt)){
+            fmt='';
+          }
+          if(this.isNull(rtnArrYn)){
+            fmt='N';
+          }
+          if(this.isMobile(phoneNum)) {
+  
+            var rtnNum;
+            var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
+            var myArray;
+  
+            if(regExp.test(phoneNum)){
+  
+              myArray = regExp.exec(phoneNum);
+              rtnNum = myArray[1]+fmt+myArray[2]+fmt+myArray[3];
+              if(rtnArrYn == 'Y'){
+                return myArray;
+              }
+              return rtnNum;
+            } else {
+              return phoneNum;
+            }
+          } else {
+            return phoneNum;
+          }
+        },
+        
+        /** * 전화번호 형식 체크 * * @param 데이터 */
+        isPhone(phoneNum) {
+          var regExp =/(02)([0-9]{3,4})([0-9]{4})$/;
+          if(regExp.test(phoneNum)){
+            return true;
+            } else {
+              regExp =/(0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/;
+              if(regExp.test(phoneNum)){
+                return true;
+              } else {
+                return false;
+              }
+          }
+        },
+  
+        /** * 핸드폰번호 형식 체크 * * @param 데이터 */
+        isMobile(phoneNum) {
+          var regExp =/(01[016789])([0-9]{3,4})([0-9]{4})$/;
+          var myArray;
+          if(regExp.test(phoneNum)){
+            myArray = regExp.exec(phoneNum);
+            return true;
+          } else {
+            return false;
+          }
+        },
+        isMobile2(phoneNum) {
+          var regExp =/(1[016789])([0-9]{3,4})([0-9]{4})$/;
+          var myArray;
+          if(regExp.test(phoneNum)){
+            myArray = regExp.exec(phoneNum);
+            return true;
+          } else {
+            return false;
+          }
+        },
+  
+        isNull(obj){
+          if(lodash.isNil(obj) || lodash.trim(obj) == ''){
+            return true;
+          }
+          return false;
+        },
+        getParent(name){
+          let p = this.$parent;
+          while(typeof p !== 'undefined'){
+              if(p.$options.name == name) {
+              return p;
+              }else {
+              p = p.$parent;
+              }
+          }
+          return false;
+        },
+        getJsonObj(str){
+          return JSON.parse(JSON.stringify(str));
+        },
+      }
+  };
+  
+  var chkPattern2 = {
+      data: function () {
+          return {      
+          }
+      },
+      methods: {
+      selSesStorage(keyLike){
+        if(this.isNull(keyLike)){
+          return null;
+        }
+        if(sessionStorage.length > 0){
+          let keyList = [];
+          for(let i=0;i<sessionStorage.length;i++){
+            const keyNm = sessionStorage.key(i);
+            if(keyNm.indexOf(keyLike) > -1){
+              keyList.push({name : keyNm, value : sessionStorage.getItem(keyNm)});
+            }
+          }
+          if(keyList.length > 0){
+            return keyList;
+          }
+          return null;
+        }
+        return null;
+      },
+  
+      delSesStorage(keyList){
+        if(this.isNull(keyList)){
+          return null;
+        }
+        if(keyList.length > 0){
+          keyList.map((o) => (sessionStorage.removeItem(o.name)));
+          return true;
+        }
+      },
+  
+      setGridMouseDownActive(){
+          const ele = document.querySelector(`div.tui-grid-container.tui-grid-show-lside-area`);
+          if(window.getEventListeners(ele).mousedown){
+            ele.removeEventListener('mousedown',window.getEventListeners(ele).mousedown[0].listener);
+          }
+      },
+          restrictChars : function($event,regExp,hanYn){
+  
+        if(this.isNull(hanYn)){
+          hanYn='N';
+        }
+        if(hanYn === 'N' && $event.type === 'keydown'){
+          if($event.keyCode === 229){
+            $event.preventDefault();
+            return false;
+          }
+        }
+  
+        if($event.type === 'keypress'){
+          //한글 처리 불가
+          if(regExp.test(String.fromCharCode($event.charCode))) {
+            return true;
+          }else{
+            $event.preventDefault();
+            return false;
+          }
+        }
+  
+        if(hanYn === 'N' && ( $event.type === 'keyup' || $event.type === 'input' || $event.type === 'change' || $event.type === 'blur')){
+          $event.target.value = $event.target.value.replace(/[ㄱ-ㅎㅏ-ㅣ가-힣]/g,'');
+          $event.preventDefault();
+          return false;
+        }
+        return true;
+      },
+          setLenth: function (e, len) {
+              this.cut(e, len);
+      },
+      onlyCustom: function (e,strRegExp,hanYn) {
+        var regExp_g = new RegExp(strRegExp,'g');
+        this.cut(e);
+              return this.restrictChars(e,regExp_g,hanYn);
+      },
+      onlyCommon: function(strRegExp, e, len, isEventCall, hanYn) {
+        var regExp_g = new RegExp(strRegExp,'g');         
+        if(isEventCall === 'N'){
+          if(!this.cut(e, len, isEventCall)){
+            return false;
+          }
+          if(!regExp_g.test(e.value)){
+            return false;
+          }
+          return true;
+        }
+        this.cut(e, len);
+              return this.restrictChars(e,regExp_g,hanYn);
+      },
+          onlyNum: function (e, len, isEventCall) {
+        var strRegExp = '^[0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyEng: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },
+      onlyLowerEng: function (e, len, isEventCall) {
+        var strRegExp = '^[a-z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },
+      onlyUpperEng: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyEmail: function (e, len, isEventCall) {
+        var strRegExp = '^[a-zA-Z0-9_\.\-@._-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyName: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyTitle: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyText: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9_-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyPassword: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z0-9!@#$%^&*]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyId: function (e, len, isEventCall) {
+        var strRegExp = '^[A-Za-z0-9_\.\-]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyIp: function (e, len, isEventCall) {
+        var strRegExp = '^[0-9,.*]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+          },
+          onlyRoleNm_Space: function (e, len, isEventCall) {
+        var strRegExp = '^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z0-9]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall,'Y');
+          },
+          onlyRoleId_UnderBar: function (e, len, isEventCall) {
+        var strRegExp = '^[a-zA-Z0-9_]*$';
+        return this.onlyCommon(strRegExp, e, len, isEventCall);
+      },    
+          cut: function (ele, len, isValidChk) {
+        let e=ele;
+        if (typeof ele.target != "undefined") {
+          e=ele.target;
+        }
+        let max = this.isNull(len) ? e.attributes.maxlength.value : len;      
+        let str = e.value;
+  
+        if (this.bytes(str) > max) {
+          if(this.isNull(isValidChk)){
+            e.value = this.cutBytes(str, max);
+          }
+          return false;
+        }			
+        return true;
+          },
+          cutBytes: function (str, len) {
+        while(1 === 1){
+          if(this.bytes(str) <= len){
+            return str;
+          }
+          str = str.slice(0,-1);
+        }
+          },
+          bytes: function (str) {
+              var length = ((s,b,i,c) => {
+            // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);  // 한글 3바이트
+            // for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?2:c>>7?1:1);     //한글 2바이트
+          b=0,i=0;
+          while(1 === 1){          
+            c = s.charCodeAt(i++);
+            if (isNaN(c)) {
+              break;
+            }
+            b += c >> 11 ? 2 : c >> 7 ? 1 : 1;
+          }
+          return b
+        })(str);
+              return length;
+          },
+          checkPhone: function(str) {
+              str = str.replace(/[-\s]+/g, '');
+              if (str.charAt(0)!="0"){
+                  str = "0"+str;
+              }
+              if (str.length<10||str.length>12){return "";}
+              if (isNaN(str)){return "";	}
+              if (str.substr(0,2)!="01" && str.substr(0,3)!="070"  && str.substr(0,4)!="0505" && str.substr(0,4)!="0503"){return "";	}
+              return str;
+  
+          },
+      }
+  };
+  export { utils_mixin, chkPattern2 };

frontend/src/modules/riskMgt/service/riskMgtApi.js

@@ -1,11 +1,7 @@
 import httpClient from '@/common/http-client'
 
-// HUBEZ_BO_API_11004 발신번호 차단 수정
-const updateIntrcp = (params) => {
-    return httpClient.post('/api/v1/bo/riskMgt/sendNum/updateIntrcp', params, { withCredentials: false });
-}
 
-// HUBEZ_BO_API_11004 발신번호 차단 상세 정보 조회
+// HUBEZ_BO_API_11002 발신번호 차단 상세 정보 조회
 const intrcpDetail = (params) => {
     return httpClient.post('/api/v1/bo/riskMgt/sendNum/intrcpDetail', params, { withCredentials: false });
 }
@@ -13,15 +9,38 @@ const intrcpDetail = (params) => {
 const insertIntrcp = (params) => {
     return httpClient.post('/api/v1/bo/riskMgt/sendNum/insertIntrcp', params, { withCredentials: false });
 }
-
+// HUBEZ_BO_API_11004 발신번호 차단 수정
+const updateIntrcp = (params) => {
+    return httpClient.post('/api/v1/bo/riskMgt/sendNum/updateIntrcp', params, { withCredentials: false });
+}
+// HUBEZ_BO_API_11005 발신번호 차단 삭제
 const deleteIntrcp = (params) => {
     return httpClient.post('/api/v1/bo/riskMgt/sendNum/deleteIntrcp', params, { withCredentials: false });
 }
 
+const msgIntrcpList = (params) => {
+    return httpClient.post('/api/v1/bo/riskMgt/msg/insertIntrcp', params, { withCredentials: false });
+}
+
+const msgIntrcpDetail = (params) => {
+    return httpClient.post('/api/v1/bo/riskMgt/msg/intrcpDetail', params, { withCredentials: false });
+}
+
+const deleteMsgIntrcp = (params) => {
+    return httpClient.post('/api/v1/bo/riskMgt/msg/deleteIntrcp', params, { withCredentials: false });
+}
+
+const updateMsgIntrcp = (params) => {
+    return httpClient.post('/api/v1/bo/riskMgt/msg/updateIntrcp', params, { withCredentials: false });
+}
 
 export default {
     updateIntrcp,
     intrcpDetail,
     insertIntrcp,
-    deleteIntrcp
+    deleteIntrcp,
+    msgIntrcpList,
+    msgIntrcpDetail,
+    deleteMsgIntrcp,
+    updateMsgIntrcp
 }

frontend/src/modules/riskMgt/views/All.vue

@@ -4,17 +4,29 @@
 
       <div class="contents_wrap">
         <div class="top_wrap">
-          <h3 class="title">차단내역</h3>
+          <h3 class="title">웹발송 차단내역</h3>
           <p class="breadcrumb">리스크관리 &gt; 차단 내역</p>
         </div>
         <form autocomplete="off" class="search_form">
           <div class="search_wrap">
+          <label for="right" class="label">발송일</label>
 						<div class="group">
 							<div class="input_box cal one">
-								<label for="right" class="label">발송일</label>
-								<input class="" type="text" id="" placeholder="2022-10-12">
-							</div>
-							<button type="button" class="button grey btn-a">오늘</button>
+                <vuejs-datepicker
+                      :language="ko"
+                      :format="customFormatter"
+                      v-model="startDate"
+                      @selected="selectedStartDate(0)"
+                  ></vuejs-datepicker>
+								<!-- <input class="" type="text" id=""
+                 placeholder="2022-10-12"
+                  v-model="grid.params.startDt"
+                   @click="openStartPicker = true" />
+                <div v-show="openStartPicker === true">
+                <calendar ref="calendar"/> -->
+                <!-- </div> -->
+              </div>
+							<button type="button" class="button grey btn-a" @click="todayDate">오늘</button>
 							<div class="select_box id">
 									<label for="right" class="label">차단사유</label>
 									<select name="" id="" v-model="grid.params.blckRsnCd">
@@ -40,11 +52,11 @@
 						<div class="group">
 							<div class="input_box">
 								<label for="right" class="label">발신번호</label>
-								<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.sndrno">
+								<input class="search-box" type="number" id="search" placeholder="검색어 입력" v-model="grid.params.sndrno">
 							</div>
 							<div class="input_box">
 								<label for="right" class="label">수신번호</label>
-								<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.rcvno">
+								<input class="search-box" type="number" id="search" placeholder="검색어 입력" v-model="grid.params.rcvno">
 							</div>
 							<div class="select_box">
 								<label for="right" class="label">상세검색</label>
@@ -88,22 +100,23 @@
           </custom-grid>
 				</div>
       </div>
-
+<common-modal ref="commmonModal"></common-modal>
     </div>
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
+import moment from 'moment';
+import commonModal from "@/components/modal/commonModal";
+
 //import api from '../service/api';
-class customBRegNo {
+class CustomATagRenderer {
     constructor(props) {
         this.props = props;
-        const el = document.createElement('td');
-        var bizrno = String(props.colValue);
-        el.innerText= bizrno;
-        if(bizrno.length == 10){
-        el.innerText= bizrno.substring(0,3)+'-'+bizrno.substring(3,5)+'-'+bizrno.substring(5,10)
-        }
+        const el = document.createElement('a');
+        el.href = 'javascript:void(0);';
+        el.className = 'btn_text';
+        el.innerText= String(props.colValue)
         this.el = el;
     }
 
@@ -112,6 +125,10 @@ class customBRegNo {
     }
 
     addEvent(selEl) {
+        selEl.addEventListener("click", () => {
+            const { callback } = this.props["cgrido" + this.props.colName].options;
+            callback(this.props);
+        });
     }
 }
 export default {
@@ -119,6 +136,16 @@ export default {
   data() {
     return {
       totalItems: 0,
+      // 달력 데이터      
+      ko: vdp_translation_ko.js,
+      periodDay: 7,
+      sDateDiv: 'day',
+      startDate: new Date(),
+      endDate: new Date(),     
+
+      statType: [],
+      userType: [],
+      row:{},
       grid: {
         url: '/api/v1/bo/riskMgt/web/intrcpList',
         perPage: 20,
@@ -143,10 +170,15 @@ export default {
         columns: [          
           { name: 'no', header: 'NO', align: 'center', width: 60 },
           { name: 'blckTpCd', header: '차단구분', align: 'center', width: 160 },
-          { name: 'userId', header: '발송ID', align: 'center', width: 100, renderer: {type: customBRegNo}},
+          { name: 'userId', header: '발송ID', align: 'center', width: 100},
           { name: 'sndrno', header: '발신번호', align: 'center', width: 130},
-          { name: 'custNm', header: '고객사명', align: 'center', width: 130},
-          { name: 'bizrno', header: '사업자번호', align: 'center', width: 90, renderer: {type: customBRegNo} },
+          { name: 'custNm', header: '고객사명', align: 'center', width: 130, renderer: {
+            type: CustomATagRenderer
+            , options: {
+              callback: this.custDetail,
+            }
+          }},
+          { name: 'bizrno', header: '사업자번호', align: 'center', width: 90},
           { name: 'rcvno', header: '수신번호', align: 'center', width: 90 },
           { name: 'blckRsnCd', header: '차단사유', align: 'center', width: 90 },
           { name: 'blckDt', header: '발송일자', align: 'center', width: 90 },
@@ -160,14 +192,17 @@ export default {
           sndrno: '',
           rcvno: '',
           searchType1: '',
-          searchText1: ''
+          searchText1: '',
+          startDt: new Date(+new Date() + 3240 * 10000).toISOString().split("T")[0],
         },
         excelHeader: []
       }    
     };
   },  
   components: {
-    customGrid: customGrid
+    customGrid: customGrid,
+    commonModal,
+    vuejsDatepicker,
   },
   destroyed() {
       this.$store.commit('searchcondition/updateSearchCondition', {
@@ -188,6 +223,7 @@ export default {
     this.$store.commit("login/isLogin", true);
     this.$store.commit("login/isAuthChk", true);
     const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
+    this.setPeriodDay(0);
   },
   mounted() {
     let page = 1;
@@ -214,19 +250,81 @@ export default {
       this.$store.commit('searchcondition/updateSearchCondition', {
         page: getP._currentPage,        
 		    perPage: this.perPageCnt,        
-        params: {
-          blckDt: '',
-          blckRsnCd: '',
-          blckTpCd: '',
-          sndrno: '',
-          rcvno: '',
-          searchType1: '',
-          searchText1: ''
-		    }
+        params: this.grid.params
       });
 
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
       //console.log("getCondition : "+ getCondition.perPage);
+    },
+    setPeriodDay(day) {
+      this.periodDay = day;
+      this.endDate = new Date();
+      this.startDate = moment(this.endDate)
+          .subtract(day, 'day')
+          .toDate();
+
+      this.closeDate('start');
+    },
+    selectedStartDate(day) {      
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }     
+      console.log(this.startDate);
+    },
+    selectedEndDate(day) {
+      if (day != undefined && day != null) {
+        this.periodDay = day;
+      }
+    },
+    closeDate(type) {
+      if (type != undefined && type != null) {
+         
+      }
+      console.log(this.startDate);
+    },
+    customFormatter: function(date) {
+      if (this.sDateDiv == 'month') {
+        return moment(date).format('YYYY-MM');
+      } else if (this.sDateDiv == 'year') {
+        return moment(date).format('YYYY');
+      } else {
+        return moment(date).format('YYYY-MM-DD');
+      }
+    },
+    //회원 상세페이지로 이동
+    custDetail(props) {
+      this.row.custNm = props.serviceId;
+      this.$router.push({ name: 'subsDetail', params: this.row });
+    },
+    calendarCalbackFnc(year, month, day){
+
+      if(this.openStartPicker){
+        this.startDate= year +''+ month +''+ day
+        if(Number(this.endDate) < Number(this.startDate) && this.endDate !== 0){
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '조회 시작일이 종료일보다 큽니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+          this.openStartPicker = false
+          return false
+        }
+        this.grid.params.startDt = year + '-' + month + '-' + day
+        this.openStartPicker = false
+      }
+      if(this.openEndPicker){
+        this.endDate=year +''+ month +''+ day
+        if(Number(this.endDate) < Number(this.startDate) && this.startDate !== 0){
+          this.row.title = '청약고객관리';
+          this.row.msg1 = '조회 종료일이 시작일보다 작습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+          this.openEndPicker = false
+          return false
+        }
+        this.grid.params.endDt = year + '-' + month + '-' + day
+        this.openEndPicker = false
+      }
+    },
+    todayDate() {
+      this.startDate = new Date(+new Date() + 3240 * 10000).toISOString().split("T")[0];
     }
   },
   beforeRouteLeave(to, from, next) {

frontend/src/modules/riskMgt/views/IntrcpList.vue

@@ -82,7 +82,8 @@
             </div>
             <insert-intrcp-pop ref="insertIntrcpPop"> </insert-intrcp-pop>
             <intrcp-detail-popup ref="intrcpDetailPopup"></intrcp-detail-popup>
-			</div>
+            <common-modal ref="commmonModal"></common-modal>
+      </div>
 		</div>
 </template>
 
@@ -91,6 +92,7 @@ import customGrid from '@/components/CustomGrid';
 import api from '@/service/api.js';
 import intrcpDetailPopup from '../components/IntrcpDetailPopup';
 import insertIntrcpPop from '../components/InsertIntrcpPop';
+import commonModal from "@/components/modal/commonModal";
 //import api from '../service/api';
 
 class CustomATagRenderer {
@@ -128,6 +130,7 @@ export default {
       ],
       grid: {
         url: '/api/v1/bo/riskMgt/sendNum/intrcpList',
+        pagePerRows: 20,
         perPage: 20,
         pagination: true,
         isCheckbox: false,
@@ -170,7 +173,8 @@ export default {
   components: {
     customGrid: customGrid,
     intrcpDetailPopup,
-    insertIntrcpPop
+    insertIntrcpPop,
+    commonModal,
   },
   destroyed() {
      
@@ -200,6 +204,10 @@ export default {
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
+    changePerPage: function(){ 	// 페이지당 조회할 개수
+      this.grid.pagePerRows = this.perPageCnt;
+      this.search(true);
+    },
     sendStoreData: function() {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP._currentPage);

frontend/src/modules/riskMgt/views/Msg.vue

@@ -34,15 +34,13 @@
 				<div class="info">
 					<div class="count">총 <span> {{ totalItems}} </span>건
 						<div class="select_box NumberSe">
-							<select name="" id="perpage" v-model="grid.pagePerRows" @keyup.enter="search">
-								<option value="20">20</option>
-								<option value="50" selected>50</option>
-								<option value="100">100</option>
+							<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
+								<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>								
 							</select>
 					    </div>					
 					</div>
 					<div class="button_group">
-						<button type="button" class="button blue add">신규등록</button>
+						<button type="button" class="button blue add" @click="ModalOpen()">신규등록</button>
 					</div>
 				</div>
             <div class="table">    
@@ -50,35 +48,68 @@
                         ref="table"
                         :totalItems="'totalItems'"
                         :url="grid.url"
-                        :perPage="grid.perPage"
+                        :pagePerRows="grid.pagePerRows"
                         :initialRequest="grid.initialRequest"
                         :pagination="grid.pagination"
                         :isCheckbox="grid.isCheckbox"
                         :columns="grid.columns"
                         :noDataStr="grid.noDataStr"
                         :addCls="grid.addCls"
-                        :header="grid.header"        
+                        :header="grid.headder"        
                     ></custom-grid>
             </div>
 			</div>
+      <insert-msg-pop ref="InsertMsgPop"></insert-msg-pop>
+      <intrcp-msg-detail ref="IntrcpMsgDetail"></intrcp-msg-detail>
+      <common-modal ref="commmonModal"></common-modal>
 		</div>
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
+import InsertMsgPop from '../components/InsertMsgPop';
+import IntrcpMsgDetail from '../components/IntrcpMsgDetail';
+import commonModal from "@/components/modal/commonModal";
+undefined
 //import api from '../service/api';
+class CustomATagRenderer {
+    constructor(props) {
+        this.props = props;
+        const el = document.createElement('a');
+        el.href = 'javascript:void(0);';
+        el.className = 'btn_text';
+        el.innerText= String(props.colValue)
+        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: 'intrcpList',
   data() {
     return {
       totalItems: 0,
       // 테이블 리스트 데이터
-      perPageCnt: 20,
+      perPageCnt: 50,
+      options: [
+        { text: '20', value: 20},
+        { text: '50', value: 50},
+        { text: '100', value: 100}
+      ],
       grid: {
         url: '/api/v1/bo/riskMgt/msg/intrcpList',
-        perPage: 20,
+        perPageRows: 20,
         pagination: true,
-        isCheckbox: true,
+        isCheckbox: false,
         initialRequest: false,
         addCls: 'box_OFvis',
 
@@ -86,6 +117,7 @@ export default {
         header: [
           [
             { header: 'NO', childNames: [] },
+            { header: '일련번호', align: 'center', childNames: [] },
             { header: '차단메시지', childNames: [] },
             { header: '차단여부', childNames: [] },
             { header: '마지막 수정일', childNames: [] },
@@ -96,7 +128,9 @@ export default {
 
         columns: [          
           { name: 'no', header: 'NO', align: 'center', width: 60 },
-          { name: 'word', header: '차단메시지', align: 'center', width: 160 },
+          { name: 'seqNo', header: '일련번호', align: 'center', width: 60, hidden: true},
+          { name: 'word', header: '차단메시지', align: 'center', width: 160,
+          renderer: {type: CustomATagRenderer, options: { callback: this.msgDetailPop}} },
           { name: 'blckYn', header: '차단여부', align: 'center', width: 130},
           { name: 'lastChgDt', header: '마지막 수정일', align: 'center', width: 130},
           { name: 'blckRsnCd', header: '차단사유', align: 'center', width: 130},      
@@ -106,25 +140,21 @@ export default {
         params: {
           regId: '',
           blckRsnCd: '',
-          word: ''
+          word: '',
+          seqNo: ''
         },
         excelHeader: []
       }    
     };
   },  
   components: {
-    customGrid: customGrid
-  },
+    customGrid: customGrid,
+    InsertMsgPop,
+    IntrcpMsgDetail,
+    commonModal,
+},
   destroyed() {
-      this.$store.commit('searchcondition/updateSearchCondition', {
-        page: 1,
-        perPage: 20,
-        params: {
-          regId: '',
-          blckRsnCd: '',
-          word: ''
-        }
-      });
+
   },
   created(){
     this.$store.commit("login/isLogin", true);
@@ -150,22 +180,30 @@ export default {
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
+    changePerPage: function(){ 	// 페이지당 조회할 개수
+      this.grid.pagePerRows = this.perPageCnt;
+      this.search(true);
+    },
     sendStoreData: function() {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP);
       this.$store.commit('searchcondition/updateSearchCondition', {
         page: getP._currentPage,        
 		    perPage: this.perPageCnt,        
-        params: {
-          regId: '',
-          blckRsnCd: '',
-          word: ''
-		    }
+        params: this.grid.params
       });
 
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
       //console.log("getCondition : "+ getCondition.perPage);
-    }
+    },
+        ModalOpen: function(target){      
+      this.$refs.InsertMsgPop.ModalOpen(target);
+    },
+      msgDetailPop(props) {
+        // console.log(props);
+        this.$refs.IntrcpMsgDetail.IntrcpMsgDetailModalOpen(props);
+      } 
+
   },
   beforeRouteLeave(to, from, next) {
 	

frontend/src/modules/riskMgt/views/ZezNum.vue

@@ -15,11 +15,11 @@
 						</div>
 						<div class="input_box">
 							<label for="search" class="label">인증코드</label>
-							<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.authcd080"/>
+							<input class="search-box" type="number" id="search" placeholder="검색어 입력" v-model="grid.params.authcd080"/>
 						</div>
 						<div class="input_box">
 							<label for="right" class="label">수신번호</label>
-							<input class="search-box" type="text" id="search" placeholder="검색어 입력" v-model="grid.params.rcvblckno"/>
+							<input class="search-box" type="number" id="search" placeholder="검색어 입력" v-model="grid.params.rcvblckno"/>
 						</div>
 						<button type="button" class="button grey" @click="search">조회</button>
 					</div>
@@ -27,10 +27,8 @@
         <div class="info">
           <div class="count">총 <span> {{ totalItems }} </span>건
 						<div class="select_box NumberSe">
-							<select name="" id="perpage" v-model="grid.pagePerRows" @keyup.enter="search">
-								<option value="20">20</option>
-								<option value="50" selected>50</option>
-								<option value="100">100</option>
+							<select name="" id="" v-model="perPageCnt" @change="changePerPage()">
+								<option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>
 							</select>
 					    </div>					
 					</div>
@@ -50,6 +48,7 @@
            :header="grid.headder">
           </custom-grid>
 				</div>
+        <common-modal ref="commmonModal"></common-modal>
       </div>
 
     </div>
@@ -57,16 +56,15 @@
 
 <script>
 import customGrid from '@/components/CustomGrid';
+import commonModal from "@/components/modal/commonModal";
 //import api from '../service/api';
-class customBRegNo {
+class CustomATagRenderer {
     constructor(props) {
         this.props = props;
-        const el = document.createElement('td');
-        var bizrno = String(props.colValue);
-        el.innerText= bizrno;
-        if(bizrno.length == 10){
-        el.innerText= bizrno.substring(0,3)+'-'+bizrno.substring(3,5)+'-'+bizrno.substring(5,10)
-        }
+        const el = document.createElement('a');
+        el.href = 'javascript:void(0);';
+        el.className = 'btn_text';
+        el.innerText= String(props.colValue)
         this.el = el;
     }
 
@@ -75,6 +73,10 @@ class customBRegNo {
     }
 
     addEvent(selEl) {
+        selEl.addEventListener("click", () => {
+            const { callback } = this.props["cgrido" + this.props.colName].options;
+            callback(this.props);
+        });
     }
 }
 export default {
@@ -82,9 +84,17 @@ export default {
   data() {
     return {
       totalItems: 0,
+      userType: [],
+      row:{},
+      perPageCnt: 50,
+      pagePerRows: 20,
+      options: [
+        { text: '20', value: 20},
+        { text: '50', value: 50},
+        { text: '100', value: 100}
+      ],
       grid: {
         url: '/api/v1/bo/riskMgt/zezNum/intrcpList',
-        perPage: 20,
         pagination: true,
         isCheckbox: false,
         initialRequest: false,
@@ -103,8 +113,13 @@ export default {
 
         columns: [          
           { name: 'no', header: 'NO', align: 'center', width: 60 },
-          { name: 'custNm', header: '고객사', align: 'center', width: 160 },
-          { name: 'bizrno', header: '사업자번호', align: 'center', width: 100, renderer: {type: customBRegNo}},
+          { name: 'custNm', header: '고객사', align: 'center', width: 160,  renderer: {
+            type: CustomATagRenderer
+            , options: {
+              callback: this.memberDetail,
+            }
+          } },
+          { name: 'bizrno', header: '사업자번호', align: 'center', width: 100},
           { name: 'authcd080', header: '인증코드', align: 'center', width: 130},
           { name: 'rcvblckno', header: '수신번호', align: 'center', width: 130},
           { name: 'regDt', header: '등록일', align: 'center', width: 130},
@@ -121,18 +136,11 @@ export default {
     };
   },  
   components: {
-    customGrid: customGrid
+    customGrid: customGrid,
+    commonModal,
   },
   destroyed() {
-      this.$store.commit('searchcondition/updateSearchCondition', {
-        page: 1,
-        perPage: 20,
-        params: {
-          regTpCd: '',
-          authcd080: '',
-          rcvblckno: ''
-        }
-      });
+
   },
   created(){
     this.$store.commit("login/isLogin", true);
@@ -154,25 +162,31 @@ export default {
   },
   methods: {
     search: function(isKeep) {
-      console.log(this.grid.params);
+      console.log('this.perPageCnt'+this.perPageCnt);
+      //console.log(this.grid.params);	  
       this.$refs.table.search(this.grid.params, isKeep);
       this.sendStoreData();
     },
+    changePerPage: function(){ 	// 페이지당 조회할 개수
+      this.grid.pagePerRows = this.perPageCnt;
+      this.search(true);
+    },
     sendStoreData: function() {
       const getP = this.$refs.table.getPagination();
       console.log("==========getP : " + getP);
       this.$store.commit('searchcondition/updateSearchCondition', {
-        page: getP._currentPage,        
-		    perPage: this.perPageCnt,        
-        params: {
-          regTpCd: '',
-          authcd080: '',
-          rcvblckno: ''
-		    }
+        page: getP._currentPage,
+        perPage: this.perPageCnt,
+        params: this.grid.params
       });
 
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
       //console.log("getCondition : "+ getCondition.perPage);
+    },
+    //회원 상세페이지로 이동
+    memberDetail(props) {
+      this.row.custNm = props.serviceId;
+        this.$router.push({ name: 'subsDetail', params: this.row});
     }
   },
   beforeRouteLeave(to, from, next) {

frontend/src/modules/sendNumMgt/components/AdminListPop.vue

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <!-- 관리자ID 조회 -->
+    <div class="popup popup_form modal44">
+      <div class="pop-head">
+        <h3 class="pop-tit">관리자ID 조회</h3>
+      </div>
+      <div class="pop-cont-detail input_box">
+        <label>ID</label>
+        <div class="input_search">
+          <input class="search-box" type="text" value="" v-model="grid.params.searchText1">
+          <button type="button" class="button btn-p2color" @click="search">조회</button>
+        </div>
+      </div>
+        <table class="table-c">
+          <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="popup-btn2">
+        <button class="btn-default" @click="adminNmPopClose();">닫기</button>
+      </div>
+    </div>
+
+  <common-modal ref="commmonModal"></common-modal>
+
+  </div>
+</template>
+<script>
+import customGrid from "@/components/CustomGrid";
+import commonModal from "@/components/modal/commonModal";
+
+class CustomATagRendererAdminList {
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText= String(props.colValue)
+    this.el = el;
+  }
+
+  getElement() {
+    return this.el;
+  }
+
+  addEvent(selEl) {
+    selEl.addEventListener("click", () => {
+      const { callback } = this.props["cgrido" + this.props.colName].options;
+      console.log(callback)
+
+      callback(this.props);
+    });
+  }
+}
+
+class CustomATagRenderer {
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText= String(props.colValue)
+    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: "adminNmPop",
+  data(){
+      return {
+        row: {},
+        resultData: false,
+
+        perPageCnt: 10,
+        userId: '',
+        grid: {
+          url: '/api/v1/bo/sendNumMgt/adminList',
+          pagePerRows: 10,
+          pagination: true,
+          isCheckbox: false,        // true:첫번째 컬럼 앞에 체크박스 생성 / false:체크박스 제거
+          initialRequest: false,
+          addCls: 'box_OFvis',
+
+          columns: [
+            { name: 'adminId', header: 'ID', align: 'center', cls:'memo'
+            },
+            { name: 'bregNo', header: '사업자번호', align: 'center', renderer: {
+                type: CustomATagRenderer
+                , options: {
+                  callback: this.setAdminInfo,
+                }
+              }
+            },
+            { name: 'custNm', header: '고객사명', align: 'center', hidden: true}
+          ],
+          noDataStr: '검색 결과가 없습니다.',
+          params: {
+            searchText1: '',
+          }
+        },
+      }
+  },
+  components: {
+    customGrid,
+    commonModal,
+  },
+  created(){
+  },
+  mounted() {
+    let pageMemo = 1;
+    // 페이지 정보 및 검색 조건
+    const getCondition_adminList = this.$store.getters['searchcondition/getSearchCondition'];
+    console.log('getCondition_adminList : '+getCondition_adminList);
+
+    // store에 저장된 페이지 정보 및 검색 조건을 불러오기
+    let isKeepMemo = false;
+    if (getCondition_adminList) {
+      this.grid.pagePerRows = getCondition_adminList.perPage;
+      this.grid.params = getCondition_adminList.params;
+      pageMemo = getCondition_adminList.page;
+      isKeepMemo = true;
+    }
+  },
+  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);
+    },
+    setAdminInfo: function(props){
+      console.log(props);
+      // var param = {};
+      // param.seqNo = props.seqNo;
+      // param.userId = this.userId;
+      // this.deleteMemoConfirm(param);
+    },
+    // 모달 띄우기
+    adminNmPopOpen(){
+      this.formReset();
+      var dimmed = document.getElementsByClassName('modal44');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'block';
+      }
+      this.$refs.table.cleanData();
+    },
+    // 모달 끄기
+    adminNmPopClose(){
+      console.log('adminNm modal close');
+      var dimmed = document.getElementsByClassName('modal44');
+      for(var i = 0; i < dimmed.length; i++){
+        dimmed[i].style.display = 'none';
+      }
+    },
+    formReset(){
+      Object.assign(this.$data, this.$options.data());
+    },
+  }
+}
+</script>

frontend/src/modules/sendNumMgt/components/NumberDetailPop.vue

@@ -0,0 +1,175 @@
+<template>
+	<!-- <div class="wrap bg-wrap"> -->
+	<div>
+		<div class="dimmed" @click="numberDetailPopClose();"></div>
+    <!-- 발신번호 상세 (타사업자)-->
+    <div class="popup modal53 popup_form register">
+      <div class="pop-head">
+        <h3 class="pop-tit">발신번호 상세</h3>
+      </div>
+      <form autocomplete="off">
+        <table>
+          <tbody>
+          <tr>
+            <th>관리자 ID</th>
+            <td><input type="text" disabled value="uplus01"></td>
+          </tr>
+          <tr>
+            <th>고객사명</th>
+            <td><input type="text" disabled value="유플러스"></td>
+          </tr>
+          <tr>
+            <th>등록자 ID</th>
+            <td><input type="text" disabled value="uplus01"></td>
+          </tr>
+          <tr>
+            <th>사업자번호</th>
+            <td><input type="text" disabled value="229-81-39938"></td>
+          </tr>
+          <tr>
+            <th>명의자 구분</th>
+            <td><input type="text" disabled value="타사업자"></td>
+          </tr>
+          <tr>
+            <th>인입채널</th>
+            <td><input type="text" disabled value="홈페이지"></td>
+          </tr>
+          <tr>
+            <th>발신번호</th>
+            <td>
+              <div class="input_add">
+                <div>
+                  <input type="text" disabled value="테스트">
+                  <input type="text" disabled value="02-555-5555">
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <th>승인상태</th>
+            <td class="red">승인 완료</td>
+          </tr>
+          <tr>
+            <th>등록일자</th>
+            <td><input type="text" disabled value="2022-03-10"></td>
+          </tr>
+          <tr>
+            <th>제출서류</th>
+            <td>
+              <div class="sender">
+                <p>위임장.jpg (00KB)</p>
+                <p>위임-수임관계 확인서류.jpg (00KB)</p>
+                <p>대리인 신분증 사본.jpg (00KB)</p>
+                <p>재직증명서.jpg (00KB)</p>
+                <p>통신서비스 이용증명원.jpg (00KB)</p>
+                <p>사업자등록증.jpg (00KB)</p>
+              </div>
+              <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
+            </td>
+          </tr>
+          <tr>
+            <th>사업자등록증</th>
+            <td>
+              <div class="sender">
+                <p>사업자등록증.jpg (00KB)</p>
+              </div>
+              <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </form>
+      <div class="popup-btn2">
+        <button class="btn-default" @click="numberDetailPopClose">닫기</button>
+      </div>
+    </div>
+
+	</div>
+</template>
+
+<script>
+import AdminListPop from "@/modules/sendNumMgt/components/AdminListPop";
+
+export default {
+  name: "numberRegPop",
+  // mixins: [utils_mixin, chkPattern2],
+  watch:{
+    nmineeDivCd(){
+      console.log('watch : ', this.nmineeDivCd)
+    }
+  },
+  data(){
+    return{
+			row: {},
+      adminId:'',
+      custNm:'',
+      bRegNo:'',
+      nmineeDivCd:'01',
+      numberInputs: [],
+      fileType:1,
+    }
+  },
+	components: {
+    AdminListPop,
+  },
+	model: {
+		prop: 'sendData',
+		event: 'event-data'
+	},
+	props: ['sendData'],
+	created(){
+		this.formReset();
+  },
+	methods :{
+		searchIdPop(){
+      this.$refs.admnListPop.adminNmPopOpen();
+		},
+    addNumberInput(){
+      this.numberInputs.push({
+        sendNm: '',
+        sendNum: ''
+      })
+    },
+    delNumberInput(index){
+      this.numberInputs.splice(index,1)
+    },
+    changeNmineDiv(event){
+      var data = event.target.value;
+      console.log(data)
+      if(data === '01'){
+        this.fileType = 1
+      }
+      if(data === '02'){
+        this.fileType = 2
+      }
+    },
+		// 모달 띄우기
+    numberDetailPopOpen(insertType){
+			this.formReset();
+			var dimmed = document.getElementsByClassName('dimmed');
+			dimmed[0].style.display = 'block';
+			var wrap = document.getElementsByClassName('popup-wrap');
+			wrap[0].style.display = 'block';
+			var obj = document.getElementsByClassName('modal53');
+			obj[0].style.display = 'block';
+
+
+
+
+		},
+		// 모달 끄기
+    numberDetailPopClose(){
+			var dimmed = document.getElementsByClassName('dimmed');
+			dimmed[0].style.display = 'none';
+			var wrap = document.getElementsByClassName('popup-wrap');
+			wrap[0].style.display = 'none';
+			var popup = document.getElementsByClassName('modal53');
+			popup[0].style.display = 'none';
+			
+		},
+		formReset(){
+			Object.assign(this.$data, this.$options.data());
+		},
+	}
+}
+</script>

frontend/src/modules/sendNumMgt/components/NumberRegPop.vue

@@ -0,0 +1,359 @@
+<template>
+	<!-- <div class="wrap bg-wrap"> -->
+	<div>
+		<div class="dimmed" @click="numberRegPopClose();"></div>
+    <!-- 발신번호 등록 (타사업자)-->
+    <div class="popup modal52 popup_form register w700">
+      <div class="pop-head">
+        <h3 class="pop-tit">발신번호 등록</h3>
+      </div>
+        <table>
+          <tbody>
+          <tr>
+            <th>관리자 ID</th>
+            <td>
+              <div class="input_search">
+                <input class="search-box" type="text" placeholder="아이디 입력" disabled v-model="adminId">
+                <button type="button" class="button btn-p2color" @click="searchIdPop">조회</button>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <th>고객사명</th>
+            <td><input type="text" disabled v-model="custNm"></td>
+          </tr>
+          <tr>
+            <th>사업자번호</th>
+            <td><input type="text" disabled v-model="bRegNo"></td>
+          </tr>
+          <tr>
+            <th>명의자 구분</th>
+            <td>
+              <input type="radio" name="nmineeDiv" value="01" id="popup_radio5" v-model="nmineeDivCd" @change="changeNmineDiv($event)">
+              <label for="popup_radio5">사업자</label>
+              <input type="radio" name="nmineeDiv" value="02" id="popup_radio6" v-model="nmineeDivCd" @change="changeNmineDiv($event)">
+              <label for="popup_radio6">타사업자</label>
+            </td>
+          </tr>
+          <tr>
+            <th>발신번호</th>
+            <td>
+              <div class="input_add">
+                <div>
+                  <input type="text" placeholder="발신번호명">
+                  <input type="text" placeholder="발신번호(숫자만입력)">
+                  <button class="button white add" @click="addNumberInput"></button>
+                </div>
+                <div v-for="(numberInput, index) in numberInputs">
+                  <input type="text" placeholder="발신번호명" v-model="numberInput.sendNm">
+                  <input type="text" placeholder="발신번호(숫자만입력)" v-model="numberInput.sendNum">
+                </div>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <th>제출서류</th>
+            <td>
+              <div class="attach" v-show="fileType === 2">
+                <p class="essential list"><span>*</span>위임-수임관계 확인 서류</p>
+                <input type="file" ref="trustFile" style="display: none" @change="readTrustFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.trustFile.click()">파일업로드</button>
+                <p class="file" id="trustNm"></p>
+              </div>
+              <div class="attach" v-show="fileType === 2">
+                <p class="essential list"><span>*</span>위임장</p>
+                <input type="file" ref="warrantFile" style="display: none" @change="readWarrantFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.warrantFile.click()">파일업로드</button>
+                <p class="file" id="warrantNm"></p>
+              </div>
+              <div class="attach" v-show="fileType === 2">
+                <p class="essential list"><span>*</span>대리인 신분증 사본 인증</p>
+                <input type="file" ref="deputyFile" style="display: none" @change="readDeputyFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.deputyFile.click()">파일업로드</button>
+                <p class="file" id="deputyNm"></p>
+              </div>
+              <div class="attach">
+                <p class="essential list"><span>*</span>재직증명서</p>
+                <input type="file" ref="tenureFile" style="display: none" @change="readTenureFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.tenureFile.click()">파일업로드</button>
+                <p class="file" id="tenureNm"></p>
+              </div>
+              <div class="attach" v-show="fileType === 1">
+                <p class="essential list"><span>*</span>통신서비스 이용증명원</p>
+                <input type="file" ref="communicationFile" style="display: none" @change="readCommunicationFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.communicationFile.click()">파일업로드</button>
+                <p class="file" id="communicationNm"></p>
+              </div>
+              <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
+            </td>
+          </tr>
+          <tr>
+            <th>사업자 등록증</th>
+            <td>
+              <div class="attach">
+                <p class="essential list"><span>*</span>사업자등록증</p>
+                <input type="file" ref="businessFile" style="display: none" @change="readBusinessFile" accept=".jpg,.png,.pdf,.tiff"/>
+                <button class="button btn-p2color" @click="$refs.businessFile.click()">파일업로드</button>
+                <p class="file" id="businessNm"></p>
+              </div>
+              <p class="file">파일형식 : jpg, png, pdf, tiff (최대 5MB)</p>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      <div class="popup-btn2">
+        <button class="btn-pcolor">저장</button>
+        <button class="btn-default" @click="numberRegPopClose();">취소</button>
+      </div>
+
+      <admin-list-pop ref="admnListPop" />
+
+    </div>
+	</div>
+</template>
+
+<script>
+import AdminListPop from "@/modules/sendNumMgt/components/AdminListPop";
+
+export default {
+  name: "numberRegPop",
+  // mixins: [utils_mixin, chkPattern2],
+  watch:{
+    nmineeDivCd(){
+      console.log('watch : ', this.nmineeDivCd)
+    }
+  },
+  data(){
+    return{
+			row: {},
+      adminId:'',
+      custNm:'',
+      bRegNo:'',
+      nmineeDivCd:'01',
+      numberInputs: [],
+      fileType:1,
+      trustFile: null,
+      warrantFile: null,
+      deputyFile: null,
+      tenureFile: null,
+      businessFile: null,
+      communicationFile: null,
+    }
+  },
+	components: {
+    AdminListPop,
+  },
+	model: {
+		prop: 'sendData',
+		event: 'event-data'
+	},
+	props: ['sendData'],
+	created(){
+		this.formReset();
+  },
+	methods :{
+		searchIdPop(){
+      this.$refs.admnListPop.adminNmPopOpen();
+		},
+    addNumberInput(){
+      this.numberInputs.push({
+        sendNm: '',
+        sendNum: ''
+      })
+    },
+    delNumberInput(index){
+      this.numberInputs.splice(index,1)
+    },
+    changeNmineDiv(event){
+      var data = event.target.value;
+      console.log(data)
+      if(data === '01'){
+        this.fileType = 1
+      }
+      if(data === '02'){
+        this.fileType = 2
+      }
+    },
+		// 모달 띄우기
+    numberRegPopopen(insertType){
+			this.formReset();
+			var dimmed = document.getElementsByClassName('dimmed');
+			dimmed[0].style.display = 'block';
+			var wrap = document.getElementsByClassName('popup-wrap');
+			wrap[0].style.display = 'block';
+			var obj = document.getElementsByClassName('modal52');
+			obj[0].style.display = 'block';
+		},
+		// 모달 끄기
+    numberRegPopClose(){
+			var dimmed = document.getElementsByClassName('dimmed');
+			dimmed[0].style.display = 'none';
+			var wrap = document.getElementsByClassName('popup-wrap');
+			wrap[0].style.display = 'none';
+			var popup = document.getElementsByClassName('modal52');
+			popup[0].style.display = 'none';
+			
+		},
+		formReset(){
+			Object.assign(this.$data, this.$options.data());
+		},
+    // 위임-수임
+    readTrustFile(event){
+      const file = event.target.files[0];
+      console.log(file.name);
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delTrustFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('trustNm');
+      root.appendChild(text);
+      root.appendChild(button);
+      this.trustFile = file;
+    },
+    delTrustFile(event){
+      const file = event.target.files[0];
+      this.$refs.trustFile.value=null;
+      let element = document.getElementById("trustNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.trustFile = null;
+    },
+    // 위임장
+    readWarrantFile(event){
+      const file = event.target.files[0];
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delWarrantFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('warrantNm');
+      root.appendChild(text);
+      root.appendChild(button);
+      this.warrantFile = file;
+    },
+    delWarrantFile(event){
+      const file = event.target.files[0];
+      this.$refs.warrantFile.value=null;
+      let element = document.getElementById("warrantNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.warrantFile = null;
+    },
+    // 대리인
+    readDeputyFile(event){
+      const file = event.target.files[0];
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delDeputyFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('deputyNm');
+      root.appendChild(text);
+      root.appendChild(button);
+
+      this.deputyFile = file
+
+    },
+    delDeputyFile(event){
+      const file = event.target.files[0];
+      this.$refs.deputyFile.value=null;
+      let element = document.getElementById("deputyNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.deputyFile = null;
+    },
+    // 재직
+    readTenureFile(event){
+      const file = event.target.files[0];
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delTenureFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('tenureNm');
+      root.appendChild(text);
+      root.appendChild(button);
+      this.tenureFile = file;
+    },
+    delTenureFile(event){
+      const file = event.target.files[0];
+      this.$refs.tenureFile.value=null;
+      let element = document.getElementById("tenureNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.tenureFile = null;
+    },
+    readBusinessFile(event){
+      const file = event.target.files[0];
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delBusinessFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('businessNm');
+      root.appendChild(text);
+      root.appendChild(button);
+      this.businessFile = file;
+    },
+    delBusinessFile(event){
+      const file = event.target.files[0];
+      this.$refs.businessFile.value=null;
+      let element = document.getElementById("businessNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.businessFile = null;
+    },
+    readCommunicationFile(event){
+      const file = event.target.files[0];
+
+      // inner Html.
+      const button = document.createElement('button');
+      const text = document.createElement('p');
+      text.innerText = file.name;
+      button.addEventListener('click', () => {
+        this.delCommunicationFile(event);
+      })
+      button.innerText = 'X'
+      const root = document.getElementById('communicationNm');
+      root.appendChild(text);
+      root.appendChild(button);
+      this.communicationFile = file;
+    },
+    delCommunicationFile(event){
+      const file = event.target.files[0];
+      this.$refs.communicationFile.value=null;
+      let element = document.getElementById("communicationNm");
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
+      }
+      this.communicationFile = null;
+    },
+	}
+}
+</script>

frontend/src/modules/sendNumMgt/service/sendNumMgtApi.js

@@ -0,0 +1,56 @@
+import httpClient from '@/common/http-client';
+
+// 공통 코드.
+const getCommCode = (params) => {
+    return httpClient.post('/api/v1/bo/comm/getCode', params, { withCredentials: false });
+}
+
+// 사업자가 등록 요청.
+const insertNumber1 = (tenureFile, businessFile, communicationFile, adminId, custNm, bRegNo, nmineeDivCd, numberInputs) => {
+    let formData = new FormData();
+    formData.append("tenureFile", tenureFile);
+    formData.append("businessFile", businessFile);
+     formData.append("communicationFile", communicationFile);
+    formData.append("adminId", adminId);
+    formData.append("custNm", custNm);
+    formData.append("bRegNo", bRegNo);
+    formData.append("nmineeDivCd", nmineeDivCd);
+    formData.append("numberInputs", numberInputs);
+
+    let url = "/api/v1/bo/sendNumMgt/insertNumber";
+    return httpClient.post(url, formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+            "Show-Layer": "Yes"
+        }
+    });
+};
+
+// 타사업자가 등록 요청.
+const insertNumber2 = (trustFile, warrantFile, deputyFile, tenureFile, businessFile, adminId, custNm, bRegNo, nmineeDivCd, numberInputs) => {
+    let formData = new FormData();
+    formData.append("trustFile", trustFile);
+    formData.append("warrantFile", warrantFile);
+    formData.append("deputyFile", deputyFile);
+    formData.append("tenureFile", tenureFile);
+    formData.append("businessFile", businessFile);
+    formData.append("adminId", adminId);
+    formData.append("custNm", custNm);
+    formData.append("bRegNo", bRegNo);
+    formData.append("nmineeDivCd", nmineeDivCd);
+    formData.append("numberInputs", numberInputs);
+
+    let url = "/api/v1/bo/sendNumMgt/insertNumber";
+    return httpClient.post(url, formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+            "Show-Layer": "Yes"
+        }
+    });
+};
+
+export default {
+    getCommCode,
+    insertNumber1,
+    insertNumber2,
+}

frontend/src/modules/sendNumMgt/views/ApprList.vue

@@ -1,100 +1,238 @@
 <template>
- 
-		<div class="contents">
-			<div class="contents_wrap">
-				<div class="top_wrap">
-					<h3 class="title">발신번호 승인 목록 조회</h3>
-					<p class="breadcrumb">시스템관리 &gt; 관리자/유치채널 관리</p>
-				</div>
-				<form autocomplete="off" class="search_form">
-					<div class="search_wrap">
-						<div class="select_box">
-							<label for="right" class="label">권한</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="대리점">대리점</option>
-								<option value="운영자">운영자</option>
-							</select>
-						</div>
-						<div class="select_box">
-							<label for="right" class="label">상태</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="사용">사용</option>
-								<option value="중지">중지</option>
-							</select>
-						</div>
-						<div class="input_box id">
-							<label for="id1" class="label">ID</label>
-                            <input type="text" id="id1" placeholder="검색어 입력"/>
-						</div>
-						<div class="input_box">
-							<label for="name" class="label">이름(대리점명)</label>
-                            <input type="text" id="name" placeholder="검색어 입력"/>
-						</div>
-						<button type="button" class="button grey">조회</button>
-					</div>
-				</form>
-				<div class="info">
-					<div class="count">총 <span>100</span>건</div>
-					<div class="button_group">
-						<button type="button" class="button blue admin">관리자 등록</button>
-						<button type="button" class="button blue channel">유지채널 등록</button>
-						<button type="button" class="button white delete">삭제</button>
-					</div>
-				</div>
-				<!-- <div class="table">
-					<table>
-						<colgroup>
-                            <col width="5%"/>
-                            <col width="15%"/>
-                            <col width="15%"/>
-                            <col width="20%"/>
-                            <col width="20%"/>
-                            <col width="5%"/>
-                            <col width="20%"/>
-                        </colgroup>
-						<thead>
-							<tr>
-								<th><input type="checkbox" id="admin_check1"><label for="admin_check1"></label></th>
-								<th>NO</th>
-								<th>권한</th>
-								<th>이름(대리점명)</th>
-								<th>ID</th>
-								<th>상태</th>
-								<th>등록일</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td><input type="checkbox" checked id="admin_check2"><label for="admin_check2"></label></td>
-								<td>10</td>
-								<td>대리점</td>
-								<td>유플러스</td>
-								<td><a href="javascript:void(0)">uplus1</a></td>
-								<td>사용</td>
-								<td>2022-03-10</td>
-							</tr>							
-						</tbody>
-					</table>
-				</div> -->
-            <div class="table">    
-                    <custom-grid
-                        ref="table"
-                        :totalItems="'totalItems'"
-                        :url="testList.url"
-                        :perPage="testList.perPage"
-                        :initialRequest="testList.initialRequest"
-                        :pagination="testList.pagination"
-                        :isCheckbox="testList.isCheckbox"
-                        :columns="testList.columns"
-                        :noDataStr="testList.noDataStr"
-                        :addCls="testList.addCls"
-                        :header="testList.header"        
-                    ></custom-grid>
+
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">발신번호 승인</h3>
+        <p class="breadcrumb">발신번호관리 &gt; 발신번호 승인</p>
+      </div>
+      <form autocomplete="off" class="search_form">
+        <div class="search_wrap">
+          <div class="group">
+            <div class="select_box">
+              <label for="right" class="label">상태</label>
+              <select name="" id="">
+                <option value="전체">전체</option>
+                <option value="승인대기">승인대기</option>
+                <option value="처리완료">처리완료</option>
+              </select>
             </div>
-			</div>
-		</div>
+            <div class="input_box">
+              <label for="right" class="label">사업자번호</label>
+              <input class="search-box" type="text" id="search" placeholder="검색어 입력"/>
+            </div>
+            <div class="select_box id">
+              <label for="right" class="label">명의자 구분</label>
+              <select name="" id="">
+                <option value="전체">전체</option>
+                <option value="사업자">사업자</option>
+                <option value="타사업자">타사업자</option>
+              </select>
+            </div>
+            <div class="input_box">
+              <label for="right" class="label">고객사명</label>
+              <input class="search-box" type="text" id="search" placeholder="검색어 입력"/>
+            </div>
+            <button type="button" class="button grey">조회</button>
+          </div>
+
+        </div>
+      </form>
+      <div class="info">
+        <div class="count">총 <span>100</span>건
+          <div class="select_box NumberSe">
+            <select name="" id="">
+              <option value="20">20</option>
+              <option value="50" selected>50</option>
+              <option value="100">100</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="table">
+        <table>
+          <colgroup>
+            <col width="5%"/>
+            <col width="12%"/>
+            <col width="10%"/>
+            <col width="13%"/>
+            <col width="10%"/>
+            <col width="10%"/>
+            <col width="6%"/>
+            <col width="6%"/>
+            <col width="6%"/>
+            <col width="10%"/>
+            <col width="12%"/>
+          </colgroup>
+          <thead>
+          <tr>
+            <th>NO</th>
+            <th>요청일</th>
+            <th>관리자ID</th>
+            <th>사업자번호</th>
+            <th>명의자 구분</th>
+            <th>고객사명</th>
+            <th>요청건수</th>
+            <th>승인건수</th>
+            <th>반려건수</th>
+            <th>상태</th>
+            <th>완료일</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td>10</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>0</td>
+            <td>0</td>
+            <td>승인대기</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>9</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>2</td>
+            <td>1</td>
+            <td>처리완료</td>
+            <td>2022-03-10</td>
+          </tr>
+          <tr>
+            <td>8</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>2</td>
+            <td>1</td>
+            <td>처리완료</td>
+            <td>2022-03-10</td>
+          </tr>
+          <tr>
+            <td>7</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>2</td>
+            <td>1</td>
+            <td>처리완료</td>
+            <td>2022-03-10</td>
+          </tr>
+          <tr>
+            <td>6</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>타사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>2</td>
+            <td>1</td>
+            <td>처리완료</td>
+            <td>2022-03-10</td>
+          </tr>
+          <tr>
+            <td>5</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>2</td>
+            <td>1</td>
+            <td>처리완료</td>
+            <td>2022-03-10</td>
+          </tr>
+          <tr>
+            <td>4</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>타사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>0</td>
+            <td>0</td>
+            <td>승인대기</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>타사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>0</td>
+            <td>0</td>
+            <td>승인대기</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>타사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>0</td>
+            <td>0</td>
+            <td>승인대기</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>1</td>
+            <td>2022-03-10</td>
+            <td>uplus01</td>
+            <td>229-81-39938</td>
+            <td>타사업자</td>
+            <td>유플러스</td>
+            <td><a href="javascript:void(0)">3</a></td>
+            <td>0</td>
+            <td>0</td>
+            <td>승인대기</td>
+            <td>-</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="pagination">
+        <div class="arrow-btn">
+          <button class="btn-first" onClick=""></button>
+          <button class="btn-prev" onClick=""></button>
+        </div>
+        <ul>
+          <li class="active"><a href="javascript:void(0)">1</a></li>
+          <li><a href="javascript:void(0)">2</a></li>
+          <li><a href="javascript:void(0)">3</a></li>
+          <li><a href="javascript:void(0)">4</a></li>
+          <li><a href="javascript:void(0)">5</a></li>
+          <li><a href="javascript:void(0)">999</a></li>
+        </ul>
+        <div class="arrow-btn">
+          <button class="btn-next" onClick=""></button>
+          <button class="btn-last" onClick=""></button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>

frontend/src/modules/sendNumMgt/views/NumberList.vue

@@ -9,6 +9,14 @@
 				<form autocomplete="off" class="search_form">
 					<div class="search_wrap">
 						<div class="group">
+              <div class="select_box">
+                <label for="right" class="label">등록방법</label>
+                <select name="" id="sttusCd" v-model="grid.params.searchType5" @keyup.enter="search">
+                  <option value="">전체</option>
+                  <option value="01">서류심사</option>
+                  <option value="02">본인인증</option>
+                </select>
+              </div>
               <div class="select_box">
                 <label for="right" class="label">승인상태</label>
                 <select name="" id="sttusCd" v-model="grid.params.searchType1" @keyup.enter="search">
@@ -78,15 +86,44 @@
               :addCls="grid.addCls"
               :header="grid.headder"        
             ></custom-grid>
-            </div>
-            <!-- <number-reg-pop ref="numberRegPop"> </number-reg-pop> -->
-			  </div>
+          </div>
+
+          <number-reg-pop ref="numberRegPop"> </number-reg-pop>
+          <number-detail-pop ref="numberDetailPop"/>
+          <common-modal ref="commmonModal"></common-modal>
+
+      </div>
 		</div>
 </template>
 
 <script>
 import customGrid from '@/components/CustomGrid';
-// import NumberRegPop from '../components/NumberRegPop';
+import commonModal from "@/components/modal/commonModal";
+import NumberRegPop from '../components/NumberRegPop';
+import NumberDetailPop from "@/modules/sendNumMgt/components/NumberDetailPop";
+
+class CustomATagRenderer {
+  constructor(props) {
+    this.props = props;
+    const el = document.createElement('a');
+    el.href = 'javascript:void(0);';
+    el.className = 'btn_text';
+    el.innerText= String(props.colValue)
+    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: 'numberList',
   data() {
@@ -97,7 +134,7 @@ export default {
       cate2Code: "",
       totalItems: 0,
       // 테이블 리스트 데이터
-      perPageCnt: 20,
+      perPageCnt: 50,
       grid: {
         url: '/api/v1/bo/sendNumMgt/numberList',
         perPage: 20,
@@ -121,16 +158,22 @@ export default {
         ],
 
         columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: 50 },
-          { name: 'custNm', header: '고객사명', align: 'left', width: 50 },
-          { name: 'adminId', header: '관리자ID', align: 'left', width: 100 },
-          { name: 'register', header: '등록자ID', align: 'left', width: 100 },
-          { name: 'bRegNo', header: '사업자번호', align: 'center', width: 100},
-          { name: 'nmineeDivCd', header: '명의자 구분', align: 'center', width: 100},
-          { name: 'inchDivCd', header: '인입채널', align: 'center', width: 100},
-          { name: 'regNo', header: '발신번호', align: 'center', width: 100},
-          { name: 'sttusCd', header: '승인상태', align: 'center', width: 100},
-          { name: 'regDt', header: '등록일자', width: 100, cls: 'td_line' }
+          { name: 'no', header: 'NO', align: 'center', width: '5%' },
+          { name: 'custNm', header: '고객사명', align: 'center', width: '5%' },
+          { name: 'adminId', header: '관리자ID', align: 'center', width: '10%' },
+          { name: 'register', header: '등록자ID', align: 'center', width: '10%' },
+          { name: 'bregNo', header: '사업자번호', align: 'center', width: '10%'},
+          { name: 'nmineeDivCd', header: '명의자 구분', align: 'center', width: '10%'},
+          { name: 'inchDivCd', header: '인입채널', align: 'center', width: '10%'},
+          { name: 'sndrno', header: '발신번호', align: 'center', width: '10%', renderer: {
+              type: CustomATagRenderer
+              ,options: {
+                callback: this.numberDetail,
+              }
+            }
+          },
+          { name: 'sttusCd', header: '승인상태', align: 'center', width: '10%'},
+          { name: 'regDt', header: '등록일자', width: '10%', cls: 'td_line' }
         ],
         noDataStr: '검색 결과가 없습니다.',        
          params: {
@@ -138,6 +181,7 @@ export default {
            searchType2: '',
            searchType3: '',
            searchType4: '',
+           searchType5: '',
            searchText1: '',
            pagePerRows: '',
            page: ''
@@ -148,7 +192,9 @@ export default {
   },  
   components: {
     customGrid: customGrid,
-    // NumberRegPop
+    NumberRegPop,
+    NumberDetailPop,
+    commonModal,
   },
   created(){            
     this.$store.commit("login/isLogin", true);
@@ -210,20 +256,24 @@ export default {
       const getCondition = this.$store.getters['searchcondition/getSearchCondition'];
     },
     numberRegPopOpen: function(){
-      this.$refs.numberRegPop.ModalOpen();
+      this.$refs.numberRegPop.numberRegPopopen();
+    },
+    numberDetail(props){
+      console.log(props)
+      this.$refs.numberDetailPop.numberDetailPopOpen(props);
     },
   },
-  beforeRouteLeave(to, from, next) {
-	
-	const getP = this.$refs.table.getPagination();
-	console.log("==========getP : " + getP._currentPage);
-	this.$store.commit('searchcondition/updateSearchCondition', {
-	  page: getP._currentPage,        
-	  perPage: this.perPageCnt,        
-	  params: this.grid.params
-	});  
-	// 라우트 하기전 실행 
-	next();
-  }
+  // beforeRouteLeave(to, from, next) {
+  //
+	// const getP = this.$refs.table.getPagination();
+	// console.log("==========getP : " + getP._currentPage);
+	// this.$store.commit('searchcondition/updateSearchCondition', {
+	//   page: getP._currentPage,
+	//   perPage: this.perPageCnt,
+	//   params: this.grid.params
+	// });
+	// // 라우트 하기전 실행
+	// next();
+  // }
 };
 </script>

frontend/src/modules/sendNumMgt/views/ProfileList.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="wrap main_wrap">
+
 		<div class="contents">
 			<div class="contents_wrap">
 				<div class="top_wrap">
@@ -61,7 +61,6 @@
 				</div>
         </div>
 	</div>
-  </div>
 </template>
 
 <script>

frontend/src/modules/servMgt/views/rejectRecvList.vue

@@ -58,6 +58,9 @@
 						:header="grid.headder"        
 					></custom-grid>
 				</div>
+
+        <common-modal ref="commmonModal"></common-modal>
+
 			</div>
 		</div>
 </template>
@@ -65,6 +68,8 @@
 <script>
 import customGrid from '@/components/CustomGrid';
 //import api from '../service/api';
+import commonModal from "@/components/modal/commonModal";
+
 class customBRegNo {
     constructor(props) {
         this.props = props;
@@ -138,7 +143,8 @@ export default {
     };
   },  
   components: {
-    customGrid: customGrid
+    customGrid: customGrid,
+    commonModal
   },
   created(){            
     this.$store.commit("login/isLogin", true);

frontend/src/modules/stats/views/BsnmMonthList.vue

@@ -1,100 +1,230 @@
 <template>
- 
-		<div class="contents">
-			<div class="contents_wrap">
-				<div class="top_wrap">
-					<h3 class="title">사업자 월별 통계 목록 조회</h3>
-					<p class="breadcrumb">시스템관리 &gt; 관리자/유치채널 관리</p>
-				</div>
-				<form autocomplete="off" class="search_form">
-					<div class="search_wrap">
-						<div class="select_box">
-							<label for="right" class="label">권한</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="대리점">대리점</option>
-								<option value="운영자">운영자</option>
-							</select>
-						</div>
-						<div class="select_box">
-							<label for="right" class="label">상태</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="사용">사용</option>
-								<option value="중지">중지</option>
-							</select>
-						</div>
-						<div class="input_box id">
-							<label for="id1" class="label">ID</label>
-                            <input type="text" id="id1" placeholder="검색어 입력"/>
-						</div>
-						<div class="input_box">
-							<label for="name" class="label">이름(대리점명)</label>
-                            <input type="text" id="name" placeholder="검색어 입력"/>
-						</div>
-						<button type="button" class="button grey">조회</button>
-					</div>
-				</form>
-				<div class="info">
-					<div class="count">총 <span>100</span>건</div>
-					<div class="button_group">
-						<button type="button" class="button blue admin">관리자 등록</button>
-						<button type="button" class="button blue channel">유지채널 등록</button>
-						<button type="button" class="button white delete">삭제</button>
-					</div>
-				</div>
-				<!-- <div class="table">
-					<table>
-						<colgroup>
-                            <col width="5%"/>
-                            <col width="15%"/>
-                            <col width="15%"/>
-                            <col width="20%"/>
-                            <col width="20%"/>
-                            <col width="5%"/>
-                            <col width="20%"/>
-                        </colgroup>
-						<thead>
-							<tr>
-								<th><input type="checkbox" id="admin_check1"><label for="admin_check1"></label></th>
-								<th>NO</th>
-								<th>권한</th>
-								<th>이름(대리점명)</th>
-								<th>ID</th>
-								<th>상태</th>
-								<th>등록일</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td><input type="checkbox" checked id="admin_check2"><label for="admin_check2"></label></td>
-								<td>10</td>
-								<td>대리점</td>
-								<td>유플러스</td>
-								<td><a href="javascript:void(0)">uplus1</a></td>
-								<td>사용</td>
-								<td>2022-03-10</td>
-							</tr>							
-						</tbody>
-					</table>
-				</div> -->
-            <div class="table">    
-                    <custom-grid
-                        ref="table"
-                        :totalItems="'totalItems'"
-                        :url="testList.url"
-                        :perPage="testList.perPage"
-                        :initialRequest="testList.initialRequest"
-                        :pagination="testList.pagination"
-                        :isCheckbox="testList.isCheckbox"
-                        :columns="testList.columns"
-                        :noDataStr="testList.noDataStr"
-                        :addCls="testList.addCls"
-                        :header="testList.header"        
-                    ></custom-grid>
+
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">사업자별 통계</h3>
+        <p class="breadcrumb">발송통계 &gt; 사업자별 통계</p>
+      </div>
+
+      <div class="top_tab">
+        <a href="statistics_business.html" class="on">월별통계</a><a href="statistics_business_day.html">일별통계</a>
+      </div>
+
+
+      <form autocomplete="off" class="search_form">
+        <div class="search_wrap">
+          <div class="input_box cal">
+            <label for="right" class="label txt">날짜</label>
+            <p> 최대 3개월까지 조회 가능합니다.</p>
+            <div class="term">
+              <input class="date" type="text" id="" placeholder="2022-10-12"/>
+              ~
+              <input class="" type="text" id="" placeholder="2022-10-12"/>
             </div>
-			</div>
-		</div>
+          </div>
+          <div class="input_box id">
+            <label for="name" class="label">고객사명</label>
+            <input type="text" id="name" placeholder="검색어 입력">
+          </div>
+          <div class="input_box">
+            <label for="name" class="label">사업자등록번호</label>
+            <input type="text" id="name" placeholder="검색어 입력">
+          </div>
+          <button type="button" class="button grey">조회</button>
+        </div>
+      </form>
+      <div class="info">
+        <div class="count">집계결과</div>
+        <div class="button_group">
+          <button type="button" class="button blue download">엑셀 다운로드</button>
+        </div>
+
+      </div>
+      <div class="table calculate scroll">
+        <div>
+          <table>
+            <thead>
+            <tr>
+              <th rowspan="2">날짜</th>
+              <th rowspan="2">고객사명</th>
+              <th rowspan="2">사업자번호</th>
+              <th colspan="2">전체</th>
+              <th colspan="2">SMS</th>
+              <th colspan="2">LMS</th>
+              <th colspan="2">MMS</th>
+              <th colspan="2">알림톡</th>
+            </tr>
+            <tr class="total">
+              <th>발송건수</th>
+              <th>성공건수/(%)</th>
+              <th>발송건수</th>
+              <th>성공건수/(%)</th>
+              <th>발송건수</th>
+              <th>성공건수/(%)</th>
+              <th>발송건수</th>
+              <th>성공건수/(%)</th>
+              <th>발송건수</th>
+              <th>성공건수/(%)</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+              <td>2022-04</td>
+              <td>유플러스</td>
+              <td>229-81-39938</td>
+              <td>84,000,000</td>
+              <td>84,000,000<br>(100%)</td>
+              <td>21,000,000</td>
+              <td>21,000,000<br>(100%)</td>
+              <td>21,000,000</td>
+              <td>21,000,000<br>(100%)</td>
+              <td>21,000,000</td>
+              <td>21,000,000<br>(100%)</td>
+              <td>21,000,000</td>
+              <td>21,000,000<br>(100%)</td>
+            </tr>
+            <tr>
+              <td>2022-03</td>
+              <td>유플러스</td>
+              <td>229-81-39938</td>
+              <td>40,000,000</td>
+              <td>40,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+            </tr>
+            <tr>
+              <td>2022-02</td>
+              <td>유플러스</td>
+              <td>229-81-39938</td>
+              <td>40,000,000</td>
+              <td>40,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+            </tr>
+            <tr>
+              <td>2022-01</td>
+              <td>유플러스</td>
+              <td>229-81-39938</td>
+              <td>40,000,000</td>
+              <td>40,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+            </tr>
+            <tr>
+              <td>2021-12</td>
+              <td>유플러스</td>
+              <td>229-81-39938</td>
+              <td>40,000,000</td>
+              <td>40,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+            </tr>
+            <tr>
+              <td>2021-11</td>
+              <td>유플러스</td>
+              <td>229-81-39938</td>
+              <td>40,000,000</td>
+              <td>40,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+            </tr>
+            <tr>
+              <td>2021-10</td>
+              <td>유플러스</td>
+              <td>229-81-39938</td>
+              <td>40,000,000</td>
+              <td>40,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+            </tr>
+            <tr>
+              <td>2021-09</td>
+              <td>유플러스</td>
+              <td>229-81-39938</td>
+              <td>40,000,000</td>
+              <td>40,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+            </tr>
+            <tr>
+              <td>2021-08</td>
+              <td>유플러스</td>
+              <td>229-81-39938</td>
+              <td>40,000,000</td>
+              <td>40,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+            </tr>
+            <tr>
+              <td>2021-07</td>
+              <td>유플러스</td>
+              <td>229-81-39938</td>
+              <td>40,000,000</td>
+              <td>40,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+              <td>10,000,000</td>
+              <td>10,000,000<br>(100%)</td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -104,43 +234,7 @@ export default {
   name: 'monthList',
   data() {
     return {
-      testList: {
-        url: '/api/v1/bo/sysMgt/adminList',
-        perPage: 20,
-        pagination: true,
-        isCheckbox: true,
-        initialRequest: false,
-        addCls: 'box_OFvis',
 
-
-        header: [
-          [
-            { header: 'NO', childNames: [] },
-            { header: '권한', childNames: [] },
-            { header: '이름(대리점명)', childNames: [] },
-            { header: 'ID', childNames: [] },
-            { header: '상태', childNames: [] },
-            { header: '등록일', childNames: [] }
-          ]
-        ],
-
-        columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: 60 },
-          { name: 'auth', header: '권한', align: 'left', width: 160 },
-          { name: 'name', header: '이름(대리점명)', align: 'center', width: 130},
-          { name: 'adminId', header: 'ID', align: 'center', width: 130},
-          { name: 'adminStat', header: '상태', align: 'center', width: 130},      
-          { name: 'regDt', header: '등록일', width: 90, cls: 'td_line' }
-        ],
-        noDataStr: '검색 결과가 없습니다.',        
-        params: {
-            searchType1: '',
-            searchType2: '',
-            searchText1: '',
-            searchText2: ''
-          },
-        excelHeader: []
-      }    
     };
   },  
   components: {
@@ -156,8 +250,7 @@ export default {
   },
   methods: {
     search: function(isKeep) {
-      console.log(this.testList.params);
-      this.$refs.table.search(this.testList.params, isKeep);
+
     },
   }
 };

frontend/src/modules/stats/views/MonthList.vue

@@ -1,100 +1,211 @@
 <template>
- 
-		<div class="contents">
-			<div class="contents_wrap">
-				<div class="top_wrap">
-					<h3 class="title">월별 통계 목록 조회</h3>
-					<p class="breadcrumb">시스템관리 &gt; 관리자/유치채널 관리</p>
-				</div>
-				<form autocomplete="off" class="search_form">
-					<div class="search_wrap">
-						<div class="select_box">
-							<label for="right" class="label">권한</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="대리점">대리점</option>
-								<option value="운영자">운영자</option>
-							</select>
-						</div>
-						<div class="select_box">
-							<label for="right" class="label">상태</label>
-							<select name="" id="right">
-								<option value="전체">전체</option>
-								<option value="사용">사용</option>
-								<option value="중지">중지</option>
-							</select>
-						</div>
-						<div class="input_box id">
-							<label for="id1" class="label">ID</label>
-                            <input type="text" id="id1" placeholder="검색어 입력"/>
-						</div>
-						<div class="input_box">
-							<label for="name" class="label">이름(대리점명)</label>
-                            <input type="text" id="name" placeholder="검색어 입력"/>
-						</div>
-						<button type="button" class="button grey">조회</button>
-					</div>
-				</form>
-				<div class="info">
-					<div class="count">총 <span>100</span>건</div>
-					<div class="button_group">
-						<button type="button" class="button blue admin">관리자 등록</button>
-						<button type="button" class="button blue channel">유지채널 등록</button>
-						<button type="button" class="button white delete">삭제</button>
-					</div>
-				</div>
-				<!-- <div class="table">
-					<table>
-						<colgroup>
-                            <col width="5%"/>
-                            <col width="15%"/>
-                            <col width="15%"/>
-                            <col width="20%"/>
-                            <col width="20%"/>
-                            <col width="5%"/>
-                            <col width="20%"/>
-                        </colgroup>
-						<thead>
-							<tr>
-								<th><input type="checkbox" id="admin_check1"><label for="admin_check1"></label></th>
-								<th>NO</th>
-								<th>권한</th>
-								<th>이름(대리점명)</th>
-								<th>ID</th>
-								<th>상태</th>
-								<th>등록일</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr>
-								<td><input type="checkbox" checked id="admin_check2"><label for="admin_check2"></label></td>
-								<td>10</td>
-								<td>대리점</td>
-								<td>유플러스</td>
-								<td><a href="javascript:void(0)">uplus1</a></td>
-								<td>사용</td>
-								<td>2022-03-10</td>
-							</tr>							
-						</tbody>
-					</table>
-				</div> -->
-            <div class="table">    
-                    <custom-grid
-                        ref="table"
-                        :totalItems="'totalItems'"
-                        :url="testList.url"
-                        :perPage="testList.perPage"
-                        :initialRequest="testList.initialRequest"
-                        :pagination="testList.pagination"
-                        :isCheckbox="testList.isCheckbox"
-                        :columns="testList.columns"
-                        :noDataStr="testList.noDataStr"
-                        :addCls="testList.addCls"
-                        :header="testList.header"        
-                    ></custom-grid>
+
+  <div class="contents">
+    <div class="contents_wrap">
+      <div class="top_wrap">
+        <h3 class="title">날짜별 통계</h3>
+        <p class="breadcrumb">발송통계 &gt; 날짜별 통계</p>
+      </div>
+
+      <div class="top_tab">
+        <a href="statistics_date.html" class="on">월별통계</a><a href="statistics_date_day.html">일별통계</a>
+      </div>
+
+
+      <form autocomplete="off" class="search_form">
+        <div class="search_wrap">
+          <div class="input_box cal">
+            <label for="right" class="label txt">날짜</label>
+            <p> 최대 3개월까지 조회 가능합니다.</p>
+            <div class="term">
+              <input class="date" type="text" id="" placeholder="2022-10-12"/>
+              ~
+              <input class="" type="text" id="" placeholder="2022-10-12"/>
             </div>
-			</div>
-		</div>
+          </div>
+          <button type="button" class="button grey">조회</button>
+        </div>
+      </form>
+      <div class="info">
+        <div class="count">집계결과</div>
+        <div class="button_group">
+          <button type="button" class="button blue download">엑셀 다운로드</button>
+        </div>
+
+      </div>
+      <div class="table calculate">
+        <table>
+          <colgroup>
+            <col width="8%">
+            <col width="9.2%">
+            <col width="9.2%">
+            <col width="9.2%">
+            <col width="9.2%">
+            <col width="9.2%">
+            <col width="9.2%">
+            <col width="9.2%">
+            <col width="9.2%">
+            <col width="9.2%">
+            <col width="9.2%">
+          </colgroup>
+          <thead>
+          <tr>
+            <th rowspan="2">날짜</th>
+            <th colspan="2">전체</th>
+            <th colspan="2">SMS</th>
+            <th colspan="2">LMS</th>
+            <th colspan="2">MMS</th>
+            <th colspan="2">알림톡</th>
+          </tr>
+          <tr class="total">
+            <th>발송건수</th>
+            <th>성공건수/(%)</th>
+            <th>발송건수</th>
+            <th>성공건수/(%)</th>
+            <th>발송건수</th>
+            <th>성공건수/(%)</th>
+            <th>발송건수</th>
+            <th>성공건수/(%)</th>
+            <th>발송건수</th>
+            <th>성공건수/(%)</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td>전체</td>
+            <td>84,000,000</td>
+            <td>84,000,000<br>(100%)</td>
+            <td>21,000,000</td>
+            <td>21,000,000<br>(100%)</td>
+            <td>21,000,000</td>
+            <td>21,000,000<br>(100%)</td>
+            <td>21,000,000</td>
+            <td>21,000,000<br>(100%)</td>
+            <td>21,000,000</td>
+            <td>21,000,000<br>(100%)</td>
+          </tr>
+          <tr>
+            <td>2022-03</td>
+            <td>40,000,000</td>
+            <td>40,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+          </tr>
+          <tr>
+            <td>2022-02</td>
+            <td>40,000,000</td>
+            <td>40,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+          </tr>
+          <tr>
+            <td>2022-01</td>
+            <td>40,000,000</td>
+            <td>40,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+          </tr>
+          <tr>
+            <td>2021-12</td>
+            <td>40,000,000</td>
+            <td>40,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+          </tr>
+          <tr>
+            <td>2021-11</td>
+            <td>40,000,000</td>
+            <td>40,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+          </tr>
+          <tr>
+            <td>2021-10</td>
+            <td>40,000,000</td>
+            <td>40,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+          </tr>
+          <tr>
+            <td>2021-09</td>
+            <td>40,000,000</td>
+            <td>40,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+          </tr>
+          <tr>
+            <td>2021-08</td>
+            <td>40,000,000</td>
+            <td>40,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+          </tr>
+          <tr>
+            <td>2021-07</td>
+            <td>40,000,000</td>
+            <td>40,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+            <td>10,000,000</td>
+            <td>10,000,000<br>(100%)</td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -104,62 +215,20 @@ export default {
   name: 'monthList',
   data() {
     return {
-      testList: {
-        url: '/api/v1/bo/sysMgt/adminList',
-        perPage: 20,
-        pagination: true,
-        isCheckbox: true,
-        initialRequest: false,
-        addCls: 'box_OFvis',
 
-
-        header: [
-          [
-            { header: 'NO', childNames: [] },
-            { header: '권한', childNames: [] },
-            { header: '이름(대리점명)', childNames: [] },
-            { header: 'ID', childNames: [] },
-            { header: '상태', childNames: [] },
-            { header: '등록일', childNames: [] }
-          ]
-        ],
-
-        columns: [          
-          { name: 'no', header: 'NO', align: 'center', width: 60 },
-          { name: 'auth', header: '권한', align: 'left', width: 160 },
-          { name: 'name', header: '이름(대리점명)', align: 'center', width: 130},
-          { name: 'adminId', header: 'ID', align: 'center', width: 130},
-          { name: 'adminStat', header: '상태', align: 'center', width: 130},      
-          { name: 'regDt', header: '등록일', width: 90, cls: 'td_line' }
-        ],
-        noDataStr: '검색 결과가 없습니다.',        
-        // params: {
-        //   apprResult: '',
-        //   searchType: '',
-        //   searchText: '',
-        //   startDate: '',
-        //   endDate: ''
-        // },
-        excelHeader: []
-      }    
     };
-  },  
+  },
   components: {
     customGrid: customGrid
   },
   destroyed() {
-      
+
   },
   mounted() {
-    let isKeep = false;
-    isKeep = true;
-    this.search(isKeep);
+
   },
   methods: {
-    search: function(isKeep) {
-      console.log(this.testList.params);
-      this.$refs.table.search(this.testList.params, isKeep);
-    },
+
   }
 };
 </script>

frontend/src/modules/sysMgt/components/AdminRegPop.vue

@@ -9,7 +9,7 @@
 					<h3 class="pop-tit" v-if="insertType === 1">관리자 등록</h3>
 					<h3 class="pop-tit" v-else>유치채널 사용자 등록</h3>
 				</div>
-				<form autocomplete="off" ref="adminRegForm">
+<!--				<form autocomplete="off" ref="adminRegForm">-->
 					<table>
 						<tbody>
 							<tr>
@@ -68,14 +68,15 @@
 							</tr>
 						</tbody>
 					</table>
-				</form>
-				<div class="pop-btn2">
-					<button class="btn-default" @click="ModalClose();">취소</button>
+<!--				</form>-->
+				<div class="popup-btn2">
 					<button class="btn-pcolor" @click="doInsert">저장</button>
+					<button class="btn-default" @click="ModalClose();">취소</button>
 				</div>
 			</div>
 
 			<search-id-popup ref="searchIdPopModal"> </search-id-popup>
+      <common-modal ref="commmonModal"></common-modal>
 
 		</div>
 	</div>
@@ -87,7 +88,7 @@ import sysMgtApi from "../service/sysMgtApi.js";
 import { utils_mixin, chkPattern2 } from '../service/mixins';
 import SearchIdPopup from '../components/SearchIdPopup.vue';
 import lodash from "lodash";
-// searchIdPopModal
+import commonModal from "@/components/modal/commonModal";
 
 export default {
 	name: "adminRegPop",
@@ -109,8 +110,8 @@ export default {
 			auth:'',
 			stat: '',
 			userNm:"",
-            userPwd1:"",
-            userPwd2:"",
+      userPwd1:"",
+      userPwd2:"",
 			code:"",
 			idCheck: false,
 			props: {},
@@ -118,6 +119,7 @@ export default {
     },
 	components: {
 		SearchIdPopup,
+    commonModal,
     },
 	model: {
 		prop: 'sendData',
@@ -132,23 +134,31 @@ export default {
 	methods :{
 		doPwdValidate(){			
 			if(this.isNull(this.userPwd1)){
-				alert("비밀번호를 입력해 주세요.");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '비밀번호를 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return false;
 			}
 			if(this.isNull(this.userPwd2)){
-				alert("비밀번호 확인을 입력해 주세요.");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '비밀번호 확인을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			if(!lodash.isEqual(this.userPwd1, this.userPwd2)){
-				alert("비밀번호가 일치하지 않습니다.");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '비밀번호가 일치하지 않습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd2.focus();
 				return false;
 			}
 			const pwdLen = this.bytes(this.userPwd1);
 			if(!(pwdLen >= 8 && pwdLen <= 16)){
-				alert("비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return false;
 			}
@@ -156,7 +166,9 @@ export default {
 			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.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '비밀번호는 8~16자의 영문, 숫자, 특수문자(!,@, $, %, ^, &, *) 조합이 필요합니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._pwd1.focus();
 				return;
 			}
@@ -165,7 +177,9 @@ export default {
 		},
 		doValidate(){
 			if(!this.idCheck){
-				alert("유효한 마당ID가 아닙니다.");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '유효한 마당ID가 아닙니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs.madangId.focus();
 				return false;
 			}
@@ -173,39 +187,54 @@ export default {
 				return false;
 			}
 			if(this.isNull(this.userNm)){
-				alert("이름을 입력해 주세요");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '이름을 입력해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._userNm.focus();
 				return false;
 			}
 			if(this.isNull(this.mdn)){
-				alert('휴대폰번호를 입력해주세요.');
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '휴대폰번호를 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._phone.focus();
 				return false;
 			}
 			const hp = this.mdn;
 			if(!this.isNull(hp) && !this.isMobile(hp)){
-				alert("휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요");
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '휴대폰 번호 형식이 잘못되었습니다. 확인해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._phone.focus();
 				return false;
 			}
 			if(this.isNull(this.email)){
-				alert('이메일을 입력해주세요.');
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '이메일을 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._email.focus();
 				return false;
 			}
 			const email = this.email;
 			if(!this.isNull(email) && !lodash.isEqual(email,'@') && !this.emailCheck(email)){
-				alert("이메일 형식이 잘못되었습니다. 확인해 주세요");
+				this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '이메일 형식이 잘못되었습니다.';
+        this.row.msg2 = '확인해 주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._email.focus();
 				return false;
 			}
 			if(this.isNull(this.auth)){
-				alert('권한을 선택 해주세요.');
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '권한을 선택 해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs._auth.focus();
 				return false;
 			}
 			if(this.isNull(this.stat)){
-				alert('상태를 선택 해주세요.');
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '상태를 선택 해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				// this.$refs._auth.focus();
 				return false;
 			}
@@ -225,13 +254,15 @@ export default {
 		async searchMadangId(){
 
 			if(!this.madangId){
-				alert('마당ID를 입력해주세요');
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '마당ID를 입력해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
 				this.$refs.madangId.focus();
 				return false;
 			}
 			var params = {
         		"madangId": this.madangId
-        	}
+      }
 			console.log(this.madangId);
 
 			try {
@@ -253,20 +284,29 @@ export default {
 
 				}else if(result.retCode == '1004'){
 					//alert('마당ID 정보가 없습니다.');
-					this.searchIdFailPop();
+          this.row.title = '관리자/유치채널 관리';
+          this.row.msg1 = '마당ID 정보가 없습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+					// this.searchIdFailPop();
 					this.idCheck = false;
 					this.$refs.madangId.focus();
 					return false;
 				}else {
 					//alert('마당ID 조회에 실패하였습니다.');
-					this.searchIdFailPop();
+          this.row.title = '관리자/유치채널 관리';
+          this.row.msg1 = '마당ID 정보가 없습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
+					// this.searchIdFailPop();
 					this.idCheck = false;
 					this.$refs.madangId.focus();
 					return false;
 				}
 			} catch(err) {
 				//alert("실패 하였습니다.");
-				this.searchIdFailPop();
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '마당ID 정보가 없습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
+				// this.searchIdFailPop();
 				this.idCheck = false;
 				this.$refs.madangId.focus();
 				return false;
@@ -325,11 +365,15 @@ export default {
 					const response = await sysMgtApi.insertAdmin(this.row);
 					const result = response.data;
 					if (result != null && result.retCode == "0000") {
-						alert('저장 하였습니다.');
+            this.row.title = '관리자/유치채널 관리';
+            this.row.msg1 = '저장 하였습니다.';
+            this.$refs.commmonModal.alertModalOpen(this.row);
 						this.toComplete();
 					}
                 } catch(err) {
-                	alert("실패 하였습니다.");
+                  this.row.title = '관리자/유치채널 관리';
+                  this.row.msg1 = '실패 하였습니다.';
+                  this.$refs.commmonModal.alertModalOpen(this.row);
                 }
             }
         },
@@ -347,9 +391,3 @@ export default {
 	}
 }
 </script>
-
-<style>
-	.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}
-	.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }
-	.popup-btn-wrap button:hover {background: #000; color: #fff;}
-</style>

frontend/src/modules/sysMgt/views/AdminList.vue

@@ -62,6 +62,7 @@
 		    <admin-reg-pop ref="adminRegModal"> </admin-reg-pop>
         <!-- <admin-reg2-pop ref="adminReg2Modal"> </admin-reg2-pop> -->
         <admin-detail-pop ref="adminDetailModal"> </admin-detail-pop>
+        <common-modal ref="commmonModal"></common-modal>
 		</div>
 	</div>
 </template>
@@ -69,7 +70,7 @@
 <script>
 import customGrid from '@/components/CustomGrid';
 import AdminRegPop from '../components/AdminRegPop';
-//import AdminReg2Pop from '../components/AdminReg2Pop';
+import commonModal from "@/components/modal/commonModal";
 import AdminDetailPop from '../components/AdminDetailPop';
 import api from '@/service/api.js';
 import sysMgtApi from "../service/sysMgtApi.js";
@@ -145,7 +146,7 @@ export default {
 	customGrid: customGrid, 
    // SystemPopup,
     AdminRegPop,
-    //AdminReg2Pop,
+    commonModal,
     AdminDetailPop,
   },
   created(){            
@@ -200,12 +201,16 @@ export default {
       
       console.log("totalItems >> " + this.totalItems);
       if(this.totalItems == 0){
-        alert('검색 결과가 없습니다.');
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '검색 결과가 없습니다.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
         return false;
       }
       var chkList = this.$refs.table.checkedElementDatas();
       if(chkList.length == 0){
-        alert('체크박스에 체크를 해주세요.');
+        this.row.title = '관리자/유치채널 관리';
+        this.row.msg1 = '삭제대상을 체크를 해주세요.';
+        this.$refs.commmonModal.alertModalOpen(this.row);
         return false;
       }
         // for(var i = 0; i < chkList.length; i++){
@@ -245,14 +250,19 @@ export default {
             let response = await sysMgtApi.deleteAdmin(this.row);
             const result = response.data;
             if (result != null && result.retCode == "0000") {
-              alert('삭제 하였습니다.');
-              // grid.reloadData();
+              this.row.title = '관리자/유치채널 관리';
+              this.row.msg1 = '삭제 하였습니다.';
+              this.$refs.commmonModal.alertModalOpen(this.row);
               this.$refs.table.reloadData();
               return;
             }
-            alert("실패 하였습니다.");
+          this.row.title = '관리자/유치채널 관리';
+          this.row.msg1 = '실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
         } catch(err) {
-            alert("실패 하였습니다.");
+          this.row.title = '관리자/유치채널 관리';
+          this.row.msg1 = '실패 하였습니다.';
+          this.$refs.commmonModal.alertModalOpen(this.row);
         }
       }
     },

frontend/src/views/HubwebLayout.vue

@@ -11,7 +11,7 @@
 
 <script>
 import NavBar from "../components/NavBar.vue";
-//import vuejsDatepicker from "../components/vuejs-datepicker";
+import vuejsDatepicker from "../components/vuejs-datepicker";
 import HubWebHeader from "../components/HubWebHeader.vue";
 import HubWebFooter from "../components/HubWebFooter.vue";
 
@@ -27,7 +27,7 @@ export default {
   name: "hubwebLayout",
   components: {   
     NavBar,
-    //vuejsDatepicker,
+    // vuejsDatepicker,
     HubWebHeader,
     HubWebFooter,    
   },