From a7c0c3d638b1c4fa15e68d87f1611937b5c2af7f Mon Sep 17 00:00:00 2001
From: "Jonguk. Lim" <minuk926@gmail.com>
Date: Sun, 6 Nov 2022 03:15:41 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=97=85=EB=AC=B4=ED=8C=9D?=
 =?UTF-8?q?=EC=97=85(=EB=93=B1=EB=A1=9D/=EB=B3=80=EA=B2=BD/=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C)=20=ED=83=80=EC=9D=B4=ED=8B=80=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B3=B5=ED=86=B5=20JSP=20include=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  32 ++
 .../fims/biz/common/popup/fimsTotal_popup.jsp |  16 +-
 .../WEB-INF/jsp/fims/biz/rt/rt0200Sel.jsp     |   1 +
 .../WEB-INF/jsp/framework/biz-popup-btn.jsp   |  21 +
 .../WEB-INF/jsp/framework/biz-popup-title.jsp |  20 +
 .../biz/mng/auth/mngAuthGrpMgtForm.jsp        | 423 ++++++------------
 .../biz/mng/auth/mngAuthGrpMgtPopup.jsp       | 250 +++++------
 .../biz/mng/auth/mngAuthRoleMgtForm.jsp       |  23 +-
 .../resources/framework/js/cmm/XitCmmnUtil.js |   4 +-
 9 files changed, 310 insertions(+), 480 deletions(-)
 create mode 100644 src/main/webapp/WEB-INF/jsp/framework/biz-popup-btn.jsp
 create mode 100644 src/main/webapp/WEB-INF/jsp/framework/biz-popup-title.jsp

