From 327e2aa536c4064dd8ae3a71bf6fde4fd56bbb3f Mon Sep 17 00:00:00 2001
From: mjkhan21 <mjkhan21@xit.co.kr>
Date: Mon, 29 Jul 2024 15:55:42 +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

---
 .../webapp/WEB-INF/jsp/base/user/password.jsp |   2 +-
 .../WEB-INF/jsp/base/user/select-user.jsp     | 113 ++++++++-------
 .../WEB-INF/jsp/base/user/user-info.jsp       |  40 ++----
 .../WEB-INF/jsp/base/user/user-main.jsp       | 131 +++++++++---------
 src/main/webapp/WEB-INF/jsp/include/top.jsp   |  10 +-
 src/main/webapp/WEB-INF/jsp/index.jsp         |   2 +-
 6 files changed, 140 insertions(+), 158 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/base/user/password.jsp b/src/main/webapp/WEB-INF/jsp/base/user/password.jsp
index b724e81..1e1c626 100644
--- a/src/main/webapp/WEB-INF/jsp/base/user/password.jsp
+++ b/src/main/webapp/WEB-INF/jsp/base/user/password.jsp
@@ -37,7 +37,7 @@ function changePassword() {
 		return false;
 	}
 	
-	return currentUserControl.changePassword({
+	return currentUserCtrl.changePassword({
 		userIDs: "${currentUser.id}",
 		currentPassword: passwords[0].value,
 		password: passwords[1].value
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 991aa40..45081a3 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,51 +1,50 @@
 <%@ 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 data-doctx="select-user" class="card"><!-- 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 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" style="">계정</th>
-						<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Email: activate to sort column ascending" style="">이름</th>
-						<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="">등록일자</th>
+				<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 sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-sort="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({})">{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({})">{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="4" 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>
@@ -53,69 +52,69 @@
 </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 userList = userSelector.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 --%>
-	$("#_${infoPrefix}List").html(trs.join());
-	$("#_${infoPrefix}Thead").find("th input[type='checkbox']").prop("checked", false);
+		[userSelector.find("userNotFound").innerHTML] :
+		userList.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:userSelector.dataset,
+		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() {
-		let checkbox = $(this);
-		checkbox.prop("checked", keys.includes(checkbox.val()));
-	});
+userSelector.onSelectionChange = selected => {
+	let userList = userSelector.dataset;
+	let keys = selected.map(e => userList.getKey(e));
+	userSelector.querySelectorAll("[name='userList'] input[type='checkbox']")
+		.forEach(node => {
+			node.checked = keys.includes(node.value);
+		});
 };
 
-$("#_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 0328ec5..e46e5e9 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,13 +1,11 @@
 <%@ 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="admin">${currentUser.hasAuthorities("ROLE_ADMIN")}</c:set>
-              <form id="infoPrefix-form">
+              <form data-doctx="user" id="infoPrefix-form">
                 <div class="row g-3">
                   <div class="col-md-6">
                     <div class="row">
-                      <label class="col-sm-3 col-form-label text-sm-end" for="account"
-                        >계정</label
-                      >
+                      <label class="col-sm-3 col-form-label text-sm-end" for="account">계정</label>
                       <div class="col-sm-9">
                         <input name="id" type="hidden" data-map="USER_ID" />
                         <input name="institute" type="hidden" data-map="NSTT_CD" />
@@ -17,9 +15,7 @@
                   </div>
                   <div class="col-md-6">
                     <div class="row">
-                      <label class="col-sm-3 col-form-label text-sm-end" for="name"
-                        >이름</label
-                      >
+                      <label class="col-sm-3 col-form-label text-sm-end" for="name">이름</label>
                       <div class="col-sm-9">
                         <input name="name" type="text" required  data-map="USER_NM" class="form-control" placeholder="prefixName 이름" />
                       </div>
@@ -27,9 +23,7 @@
                   </div>
                   <div class="col-md-6">
                     <div class="row">
-                      <label class="col-sm-3 col-form-label text-sm-end" for="password"
-                        >비밀번호</label
-                      >
+                      <label class="col-sm-3 col-form-label text-sm-end" for="password">비밀번호</label>
                       <div class="col-sm-9">
                         <input name="password" type="password" required class="form-control" placeholder="비밀번호" />
                       </div>
@@ -37,9 +31,7 @@
                   </div>
                   <div class="col-md-6 hidden">
                     <div class="row">
-                      <label class="col-sm-3 col-form-label text-sm-end" for="confirmPassword"
-                        >비밀번호 확인</label
-                      >
+                      <label class="col-sm-3 col-form-label text-sm-end" for="confirmPassword">비밀번호 확인</label>
                       <div class="col-sm-9">
                         <input name="confirmPassword" type="password" required class="form-control" placeholder="비밀번호 확인" />
                       </div>
@@ -191,12 +183,10 @@ sggDepts.depts.onDatasetChange = obj => {
 sggDepts.sggs.setData({sggList: ${sggs}});
 sggDepts.depts.setData({deptList: ${depts}});
 
-var infoPrefixFields = new FormFields("#infoPrefix-form");
-<c:if test="${!empty userInfo}">infoPrefixControl.setData([${userInfo}]);</c:if>
+<c:if test="${!empty userInfo}">infoPrefixCtrl.setData([${userInfo}]);</c:if>
 
-infoPrefixControl.setInfo = obj => {
-	obj = obj || infoPrefixControl.dataset.getCurrent("item");
-	infoPrefixFields.set(infoPrefixControl, obj);
+infoPrefixCtrl.setInfo = obj => {
+	obj = obj || infoPrefixCtrl.dataset.getCurrent("item");
 	let create = isEmpty(obj.data.USER_ACNT);
 	$("input[name='account']").prop("readonly", !create);
 	$("input[type='password']").each(function(){
@@ -216,13 +206,13 @@ infoPrefixControl.setInfo = obj => {
 	document.querySelector("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;
 	
-	if (window.renderinfoPrefixList)
-		renderinfoPrefixList();
-	infoPrefixControl.dataset.setState();
+	if (infoPrefixCtrl.renderList)
+		infoPrefixCtrl.renderList();
+	infoPrefixCtrl.dataset.setState();
 }
 
 function saveinfoPrefix() {
@@ -244,7 +234,7 @@ function saveinfoPrefix() {
 	dialog.alert({
 		content:"현재 prefixName 정보를 저장하시겠습니까?",
 		onOK:() => {
-			infoPrefixControl.save(infoPrefixFields.get());
+			infoPrefixCtrl.save(infoPrefixCtrl.toObject());
 		}
 	});
 }
@@ -254,8 +244,8 @@ async function initPassword() {
 		title: "비밀번호 초기화",
 		content: "비밀번호를 초기화하시겠습니까?",
 		onOK: () => {
-			userControl.changePassword({
-				userIDs: userControl.getCurrent().USER_ID,
+			userCtrl.changePassword({
+				userIDs: userCtrl.getCurrent().USER_ID,
 				init: true
 			})
 			.then(resp => {
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 f5a0ed2..92dc937 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,30 +1,29 @@
 <%@ 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>
-					<div class="input-group" id="${infoPrefix}-query">
-						<select id="${infoPrefix}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>
+					<div class="input-group">
+						<select name="by" onchange="userCtrl.find('term').focus();" class="form-select">
+							<option value="userName">이름</option>
+							<option value="userAccount">계정</option>
 						</select>
-						<input id="${infoPrefix}term" 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="${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 sorting_asc" aria-sort="ascending" style="width: 223.719px;">계정</th>
 							<th class="sorting" style="width: 146.156px;">이름</th>
 							<th class="sorting" style="width: 195.688px;">이메일</th>
@@ -32,11 +31,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}>{USER_ACNT}</td>
                        <td {onclick} {ondblclick}>{USER_NM}</td>
                        <td {onclick} {ondblclick}>{EML_ADRS}</td>
@@ -44,7 +43,7 @@
                        <td {onclick} {ondblclick}>{REG_DT}</td>
                     </tr>
                     </template>
-                   	<template id="${infoPrefix}NotFound">
+                   	<template name="userNotFound">
 					<tr class="odd">
 						<td valign="top" colspan="6" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
 					</tr>
@@ -52,94 +51,88 @@
 				</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 -->
+    </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()
+userCtrl.search = () => {
+	userCtrl.query = {
+		by: userCtrl.find("by").value,
+		term: userCtrl.find("term").value
 	};
-	${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,
+		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 --%>
+			[userCtrl.find("userNotFound").innerHTML] :
+			userList.inStrings(
+				userCtrl.find("userRow").innerHTML,
 				(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})"
+	$("#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},
+	userCtrl.setData({
+		userList:${userList},
 		${infoPrefix}Start:${userStart},
 		${infoPrefix}Fetch:${userFetch},
 		${infoPrefix}Total:${userTotal}
diff --git a/src/main/webapp/WEB-INF/jsp/include/top.jsp b/src/main/webapp/WEB-INF/jsp/include/top.jsp
index 9d4f47a..51ec56c 100644
--- a/src/main/webapp/WEB-INF/jsp/include/top.jsp
+++ b/src/main/webapp/WEB-INF/jsp/include/top.jsp
@@ -33,7 +33,7 @@
 				</a>
 			</li>
 			<li><div class="dropdown-divider"></div></li>
-			<li><a class="dropdown-item" onclick="currentUserControl.changePassword()">
+			<li><a class="dropdown-item" onclick="currentUserCtrl.changePassword()">
 					<i class="bx bx-cog me-2"></i>
 					<span class="align-middle">비밀번호 변경</span>
 				</a>
@@ -51,12 +51,12 @@
 <%--/ Navbar --%>
 <c:set var="functions" scope="request">
 ${functions}
-var currentUserControl = new UserControl();
-currentUserControl.prefix = "currentUser";
+var currentUserCtrl = newUserControl();
+currentUserCtrl.prefix = "currentUser";
 
 function currentUserInfo() {
-	currentUserControl.dataset.clear();
-	currentUserControl.getInfo({userID: '${currentUser.id}'});
+	currentUserCtrl.dataset.clear();
+	currentUserCtrl.getInfo({userID: '${currentUser.id}'});
 }
 
 function setPageTitle(pageTitle) {
diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
index 571d983..5f5bf0f 100644
--- a/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -146,7 +146,7 @@ $(".sticky-element").sticky({
 $(function() {
 	${onload}
 	mainTabs.open(FIRST_PAGE);
-	<c:if test="${currentUser.info.promptPasswordChange}">currentUserControl.changePassword();</c:if>
+	<c:if test="${currentUser.info.promptPasswordChange}">currentUserCtrl.changePassword();</c:if>
 });
 
 //# sourceURL=index.jsp