From f1a79edf7a0f264301dc67b7e4279ae4a6870aa6 Mon Sep 17 00:00:00 2001
From: leebj <leebj91@xit.co.kr>
Date: Tue, 30 Jul 2024 08:57:33 +0900
Subject: [PATCH] =?UTF-8?q?UserControl=20=EB=B3=80=EA=B2=BD:=20class=20->?=
 =?UTF-8?q?=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WEB-INF/jsp/base/user/select-user.jsp     | 122 +++++++-------
 .../WEB-INF/jsp/base/user/user-info.jsp       |  16 +-
 .../WEB-INF/jsp/base/user/user-main.jsp       | 152 +++++++++---------
 .../WEB-INF/jsp/fims/user/user01010-main.jsp  |   4 +-
 4 files changed, 143 insertions(+), 151 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/base/user/select-user.jsp b/src/main/webapp/WEB-INF/jsp/base/user/select-user.jsp
index bda59ef5..78f8dd33 100644
--- a/src/main/webapp/WEB-INF/jsp/base/user/select-user.jsp
+++ b/src/main/webapp/WEB-INF/jsp/base/user/select-user.jsp
@@ -1,127 +1,125 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
 <c:set var="prefixName" scope="request">사용자</c:set>
-              <!-- Page Body -->
-<div class="card">
+<div class="card" data-doctx="select-user"><!-- Page Body -->
     <div class="card-datatable text-nowrap">
         <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
 			<div class="d-flex flex-row justify-content-between p-3">
 				<div>
 					<div class="input-group" id="DataTables_Table_0_length">
-						<select id="_userBy" onchange="document.getElementById('_userTerm').focus();" aria-controls="DataTables_Table_0" class="form-select">
-							<option value="${infoPrefix}Name">이름</option>
-							<option value="${infoPrefix}Account">계정</option>
+						<select name="by" onchange="userSelector.find('term').focus();" aria-controls="DataTables_Table_0" class="form-select">
+							<option value="userName">이름</option>
+							<option value="userAccount">계정</option>
 						</select>
-						<input id="_userTerm" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
+						<input name="term" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
 					</div>
 				</div>
 				<div>
-					<button onclick="search${infoPrefix}s();" class="btn btn-primary">찾기</button>
+					<button onclick="userSelector.search();" class="btn btn-primary">찾기</button>
 				</div>
 			</div>
-			<table class="datatables-ajax table table-bordered dataTable no-footer" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
-				<thead id="_${infoPrefix}Thead">
-					<tr><th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="text-align:center;"><input onchange="${infoPrefix}Control.dataset.select(this.checked);" type="checkbox" class="form-check-input"></th>
-						<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" >시군구명</th>
-                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" >기관명</th>
-                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" >부서명</th>
+			<table class="datatables-ajax table table-bordered dataTable no-footer" >
+				<thead name="userThead">
+					<tr><th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="text-align:center;"><input onchange="userSelector.dataset.select(this.checked);" type="checkbox" class="form-check-input"></th>
+						<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >시군구명</th>
+                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >기관명</th>
+                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >부서명</th>
                         <th class="sorting sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Full name: activate to sort column descending" >계정</th>
-                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" >이름</th>
-                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" >등록일자</th>
+                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >이름</th>
+                        <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" >등록일자</th>
 					</tr>
                    </thead>
-                   <tbody id="_${infoPrefix}List">
+                   <tbody name="userList">
 					</tbody>
-                  	<template id="_${infoPrefix}Row">
+                  	<template name="userRow">
                   	<tr data-key="{USER_ID}">
-                      <td style="text-align:center;"><input value="{USER_ID}" onchange="${infoPrefix}Control.dataset.select('{USER_ID}', this.checked);" type="checkbox" class="form-check-input"></td>
-                      <td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{SGG_NM}</td>
-                      <td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{INST_NM}</td>
-                      <td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{DEPT_NM}</td>
-                      <td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{USER_ACNT}</td>
-                      <td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{USER_NM}</td>
-                      <td onclick="${infoPrefix}Control.setCurrent('{USER_ID}')" ondblclick="${infoPrefix}Control.getInfo({})">{REG_DT}</td>
+                      <td style="text-align:center;"><input value="{USER_ID}" onchange="userSelector.dataset.select('{USER_ID}', this.checked);" type="checkbox" class="form-check-input"></td>
+                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{SGG_NM}</td>
+                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{INST_NM}</td>
+                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{DEPT_NM}</td>
+                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{USER_ACNT}</td>
+                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{USER_NM}</td>
+                      <td onclick="userSelector.setCurrent('{USER_ID}')" ondblclick="userSelector.getInfo({})">{REG_DT}</td>
                    </tr>
                    </template>