diff --git a/README.md b/README.md
index 5def51f0..3d401ac4 100644
--- a/README.md
+++ b/README.md
@@ -96,3 +96,35 @@ access token : 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
 3) MyBatisX
   mapper에서 xml을 편하게 이동
 ```
+
+### 팝업 공통처리 : 등록 / 변경 / 삭제 팝업
+```html
+
+1) 변수 정의
+<c:set var="isUpdate" value="${!empty 조건값}"/> 
+<c:set var="bizName" value="권한"/>
+    
+2) title include
+    
+<div class="popup_inner">
+    <p class="pop_title">권한 </p>
+    
+<div class="popup_inner">
+    <!-- popup title -->
+    <%@include file="/WEB-INF/jsp/framework/biz-popup-title.jsp"%>
+
+    
+    
+    <div class="popup_btn">
+        <span class="flr" colspan="4">
+            <a href="#" class="btn blue" id="btnRegist">등록</a>
+            <a href="#" class="btn blue" id="btnModify">변경</a>
+            <a href="#" class="btn red" id="btnRemove">삭제</a>
+            <a href="#" class="btn lightgray" onclick="window.close()">닫기</a>
+        </span>
+    </div>
+    
+    <!--팝업 버튼 -->
+    <%@include file="/WEB-INF/jsp/framework/biz-popup-btn.jsp"%>
+
+```
diff --git a/src/main/webapp/WEB-INF/jsp/fims/biz/common/popup/fimsTotal_popup.jsp b/src/main/webapp/WEB-INF/jsp/fims/biz/common/popup/fimsTotal_popup.jsp
index 0f9d2931..a6e8a111 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/biz/common/popup/fimsTotal_popup.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/biz/common/popup/fimsTotal_popup.jsp
@@ -499,7 +499,7 @@
 				api: {
 					readData: {
 						url: '<c:url value="/adm/send/rqst/mng/find.do"/>'
-						, serializer: (params) => fnAddPageInfo(document.frmSearch, params)
+						,serializer: (params) => fnAddPageInfo(document.frmSearch, params)
 					}
 				}
 			};
@@ -712,19 +712,7 @@
 			}
 
 			return true;
-		},
-		/* ========================
-        * 페이지 이동
-           -외부사이트 링크가 필요 시 사용(내부코드는 각 페이지에 맞게 수정, ex>https://www.gov.kr/portal/main )
-        ======================== */
-		pageLink: function(flag, url, params){
-			switch (flag) {
-				case "move":  //페이지 이동
-					break;
-				default:
-					break;
-			}
-		},
+		}
 
 	}
 
diff --git a/src/main/webapp/WEB-INF/jsp/fims/biz/rt/rt0200Sel.jsp b/src/main/webapp/WEB-INF/jsp/fims/biz/rt/rt0200Sel.jsp
index 86af15b0..a553e3c5 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/biz/rt/rt0200Sel.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/biz/rt/rt0200Sel.jsp
@@ -325,6 +325,7 @@
             api: {
                 readData: {
                     url: '<c:url value="/fims/biz/rt/findRt0200List.do"/>'
+                    ,serializer: (params) => fnAddPageInfo(document.frmSearch, params)
                 }
             }
         };
diff --git a/src/main/webapp/WEB-INF/jsp/framework/biz-popup-btn.jsp b/src/main/webapp/WEB-INF/jsp/framework/biz-popup-btn.jsp
new file mode 100644
index 00000000..d0255385
--- /dev/null
+++ b/src/main/webapp/WEB-INF/jsp/framework/biz-popup-btn.jsp
@@ -0,0 +1,21 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+<%-- TODO: 완료후 comment 삭제
+아래와 같이 isUpdate 정의 필요
+<c:set var="isUpdate" value="${!empty authorInfoVO.authorCode}"/>
+--%>
+            <!-- popup button -->
+			<div class="popup_btn">
+				<span class="flr">
+					<c:choose>
+						<c:when test="${isUpdate}">
+							<a href="#" class="btn blue" id="btnModify">변경</a>
+							<a href="#" class="btn red" id="btnRemove">삭제</a>
+						</c:when>
+						<c:otherwise>
+							<a href="#" class="btn blue" id="btnRegist">등록</a>
+						</c:otherwise>
+					</c:choose>
+					<a href="#" class="btn lightgray" onclick="window.close()">닫기</a>
+				</span>
+			</div>
diff --git a/src/main/webapp/WEB-INF/jsp/framework/biz-popup-title.jsp b/src/main/webapp/WEB-INF/jsp/framework/biz-popup-title.jsp
new file mode 100644
index 00000000..fddf1b4e
--- /dev/null
+++ b/src/main/webapp/WEB-INF/jsp/framework/biz-popup-title.jsp
@@ -0,0 +1,20 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
+
+<%-- TODO: 완료후 comment 삭제
+아래와 같이 isUpdate 정의 필요
+<c:set var="isUpdate" value="${!empty authorInfoVO.authorCode}"/>
+<c:set var="bizName" value="권한그룹"/>
+--%>
+            <!-- popup title -->
+            <p class="pop_title">
+				<c:choose>
+					<c:when test="${isUpdate}">
+						<c:out value="${bizName}"/> 변경
+					</c:when>
+					<c:otherwise>
+						<c:out value="${bizName}"/> 등록
+					</c:otherwise>
+				</c:choose>
+			</p>
+
diff --git a/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthGrpMgtForm.jsp b/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthGrpMgtForm.jsp
index c8365bb3..23661f40 100644
--- a/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthGrpMgtForm.jsp
+++ b/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthGrpMgtForm.jsp
@@ -1,12 +1,7 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%@ include file="/WEB-INF/jsp/framework/taglibs.jsp" %>
 
-<form:form id="listForm" name="listForm" action="" method="post">
-	<input type="hidden" name="groupId"/>
-	<input type="hidden" name="groupIds"/>
-	<input type="hidden" name="pageIndex" value="<c:out value='${groupManageVO.pageIndex}'/>"/>
-	<input type="hidden" id="searchGubun" name="searchGubun" value="excel">
-	<input type="hidden" name="searchCondition"/>
+<form:form id="frmSearch" name="frmSearch">
 	<div class="search r2">
 
 		<table>
@@ -15,15 +10,15 @@
 			<col style="width: 8%;"/>
 			<col style="width: 20%;"/>
 			<col style="width: 8%;"/>
-			<col style="width: ;"/>
+			<col/>
 			<col style="width: 8%;"/>
-			<col style="width: ;"/>
+			<col/>
 			<col style="width: 7%;"/>
 		</colgroup>
 			<tbody>
-				<th>그룹 명</th>
+				<th>권한 그룹명</th>
 				<td>
-                	<input id="searchKeyword" name="searchKeyword" type="text" value="<c:out value='${groupManageVO.searchKeyword}'/>" size="25" title="검색" onkeypress="press();" />
+                	<input id="groupNm" name="groupNm" type="text" size="25" title="검색" onkeypress="press();" />
                 </td>
                 <td colspan="6">
 					<input type="button" id="btnSearch" class="btn_search" title="검색" value="검색" />
@@ -34,9 +29,8 @@
 	<!-- //검색 -->
 	
 	<div class="page_btn">
-		<span class="fll">
+		<span class="flr">
 			<a href="#" class="btn darkgray" id="btnRegist" title="등록">등록</a>
-			<a href="#" class="btn red" id="btnRemove" title="삭제">삭제</a>
 		</span>
 	</div>
 	<!-- //버튼 및 페이지정보 -->
@@ -45,309 +39,144 @@
 	<div id="grid"></div>
 </form:form>  
 
-<script type="text/javaScript" language="javascript" defer="defer">
-$(document).ready(function(){
-	XitAuthGrpMng_list.init();
-});
-/* ******************************* 
- * 사용자 그룹관리 Functions
- ******************************* */
-var XitAuthGrpMng_list = {
-		init : function(){
-			/** 
-			* Grid Config Settings
-			*/
-			//Grid Style Set
-			Grid.applyTheme('striped'); // Call API of static method
-			//Grid 체크박스 checked EventListner
-			instance.on('check', function(ev) {
-				//		      console.log('check!', ev);
-			});
-			//Grid 체크박스 unchecked EventListner
-			instance.on('uncheck', function(ev) {
-				//		      console.log('uncheck!', ev);
-			});
-			//Grid 체크박스 focus이동 EventListner
-			instance.on('focusChange', function(ev) {
-			//		      console.log('change focused cell!', ev);
-			});
-				
-			/**
-			* Elements EventListener Settings
-			*/
-			//검색 Event 설정
-			$('#btnSearch').on({
-				click: function(){
-					XitAuthGrpMng_list.findData();
-				}
-			});
-			$("#btnRegist").click(function(){
-				XitAuthGrpMng_list.pagePopup('input', '<c:url value="/framework/biz/mng/auth/AuthGrpMng_input.do"/>');
-			});
-			//삭제 버튼 Event
-			$("#btnRemove").click(function(){
-				if(confirm("삭제하시겠습니까?")){
-					var checkArr  = instance.getCheckedRows();
-					var returnValue = "";
-					var returnBoolean = false;
-					
-					if(instance.getData().length == 0 ){
-						alert("조회된 결과가 없습니다.");
-					}else if(checkArr.length  == 0){
-						alert("선택된 권한이 없습니다.");
-					}else{
-						checkArr.forEach(function(item, index){
-							returnValue +=  item.groupId;
-							if(checkArr.length -1 > index){
-								returnValue += ";";
-							}
-						})
-						
-						document.listForm.groupIds.value = returnValue;
-						XitAuthGrpMng_list.removeData();
-					}
-				}
-			});
-		},
-		/* ========================
-		* 데이터 조회
-		======================== */
-		findData : function(){
-			instance.reloadData();
-		},	
-		/* ========================
-		* 데이터 등록
-		======================== */
-		addData : function(){
-		},	
-		/* ========================
-		* 데이터 수정
-		======================== */
-		modifyData : function(){
-		},	
-		/* ========================
-		* 데이터 삭제
-		======================== */
-		removeData : function(){
-			var varFrom = document.getElementById("listForm");
-			var param = $(varFrom).serialize();
-			$.ajax({
-				url : "/framework/biz/mng/auth/AuthGrpMng_deletes_proc.do",
-				data : param,
-				type : "post",
-				dataType : "json",
-				success : function(data) {
-					alert(data.resp.message);
-					XitAuthGrpMng_list.findData();
-				},
-				error: function(){
-					
-				}
-			});
-		},
-		/* ========================
-		* 페이지 이동
-		   -외부사이트 링크가 필요 시 사용(내부코드는 각 페이지에 맞게 수정, ex>https://www.gov.kr/portal/main )
-		======================== */
-		pageLink: function(flag, url, params){
+<script type="text/javaScript">
+	/**************************************************************************
+	 * Global Variable
+	 **************************************************************************/
+	let GRID = null;
+	var callbackSearch = () => fnBiz.search();
+
+	/* *******************************
+	 * Biz function
+	 ******************************* */
+	const fnBiz = {
+		search: () => {
+			GRID.reloadData();
+		}
+
+		,pagePopup: function(flag, params){
+			let url = '<c:url value="/framework/biz/mng/auth/mngAuthGrpMgtPopup.do"/>';
+			let popTitle;
+			let popOption = {width: 530, height:535}
 			switch (flag) {
-				case "move":  //페이지 이동
-					document.listForm.searchKeyword.value = "";
-				    document.listForm.action = url;
-				    document.listForm.submit();
+				case "add":	//등록
+					popTitle = "권한 그룹 등록";
 					break;
-				case "popup": //팝업 OPEN
-					XitAuthGrpMng_list.pagePopup(flag, url, params);
-					break;
-				default:
-					break;
-			}
-		},
-		/* ========================
-		 * 페이지 Open
-		   -팝업페이지를 Open 한다.
-		======================== */
-		pagePopup: function(flag, url, params){
-			var popUrl = url;
-			popUrl += "?tilesDef=popup";
-			if(!(params == undefined || params == null)){
-				popUrl += "&";
-				popUrl += params;
-			}
-			var popTitle = '';
-			switch (flag) {
 				case "detail":	//상세
-					popTitle = "사용자 그룹 관리 상세";
-					popOption = "scrollbars = yes, top=100px, left=100px, height=475px, width=430px;";
-					break;
-				case "input":	//입력
-					popTitle = "사용자 그룹 관리 입력";
-					popOption = "scrollbars = yes, top=100px, left=100px, height=475px, width=430px;";
+					popTitle = "권한 그룹 상세";
 					break;
 				default:
 					break;
 			}
-			
-		    window.open(popUrl, popTitle ,popOption);
-		},
-		/* ========================
-		* 상세 팝업 오픈 버튼 클릭
-		   -상세 팝업을 OPEN 한다.
-		======================== */
-		fnClickGrpBtn: function(props){
-			var rowData = props.grid.getRow(props.rowKey);
-			var params  = "";
-				params += "groupId=" + rowData.groupId;
-			XitAuthGrpMng_list.pagePopup('detail', "<c:url value='/framework/biz/mng/auth/AuthGrpMng_edit.do'/>", params);
+			CmmPopup.open(url, params, popOption, popTitle);
 		}
-}
 
+		,onClickGrid: function(props){
+			const rowData = props.grid.getRow(props.rowKey);
+			fnBiz.pagePopup('detail', rowData);
+		}
+	}
 
+	/**************************************************************************
+	 * event
+	 **************************************************************************/
+	$(() => {
+		$('#btnSearch').bind('click', () => fnBiz.search());
 
+		$('#btnRegist').bind('click', () => {
+			fnBiz.pagePopup('add', {});
+		});
 
-/* ******************************
- * Grid 환경 설정
- ****************************** */
-var GridConfig = new XitTuiGridConfig();
-GridConfig.setOptGridId('grid');					//Grid를 출력할 Element ID(해당 Element에 Grid가 출력 됨)
-GridConfig.setOptGridHeight(270);				//Grid 높이(단위: px)
-GridConfig.setOptRowHeight(20);				//Grid row 높이(단위: px)
-GridConfig.setOptRowHeaderType('checkbox');	//Row 첫번째 Cell 타입(rowNum: 순번, checkbox: 체크박스, '': 아무것도 출력 안함)
-GridConfig.setOptPageOptions({				//페이징(Pagination) 옵션
-	useClient: true							//Client Paging 여부(true 설정 시 클라이언트 자체 페이징 처리. 서버호출 X)
-	,perPage: 10								//페이지당 표시 건수
-});    
-GridConfig.setOptColumnOptions({				//컬럼고정 옵션
-});
-GridConfig.setOptDataSource({					//DataSource 
- 	/* -----------------------
- 	* DataSource Config Setting
- 	*  -설정항목은 Global 적용 되며
- 	*  -API별 적용을 원할 경우 각 API 안에 작성 가능(우선순위: 개별->글로벌)
- 	----------------------- */
-	//contentType: 'application/json',
-	//headers: { 'x-custom-header': 'custom-header' },
-	initialRequest: true, //디폴트 값은 true(false: 인스턴스 생성 시 요청은 보내지 않음. 이런 경우 "instance.reloadData()"를 사용하여 요청 가능)
-	//serializer: function(params) {
-	//return $(document.listForm).serialize();
-	// },
- 	/* -----------------------
- 	* DataSource API Setting
- 	----------------------- */
-	api: {
-		readData : {
-			url: '<c:url value="/framework/biz/mng/auth/AuthGrpMng_list.ajax"/>', method: 'GET'
-			,initParams: {}
-			,serializer: function(params) {
-				var form = document.listForm;
-				var serializeParam = $(form).serialize(); 
-				for(var key in params){
-					if(key=='perPage'){
-						if(params[key]==undefined)
-							serializeParam +='&'+key+'=-1';
-						else
-							serializeParam +='&'+key+'='+params[key];
-					}else
-						serializeParam +='&'+key+'='+params[key];
+	});
+
+	/* *******************************
+	 * Grid
+	 ******************************* */
+	const initGrid = () => {
+		const gridColumns = [
+			{
+				header: '그룹 ID',
+				name: 'groupId',
+				width: 120,
+				sortable: true,
+				sortingType: 'desc',
+				align: 'center',
+				renderer: {
+					type: CustomButtonRenderer,
+					options: {
+						formatter : function(props){
+							const rowData = props.grid.getRow(props.rowKey);
+							return {
+								formatter: rowData.groupId
+								,element: "text"
+							}
+						}
+						,eventFunction: fnBiz.onClickGrid	//function(props){XitAuthGrpMng_list.fnClickGrpBtn(props )}	//function(){alert("1234")}
+						,eventType : "click"
+					}
 				}
-				return serializeParam;
-			}
-		}
-		,createData: { url: '', method: 'POST'}
-		,updateData: { url: '', method: 'PUT'}
-		,modifyData: { url: '', method: 'PUT'}
-		,deleteData: { url: '', method: 'DELETE'} 
-	}
-});
-GridConfig.setOptHeader({
-});	//Grid 헤더 정보(헤더 셀 병합 필요 시 설정)
-GridConfig.setOptColumns([	//Grid 컬럼 정보(명칭,매핑 field, 기타옵션 등)
-	{
-		header: '그룹 ID',
-		name: 'groupId',
-		width: 120,
-		sortable: true,
-		sortingType: 'desc',
-		align: 'center',
-		renderer: {
-			type: CustomButtonRenderer,
-			options: {
-				formatter : function(props){
-					var rowData  	= props.grid.getRow(props.rowKey);
-					var obj = {
-						formatter : rowData.groupId
-						,element	: "text"
+			},
+			{
+				header: '그룹 명',
+				name: 'groupNm',
+				minWidth: 150,
+				sortable: false,
+				align: 'left'
+			},
+			{
+				header: '설명',
+				name: 'groupDc',
+				minWidth: 200,
+				sortable: false,
+				align: 'left'
+			},
+			{
+				header: '권한',
+				name: 'authorDetail',
+				width: 200,
+				sortable: false,
+				align: 'left',
+				renderer: {
+					type: XitColumnMergeRenderer,
+					options: {
+						listColumns: ['authorNm', 'authorCode'],
+						format: '{0}({1})'
 					}
-					return obj;
 				}
-				,eventFunction: XitAuthGrpMng_list.fnClickGrpBtn	//function(props){XitAuthGrpMng_list.fnClickGrpBtn(props )}	//function(){alert("1234")}   
-				,eventType : "click"
+			},
+			{
+				header: '등록일자',
+				name: 'groupCreatDe',
+				width: 120,
+				sortable: false,
+				align: 'center'
 			}
-		}
-	},
-	{
-		header: '그룹 명',
-		name: 'groupNm',
-		minWidth: 150,
-		sortable: false,
-		align: 'left'
-	},
-	{
-		header: '설명',
-		name: 'groupDc',
-		minWidth: 200,
-		sortable: false,
-		align: 'left'
-	},
-	{
-		header: '권한',
-		name: 'authorDetail',
-		width: 200,
-		sortable: false,
-		align: 'left',
-        renderer: {
-	           type: XitColumnMergeRenderer,
-	           options: {
-	              listColumns: ['authorNm', 'authorCode'],
-	              format: '{0}({1})'
-	           }
-	        }
-	},
-	{
-		header: '등록일자',
-		name: 'groupCreatDe',
-		width: 120,
-		sortable: false,
-		align: 'center'
-	},
-	{
-		header: '',
-		name: '',
-		width: 80,
-		sortable: false,
-		align: 'center',
-		renderer: {
-			type: CustomButtonRenderer,
-			options: {
-				formatter : function(props){
-					var rowData  	= props.grid.getRow(props.rowKey);
-					var obj = {
-						formatter : "상세조회"
-						,element	: "text"
-					}
-					return obj;
+		];
+
+		const gridOptions = {
+			el: 'grid',
+			rowHeaders: ['rowNum'],
+			columns: gridColumns
+		};
+
+		const gridDatasource = {					//DataSource
+			initialRequest: true // 화면 load시 조회 안함 - default
+			,api: {
+				readData: {
+					url: '<c:url value="/framework/biz/mng/auth/findAuthGrps.do"/>'
+					,serializer: (params) => fnAddPageInfo(document.frmSearch, params)
 				}
-				,eventFunction: XitAuthGrpMng_list.fnClickGrpBtn	//function(){alert("1234")}   
-				,eventType : "click"
 			}
-		}
+		};
+
+		GRID = TuiGrid.of(gridOptions, gridDatasource, (res) => {
+		});
 	}
-]);
-var Grid = tui.Grid;
-var instance = GridConfig.instance(Grid);  //Grid 인스턴스
-/* ********************************************************
- * 처리결과메시지 출력
- ******************************************************** */
-<c:if test="${!empty message}">alert("${message}");</c:if>
 
+	/**************************************************************************
+	 * initialize
+	 **************************************************************************/
+	$(document).ready(function(){
+		initGrid();
+	});
 </script>
diff --git a/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthGrpMgtPopup.jsp b/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthGrpMgtPopup.jsp
index 8d679d91..d9d6cc74 100644
--- a/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthGrpMgtPopup.jsp
+++ b/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthGrpMgtPopup.jsp
@@ -1,180 +1,136 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%@ include file="/WEB-INF/jsp/framework/taglibs.jsp" %>
-<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
 
+<c:set var="isUpdate" value="${!empty authGrpVO.groupId}"/>
+<c:set var="bizName" value="권한그룹"/>
 
-<c:set var="registerFlag" value="${empty groupManageVO.groupId ? 'INSERT' : 'UPDATE'}"/>
-<c:set var="registerFlagName" value="${empty groupManageVO.groupId ? '그룹 등록' : '그룹 수정'}"/>
-<!-- 검색 필드 박스 시작 -->
-
-<script type="text/javascript" src="<c:url value="/framework/util/validator.do"/>"></script>
-<validator:javascript formName="groupManage" staticJavascript="false" xhtml="true" cdata="false"/>
-<form:form commandName="groupManage" method="post" > 
+<form>
 
 	<div class="popup" style="min-width: 400px;">
 		<div class="popup_inner" style="max-width: 400px;">
-			<p class="pop_title">권한 등록</p>
+			<%@include file="/WEB-INF/jsp/framework/biz-popup-title.jsp"%>
 			<table class="tbl03">
-				<caption>권한 등록</caption>
-				    <tr>
-					<th class="required" width="25%" scope="row"  nowrap="nowrap">그룹 ID</th>
-					<td nowrap="nowrap"><input name="groupId" id="groupId" type="text" readonly="readonly" value="<c:out value='${groupManage.groupId}'/>" size="40" title="그룹 ID" /></td>
+				<caption>
+					<c:out value="${bizName}"/> <spring:message code="title.update"/> / <spring:message code="title.create"/>
+				</caption>
+				<colgroup>
+					<col style="width: 25%;"/>
+					<col/>
+				</colgroup>
+				<tr>
+					<th class="required" scope="row"  nowrap="nowrap">
+						<label>권한그룹 ID</label>
+					</th>
+					<td nowrap="nowrap">
+						<input name="groupId" id="groupId" type="text" readonly="readonly" value="<c:out value='${authGrpVO.groupId}'/>" readonly="${isUpdate}" size="40" title="그룹 ID" />
+					</td>
 				</tr>
 				<tr>    
-					<th class="required" width="25%" scope="row"  nowrap="nowrap">그룹 명
-						<img src="<c:url value='/'/>resourcesimages/required.gif" width="15" height="15" alt="필수" />
+					<th class="required" scope="row"  nowrap="nowrap">
+						<label>권한그룹 명</label>
 					</th>
-					<td nowrap="nowrap"><input name="groupNm" id="groupNm" type="text" value="<c:out value='${groupManage.groupNm}'/>" maxLength="50" size="40" title="그룹명" />&nbsp;<form:errors path="groupNm" /></td>
+					<td nowrap="nowrap">
+						<input name="groupNm" id="groupNm" type="text" value="<c:out value='${authGrpVO.groupNm}'/>" maxLength="50" size="40" title="그룹명" />&nbsp;<form:errors path="groupNm" />
+					</td>
 				</tr>
-				<tr>    
-					<th class="required" width="20%" scope="row"  nowrap="nowrap">설명</th>
-					<td nowrap="nowrap"><input name="groupDc" id="groupDc" type="text" value="<c:out value='${groupManage.groupDc}'/>" maxLength="50" size="50" title="설명" /></td>
+				<tr>
+					<th class="required" scope="row"  nowrap="nowrap">
+						<label>권한</label>
+					</th>
+					<td nowrap="nowrap">
+						<code:select type="AUTH_GRP" id="authorCode" name="autorCode" defaultSelect="${authGrpVO.authorCode}" title="권한" cls="selectBox" alt="selectBox tag"/>
+					</td>
 				</tr>
 				<tr>    
-					<th class="required" width="20%" scope="row"  nowrap="nowrap">권한</th>
+					<th scope="row"  nowrap="nowrap">
+						<label>설명</label>
+					</th>
 					<td nowrap="nowrap">
-						<select id="authorCode" name="authorCode">
-							<option value="">== 선택하세요 ==</option>
-							<c:forEach var="row" items="${listAuthorInfoVO }">
-								<option value="<c:out value="${row.author_code }"/>" <c:if test="${row.author_code eq groupManage.authorCode}">selected="selected"</c:if> ><c:out value="${row.author_nm }"/></option>
-							</c:forEach>
-						</select>
+						<input name="groupDc" id="groupDc" type="text" value="<c:out value='${authGrpVO.groupDc}'/>" maxLength="50" size="50" title="설명" />
 					</td>
 				</tr>
 				<tr>    
-					<th class="required" width="20%" scope="row"  nowrap="nowrap">등록일자</th>
-					<td nowrap="nowrap"><input name="groupCreatDe" id="groupCreatDe" type="text" value="<c:out value='${groupManage.groupCreatDe}'/>" maxLength="50" size="20" readonly="readonly" title="등록일자"/></td>
+					<th scope="row"  nowrap="nowrap">
+						<label>등록일자</label>
+					</th>
+					<td nowrap="nowrap">
+						<input name="groupCreatDe" id="groupCreatDe" type="text" value="<c:out value='${authGrpVO.groupCreatDe}'/>" maxLength="50" size="20" readonly="readonly" title="등록일자"/>
+					</td>
 				</tr>
 			</table>
-			<div class="popup_btn">
-				<span class="flr" colspan="4">
-				          <c:if test="${registerFlag == 'INSERT'}">
-					<a href="#LINK" class="btn blue" id="btnSave">저장</a>
-				</c:if>
-				<c:if test="${registerFlag == 'UPDATE'}">
-					<a href="#LINK" class="btn blue" id="update_btn">변경</a>
-					<a href="#LINK" class="btn red" id="delete_btn">삭제</a>
-				</c:if>
-					<a href="#" class="btn lightgray" id="btnClose">닫기</a>
-				</span>
-			</div>
-			<!-- //등록버튼 -->
+			<%@include file="/WEB-INF/jsp/framework/biz-popup-btn.jsp"%>
 			
 		</div>
 	</div>
-	<!-- //popup -->
-	<!-- 검색조건 유지 -->
-	<c:if test="${registerFlag == 'UPDATE'}">
-		<input type="hidden" name="searchCondition" value="<c:out value='${groupManageSearchVO.searchCondition}'/>"/>
-		<input type="hidden" name="searchKeyword" value="<c:out value='${groupManageSearchVO.searchKeyword}'/>"/>
-		<input type="hidden" name="pageIndex" value="<c:out value='${groupManageSearchVO.pageIndex}'/>"/>
-	</c:if>
-</form:form>
+</form>
 
 
 <script type="text/javaScript">
 
-$(document).ready(function(){
-	XitAuthGrpMng_edit.init();
-});
-/* ******************************* 
- * 사용자그룹관리 수정 Functions
- ******************************* */
- var XitAuthGrpMng_edit = {
-		init : function(){
-			//닫기 버튼 Event
-			$("#btnClose").click(function() {
-				window.close();
+	/**************************************************************************
+	 * Global Variable
+	 **************************************************************************/
+
+	/* *******************************
+	 * Biz function
+	 ******************************* */
+	const fnBiz = {
+		add: () => {
+			if(!fnBiz.validate())	return;
+
+			cmmBizAjax('add', {
+				url: '<c:url value="/framework/biz/mng/auth/addAuthAuthor.do"/>'
+				,data: $("form").serialize()
+				//,contentType: 'x-www-form-url-encoded'
+			})
+		}
+
+		,modify: () => {
+			if(!fnBiz.validate())	return;
+
+			cmmBizAjax('modify', {
+				url: '<c:url value="/framework/biz/mng/auth/modifyAuthAuthor.do"/>'
+				,data: $("form").serialize()
 			});
-			//저장 버튼 Event 설정
-			$('#btnSave').on({
-				click: function(){
-					XitAuthGrpMng_edit.addData();
-		   		}
-		  	});
-			$('#update_btn').on({
-				click: function(){
-					XitAuthGrpMng_edit.modifyData();
-		   		}
-		  	});
-			$('#delete_btn').on({
-				click: function(){
-					XitAuthGrpMng_edit.removeData();
-		   		}
-		  	});
-			$(".popup").css("position","absolute");
-			$(".content_header").css("display","none");
-			$("#cur_loc").css("display","none");
-		},
-		/* ========================
-		* 데이터 등록
-		======================== */
-		addData : function(){
-			var varFrom = document.getElementById("groupManage");
-			if(confirm("저장 하시겠습니까?")){
-				var param = $(varFrom).serialize();
-				$.ajax({
-					url : "/framework/biz/mng/auth/AuthGrpMng_insert_proc.do",
-					data : param,
-					type : "post",
-					dataType : "json",
-					success : function(data) {
-						alert(data.resp.message);
-						window.opener.XitAuthGrpMng_list.findData();
-						window.close();
-					},
-					error: function(){
-						
-					}
-				});
-			}
 		}
-		/* ========================
-		* 데이터 수정
-		======================== */
-		,modifyData : function(){
-			var varFrom = document.getElementById("groupManage");
-			if(confirm("수정 하시겠습니까?")){
-				var param = $(varFrom).serialize();
-				$.ajax({
-					url : "/framework/biz/mng/auth/AuthGrpMng_update_proc.do",
-					data : param,
-					type : "post",
-					dataType : "json",
-					success : function(data) {
-						alert(data.resp.message);
-						window.opener.XitAuthGrpMng_list.findData();
-						window.close();
-					},
-					error: function(){
-						
-					}
-				});
-			}
+
+		, remove: () => {
+			cmmBizAjax('remove', {
+				url: '<c:url value="/framework/biz/mng/auth/removeAuthAuthor.do"/>'
+				,data: {authorCode: $('#authorCode').val()}
+			});
 		}
-		/* ========================
-		* 데이터 삭제
-		======================== */
-		,removeData : function(){
-			var varFrom = document.getElementById("groupManage");
-			if(confirm("삭제 하시겠습니까?")){
-				var param = $(varFrom).serialize();
-				$.ajax({
-					url : "/framework/biz/mng/auth/AuthGrpMng_delete_proc.do",
-					data : param,
-					type : "post",
-					dataType : "json",
-					success : function(data) {
-						alert(data.resp.message);
-						window.opener.XitAuthGrpMng_list.findData();
-						window.close();
-					},
-					error: function(){
-						
-					}
-				});
+
+		,validate: () => {
+			if($('#authorCode').val() === ''){
+				alert('[권한코드]는 필수 입니다.');
+				$('#authorCode').focus();
+				return false;
 			}
+			if($('#authorNm').val() === ''){
+				alert('[권한명]은 필수 입니다.');
+				$('#authorNm').focus();
+				return false;
+			}
+			return true;
 		}
-		
-}
+	};
+
+	/**************************************************************************
+	 * event
+	 **************************************************************************/
+	$(() => {
+		$('#btnRegist').on('click', () => fnBiz.add());
+
+		$('#btnModify').on('click', () => fnBiz.modify());
+
+		$('#btnRemove').on('click', () => fnBiz.remove());
+	});
+
+	/**************************************************************************
+	 * initialize
+	 **************************************************************************/
+	$(document).ready(function(){
+		$('#authorCreatDe').val(setDateTimeFmt('<c:out value="${authGrpVO.groupCreatDe}"/>'));
+	});
 </script>
diff --git a/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthRoleMgtForm.jsp b/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthRoleMgtForm.jsp
index ce9e0ad6..20de3efb 100644
--- a/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthRoleMgtForm.jsp
+++ b/src/main/webapp/WEB-INF/jsp/framework/biz/mng/auth/mngAuthRoleMgtForm.jsp
@@ -58,21 +58,6 @@
 			GRID.reloadData();
 		}
 
-		,pageLink: function(flag, url, params){
-			switch (flag) {
-				case "move":  //페이지 이동
-					document.frmSearch.roleNm.value = "";
-					document.frmSearch.action = url;
-					document.frmSearch.submit();
-					break;
-				case "popup": //팝업 OPEN
-					fnBiz.pagePopup(flag, url, params);
-					break;
-				default:
-					break;
-			}
-		}
-
 		,pagePopup: function(flag, params){
 			let url = '<c:url value="/framework/biz/mng/auth/mngAuthRoleMgtPopup.do"/>';
 			let popTitle;
@@ -180,13 +165,11 @@
 		};
 
 		const gridDatasource = {					//DataSource
-			/* -----------------------
-			* DataSource API Setting
-			----------------------- */
-			//initialRequest: true,  // 화면 load시 조회 안함 - default
-			api: {
+			initialRequest: true // 화면 load시 조회 안함 - default
+			,api: {
 				readData: {
 					url: '<c:url value="/framework/biz/mng/auth/findAuthRoles.do"/>'
+					,serializer: (params) => fnAddPageInfo(document.frmSearch, params)
 				}
 			}
 		};
diff --git a/src/main/webapp/resources/framework/js/cmm/XitCmmnUtil.js b/src/main/webapp/resources/framework/js/cmm/XitCmmnUtil.js
index c51e10cd..c31f3851 100644
--- a/src/main/webapp/resources/framework/js/cmm/XitCmmnUtil.js
+++ b/src/main/webapp/resources/framework/js/cmm/XitCmmnUtil.js
@@ -139,8 +139,8 @@ var XitCmmnUtil = {
  * @param {Object} params json
  * @returns {Object} form data + params = serialize data return
  */
-const fnAddPageInfo = (formEliment, params) => {
-	let serializeParam = $(formEliment).serialize();
+const fnAddPageInfo = (searchForm, params) => {
+	let serializeParam = $(searchForm).serialize();
 	for(var key in params){
 		if(key=='perPage'){
 			if(params[key]==undefined)