From 66ddb71497370d701511e550d2eae1a51b7ef929 Mon Sep 17 00:00:00 2001
From: leebj <leebj91@xit.co.kr>
Date: Thu, 8 Aug 2024 17:35:01 +0900
Subject: [PATCH] =?UTF-8?q?=EC=84=A4=EC=A0=95=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WEB-INF/jsp/fims/stng01010-main.jsp       | 299 +++++++++---------
 .../WEB-INF/jsp/fims/stng01020-main.jsp       | 213 ++++++-------
 .../WEB-INF/jsp/fims/stng01030-main.jsp       | 116 ++++---
 3 files changed, 315 insertions(+), 313 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/fims/stng01010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/stng01010-main.jsp
index b20f568e..a0775f05 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/stng01010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/stng01010-main.jsp
@@ -8,7 +8,7 @@
 			<div class="row mb-3 justify-content-start">
 				<div class="col-md-12">
 					<div class="float-start">
-						<form id="frmSearch--${pageName}" name="frmSearch">
+						<form name="frmSearch">
 							<input type="hidden" name="sggCd" />
 							업무
 							<select class="form-select" name="taskSeCd">
@@ -27,28 +27,28 @@
 									<option value="${item.code}">${item.value}</option>
 								</c:forEach>
 							</select>
-							<button type="button" id="btnLoad--${pageName}" class="btn btn-primary">불러오기</button>
+							<button type="button" name="btnLoad" class="btn btn-primary">불러오기</button>
 						</form>
 					</div>
 					<div class="float-end">
-						<input type="checkbox" id="viewSample--${pageName}" />
-						<label for="viewSample--${pageName}">저장 후 샘플 보기</label>
-						<button type="button" id="btnSave--${pageName}" class="btn btn-primary">저장</button>
+						<input type="checkbox" is="id-input" name="viewSample" />
+						<label is="name-label" for="viewSample">저장 후 샘플 보기</label>
+						<button type="button" name="btnSave" class="btn btn-primary">저장</button>
 					</div>
 				</div>
 			</div>
 	
 			<div class="d-flex justify-content-between">
-				<span id="currentOtpt--${pageName}" class="bg-lighter h3 h-px-30">
+				<span name="currentOtpt" class="bg-lighter h3 h-px-30">
 				</span>
-				<form id="frmEdit--${pageName}">
+				<form name="frmEdit">
 					<input type="hidden" name="sggCd" />
 					<input type="hidden" name="taskSeCd" />
 					<input type="hidden" name="sndngSeCd" />
 					<input type="hidden" name="paperSeCd" />
 		
 	
-					<span id="otptGlobalStng--${pageName}">
+					<span name="otptGlobalStng">
 					</span>
 				</form>
 			</div>
@@ -57,23 +57,24 @@
 				<div class="col-md-12">
 					<div class="float-start">
 						<strong>단일 출력 항목</strong>
-						<button type="button" id="btnUniqueAdd--${pageName}"
+						<button type="button" name="btnUniqueAdd"
 							class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">추가</button>
-						<ul id="dropdownUniqueAdd--${pageName}" class="dropdown-menu oy-scroll mh-px-250">
+						<ul name="dropdownUniqueAdd" class="dropdown-menu oy-scroll mh-px-250">
 						</ul>
-						<button type="button" id="btnUniqueDel--${pageName}" class="btn btn-info">&#x2611; 삭제</button>
+						<button type="button" name="btnUniqueDel"
+						class="btn btn-info">&#x2611; 삭제</button>
 					</div>
 				</div>
 			</div>
 			<div class="card-datatable text-nowrap mb-3">
 				<div class="dataTables_wrapper dt-bootstrap5 no-footer">
-					<div id="scrollUnique--${pageName}" class="table-responsive ox-scroll oy-scroll h-px-300">
-						<table
-						class="table-layout-fixed compress-cell dataTable table table-bordered"
-						id="tableUnique--${pageName}" aria-describedby="DataTables_Table_0_info">
-							<thead class="sticky-thead" id="theadUnique--${pageName}">
+					<div name="scrollUnique"
+					class="table-responsive ox-scroll oy-scroll h-px-300">
+						<table name="tableUnique"
+						class="table-layout-fixed compress-cell dataTable table table-bordered">
+							<thead class="sticky-thead" name="theadUnique">
 							</thead>
-							<tbody id="tbodyUnique--${pageName}">
+							<tbody name="tbodyUnique">
 							</tbody>
 						</table>
 					</div>
@@ -84,20 +85,22 @@
 				<div class="col-md-12">
 					<div class="float-start">
 						<strong>복수 출력 가능 항목</strong>
-						<button type="button" id="btnMultipleAdd--${pageName}" class="btn btn-info">+ 추가</button>
-						<button type="button" id="btnMultipleDel--${pageName}" class="btn btn-info">&#x2611; 삭제</button>
+						<button type="button" name="btnMultipleAdd"
+						class="btn btn-info">+ 추가</button>
+						<button type="button" name="btnMultipleDel"
+						class="btn btn-info">&#x2611; 삭제</button>
 					</div>
 				</div>
 			</div>
 			<div class="card-datatable text-nowrap mb-3">
 				<div class="dataTables_wrapper dt-bootstrap5 no-footer">
-					<div id="scrollMultiple--${pageName}" class="table-responsive ox-scroll oy-scroll h-px-300">
-						<table
-						class="table-layout-fixed compress-cell dataTable table table-bordered"
-						id="tableMultiple--${pageName}" aria-describedby="DataTables_Table_0_info">
-							<thead class="sticky-thead" id="theadMultiple--${pageName}">
+					<div name="scrollMultiple"
+					class="table-responsive ox-scroll oy-scroll h-px-300">
+						<table name="tableMultiple"
+						class="table-layout-fixed compress-cell dataTable table table-bordered">
+							<thead class="sticky-thead" name="theadMultiple">
 							</thead>
-							<tbody id="tbodyMultiple--${pageName}">
+							<tbody name="tbodyMultiple">
 							</tbody>
 						</table>
 					</div>
@@ -107,9 +110,9 @@
 		</div>
 	</div>
 	
-	<span id="tempArea--${pageName}" hidden></span>
+	<span name="tempArea" hidden></span>
 	
-	<template id="theadTr--${pageName}">
+	<template name="theadTr">
 		<tr>
 			<th style="width:150px">순서</th>
 			<th style="width:40px"></th>
@@ -129,7 +132,7 @@
 		</tr>
 	</template>
 	
-	<template id="found--${pageName}">
+	<template name="found">
 		<tr data-key="{OTPT_FORM_ID}">
 			<td data-col="otptArtclSeq" class="text-center">
 				<button type="button">▲</button>
@@ -215,11 +218,11 @@
 		</tr>
 	</template>
 	
-	<template id="dropdownTemplate--${pageName}">
+	<template name="dropdownTemplate">
 		<li><a class="dropdown-item" onclick="{onclick}">{DSCRP}</a></li>
 	</template>
 	
-	<template id="foldLinePstnTemplate--${pageName}">
+	<template name="foldLinePstnTemplate">
 		<span class="px-2">
 			<label class="col-form-label bg-lighter px-2">접는선 위치</label>
 			<label>
@@ -235,17 +238,17 @@
 		</span>
 	</template>
 	
-	<template id="bcrnTemplate--${pageName}">
+	<template name="bcrnTemplate">
 		<span class="px-2">
 			<label class="col-form-label bg-lighter px-2">배경이미지</label>
-			<output id="fileStatus--${pageName}"></output>
+			<output name="fileStatus"></output>
 			<button type="button" onclick="$(this).next().click();">업로드</button>
 			<input type="file" name="backgroundFile" accept="image/*" hidden onchange="pageObject['${pageName}'].fnBgUpload(this);" />
-			<button type="button" id="btnBgDown--${pageName}" onclick="pageObject['${pageName}'].fnBgDown();">다운로드</button>
+			<button type="button" name="btnBgDown" onclick="pageObject['${pageName}'].fnBgDown();">다운로드</button>
 		</span>
 	</template>
 	
-	<template id="photoCntTemplate--${pageName}">
+	<template name="photoCntTemplate">
 		<span class="px-2">
 			<label class="col-form-label bg-lighter px-2">사진 출력 영역</label>
 			<input type="number" name="otptPhotoCnt" class="form-control w-px-50" min="0" max="6" /> 장