-                  	<template id="_${infoPrefix}NotFound">
+                  	<template name="userNotFound">
 				<tr class="odd">
 					<td valign="top" colspan="7" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
 				</tr>
                    </template>
 			</table>
 			<div class="d-flex flex-row p-3 justify-content-between">
-				<label id="_${infoPrefix}PagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
-                 <ul id="_${infoPrefix}Paging" class="pagination pagination-primary">
+				<label name="userPagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
+                 <ul name="userPaging" class="pagination pagination-primary">
                  </ul>
 			</div>
 		</div>
     </div>
-</div>
-              <!--/ Page Body -->
+</div><!--/ Page Body -->
 <script >
-var ${infoPrefix}Control = new UserControl();
+var userSelector = newUserControl("select-user");
 
 function getSelectedUser() {
-	let selected = ${infoPrefix}Control.dataset.getKeys("selected");
+	let selected = userSelector.dataset.getKeys("selected");
 	if (selected.length < 1)
 		return dialog.alert("사용자를 선택하십시오.");
 	else
 		return selected;
 }
 
-function search${infoPrefix}s() {
-	${infoPrefix}Control.query = {
-		by:$("#_userBy").val(),
-		term:$("#_userTerm").val()
+userSelector.search = () => {
+	userSelector.query = {
+		by: userSelector.find("by").value,
+		term: userSelector.find("term").value
 	};
-	${infoPrefix}Control.load(1);
+	userSelector.load(1);
 }
 
-${infoPrefix}Control.onDatasetChange = obj => {
-	let ${infoPrefix}List = ${infoPrefix}Control.dataset;
-	let empty = ${infoPrefix}List.empty;
+userSelector.onDatasetChange = obj => {
+	let list = userSelector.dataset;
+	let empty = list.empty;
 	
 	let trs = empty ?
-		[document.getElementById("_${infoPrefix}NotFound").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
-		${infoPrefix}List.inStrings(document.getElementById("_${infoPrefix}Row").innerHTML); <%-- from template#${infoPrefix}Row --%>
-	$("#_${infoPrefix}List").html(trs.join());
-	$("#_${infoPrefix}Thead").find("th input[type='checkbox']").prop("checked", false);
+		[userSelector.find("userNotFound").innerHTML] :
+		list.inStrings(userSelector.find("userRow").innerHTML);
+	userSelector.find("userList").innerHTML = trs.join("");
+	userSelector.querySelector("[name='userThead'] th input[type='checkbox']").checked = false;
 
-	$("#_${infoPrefix}Paging").setPaging({
-		list:${infoPrefix}Control.dataset,
-		prefix:${infoPrefix}Control.prefix,
-		start:obj.${infoPrefix}Start,
-		totalSize:obj.${infoPrefix}Total,
-		fetchSize:obj.${infoPrefix}Fetch,
-		func:"${infoPrefix}Control.load({index})"
+	$(userSelector.selector("[name='userPaging']")).setPaging({
+		list: list,
+		prefix: userSelector.prefix,
+		start: obj.userStart,
+		totalSize: obj.userTotal,
+		fetchSize: obj.userFetch,
+		func:"userSelector.load({index})"
 	});
 };
 
-${infoPrefix}Control.onCurrentChange = item => {
+userSelector.onCurrentChange = item => {
 	if (!item) return;
 	
 	let key = item.data.USER_ID;
-	$("#_${infoPrefix}List").setCurrentRow(key);
+	$(userSelector.selector("[name='userList']")).setCurrentRow(key);
 };
 
-${infoPrefix}Control.onSelectionChange = selected => {
-	let ${infoPrefix}List = ${infoPrefix}Control.dataset;
-	let keys = selected.map(e => ${infoPrefix}List.getKey(e));
-	$("#_${infoPrefix}List input[type='checkbox']").each(function() {
+userSelector.onSelectionChange = selected => {
+	let list = userSelector.dataset;
+	let keys = selected.map(e => list.getKey(e));
+	$(userSelector.selector("[name='userList'] input[type='checkbox']")).each(function() {
 		let checkbox = $(this);
 		checkbox.prop("checked", keys.includes(checkbox.val()));
 	});
 };
 
-$("#_userTerm").onEnterPress(search${infoPrefix}s);
+$(userSelector.selector("[name='term']")).onEnterPress(userSelector.search);
 
 $(function(){
 	${onload}
-	${infoPrefix}Control.setData({
-		${infoPrefix}List:${userList},
-		${infoPrefix}Start:${userStart},
-		${infoPrefix}Fetch:${userFetch},
-		${infoPrefix}Total:${userTotal}
+	userSelector.setData({
+		userList:${userList},
+		userStart:${userStart},
+		userFetch:${userFetch},
+		userTotal:${userTotal}
 	});
 });
 //# sourceURL=select-user.jsp
diff --git a/src/main/webapp/WEB-INF/jsp/base/user/user-info.jsp b/src/main/webapp/WEB-INF/jsp/base/user/user-info.jsp
index 8ca19cdb..e3b3d212 100644
--- a/src/main/webapp/WEB-INF/jsp/base/user/user-info.jsp
+++ b/src/main/webapp/WEB-INF/jsp/base/user/user-info.jsp
@@ -1,6 +1,6 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
-<form id="infoPrefix-form">
+<form id="infoPrefix-form" data-doctx="user">
 	<input type="hidden" name="cntnSeCd" data-map="CNTN_SE_CD" />
 
 	<div class="row g-3">
@@ -193,7 +193,7 @@
 <script type="text/javascript">
 var infoPrefixFields = new FimsFormFields("#infoPrefix-form");
 
-infoPrefixControl.setInfo = (obj) => {
+infoPrefixCtrl.setInfo = (obj) => {
 	let create = isEmpty(obj.data.USER_ACNT);
 	if(create){
 		obj.data.CNTN_SE_CD = "01";
@@ -208,7 +208,7 @@ infoPrefixControl.setInfo = (obj) => {
 		$("#btnSelectOgdp").removeAttr("hidden");
 	}
 	
-	infoPrefixFields.set(infoPrefixControl,obj);
+	infoPrefixFields.set(infoPrefixCtrl,obj);
 
 	$("#infoPrefix-form input[name='account']").prop("readonly", !create);
 	$("#infoPrefix-form input[name='name']").prop("readonly", !create);
@@ -260,19 +260,19 @@ infoPrefixControl.setInfo = (obj) => {
 			let input = $(this),
 				name = input.attr("data-map"),
 				val = input.val();
-			infoPrefixControl.setValue(name, val);
+			infoPrefixCtrl.setValue(name, val);
 		})
 		.onEnterPress(saveinfoPrefix);
 	
 	document.querySelector("#infoPrefix-form input[name='" + (create ? "account" : "name") + "']").focus();
 }
 
-infoPrefixControl.onModify = (changed) => {
+infoPrefixCtrl.onModify = (changed) => {
 	if (["USER_NM", "EML_ADRS", "MBL_TELNO"].filter(e => changed.includes(e)).length < 1)
 		return;
 	
-	renderinfoPrefixList();
-	infoPrefixControl.dataset.setState();
+	infoPrefixCtrl.renderList();
+	infoPrefixCtrl.dataset.setState();
 }
 
 function saveinfoPrefix() {
@@ -294,7 +294,7 @@ function saveinfoPrefix() {
 	dialog.alert({
 		content:"현재 prefixName 정보를 저장하시겠습니까?",
 		onOK:() => {
-			infoPrefixControl.save(infoPrefixFields.get());
+			infoPrefixCtrl.save(infoPrefixFields.get());
 		}
 	});
 }
diff --git a/src/main/webapp/WEB-INF/jsp/base/user/user-main.jsp b/src/main/webapp/WEB-INF/jsp/base/user/user-main.jsp
index aa52ca55..86ac102d 100644
--- a/src/main/webapp/WEB-INF/jsp/base/user/user-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/base/user/user-main.jsp
@@ -1,29 +1,28 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
 <c:set var="prefixName" scope="request">사용자</c:set>
-              <!-- Page Body -->
-    <div class="d-flex flex-column flex-grow-1">
+    <div data-doctx="user" class="d-flex flex-column flex-grow-1"><!-- Page Body -->
         <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
         
 			<div class="d-flex flex-row justify-content-between p-3">
-				<div class="d-flex flex-grow-1 me-5" id="${infoPrefix}-query">
+				<div class="d-flex flex-grow-1 me-5">
 					<div class="input-group me-3 w-px-400">
-						<select id="${infoPrefix}by" name="by" onchange="document.getElementById('${infoPrefix}term').focus();" aria-controls="DataTables_Table_0" class="form-select">
-							<option value="${infoPrefix}Name">이름</option>
-							<option value="${infoPrefix}Account">계정</option>
+						<select name="by" onchange="userCtrl.find('term').focus();" class="form-select">
+							<option value="userName">이름</option>
+							<option value="userAccount">계정</option>
 						</select>
-						<input id="${infoPrefix}term" name="term" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
+						<input name="term" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
 						
 					</div>
-					<label for="${infoPrefix}status" class="form-label fw-bold px-3 d-flex flex-wrap align-content-center justify-content-center">상태</label>
-					<select id="${infoPrefix}status" name="status" class="form-select">
+					<label for="userStatus" class="form-label fw-bold px-3 d-flex flex-wrap align-content-center justify-content-center">상태</label>
+					<select name="status" class="form-select">
 						<option value="">전체</option>
 						<option value="A">신청</option>
 						<option value="P">승인</option>
 						<option value="D">삭제</option>
 					</select>
-					<label for="${infoPrefix}type" class="form-label fw-bold px-3 d-flex flex-wrap align-content-center justify-content-center">접속구분</label>
-					<select id="${infoPrefix}type" name="type" class="form-select">
+					<label for="type" class="form-label fw-bold px-3 d-flex flex-wrap align-content-center justify-content-center">접속구분</label>
+					<select name="type" class="form-select">
 						<option value="">전체</option>
 						<c:forEach items="${CMN009List}" var="item">
 							<option value="${item.code}">${item.value}</option>
@@ -31,16 +30,15 @@
 					</select>
 				</div>
 				<div>
-					<button onclick="search${infoPrefix}s();" class="btn btn-primary">찾기</button>
-					<button onclick="${infoPrefix}Control.newInfo();" class="btn btn-primary">+ 추가</button>
-					<button id="btnRemove${infoPrefix}s" onclick="remove${infoPrefix}s();" class="btn btn-primary">- 제거</button>
+					<button onclick="userCtrl.search();" class="btn btn-primary">찾기</button>
+					<button onclick="userCtrl.newInfo();" class="btn btn-primary">+ 추가</button>
+					<button onclick="userCtrl.removeUsers();" class="btn btn-primary enable-onfound">- 제거</button>
 				</div>
 			</div>
 			<div class="table-responsive">
-				<table class="datatables-ajax table table-bordered dataTable no-footer" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
-					<thead id="${infoPrefix}Thead">
-						<tr>
-							<th tabindex="0" style="width: 158.828px; text-align:center;"><input onchange="${infoPrefix}Control.select(this.checked);" type="checkbox" class="form-check-input"></th>
+				<table class="datatables-ajax table table-bordered dataTable no-footer">
+					<thead name="userThead">
+						<tr><th tabindex="0" style="width: 158.828px; text-align:center;"><input onchange="userCtrl.select(this.checked);" type="checkbox" class="form-check-input"></th>
 							<th class="sorting" style="width: 146.156px;">상태</th>
 							<th class="sorting" style="width: 146.156px;">사용자구분</th>
 							<th class="sorting" style="width: 146.156px;">기관</th>
@@ -52,11 +50,11 @@
 							<th class="sorting" style="width: 230.469px;">등록일자</th>
 						</tr>
                     </thead>
-                    <tbody id="${infoPrefix}List">
+                    <tbody name="userList">
 					</tbody>
-                   	<template id="${infoPrefix}Row">
+                   	<template name="userRow">
 	                   	<tr data-key="{USER_ID}">
-	                       <td style="text-align:center;"><input value="{USER_ID}" onchange="${infoPrefix}Control.select('{USER_ID}', this.checked);" type="checkbox" class="form-check-input"></td>
+	                       <td style="text-align:center;"><input value="{USER_ID}" onchange="userCtrl.select('{USER_ID}', this.checked);" type="checkbox" class="form-check-input"></td>
 	                       <td {onclick} {ondblclick}>{STTS_NM}</td>
 	                       <td {onclick} {ondblclick}>{USER_SE_NM}</td>
 	                       <td {onclick} {ondblclick}>{INST_NM}</td>
@@ -68,7 +66,7 @@
 	                       <td {onclick} {ondblclick}>{REG_DT}</td>
 	                    </tr>
                     </template>
-                   	<template id="${infoPrefix}NotFound">
+                   	<template name="userNotFound">
 					<tr class="odd">
 						<td valign="top" colspan="10" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
 					</tr>
@@ -76,104 +74,100 @@
 				</table>
 			</div>
 			<div class="d-flex flex-row p-3 justify-content-between">
-				<label id="${infoPrefix}PagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
-                 <ul id="${infoPrefix}Paging" class="pagination pagination-primary">
+				<label name="userPagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
+                 <ul name="userPaging" class="pagination pagination-primary">
                  </ul>
 			</div>
 		</div>
     </div>
               <!--/ Page Body -->
 <script >
-var ${infoPrefix}Control = new UserControl();
+var userCtrl = newUserControl();
 
-function search${infoPrefix}s() {
-	${infoPrefix}Control.query = {
-		by: $("#${infoPrefix}-query [name='by']").val(),
-		term: $("#${infoPrefix}-query [name='term']").val(),
-		status: $("#${infoPrefix}-query [name='status']").val(),
-		type: $("#${infoPrefix}-query [name='type']").val(),
+userCtrl.search = () => {
+	userCtrl.query = {
+		by: userCtrl.find("by").value,
+		term: userCtrl.find("term").value,
+		status: userCtrl.find("status").value,
+		type: userCtrl.find("type").value,
 	};
 	
-	if(${infoPrefix}Control.query.by == "userAccount"){
-		${infoPrefix}Control.query.term = ${infoPrefix}Control.query.term.toUpperCase();
+	if(userCtrl.query.by == "userAccount"){
+		userCtrl.query.term = userCtrl.query.term.toUpperCase();
 	}
 	
-	${infoPrefix}Control.load(1);
+	userCtrl.load(1);
 }
 
-function remove${infoPrefix}s() {
+userCtrl.removeUsers= () => {
 	dialog.alert({
 		content:"선택한 ${prefixName} 정보를 제거하시겠습니까?",
 		onOK:() => {
-			${infoPrefix}Control.remove();
+			userCtrl.remove();
 		}
 	});
 }
 
-function render${infoPrefix}List() {
-	let ${infoPrefix}List = ${infoPrefix}Control.dataset;
-	let empty = ${infoPrefix}List.empty;
+userCtrl.renderList = () => {
+	let userList = userCtrl.dataset;
+	let empty = userList.empty;
 	
 	let trs = empty ?
-			[document.getElementById("${infoPrefix}NotFound").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
-			${infoPrefix}List.inStrings(
-				document.getElementById("${infoPrefix}Row").innerHTML, <%-- from template#${infoPrefix}Row --%>
+			[document.getElementById("userNotFound").innerHTML] : <%-- from template#userNotFound --%>
+			userList.inStrings(
+				userCtrl.find("userRow").innerHTML, <%-- from template#userRow --%>
 				(str, dataItem) => str
-					.replace(/{onclick}=""/gi, 'onclick="userControl.setCurrent(\'' + dataItem.getValue("USER_ID") + '\');"')
-					.replace(/{ondblclick}=""/gi, 'ondblclick="userControl.getInfo(\'' + dataItem.getValue("USER_ID") + '\')"')
-	<%-- OR
-				(str, dataItem) => {
-					let userID = dataItem.getValue("USER_ID");
-					return str
-					.replace(/{onclick}=""/gi, 'onclick="userControl.setCurrent(\'' + userID + '\');"')
-					.replace(/{ondblclick}=""/gi, 'ondblclick="userControl.getInfo(\'' + userID + '\')"')
-				}
-	--%>
+					.replace(/{onclick}=""/gi, 'onclick="userCtrl.setCurrent(\'' + dataItem.getValue("USER_ID") + '\');"')
+					.replace(/{ondblclick}=""/gi, 'ondblclick="userCtrl.getInfo(\'' + dataItem.getValue("USER_ID") + '\')"')
 			);
-	$("#${infoPrefix}List").html(trs.join());
-	$("#${infoPrefix}Thead").find("th input[type='checkbox']").prop("checked", false);
+	userCtrl.find("userList").innerHTML = trs.join("");
+	userCtrl.querySelector("[name='userThead'] th input[type='checkbox']").checked = false;
 }
 
-${infoPrefix}Control.onDatasetChange = obj => {
-	render${infoPrefix}List();
+userCtrl.onDatasetChange = obj => {
+	userCtrl.renderList();
 
-	$("#${infoPrefix}Paging").setPaging({
-		list:${infoPrefix}Control.dataset,
-		prefix:${infoPrefix}Control.prefix,
-		start:obj.${infoPrefix}Start,
-		totalSize:obj.${infoPrefix}Total,
-		fetchSize:obj.${infoPrefix}Fetch,
-		func:"${infoPrefix}Control.load({index})"
+	$(userCtrl.selector("[name='userPaging']")).setPaging({
+		list:userCtrl.dataset,
+		prefix:userCtrl.prefix,
+		start:obj.userStart,
+		totalSize:obj.userTotal,
+		fetchSize:obj.userFetch,
+		func:"userCtrl.load({index})"
 	});
 };
 
-${infoPrefix}Control.onCurrentChange = item => {
+userCtrl.onCurrentChange = item => {
 	if (!item) return;
 	
 	let key = item.data.USER_ID;
-	$("#${infoPrefix}List").setCurrentRow(key);
+	$(userCtrl.selector("[name='userList']")).setCurrentRow(key);
 };
 
-${infoPrefix}Control.onSelectionChange = selected => {
-	let ${infoPrefix}List = ${infoPrefix}Control.dataset;
-	let keys = selected.map(e => ${infoPrefix}List.getKey(e));
-	$("#${infoPrefix}List input[type='checkbox']").each(function() {
-		let checkbox = $(this);
-		checkbox.prop("checked", keys.includes(checkbox.val()));
-	});
+userCtrl.onSelectionChange = selected => {
+	let userList = userCtrl.dataset;
+	let keys = selected.map(e => userList.getKey(e));
+	
+	userCtrl.querySelectorAll("[name='userList'] input[type='checkbox']")
+		.forEach(node => {
+			node.checked = keys.includes(node.value);
+		});
 	
-	$("#btnRemove${infoPrefix}s").prop("disabled", keys.length < 1);
+	userCtrl.querySelectorAll(".enable-onfound")
+		.forEach(node => {
+			node.disabled = keys.length < 1;
+		});
 };
 
-$("#${infoPrefix}term").onEnterPress(search${infoPrefix}s);
+$(userCtrl.selector("[name='term']")).onEnterPress(userCtrl.search);
 
 $(function(){
 	${onload}
-	${infoPrefix}Control.setData({
-		${infoPrefix}List:${userList},
-		${infoPrefix}Start:${userStart},
-		${infoPrefix}Fetch:${userFetch},
-		${infoPrefix}Total:${userTotal}
+	userCtrl.setData({
+		userList:${userList},
+		userStart:${userStart},
+		userFetch:${userFetch},
+		userTotal:${userTotal}
 	});
 });
 //# sourceURL=user-main.jsp
diff --git a/src/main/webapp/WEB-INF/jsp/fims/user/user01010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/user/user01010-main.jsp
index b80de924..ddbf5c42 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/user/user01010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/user/user01010-main.jsp
@@ -33,7 +33,7 @@
 </head>
 <body>
 
-<form id="user-form">
+<form id="user-form" data-doctx="user">
 	<input type="hidden" name="cntnSeCd" data-map="CNTN_SE_CD" />
 	
 	<div class="row g-3 mt-4">
@@ -237,7 +237,7 @@
 <script src="/resources/js/base/fimsFormFields.js"></script>
 <script>
 var userFields = new FimsFormFields("#user-form");
-var userControl = new UserControl();
+var userControl = newUserControl();
 
 userControl.setInfo = obj => {
 	userFields.set(userControl,obj);