@@ -266,36 +269,36 @@ $(document).ready(function(){
 	$P.otptGlobalStng = {};
 	$P.otptArtclStngMap = {};
 
-	$("#btnSave--${pageName}").attr("disabled","disabled");
-	$("#btnUniqueAdd--${pageName}").attr("disabled","disabled");
-	$("#btnUniqueDel--${pageName}").attr("disabled","disabled");
-	$("#btnMultipleAdd--${pageName}").attr("disabled","disabled");
-	$("#btnMultipleDel--${pageName}").attr("disabled","disabled");
+	$P.$find("btnSave").attr("disabled","disabled");
+	$P.$find("btnUniqueAdd").attr("disabled","disabled");
+	$P.$find("btnUniqueDel").attr("disabled","disabled");
+	$P.$find("btnMultipleAdd").attr("disabled","disabled");
+	$P.$find("btnMultipleDel").attr("disabled","disabled");
 
 	$P.fnLoad = () => {
 
-		var formFields = new FimsFormFields("#frmSearch--${pageName}");
+		var formFields = new FimsFormFields($P.selector("frmSearch"));
 		var query = formFields.get();
 		ajax.post({
 			url : wctx.url("/stng/stng01/010/info.do"),
 			data : query,
 			success : (resp) => {
-				$("#btnSave--${pageName}").removeAttr("disabled");
-				$("#btnUniqueAdd--${pageName}").removeAttr("disabled");
-				$("#btnUniqueDel--${pageName}").removeAttr("disabled");
-				$("#btnMultipleAdd--${pageName}").removeAttr("disabled");
-				$("#btnMultipleDel--${pageName}").removeAttr("disabled");
-				$("#currentOtpt--${pageName}").text("");
-				$("#otptGlobalStng--${pageName}").html("");
-				$("#tbodyUnique--${pageName}").html("");
-				$("#tbodyMultiple--${pageName}").html("");
-
-				$("#frmEdit--${pageName}").find("[name='sggCd']").val(query.sggCd);
-				$("#frmEdit--${pageName}").find("[name='taskSeCd']").val(query.taskSeCd);
-				$("#frmEdit--${pageName}").find("[name='sndngSeCd']").val(query.sndngSeCd);
-				$("#frmEdit--${pageName}").find("[name='paperSeCd']").val(query.paperSeCd);
-
-				$("#currentOtpt--${pageName}").text(resp.otptStngTitle);
+				$P.$find("btnSave").removeAttr("disabled");
+				$P.$find("btnUniqueAdd").removeAttr("disabled");
+				$P.$find("btnUniqueDel").removeAttr("disabled");
+				$P.$find("btnMultipleAdd").removeAttr("disabled");
+				$P.$find("btnMultipleDel").removeAttr("disabled");
+				$P.$find("currentOtpt").text("");
+				$P.$find("otptGlobalStng").html("");
+				$P.$find("tbodyUnique").html("");
+				$P.$find("tbodyMultiple").html("");
+
+				$P.$find("frmEdit").find("[name='sggCd']").val(query.sggCd);
+				$P.$find("frmEdit").find("[name='taskSeCd']").val(query.taskSeCd);
+				$P.$find("frmEdit").find("[name='sndngSeCd']").val(query.sndngSeCd);
+				$P.$find("frmEdit").find("[name='paperSeCd']").val(query.paperSeCd);
+
+				$P.$find("currentOtpt").text(resp.otptStngTitle);
 				if(resp.otptGlobalStng != null){
 					$P.otptGlobalStng = resp.otptGlobalStng;
 				} else {
@@ -311,10 +314,10 @@ $(document).ready(function(){
 
 				$P.renderOtptGlobalStng($P.otptGlobalStng);
 
-				$P.renderOtptArtclStngGrid("tbodyUnique--${pageName}",
+				$P.renderOtptArtclStngGrid("tbodyUnique",
 						$P.otptArtclStngMap.unique.prototypeList,
 						$P.otptArtclStngMap.unique.dataList);
-				$P.renderOtptArtclStngGrid("tbodyMultiple--${pageName}",
+				$P.renderOtptArtclStngGrid("tbodyMultiple",
 						$P.otptArtclStngMap.multiple.prototypeList,
 						$P.otptArtclStngMap.multiple.dataList);
 			}
@@ -324,17 +327,17 @@ $(document).ready(function(){
 
 	//출력 전역 설정 렌더링
 	$P.renderOtptGlobalStng = (otptGlobalStng) => {
-		var paperSeCd = $("#frmEdit--${pageName}").find("[name='paperSeCd']").val();
-		var editForm = $("#frmEdit--${pageName}");
+		var paperSeCd = $P.$find("frmEdit").find("[name='paperSeCd']").val();
+		var editForm = $P.$find("frmEdit");
 
 		//설정ID
-		$("#otptGlobalStng--${pageName}").append("<input type='hidden' name='otptBscId' />");
+		$P.$find("otptGlobalStng").append("<input type='hidden' name='otptBscId' />");
 		editForm.find("input[name='otptBscId']").val(otptGlobalStng.OTPT_BSC_ID);
 
 		//접는선 위치
-		$("#otptGlobalStng--${pageName}").append(document.getElementById("foldLinePstnTemplate--${pageName}").innerHTML);
+		$P.$find("otptGlobalStng").append($P.find("foldLinePstnTemplate").innerHTML);
 		if(paperSeCd == "02"){
-			$("#otptGlobalStng--${pageName}").find("label").eq(3).remove();
+			$P.$find("otptGlobalStng").find("label").eq(3).remove();
 		}
 		if(otptGlobalStng.FOLD_LINE_PSTN_SE_CD == null){
 			otptGlobalStng.FOLD_LINE_PSTN_SE_CD = "";
@@ -344,19 +347,19 @@ $(document).ready(function(){
 			.prop("checked", true);
 
 		//배경이미지
-		$("#otptGlobalStng--${pageName}").append(document.getElementById("bcrnTemplate--${pageName}").innerHTML);
+		$P.$find("otptGlobalStng").append($P.find("bcrnTemplate").innerHTML);
 		if(otptGlobalStng.BCRN_IMG_PATH == null || otptGlobalStng.BCRN_IMG_PATH == ""){
-			$("#fileStatus--${pageName}").text("없음");
-			$("#fileStatus--${pageName}").attr("title","");
-			$("#btnBgDown--${pageName}").attr("hidden","hidden");
+			$P.$find("fileStatus").text("없음");
+			$P.$find("fileStatus").attr("title","");
+			$P.$find("btnBgDown").attr("hidden","hidden");
 		} else {
-			$("#fileStatus--${pageName}").text("있음");
-			$("#fileStatus--${pageName}").attr("title",otptGlobalStng.BCRN_IMG_FILE_NM);
-			$("#btnBgDown--${pageName}").removeAttr("hidden");
+			$P.$find("fileStatus").text("있음");
+			$P.$find("fileStatus").attr("title",otptGlobalStng.BCRN_IMG_FILE_NM);
+			$P.$find("btnBgDown").removeAttr("hidden");
 		}
 
 		//출력 사진 건 수
-		$("#otptGlobalStng--${pageName}").append(document.getElementById("photoCntTemplate--${pageName}").innerHTML);
+		$P.$find("otptGlobalStng").append($P.find("photoCntTemplate").innerHTML);
 		if(otptGlobalStng.OTPT_PHOTO_CNT == null || otptGlobalStng.OTPT_PHOTO_CNT == ""){
 			otptGlobalStng.OTPT_PHOTO_CNT = 0;
 		}
@@ -364,7 +367,7 @@ $(document).ready(function(){
 	}
 
 	//출력 요소 그리드 렌더링
-	$P.renderOtptArtclStngGrid = (tbodyId, prototypeList, dataList) => {
+	$P.renderOtptArtclStngGrid = (tbodyName, prototypeList, dataList) => {
 
 		var components = "<option value='' data-component-type=''>선택</option>";
 
@@ -375,13 +378,13 @@ $(document).ready(function(){
 
 		for(var i=0; i < dataList.length; i++){
 			var data = dataList[i];
-			var found = document.getElementById("found--${pageName}").innerHTML;
+			var found = $P.find("found").innerHTML;
 
 			found = found.replace(/{OTPT_FORM_ID}/gi, data.OTPT_FORM_ID);
 			found = found.replace(/{COMPONENTS}/gi, components);
-			$("#"+tbodyId).append(found);
+			$P.$find(tbodyName).append(found);
 
-			var lastTr = $("#"+tbodyId).find("tr").last()[0];
+			var lastTr = $P.$find(tbodyName).find("tr").last()[0];
 
 			fnMakeOptionStyleSelect($P.fnGetElement(lastTr,"fontNm"));
 			fnMakeOptionStyleSelect($P.fnGetElement(lastTr,"fontColr"));
@@ -413,9 +416,9 @@ $(document).ready(function(){
 				.set(!isEmpty(data.FONT_STYLE) ? data.FONT_STYLE : $P.fnGetProto(prototypeList, data.OTPT_ARTCL_NM, "fontStyle"));
 		}
 
-		$("#"+tbodyId).find("tr").each(function(){
+		$P.$find(tbodyName).find("tr").each(function(){
 
-			if(tbodyId == "tbodyUnique--${pageName}"){
+			if(tbodyName == "tbodyUnique"){
 				var el = $P.fnGetElement(this,"otptArtclNm");
 				$(el).attr("disabled","disabled");
 				$(el).addClass("no-bgi");
@@ -426,16 +429,16 @@ $(document).ready(function(){
 			var toNext = $(sel).siblings()[1];
 			fnMakeSpinnerSelect(sel, toPrev, toNext);
 
-			var scrollDiv = "";
-			if(tbodyId == "tbodyUnique--${pageName}"){
-				scrollDiv = "scrollUnique--${pageName}";
+			var scrollDivName = "";
+			if(tbodyName == "tbodyUnique"){
+				scrollDivName = "scrollUnique";
 			} else {
-				scrollDiv = "scrollMultiple--${pageName}";
+				scrollDivName = "scrollMultiple";
 			}
 
 			var rowSpinButtons = $(this).find("td[data-col='otptArtclSeq']").find("button");
 
-			fnMakeRowSpinner(this,rowSpinButtons[0],rowSpinButtons[1],document.getElementById(scrollDiv), $P.validForBackground);
+			fnMakeRowSpinner(this,rowSpinButtons[0],rowSpinButtons[1],$P.find(scrollDivName), $P.validForBackground);
 		});
 	}
 
@@ -445,7 +448,7 @@ $(document).ready(function(){
 
 	$P.fnGetProto = (prototypeList, otptArtclNm, stngItemAttrNm) => {
 		if(stngItemAttrNm == "leftPstn" || stngItemAttrNm == "topPstn"){
-			var paperSeCd = $("#frmEdit--${pageName}").find("[name='paperSeCd']").val();
+			var paperSeCd = $P.$find("frmEdit").find("[name='paperSeCd']").val();
 			var paperNm = "";
 			if(paperSeCd == "01"){
 				paperNm = "a4";
@@ -469,47 +472,47 @@ $(document).ready(function(){
 
 	//출력 요소 선택
 	$P.choiceOtptArtclNm = () => {
-		$("#dropdownUniqueAdd--${pageName}").html("");
+		$P.$find("dropdownUniqueAdd").html("");
 
 		var prototypeList = $P.otptArtclStngMap.unique.prototypeList;
 		var existArr = [];
 
-		$("#tbodyUnique--${pageName} tr").each(function(){
+		$P.$find("tbodyUnique").find("tr").each(function(){
 			var el = $P.fnGetElement(this,"otptArtclNm");
 			existArr.push($(el).val());
 		});
 
 		var selectableArr = prototypeList.filter(item => existArr.indexOf(item.artclNm) == -1);
 
-		var template = document.getElementById("dropdownTemplate--${pageName}");
+		var template = $P.find("dropdownTemplate");
 
 		if(selectableArr.length < 1){
 			var li = template.innerHTML;
 			li = li.replace(/{onclick}/gi, "");
 			li = li.replace(/{DSCRP}/gi, "추가할 수 있는 항목이 없습니다.");
-			$("#dropdownUniqueAdd--${pageName}").append(li);
+			$P.$find("dropdownUniqueAdd").append(li);
 		} else {
 			for(var i=0; i < selectableArr.length; i++){
 				var li = template.innerHTML;
 				li = li.replace(/{onclick}/gi, "pageObject['${pageName}'].addRow('" + selectableArr[i].artclNm + "')");
 				li = li.replace(/{DSCRP}/gi, selectableArr[i].artclDscrp);
-				$("#dropdownUniqueAdd--${pageName}").append(li);
+				$P.$find("dropdownUniqueAdd").append(li);
 			}
 		}
 	}
 
 	//행 추가
 	$P.addRow = (otptArtclNm) => {
-		var paperSeCd = $("#frmEdit--${pageName}").find("[name='paperSeCd']").val();
+		var paperSeCd = $P.$find("frmEdit").find("[name='paperSeCd']").val();
 		var prototypeList;
-		var tbodyId;
+		var tbodyName;
 
 		if(otptArtclNm == null || otptArtclNm == ""){
 			prototypeList = $P.otptArtclStngMap.multiple.prototypeList;
-			tbodyId = "tbodyMultiple--${pageName}";
+			tbodyName = "tbodyMultiple";
 		} else {
 			prototypeList = $P.otptArtclStngMap.unique.prototypeList;
-			tbodyId = "tbodyUnique--${pageName}";
+			tbodyName = "tbodyUnique";
 		}
 
 		var components = "<option value='' data-component-type=''>선택</option>";
@@ -517,25 +520,25 @@ $(document).ready(function(){
 			var p = prototypeList[i];
 			components += "<option value='"+p.artclNm+"' data-component-type='"+p.componentType+"'>"+p.artclDscrp+"</option>";
 		}
-		var template = document.getElementById("found--${pageName}").innerHTML;
+		var template = $P.find("found").innerHTML;
 		template = template.replace(/{OTPT_FORM_ID}/gi, "");
 		template = template.replace(/{COMPONENTS}/gi, components);
-		$("#"+tbodyId).append(template);
+		$P.$find(tbodyName).append(template);
 
-		var lastTr = $("#"+tbodyId).find("tr").last()[0];
+		var lastTr = $P.$find(tbodyName).find("tr").last()[0];
 
 		fnMakeOptionStyleSelect($P.fnGetElement(lastTr,"fontNm"));
 		fnMakeOptionStyleSelect($P.fnGetElement(lastTr,"fontColr"));
 		fnMakeOptionStyleSelect($P.fnGetElement(lastTr,"fontStyle"));
 
-		var scrollDiv = "";
-		if(tbodyId == "tbodyUnique--${pageName}"){
-			scrollDiv = "scrollUnique--${pageName}";
+		var scrollDivName = "";
+		if(tbodyName == "tbodyUnique"){
+			scrollDivName = "scrollUnique";
 		} else {
-			scrollDiv = "scrollMultiple--${pageName}";
+			scrollDivName = "scrollMultiple";
 		}
 		var rowSpinButtons = $(lastTr).find("td[data-col='otptArtclSeq']").find("button");
-		fnMakeRowSpinner(lastTr,rowSpinButtons[0],rowSpinButtons[1],document.getElementById(scrollDiv), $P.validForBackground);
+		fnMakeRowSpinner(lastTr,rowSpinButtons[0],rowSpinButtons[1],$P.find(scrollDivName), $P.validForBackground);
 
 		if(otptArtclNm != null && otptArtclNm != ""){
 
@@ -567,7 +570,7 @@ $(document).ready(function(){
 				.set($P.fnGetProto(prototypeList, otptArtclNm, "fontStyle"));
 		}
 
-		if(tbodyId == "tbodyUnique--${pageName}"){
+		if(tbodyName == "tbodyUnique"){
 			var el = $P.fnGetElement(lastTr,"otptArtclNm");
 			$(el).attr("disabled","disabled");
 			$(el).addClass("no-bgi");
@@ -579,43 +582,43 @@ $(document).ready(function(){
 		var toNext = $(sel).siblings()[1];
 		fnMakeSpinnerSelect(sel, toPrev, toNext);
 
-		if(tbodyId == "tbodyUnique--${pageName}"){
-			$("#scrollUnique--${pageName}").scrollTop($("#scrollUnique--${pageName}")[0].scrollHeight);
+		if(tbodyName == "tbodyUnique"){
+			$P.$find("scrollUnique").scrollTop($P.find("scrollUnique").scrollHeight);
 		} else {
-			$("#scrollMultiple--${pageName}").scrollTop($("#scrollMultiple--${pageName}")[0].scrollHeight);
+			$P.$find("scrollMultiple").scrollTop($P.find("scrollMultiple").scrollHeight);
 		}
 
 		if(otptArtclNm == "background"){ //배경이미지 순서 보정
-			if($("#tbodyUnique--${pageName}").find("tr").length >= 2){
-				$("#tbodyUnique--${pageName}").find("tr").eq(0).before(lastTr);
+			if($P.$find("tbodyUnique").find("tr").length >= 2){
+				$P.$find("tbodyUnique").find("tr").eq(0).before(lastTr);
 			}
 		}
 
 	}
 
 	//행 삭제
-	$P.delRow = (tbodyId) => {
+	$P.delRow = (tbodyName) => {
 
-		if($("#"+tbodyId).find("tr").length <= 0){
+		if($P.$find(tbodyName).find("tr").length <= 0){
 			alert('삭제할 항목이 없습니다.');
 			return;
 		}
 
-		if($("#"+tbodyId).find("input[name='del'][type='checkbox']:checked").length <= 0){
+		if($P.$find(tbodyName).find("input[name='del'][type='checkbox']:checked").length <= 0){
 			alert('체크된 항목이 없습니다.');
 			return;
 		}
 
-		$("#"+tbodyId).find("tr").filter(function(index, selector){
-			if($(selector).find("input[name='del'][type='checkbox']").is(":checked")){
-				$(selector).remove();
+		$P.$find(tbodyName).find("tr").filter(function(index, item){
+			if($(item).find("input[name='del'][type='checkbox']").is(":checked")){
+				$(item).remove();
 			}
 		});
 	}
 
 	//출력 요소 변경
 	$P.fnChangeComponent = (selectElement) => {
-		if($("#tbodyMultiple--${pageName}").find(selectElement).length <= 0){
+		if($P.$find("tbodyMultiple").find(selectElement).length <= 0){
 			return;
 		}
 
@@ -652,9 +655,9 @@ $(document).ready(function(){
 	}
 
 	//출력 요소 설정 값 추출
-	$P.getRowData = (tbodyId, formData) => {
+	$P.getRowData = (tbodyName, formData) => {
 		var rowArr = [];
-		$("#"+tbodyId+" tr").each(function(){
+		$P.$find(tbodyName).find("tr").each(function(){
 			var row = {};
 
 			row.otptFormId = this.dataset.key;
@@ -694,11 +697,11 @@ $(document).ready(function(){
 	$P.fnSave = () => {
 
 		//출력물 전역설정
-		var formData = new FormData(document.getElementById("frmEdit--${pageName}"));
+		var formData = new FormData($P.find("frmEdit"));
 
 		//출력 요소 설정
-		var rowArr1 = $P.getRowData("tbodyUnique--${pageName}", formData);
-		var rowArr2 = $P.getRowData("tbodyMultiple--${pageName}", formData);
+		var rowArr1 = $P.getRowData("tbodyUnique", formData);
+		var rowArr2 = $P.getRowData("tbodyMultiple", formData);
 		var rowArr = [...rowArr1, ...rowArr2];
 		for(var i=0; i<rowArr.length; i++){
 			if(rowArr[i].otptArtclNm == ""){
@@ -719,19 +722,19 @@ $(document).ready(function(){
 			contentType : false, processData : false,
 			success : (resp) => {
 				if(resp.saved){
-					if(!$("#viewSample--${pageName}").is(":checked")){
+					if(!$P.$find("viewSample").is(":checked")){
 						dialog.alert("저장되었습니다.");
 					}
 
-					var formFields = new FimsFormFields("#frmEdit--${pageName}").get();
-					$("#frmSearch--${pageName}").find("[name='sggCd']").val(formFields.sggCd);
-					$("#frmSearch--${pageName}").find("[name='taskSeCd']").val(formFields.taskSeCd);
-					$("#frmSearch--${pageName}").find("[name='sndngSeCd']").val(formFields.sndngSeCd);
-					$("#frmSearch--${pageName}").find("[name='paperSeCd']").val(formFields.paperSeCd);
+					var formFields = new FimsFormFields($P.selector("frmEdit")).get();
+					$P.$find("frmSearch").find("[name='sggCd']").val(formFields.sggCd);
+					$P.$find("frmSearch").find("[name='taskSeCd']").val(formFields.taskSeCd);
+					$P.$find("frmSearch").find("[name='sndngSeCd']").val(formFields.sndngSeCd);
+					$P.$find("frmSearch").find("[name='paperSeCd']").val(formFields.paperSeCd);
 
-					$("#btnLoad--${pageName}").click();
+					$P.$find("btnLoad").click();
 
-					if($("#viewSample--${pageName}").is(":checked")){
+					if($P.$find("viewSample").is(":checked")){
 						$P.fnMakeSampleFile();
 					}
 				}
@@ -742,7 +745,7 @@ $(document).ready(function(){
 	//샘플파일 생성
 	$P.fnMakeSampleFile = () => {
 
-		var formFields = new FimsFormFields("#frmEdit--${pageName}");
+		var formFields = new FimsFormFields($P.selector("frmEdit"));
 		var submitParam = formFields.get();
 		submitParam.crdnIds = "sample";
 
@@ -808,41 +811,41 @@ $(document).ready(function(){
 		var a = document.createElement("a");
         a.href = $P.otptGlobalStng.BCRN_IMG_PATH;
         a.download = $P.otptGlobalStng.BCRN_IMG_FILE_NM;
-        document.getElementById("tempArea--${pageName}").appendChild(a);
+        $P.find("tempArea").appendChild(a);
         a.click();
-        document.getElementById("tempArea--${pageName}").removeChild(a);
+        $P.find("tempArea").removeChild(a);
 	}
 
 	$P.fnBgUpload = (fileElement) => {
 		if(fileElement.files == null || fileElement.files.length == 0){
 			if($P.otptGlobalStng.BCRN_IMG_PATH == null || $P.otptGlobalStng.BCRN_IMG_PATH == ""){
-				$("#fileStatus--${pageName}").text("없음");
-				$("#fileStatus--${pageName}").attr("title","");
-				$("#btnBgDown--${pageName}").attr("hidden","hidden");
+				$P.$find("fileStatus").text("없음");
+				$P.$find("fileStatus").attr("title","");
+				$P.$find("btnBgDown").attr("hidden","hidden");
 			} else {
-				$("#fileStatus--${pageName}").text("있음");
-				$("#fileStatus--${pageName}").attr("title", $P.otptGlobalStng.BCRN_IMG_FILE_NM);
-				$("#btnBgDown--${pageName}").removeAttr("hidden");
+				$P.$find("fileStatus").text("있음");
+				$P.$find("fileStatus").attr("title", $P.otptGlobalStng.BCRN_IMG_FILE_NM);
+				$P.$find("btnBgDown").removeAttr("hidden");
 			}
 		} else {
-			$("#fileStatus--${pageName}").text("이미지 변경됨");
-			$("#fileStatus--${pageName}").attr("title","");
-			$("#btnBgDown--${pageName}").attr("hidden","hidden");
+			$P.$find("fileStatus").text("이미지 변경됨");
+			$P.$find("fileStatus").attr("title","");
+			$P.$find("btnBgDown").attr("hidden","hidden");
 		}
 	}
 
-	$("#theadUnique--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
-	$("#theadMultiple--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
+	$P.$find("theadUnique").html($P.find("theadTr").innerHTML);
+	$P.$find("theadMultiple").html($P.find("theadTr").innerHTML);
 
-	$("#btnLoad--${pageName}").on("click", () => $P.fnLoad() );
+	$P.$find("btnLoad").on("click", () => $P.fnLoad() );
 
-	$("#btnUniqueAdd--${pageName}").on("click", () => $P.choiceOtptArtclNm() );
-	$("#btnMultipleAdd--${pageName}").on("click", () => $P.addRow() );
+	$P.$find("btnUniqueAdd").on("click", () => $P.choiceOtptArtclNm() );
+	$P.$find("btnMultipleAdd").on("click", () => $P.addRow() );
 
-	$("#btnUniqueDel--${pageName}").on("click", () => $P.delRow('tbodyUnique--${pageName}') );
-	$("#btnMultipleDel--${pageName}").on("click", () => $P.delRow('tbodyMultiple--${pageName}') );
+	$P.$find("btnUniqueDel").on("click", () => $P.delRow('tbodyUnique') );
+	$P.$find("btnMultipleDel").on("click", () => $P.delRow('tbodyMultiple') );
 
-	$("#btnSave--${pageName}").on("click", () => $P.fnSave() );
+	$P.$find("btnSave").on("click", () => $P.fnSave() );
 
 	var markerFinder = function(tr){
 		return $P.fnGetElement(tr,"otptArtclSeq");
@@ -851,8 +854,8 @@ $(document).ready(function(){
 		marker.value = value;
 	};
 
-	fnMakeRowNumberingTable(document.getElementById('tbodyUnique--${pageName}'), markerFinder, markerSetter);
-	fnMakeRowNumberingTable(document.getElementById('tbodyMultiple--${pageName}'), markerFinder, markerSetter);
+	fnMakeRowNumberingTable($P.find("tbodyUnique"), markerFinder, markerSetter);
+	fnMakeRowNumberingTable($P.find("tbodyMultiple"), markerFinder, markerSetter);
 
 });
 
diff --git a/src/main/webapp/WEB-INF/jsp/fims/stng01020-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/stng01020-main.jsp
index e99eaaa1..b0059fb5 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/stng01020-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/stng01020-main.jsp
@@ -8,7 +8,7 @@
 			<div class="row mb-3 justify-content-start">
 				<div class="col-md-12">
 					<div class="float-start">
-						<form id="frmSearch--${pageName}" name="frmSearch">
+						<form name="frmSearch">
 							<input type="hidden" name="sggCd" />
 							업무
 							<select class="form-select" name="taskSeCd">
@@ -25,19 +25,19 @@
 								<option value="JU002">본고지(수시분)</option> -->
 							</select>
 							
-							<button type="button" id="btnLoad--${pageName}" class="btn btn-primary">불러오기</button>
+							<button type="button" name="btnLoad" class="btn btn-primary">불러오기</button>
 						</form>
 					</div>
 					<div class="float-end">
-						<button type="button" id="btnSave--${pageName}" class="btn btn-primary">저장</button>
+						<button type="button" name="btnSave" class="btn btn-primary">저장</button>
 					</div>
 				</div>
 			</div>
 			
 			<div class="d-flex justify-content-between">
-				<span id="currentTmplat--${pageName}" class="bg-lighter h3 h-px-30">
+				<span name="currentTmplat" class="bg-lighter h3 h-px-30">
 				</span>
-				<form id="frmEdit--${pageName}">
+				<form name="frmEdit">
 					<input type="hidden" name="sggCd" />
 					<input type="hidden" name="taskSeCd" />
 					<input type="hidden" name="tmplatId" />
@@ -49,7 +49,7 @@
 			<div class="row mb-3 justify-content-start">
 				<div class="col-md-12">
 					<strong>템플릿 문자열</strong>
-					<input type="text" id="mobilePageTmplt--${pageName}" name="mobilePageTmplt" 
+					<input type="text" name="mobilePageTmplt" 
 					class="w-100" />
 				</div>
 			</div>
@@ -58,23 +58,24 @@
 				<div class="col-md-12">
 					<div class="float-start">
 						<strong>기초 항목</strong>
-						<button type="button" id="btnPredefinedAdd--${pageName}" 
+						<button type="button" name="btnPredefinedAdd"
 							class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">추가</button>
-						<ul id="dropdownPredefinedAdd--${pageName}" class="dropdown-menu oy-scroll mh-px-250">
+						<ul name="dropdownPredefinedAdd" class="dropdown-menu oy-scroll mh-px-250">
 						</ul>
-						<button type="button" id="btnPredefinedDel--${pageName}" class="btn btn-info">&#x2611; 삭제</button>
+						<button type="button" name="btnPredefinedDel"
+						class="btn btn-info">&#x2611; 삭제</button>
 					</div>
 				</div>
 			</div>
 			<div class="card-datatable text-nowrap mb-3">
 				<div class="dataTables_wrapper dt-bootstrap5 no-footer">
-					<div id="scrollPredefined--${pageName}" class="table-responsive ox-scroll oy-scroll h-px-300">
-						<table 
-						class="table-layout-fixed compress-cell dataTable table table-bordered" 
-						id="tablePredefined--${pageName}" aria-describedby="DataTables_Table_0_info">
-							<thead class="sticky-thead" id="theadPredefined--${pageName}">
+					<div name="scrollPredefined"
+					class="table-responsive ox-scroll oy-scroll h-px-300">
+						<table name="tablePredefined" 
+						class="table-layout-fixed compress-cell dataTable table table-bordered">
+							<thead class="sticky-thead" name="theadPredefined">
 							</thead>
-							<tbody id="tbodyPredefined--${pageName}">
+							<tbody name="tbodyPredefined">
 							</tbody>
 						</table>
 					</div>
@@ -85,20 +86,20 @@
 				<div class="col-md-12">
 					<div class="float-start">
 						<strong>사용자 정의 항목</strong>
-						<button type="button" id="btnCustomAdd--${pageName}" class="btn btn-info">+ 추가</button>
-						<button type="button" id="btnCustomDel--${pageName}" class="btn btn-info">&#x2611; 삭제</button>
+						<button type="button" name="btnCustomAdd" class="btn btn-info">+ 추가</button>
+						<button type="button" name="btnCustomDel" class="btn btn-info">&#x2611; 삭제</button>
 					</div>
 				</div>
 			</div>
 			<div class="card-datatable text-nowrap mb-3">
 				<div class="dataTables_wrapper dt-bootstrap5 no-footer">
-					<div id="scrollCustom--${pageName}" class="table-responsive ox-scroll oy-scroll h-px-300">
-						<table 
-						class="table-layout-fixed compress-cell dataTable table table-bordered" 
-						id="tableCustom--${pageName}" aria-describedby="DataTables_Table_0_info">
-							<thead class="sticky-thead" id="theadCustom--${pageName}">
+					<div name="scrollCustom"
+					class="table-responsive ox-scroll oy-scroll h-px-300">
+						<table name="tableCustom"
+						class="table-layout-fixed compress-cell dataTable table table-bordered">
+							<thead class="sticky-thead" name="theadCustom">
 							</thead>
-							<tbody id="tbodyCustom--${pageName}">
+							<tbody name="tbodyCustom">
 							</tbody>
 						</table>
 					</div>
@@ -109,7 +110,7 @@
 	</div>
 	
 	
-	<template id="theadTr--${pageName}">
+	<template name="theadTr">
 		<tr>
 			<th style="width:150px">순서</th>
 			<th style="width:40px"></th>
@@ -125,7 +126,7 @@
 		</tr>
 	</template>
 	
-	<template id="found--${pageName}">
+	<template name="found">
 		<tr data-key="{EXTR_FORM_ID}">
 			<td data-col="extrArtclOrdr" class="text-center">
 				<button type="button">▲</button>
@@ -161,7 +162,7 @@
 		</tr>
 	</template>
 	
-	<template id="dropdownTemplate--${pageName}">
+	<template name="dropdownTemplate">
 		<li><a class="dropdown-item" onclick="{onclick}">{DSCRP}</a></li>
 	</template>
 
@@ -179,46 +180,46 @@ $(document).ready(function(){
 	var $P = pageObject["${pageName}"];
 	$P.extrArtclStngMap = {};
 	
-	$("#btnSave--${pageName}").attr("disabled","disabled");
+	$P.$find("btnSave").attr("disabled","disabled");
 	
-	$("#btnPredefinedAdd--${pageName}").attr("disabled","disabled");
-	$("#btnPredefinedDel--${pageName}").attr("disabled","disabled");
-	$("#btnCustomAdd--${pageName}").attr("disabled","disabled");
-	$("#btnCustomDel--${pageName}").attr("disabled","disabled");
+	$P.$find("btnPredefinedAdd").attr("disabled","disabled");
+	$P.$find("btnPredefinedDel").attr("disabled","disabled");
+	$P.$find("btnCustomAdd}").attr("disabled","disabled");
+	$P.$find("btnCustomDel").attr("disabled","disabled");
 
 	$P.fnLoad = () => {
 		
-		var formFields = new FimsFormFields("#frmSearch--${pageName}");
+		var formFields = new FimsFormFields($P.selector("frmSearch"));
 		var query = formFields.get();
 		ajax.post({
 			url : wctx.url("/stng/stng01/020/info.do"),
 			data : query,
 			success : (resp) => {
-				$("#btnSave--${pageName}").removeAttr("disabled");
-				$("#btnPredefinedAdd--${pageName}").removeAttr("disabled");
-				$("#btnPredefinedDel--${pageName}").removeAttr("disabled");
-				$("#btnCustomAdd--${pageName}").removeAttr("disabled");
-				$("#btnCustomDel--${pageName}").removeAttr("disabled");
-				$("#currentTmplat--${pageName}").text("");
+				$P.$find("btnSave").removeAttr("disabled");
+				$P.$find("btnPredefinedAdd").removeAttr("disabled");
+				$P.$find("btnPredefinedDel").removeAttr("disabled");
+				$P.$find("btnCustomAdd").removeAttr("disabled");
+				$P.$find("btnCustomDel").removeAttr("disabled");
+				$P.$find("currentTmplat").text("");
 				
-				$("#tbodyPredefined--${pageName}").html("");
-				$("#tbodyCustom--${pageName}").html("");
+				$P.$find("tbodyPredefined").html("");
+				$P.$find("tbodyCustom").html("");
 				
-				$("#frmEdit--${pageName}").find("[name='sggCd']").val(query.sggCd);
-				$("#frmEdit--${pageName}").find("[name='taskSeCd']").val(query.taskSeCd);
-				$("#frmEdit--${pageName}").find("[name='tmplatId']").val(query.tmplatId);
+				$P.$find("frmEdit").find("[name='sggCd']").val(query.sggCd);
+				$P.$find("frmEdit").find("[name='taskSeCd']").val(query.taskSeCd);
+				$P.$find("frmEdit").find("[name='tmplatId']").val(query.tmplatId);
 				
-				$("#frmEdit--${pageName}").find("[name='extrBscId']").val(resp.EXTR_BSC_ID);
+				$P.$find("frmEdit").find("[name='extrBscId']").val(resp.EXTR_BSC_ID);
 				
-				$("#mobilePageTmplt--${pageName}").val(resp.MOBILE_PAGE_TMPLT);
+				$P.$find("mobilePageTmplt").val(resp.MOBILE_PAGE_TMPLT);
 				
-				$("#currentTmplat--${pageName}").text(resp.extrStngTitle);
+				$P.$find("currentTmplat").text(resp.extrStngTitle);
 				
 				$P.extrArtclStngMap = resp.extrArtclStngMap;
 
-				$P.renderExtrArtclStngGrid("tbodyPredefined--${pageName}", 
+				$P.renderExtrArtclStngGrid("tbodyPredefined", 
 						$P.extrArtclStngMap.predefined.dataList);
-				$P.renderExtrArtclStngGrid("tbodyCustom--${pageName}", 
+				$P.renderExtrArtclStngGrid("tbodyCustom", 
 						$P.extrArtclStngMap.custom.dataList);
 			}
 		});
@@ -227,16 +228,16 @@ $(document).ready(function(){
 	
 	
 	//추출 요소 그리드 렌더링
-	$P.renderExtrArtclStngGrid = (tbodyId, dataList) => {
+	$P.renderExtrArtclStngGrid = (tbodyName, dataList) => {
 		
 		for(var i=0; i < dataList.length; i++){
 			var data = dataList[i];
-			var found = document.getElementById("found--${pageName}").innerHTML;
+			var found = $P.find("found").innerHTML;
 					
 			found = found.replace(/{EXTR_FORM_ID}/gi, data.EXTR_FORM_ID);
-			$("#"+tbodyId).append(found);
+			$P.$find(tbodyName).append(found);
 			
-			var lastTr = $("#"+tbodyId).find("tr").last()[0];
+			var lastTr = $P.$find(tbodyName).find("tr").last()[0];
 			
 			$($P.fnGetElement(lastTr,"extrArtclNm")).set(data.EXTR_ARTCL_NM);
 			$($P.fnGetElement(lastTr,"extrArtclDscrp")).set(data.EXTR_ARTCL_DSCRP);
@@ -254,23 +255,23 @@ $(document).ready(function(){
 			
 		}
 		
-		$("#"+tbodyId).find("tr").each(function(){
+		$P.$find(tbodyName).find("tr").each(function(){
 
-			if(tbodyId == "tbodyPredefined--${pageName}"){	
+			if(tbodyName == "tbodyPredefined"){	
 				$($P.fnGetElement(this,"extrArtclNm")).attr("disabled","disabled").addClass("no-bgi");
 				$($P.fnGetElement(this,"extrArtclDscrp")).attr("disabled","disabled").addClass("no-bgi");
 			}
 			
-			var scrollDiv = "";
-			if(tbodyId == "tbodyPredefined--${pageName}"){
-				scrollDiv = "scrollPredefined--${pageName}";
+			var scrollDivName = "";
+			if(tbodyName == "tbodyPredefined"){
+				scrollDivName = "scrollPredefined";
 			} else {
-				scrollDiv = "scrollCustom--${pageName}";
+				scrollDivName = "scrollCustom";
 			}
 			
 			var rowSpinButtons = $(this).find("td[data-col='extrArtclOrdr']").find("button");
 			
-			fnMakeRowSpinner(this,rowSpinButtons[0],rowSpinButtons[1],document.getElementById(scrollDiv), $P.valid);
+			fnMakeRowSpinner(this,rowSpinButtons[0],rowSpinButtons[1],$P.find(scrollDivName), $P.valid);
 		});
 	}
 	
@@ -281,31 +282,31 @@ $(document).ready(function(){
 
 	//추출 요소 선택
 	$P.choiceExtrArtclNm = () => {
-		$("#dropdownPredefinedAdd--${pageName}").html("");
+		$P.$find("dropdownPredefinedAdd").html("");
 		
 		var predefinedSetList = $P.extrArtclStngMap.predefinedSetList;
 		var existArr = [];
 		
-		$("#tbodyPredefined--${pageName} tr").each(function(){
+		$P.$find("tbodyPredefined").find("tr").each(function(){
 			var el = $P.fnGetElement(this,"extrArtclNm");
 			existArr.push($(el).val());
 		});
 		
 		var selectableArr = predefinedSetList.filter(item => existArr.indexOf(item.artclNm) == -1);
 		
-		var template = document.getElementById("dropdownTemplate--${pageName}");
+		var template = $P.find("dropdownTemplate");
 		
 		if(selectableArr.length < 1){
 			var li = template.innerHTML;
 			li = li.replace(/{onclick}/gi, "");
 			li = li.replace(/{DSCRP}/gi, "추가할 수 있는 항목이 없습니다.");
-			$("#dropdownPredefinedAdd--${pageName}").append(li);
+			$P.$find("dropdownPredefinedAdd").append(li);
 		} else {
 			for(var i=0; i < selectableArr.length; i++){
 				var li = template.innerHTML;
 				li = li.replace(/{onclick}/gi, "pageObject['${pageName}'].addRow('" + selectableArr[i].artclNm + "','"+selectableArr[i].artclDscrp+"')");
 				li = li.replace(/{DSCRP}/gi, selectableArr[i].artclDscrp);
-				$("#dropdownPredefinedAdd--${pageName}").append(li);
+				$P.$find("dropdownPredefinedAdd").append(li);
 			}
 		}
 	}
@@ -313,30 +314,30 @@ $(document).ready(function(){
 	//행 추가
 	$P.addRow = (extrArtclNm, extrArtclDscrp) => {
 		
-		var tbodyId;
+		var tbodyName;
 		
 		if(extrArtclNm == null || extrArtclNm == ""){
-			tbodyId = "tbodyCustom--${pageName}";
+			tbodyName = "tbodyCustom";
 		} else {
-			tbodyId = "tbodyPredefined--${pageName}";
+			tbodyName = "tbodyPredefined";
 		}
 
-		var template = document.getElementById("found--${pageName}").innerHTML;
+		var template = $P.find("found").innerHTML;
 		template = template.replace(/{EXTR_FORM_ID}/gi, "");
 		
-		$("#"+tbodyId).append(template);
+		$P.$find(tbodyName).append(template);
 		
-		var lastTr = $("#"+tbodyId).find("tr").last()[0];
+		var lastTr = $P.$find(tbodyName).find("tr").last()[0];
 		
 		
-		var scrollDiv = "";
-		if(tbodyId == "tbodyPredefined--${pageName}"){
-			scrollDiv = "scrollPredefined--${pageName}";
+		var scrollDivName = "";l
+		if(tbodyName == "tbodyPredefined"){
+			scrollDivName = "scrollPredefined";
 		} else {
-			scrollDiv = "scrollCustom--${pageName}";
+			scrollDivName = "scrollCustom";
 		}
 		var rowSpinButtons = $(lastTr).find("td[data-col='extrArtclOrdr']").find("button");
-		fnMakeRowSpinner(lastTr,rowSpinButtons[0],rowSpinButtons[1],document.getElementById(scrollDiv), $P.valid);
+		fnMakeRowSpinner(lastTr,rowSpinButtons[0],rowSpinButtons[1],$P.find(scrollDivName), $P.valid);
 		
 		if(extrArtclNm != null && extrArtclNm != ""){	
 			
@@ -354,7 +355,7 @@ $(document).ready(function(){
 			$($P.fnGetElement(lastTr,"componentType")).set("텍스트");
 		}
 		
-		if(tbodyId == "tbodyPredefined--${pageName}"){
+		if(tbodyName == "tbodyPredefined"){
 			$($P.fnGetElement(lastTr,"extrArtclNm")).attr("disabled","disabled").addClass("no-bgi");
 			$($P.fnGetElement(lastTr,"extrArtclDscrp")).attr("disabled","disabled").addClass("no-bgi");
 		}
@@ -365,31 +366,31 @@ $(document).ready(function(){
 		var toNext = $(sel).siblings()[1];
 		fnMakeSpinnerSelect(sel, toPrev, toNext);
 		
-		if(tbodyId == "tbodyPredefined--${pageName}"){
-			$("#scrollPredefined--${pageName}").scrollTop($("#scrollPredefined--${pageName}")[0].scrollHeight);
+		if(tbodyName == "tbodyPredefined"){
+			$P.$find("scrollPredefined").scrollTop($P.find("scrollPredefined").scrollHeight);
 		} else {
-			$("#scrollCustom--${pageName}").scrollTop($("#scrollCustom--${pageName}")[0].scrollHeight);
+			$P.$find("scrollCustom").scrollTop($P.find("scrollCustom").scrollHeight);
 		}
 		
 		
 	}
 	
 	//행 삭제
-	$P.delRow = (tbodyId) => {
+	$P.delRow = (tbodyName) => {
 		
-		if($("#"+tbodyId).find("tr").length <= 0){
+		if($P.$find(tbodyName).find("tr").length <= 0){
 			alert('삭제할 항목이 없습니다.');
 			return;
 		}
 		
-		if($("#"+tbodyId).find("input[name='del'][type='checkbox']:checked").length <= 0){
+		if($P.$find(tbodyName).find("input[name='del'][type='checkbox']:checked").length <= 0){
 			alert('체크된 항목이 없습니다.');
 			return;
 		}
 		
-		$("#"+tbodyId).find("tr").filter(function(index, selector){
-			if($(selector).find("input[name='del'][type='checkbox']").is(":checked")){
-				$(selector).remove();
+		$P.$find(tbodyName).find("tr").filter(function(index, item){
+			if($(item).find("input[name='del'][type='checkbox']").is(":checked")){
+				$(item).remove();
 			}
 		});
 	}
@@ -397,9 +398,9 @@ $(document).ready(function(){
 
 	
 	//추출 요소 설정 값 추출
-	$P.getRowData = (tbodyId, formData) => {
+	$P.getRowData = (tbodyName, formData) => {
 		var rowArr = [];
-		$("#"+tbodyId+" tr").each(function(){
+		$P.$find(tbodyName).find("tr").each(function(){
 			var row = {};
 
 			row.extrFormId = this.dataset.key;
@@ -425,14 +426,14 @@ $(document).ready(function(){
 	//추출 설정 저장
 	$P.fnSave = () => {
 		
-		var formData = new FormData(document.getElementById("frmEdit--${pageName}"));
+		var formData = new FormData($P.find("frmEdit"));
 		
 		//템플릿 문자열
-		formData.append("mobilePageTmplt",$("#mobilePageTmplt--${pageName}").val());
+		formData.append("mobilePageTmplt",$P.$find("mobilePageTmplt").val());
 		
 		//추출 요소 설정
-		var rowArr1 = $P.getRowData("tbodyPredefined--${pageName}", formData);
-		var rowArr2 = $P.getRowData("tbodyCustom--${pageName}", formData);
+		var rowArr1 = $P.getRowData("tbodyPredefined", formData);
+		var rowArr2 = $P.getRowData("tbodyCustom", formData);
 		var rowArr = [...rowArr1, ...rowArr2];
 		for(var i=0; i<rowArr.length; i++){
 			if(rowArr[i].extrArtclNm == ""){
@@ -460,12 +461,12 @@ $(document).ready(function(){
 					
 					alert("저장되었습니다.");
 					
-					var formFields = new FimsFormFields("#frmEdit--${pageName}").get();
-					$("#frmSearch--${pageName}").find("[name='sggCd']").val(formFields.sggCd);
-					$("#frmSearch--${pageName}").find("[name='taskSeCd']").val(formFields.taskSeCd);
-					$("#frmSearch--${pageName}").find("[name='tmplatId']").val(formFields.tmplatId);
+					var formFields = new FimsFormFields($P.selector("frmEdit")).get();
+					$P.$find("frmSearch").find("[name='sggCd']").val(formFields.sggCd);
+					$P.$find("frmSearch").find("[name='taskSeCd']").val(formFields.taskSeCd);
+					$P.$find("frmSearch").find("[name='tmplatId']").val(formFields.tmplatId);
 			
-					$("#btnLoad--${pageName}").click();
+					$P.$find("btnLoad").click();
 				}
 			}
 		});
@@ -477,18 +478,18 @@ $(document).ready(function(){
 	};
 	
 
-	$("#theadPredefined--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
-	$("#theadCustom--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
+	$P.$find("theadPredefined").html($P.find("theadTr").innerHTML);
+	$P.$find("theadCustom").html($P.find("theadTr").innerHTML);
 	
-	$("#btnLoad--${pageName}").on("click", () => $P.fnLoad() );
+	$P.$find("btnLoad").on("click", () => $P.fnLoad() );
 	
-	$("#btnPredefinedAdd--${pageName}").on("click", () => $P.choiceExtrArtclNm() );
-	$("#btnCustomAdd--${pageName}").on("click", () => $P.addRow() );
+	$P.$find("btnPredefinedAdd").on("click", () => $P.choiceExtrArtclNm() );
+	$P.$find("btnCustomAdd").on("click", () => $P.addRow() );
 	
-	$("#btnPredefinedDel--${pageName}").on("click", () => $P.delRow('tbodyPredefined--${pageName}') );
-	$("#btnCustomDel--${pageName}").on("click", () => $P.delRow('tbodyCustom--${pageName}') );
+	$P.$find("btnPredefinedDel").on("click", () => $P.delRow('tbodyPredefined') );
+	$P.$find("btnCustomDel").on("click", () => $P.delRow('tbodyCustom') );
 	
-	$("#btnSave--${pageName}").on("click", () => $P.fnSave() );
+	$P.$find("btnSave").on("click", () => $P.fnSave() );
 
 	var markerFinder = function(tr){
 		return $P.fnGetElement(tr,"extrArtclOrdr");
@@ -497,8 +498,8 @@ $(document).ready(function(){
 		marker.value = value;
 	};
 	
-	fnMakeRowNumberingTable(document.getElementById('tbodyPredefined--${pageName}'), markerFinder, markerSetter);
-	fnMakeRowNumberingTable(document.getElementById('tbodyCustom--${pageName}'), markerFinder, markerSetter);
+	fnMakeRowNumberingTable($P.find("tbodyPredefined"), markerFinder, markerSetter);
+	fnMakeRowNumberingTable($P.find("tbodyCustom"), markerFinder, markerSetter);
 
 });
 
diff --git a/src/main/webapp/WEB-INF/jsp/fims/stng01030-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/stng01030-main.jsp
index bc81781e..44466c2b 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/stng01030-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/stng01030-main.jsp
@@ -8,7 +8,7 @@
 			<div class="row mb-3 justify-content-start">
 				<div class="col-md-12">
 					<div class="float-start">
-						<form id="frmSearch--${pageName}" name="frmSearch">
+						<form name="frmSearch">
 							<input type="hidden" name="sggCd" />
 							업무
 							<select class="form-select" name="taskSeCd">
@@ -21,25 +21,25 @@
 								<option value="02">사전통지서</option>
 								<option value="03">부과고지서</option>
 							</select>
-							<button type="button" id="btnLoad--${pageName}" class="btn btn-primary">불러오기</button>
+							<button type="button" name="btnLoad" class="btn btn-primary">불러오기</button>
 						</form>
 					</div>
 					<div class="float-end">
-						<button type="button" id="btnSave--${pageName}" class="btn btn-primary">저장</button>
+						<button type="button" name="btnSave" class="btn btn-primary">저장</button>
 					</div>
 				</div>
 			</div>
 			
 			<div class="d-flex justify-content-between">
-				<span id="currentOtpt--${pageName}" class="bg-lighter h3 h-px-30">
+				<span name="currentOtpt" class="bg-lighter h3 h-px-30">
 				</span>
-				<form id="frmEdit--${pageName}">
+				<form name="frmEdit">
 					<input type="hidden" name="sggCd" />
 					<input type="hidden" name="taskSeCd" />
 					<input type="hidden" name="sndngSeCd" />
 	
 				
-					<span id="zipGlobalStng--${pageName}">
+					<span name="zipGlobalStng">
 					</span>
 				</form>
 			</div>
@@ -48,20 +48,18 @@
 				<div class="col-md-12">
 					<div class="float-start">
 						<strong>항목</strong>
-						<button type="button" id="btnAdd--${pageName}" class="btn btn-info">+ 추가</button>
-						<button type="button" id="btnDel--${pageName}" class="btn btn-info">&#x2611; 삭제</button>
+						<button type="button" name="btnAdd" class="btn btn-info">+ 추가</button>
+						<button type="button" name="btnDel" class="btn btn-info">&#x2611; 삭제</button>
 					</div>
 				</div>
 			</div>
 			<div class="card-datatable text-nowrap mb-3">
 				<div class="dataTables_wrapper dt-bootstrap5 no-footer">
-					<div id="scroll--${pageName}" class="table-responsive ox-scroll oy-scroll h-px-600">
-						<table 
-						class="table-layout-fixed compress-cell dataTable table table-bordered" 
-						id="table--${pageName}" aria-describedby="DataTables_Table_0_info">
-							<thead class="sticky-thead" id="thead--${pageName}">
+					<div name="scroll" class="table-responsive ox-scroll oy-scroll h-px-600">
+						<table name="table" class="table-layout-fixed compress-cell dataTable table table-bordered">
+							<thead class="sticky-thead" name="thead">
 							</thead>
-							<tbody id="tbody--${pageName}">
+							<tbody name="tbody">
 							</tbody>
 						</table>
 					</div>
@@ -72,7 +70,7 @@
 	</div>
 	
 	
-	<template id="theadTr--${pageName}">
+	<template name="theadTr">
 		<tr>
 			<th style="width:150px">순서</th>
 			<th style="width:40px"></th>
@@ -84,7 +82,7 @@
 		</tr>
 	</template>
 	
-	<template id="found--${pageName}">
+	<template name="found">
 		<tr data-key="{OUTSOURCING_FORM_ID}">
 			<td data-col="artclOrdr" class="text-center">
 				<button type="button">▲</button>
@@ -147,34 +145,34 @@ $(document).ready(function(){
 	$P.zipGlobalStng = {};
 	$P.zipArtclStngMap = {};
 	
-	$("#btnSave--${pageName}").attr("disabled","disabled");
+	$P.$find("btnSave").attr("disabled","disabled");
 
-	$("#btnAdd--${pageName}").attr("disabled","disabled");
-	$("#btnDel--${pageName}").attr("disabled","disabled");
+	$P.$find("btnAdd").attr("disabled","disabled");
+	$P.$find("btnDel").attr("disabled","disabled");
 
 	$P.fnLoad = () => {
 		
-		var formFields = new FimsFormFields("#frmSearch--${pageName}");
+		var formFields = new FimsFormFields($P.selector(frmSearch));
 		var query = formFields.get();
 		ajax.post({
 			url : wctx.url("/stng/stng01/030/info.do"),
 			data : query,
 			success : (resp) => {
-				$("#btnSave--${pageName}").removeAttr("disabled");
+				$P.$find("btnSave").removeAttr("disabled");
 
-				$("#btnAdd--${pageName}").removeAttr("disabled");
-				$("#btnDel--${pageName}").removeAttr("disabled");
-				$("#currentOtpt--${pageName}").text("");
-				$("#zipGlobalStng--${pageName}").html("");
+				$P.$find("btnAdd").removeAttr("disabled");
+				$P.$find("btnDel").removeAttr("disabled");
+				$P.$find("currentOtpt").text("");
+				$P.$find("zipGlobalStng").html("");
 
-				$("#tbody--${pageName}").html("");
+				$P.$find("tbody").html("");
 				
-				$("#frmEdit--${pageName}").find("[name='sggCd']").val(query.sggCd);
-				$("#frmEdit--${pageName}").find("[name='taskSeCd']").val(query.taskSeCd);
-				$("#frmEdit--${pageName}").find("[name='sndngSeCd']").val(query.sndngSeCd);
+				$P.$find("frmEdit").find("[name='sggCd']").val(query.sggCd);
+				$P.$find("frmEdit").find("[name='taskSeCd']").val(query.taskSeCd);
+				$P.$find("frmEdit").find("[name='sndngSeCd']").val(query.sndngSeCd);
 
 				
-				$("#currentOtpt--${pageName}").text(resp.outsourcingStngTitle);
+				$P.$find("currentOtpt").text(resp.outsourcingStngTitle);
 				if(resp.zipGlobalStng != null){
 					$P.zipGlobalStng = resp.zipGlobalStng;
 				} else {
@@ -197,10 +195,10 @@ $(document).ready(function(){
 	//전역 설정 렌더링
 	$P.renderZipGlobalStng = (zipGlobalStng) => {
 
-		var editForm = $("#frmEdit--${pageName}");
+		var editForm = $P.$find("frmEdit");
 		
 		//설정ID
-		$("#zipGlobalStng--${pageName}").append("<input type='hidden' name='outsourcingBscId' />");
+		$P.$find("zipGlobalStng").append("<input type='hidden' name='outsourcingBscId' />");
 		editForm.find("input[name='outsourcingBscId']").val(zipGlobalStng.OUTSOURCING_BSC_ID);
 
 	}
@@ -217,13 +215,13 @@ $(document).ready(function(){
 		
 		for(var i=0; i < dataList.length; i++){
 			var data = dataList[i];
-			var found = document.getElementById("found--${pageName}").innerHTML;
+			var found = $P.find("found").innerHTML;
 					
 			found = found.replace(/{OUTSOURCING_FORM_ID}/gi, data.OUTSOURCING_FORM_ID);
 			found = found.replace(/{COMPONENTS}/gi, components);
-			$("#tbody--${pageName}").append(found);
+			$P.$find("tbody").append(found);
 			
-			var lastTr = $("#tbody--${pageName}").find("tr").last()[0];
+			var lastTr = $P.$find("tbody").find("tr").last()[0];
 			
 			$($P.fnGetElement(lastTr,"artclNm")).set(data.ARTCL_NM);
 			$($P.fnGetElement(lastTr,"artclSz"))
@@ -234,18 +232,18 @@ $(document).ready(function(){
 				.set(!isEmpty(data.FORMATTING) ? data.FORMATTING : "");
 		}
 		
-		$("#tbody--${pageName}").find("tr").each(function(){
+		$P.$find("tbody").find("tr").each(function(){
 			
 			var sel = $P.fnGetElement(this,"paddingDirection");
 			var toPrev = $(sel).siblings()[0];
 			var toNext = $(sel).siblings()[1];
 			fnMakeSpinnerSelect(sel, toPrev, toNext);
 			
-			var scrollDiv = "scroll--${pageName}";
+			var scrollDivName = "scroll";
 			
 			var rowSpinButtons = $(this).find("td[data-col='artclOrdr']").find("button");
 			
-			fnMakeRowSpinner(this,rowSpinButtons[0],rowSpinButtons[1],document.getElementById(scrollDiv), null);
+			fnMakeRowSpinner(this,rowSpinButtons[0],rowSpinButtons[1],$P.find(scrollDivName), null);
 		});
 	}
 	
@@ -264,15 +262,15 @@ $(document).ready(function(){
 			var p = predefinedSetList[i];
 			components += "<option value='"+p.artclNm+"' >"+p.artclDscrp+"</option>";
 		}
-		var template = document.getElementById("found--${pageName}").innerHTML;
+		var template = $P.find("found").innerHTML;
 		template = template.replace(/{OUTSOURCING_FORM_ID}/gi, "");
 		template = template.replace(/{COMPONENTS}/gi, components);
-		$("#tbody--${pageName}").append(template);
+		$P.$find("tbody").append(template);
 		
-		var lastTr = $("#tbody--${pageName}").find("tr").last()[0];
+		var lastTr = $P.$find("tbody").find("tr").last()[0];
 		
 		var rowSpinButtons = $(lastTr).find("td[data-col='artclOrdr']").find("button");
-		fnMakeRowSpinner(lastTr,rowSpinButtons[0],rowSpinButtons[1],document.getElementById("scroll--${pageName}"), null);
+		fnMakeRowSpinner(lastTr,rowSpinButtons[0],rowSpinButtons[1], $P.find("scroll"), null);
 
 		
 		//셀렉트 스피너
@@ -281,24 +279,24 @@ $(document).ready(function(){
 		var toNext = $(sel).siblings()[1];
 		fnMakeSpinnerSelect(sel, toPrev, toNext);
 		
-		$("#scroll--${pageName}").scrollTop($("#scroll--${pageName}")[0].scrollHeight);
+		$P.$find("scroll").scrollTop($P.find("scroll").scrollHeight);
 		
 	}
 	
 	//행 삭제
 	$P.delRow = () => {
 		
-		if($("#tbody--${pageName}").find("tr").length <= 0){
+		if($P.$find("tbody").find("tr").length <= 0){
 			alert('삭제할 항목이 없습니다.');
 			return;
 		}
 		
-		if($("#tbody--${pageName}").find("input[name='del'][type='checkbox']:checked").length <= 0){
+		if($P.$find("tbody").find("input[name='del'][type='checkbox']:checked").length <= 0){
 			alert('체크된 항목이 없습니다.');
 			return;
 		}
 		
-		$("#tbody--${pageName}").find("tr").filter(function(index, selector){
+		$P.$find("tbody").find("tr").filter(function(index, selector){
 			if($(selector).find("input[name='del'][type='checkbox']").is(":checked")){
 				$(selector).remove();
 			}
@@ -308,7 +306,7 @@ $(document).ready(function(){
 	//요소 설정 값 추출
 	$P.getRowData = (formData) => {
 		var rowArr = [];
-		$("#tbody--${pageName} tr").each(function(){
+		$P.$find("tbody").find("tr").each(function(){
 			var row = {};
 
 			row.outsourcingFormId = this.dataset.key;
@@ -333,7 +331,7 @@ $(document).ready(function(){
 	$P.fnSave = () => {
 		
 		//출력물 전역설정
-		var formData = new FormData(document.getElementById("frmEdit--${pageName}"));
+		var formData = new FormData($P.find("frmEdit"));
 		
 		//요소 설정
 		var rowArr = $P.getRowData(formData);
@@ -363,25 +361,25 @@ $(document).ready(function(){
 					
 					dialog.alert("저장되었습니다.");
 
-					var formFields = new FimsFormFields("#frmEdit--${pageName}").get();
-					$("#frmSearch--${pageName}").find("[name='sggCd']").val(formFields.sggCd);
-					$("#frmSearch--${pageName}").find("[name='taskSeCd']").val(formFields.taskSeCd);
-					$("#frmSearch--${pageName}").find("[name='sndngSeCd']").val(formFields.sndngSeCd);
+					var formFields = new FimsFormFields($P.selector("frmEdit")).get();
+					$P.$find("frmSearch").find("[name='sggCd']").val(formFields.sggCd);
+					$P.$find("frmSearch").find("[name='taskSeCd']").val(formFields.taskSeCd);
+					$P.$find("frmSearch").find("[name='sndngSeCd']").val(formFields.sndngSeCd);
 
 					
-					$("#btnLoad--${pageName}").click();
+					$P.$find("btnLoad").click();
 					
 				}
 			}
 		});
 	}
 	
-	$("#thead--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
+	$P.$find("thead").html($P.find("theadTr").innerHTML);
 	
-	$("#btnLoad--${pageName}").on("click", () => $P.fnLoad() );
-	$("#btnAdd--${pageName}").on("click", () => $P.addRow() );
-	$("#btnDel--${pageName}").on("click", () => $P.delRow() );
-	$("#btnSave--${pageName}").on("click", () => $P.fnSave() );
+	$P.$find("btnLoad").on("click", () => $P.fnLoad() );
+	$P.$find("btnAdd").on("click", () => $P.addRow() );
+	$P.$find("btnDel").on("click", () => $P.delRow() );
+	$P.$find("btnSave").on("click", () => $P.fnSave() );
 
 	var markerFinder = function(tr){
 		return $P.fnGetElement(tr,"artclOrdr");
@@ -390,7 +388,7 @@ $(document).ready(function(){
 		marker.value = value;
 	};
 	
-	fnMakeRowNumberingTable(document.getElementById('tbody--${pageName}'), markerFinder, markerSetter);
+	fnMakeRowNumberingTable($P.find("tbody"), markerFinder, markerSetter);
 
 });