From f9be1cb0f55279af5bf9b8db50b6db2fec35c8e9 Mon Sep 17 00:00:00 2001
From: leebeomjun <leebj91@xit.co.kr>
Date: Tue, 20 Feb 2024 14:58:58 +0900
Subject: [PATCH] =?UTF-8?q?pdf=20=EC=9E=90=EB=A3=8C=20=EC=B6=94=EC=B6=9C?=
 =?UTF-8?q?=20=EC=84=A4=EC=A0=95=20=ED=99=94=EB=A9=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../xit/fims/cmmn/web/StngController.java     |  24 +-
 .../cokr/xit/fims/task/web/CmnController.java |   5 +
 .../WEB-INF/jsp/fims/stng01020-main.jsp       | 510 ++++++++++++++++++
 src/main/webapp/WEB-INF/jsp/include/top.jsp   |  32 +-
 4 files changed, 568 insertions(+), 3 deletions(-)
 create mode 100644 src/main/webapp/WEB-INF/jsp/fims/stng01020-main.jsp

diff --git a/src/main/java/cokr/xit/fims/cmmn/web/StngController.java b/src/main/java/cokr/xit/fims/cmmn/web/StngController.java
index 9d2e5282..f5c59736 100644
--- a/src/main/java/cokr/xit/fims/cmmn/web/StngController.java
+++ b/src/main/java/cokr/xit/fims/cmmn/web/StngController.java
@@ -40,7 +40,10 @@ public class StngController extends ApplicationController {
 		public static final String
 		otptStngMain = "/010/main.do",
 		getOtptStngInfo = "/010/info.do",
-		saveOtptStngInfo = "/010/save.do"
+		saveOtptStngInfo = "/010/save.do",
+		extrStngMain = "/020/main.do",
+		getExtrStngInfo = "/020/info.do",
+		saveExtrStngInfo = "/020/save.do"
 		;
 	}
 
@@ -173,4 +176,23 @@ public class StngController extends ApplicationController {
 		return mav;
 	}
 
+
+	/** PDF 자료 추출 설정 메인 화면을 연다.
+	 * @return PDF 자료 추출 설정 메인 화면
+	 */
+	public ModelAndView extrStngMain() {
+		ModelAndView mav = new ModelAndView("fims/stng01020-main");
+		mav.addObject("pageName", "stng01020");
+
+		Map<String, List<CommonCode>> commonCodes = getCodesOf("FIM054","FIM047","FIM078","FIM080");
+
+		mav.addObject("FIM047List", commonCodes.get("FIM047"));
+		mav.addObject("FIM054List", commonCodes.get("FIM054"));
+		mav.addObject("TaskListForSgg", stngBean.filterTaskSectionCodeForSgg(commonCodes.get("FIM054")));
+		mav.addObject("FIM078List", commonCodes.get("FIM078"));
+		mav.addObject("FIM080List", commonCodes.get("FIM080"));
+		addCodes(commonCodes, mav, "FIM047", "FIM054", "FIM078","FIM080");
+
+		return mav;
+	}
 }
diff --git a/src/main/java/cokr/xit/fims/task/web/CmnController.java b/src/main/java/cokr/xit/fims/task/web/CmnController.java
index 5faaff30..f2c02cb2 100644
--- a/src/main/java/cokr/xit/fims/task/web/CmnController.java
+++ b/src/main/java/cokr/xit/fims/task/web/CmnController.java
@@ -721,5 +721,10 @@ public class CmnController {
 			return super.saveOtptStngInfo(otptForm, backgroundFile);
 		}
 
+		@Override
+		@RequestMapping(name="PDF 자료 추출 설정 메인 화면", value=METHOD_URL.extrStngMain)
+		public ModelAndView extrStngMain() {
+			return super.extrStngMain();
+		}
 	}
 }
diff --git a/src/main/webapp/WEB-INF/jsp/fims/stng01020-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/stng01020-main.jsp
new file mode 100644
index 00000000..83e06555
--- /dev/null
+++ b/src/main/webapp/WEB-INF/jsp/fims/stng01020-main.jsp
@@ -0,0 +1,510 @@
+<%@ 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="pageKorName" scope="request">PDF 추출 설정</c:set>
+
+<div class="d-flex flex-row justify-content-evenly">
+	<div class="card p-3">
+		<div class="row mb-3 justify-content-start">
+			<div class="col-md-12">
+				<div class="float-start">
+					<form id="frmSearch--${pageName}" name="frmSearch">
+						<input type="hidden" name="sggCd" />
+						업무
+						<select class="form-select" name="taskSeCd">
+							<c:forEach items="${TaskListForSgg}" var="item">
+								<option value="${item.code}">${item.value}</option>
+							</c:forEach>
+						</select>
+						템플릿
+						<select class="form-select" name="tmplatId">
+							<option value="JU001">사전통지서</option>
+							<option value="JU002">본고지(수시분)</option>
+						</select>
+						
+						<button type="button" id="btnLoad--${pageName}" class="btn btn-primary">불러오기</button>
+					</form>
+				</div>
+				<div class="float-end">
+					<button type="button" id="btnSave--${pageName}" class="btn btn-primary">저장</button>
+				</div>
+			</div>
+		</div>
+		
+		<div class="d-flex justify-content-between">
+			<span id="currentTmplat--${pageName}" class="bg-lighter h3" style="min-height:30px;">
+			</span>
+			<form id="frmEdit--${pageName}">
+				<input type="hidden" name="sggCd" />
+				<input type="hidden" name="taskSeCd" />
+				<input type="hidden" name="tmplatId" />
+				<input type="hidden" name="extrBscId" />
+				<input type="text" name="dialogId" hidden />
+			</form>
+		</div>
+		
+		<div class="row mb-3 justify-content-start">
+			<div class="col-md-12">
+				<strong>템플릿 문자열</strong>
+				<input type="text" id="mobilePageTmplt--${pageName}" name="mobilePageTmplt" 
+				class="w-100" />
+			</div>
+		</div>
+		
+		<div class="row mb-3 justify-content-start">
+			<div class="col-md-12">
+				<div class="float-start">
+					<strong>기초 항목</strong>
+					<button type="button" id="btnPredefinedAdd--${pageName}" 
+						class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">추가</button>
+					<ul id="dropdownPredefinedAdd--${pageName}" class="dropdown-menu" style="overflow-y: scroll;max-height: 250px">
+					</ul>
+					<button type="button" id="btnPredefinedDel--${pageName}" 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"
+				style="overflow-x:scroll; height:300px; overflow-y:scroll;" >
+					<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}">
+						</thead>
+						<tbody id="tbodyPredefined--${pageName}">
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+		
+		<div class="row mb-3 justify-content-start">
+			<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>
+				</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"
+				style="overflow-x:scroll; height:300px; overflow-y:scroll;" >
+					<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}">
+						</thead>
+						<tbody id="tbodyCustom--${pageName}">
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+		
+	</div>
+</div>
+
+
+<template id="theadTr--${pageName}">
+	<tr>
+		<th style="width:130px">순서</th>
+		<th style="width:40px"></th>
+		<th style="width:200px">추출항목명</th>
+		<th style="width:200px">추출항목설명</th>
+		<th style="width:110px">유형</th>
+		<th style="width:110px">위치(좌)</th>
+		<th style="width:110px">위치(상)</th>
+		<th style="width:110px">영역(좌우)</th>
+		<th style="width:110px">영역(상하)</th>
+		
+		<th class="dummy-th"></th>
+	</tr>
+</template>
+
+<template id="found--${pageName}">
+	<tr data-key="{EXTR_FORM_ID}">
+		<td data-col="extrArtclOrdr" class="text-center">
+			<button type="button">▲</button>
+			<input type="text" readonly class="w-px-50 text-center" />
+			<button type="button">▼</button>
+		</td>
+		<td data-col="checkbox" class="text-center">
+			<input type="checkbox" name="del" class="form-check-input" />
+		</td>
+		<td data-col="extrArtclNm" class="text-center">
+			<input type="text" class="form-control w-px-80" />
+		</td>
+		<td data-col="extrArtclDscrp" class="text-center">
+			<input type="text" class="form-control w-px-80" />
+		</td>
+		<td data-col="componentType" class="text-center">
+			<input type="text" class="form-control w-px-80" readonly />
+		</td>
+		<td data-col="leftPstn" class="text-center">
+			<input type="number" class="form-control w-px-80" min="0" max="300" />
+		</td>
+		<td data-col="topPstn" class="text-center">
+			<input type="number" class="form-control w-px-80" min="0" max="300" />
+		</td>
+		<td data-col="widthSz" class="text-center">
+			<input type="number" class="form-control w-px-80" min="0" max="300" />
+		</td>
+		<td data-col="heightSz" class="text-center">
+			<input type="number" class="form-control w-px-80" min="0" max="300" />
+		</td>
+		
+		<td class="dummy-td"></td>
+	</tr>
+</template>
+
+<template id="dropdownTemplate--${pageName}">
+	<li><a class="dropdown-item" onclick="{onclick}">{DSCRP}</a></li>
+</template>
+
+
+<script>
+var FIM054 = new CommonCodes(${FIM054});
+var FIM047 = new CommonCodes(${FIM047});
+var FIM078 = new CommonCodes(${FIM078});
+var FIM080 = new CommonCodes(${FIM080});
+
+pageObject["${pageName}"] = {};
+
+$(document).ready(function(){
+
+	var $P = pageObject["${pageName}"];
+	$P.extrArtclStngMap = {};
+	
+	$("#btnSave--${pageName}").attr("disabled","disabled");
+	
+	$("#btnPredefinedAdd--${pageName}").attr("disabled","disabled");
+	$("#btnPredefinedDel--${pageName}").attr("disabled","disabled");
+	$("#btnCustomAdd--${pageName}").attr("disabled","disabled");
+	$("#btnCustomDel--${pageName}").attr("disabled","disabled");
+
+	$P.fnLoad = () => {
+		
+		var ff = new FimsFormFields("#frmSearch--${pageName}");
+		var query = ff.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("");
+				
+				$("#tbodyPredefined--${pageName}").html("");
+				$("#tbodyCustom--${pageName}").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);
+				
+				$("#frmEdit--${pageName}").find("[name='extrBscId']").val(resp.EXTR_BSC_ID);
+				
+				$("#mobilePageTmplt--${pageName}").val(resp.MOBILE_PAGE_TMPLT);
+				
+				$("#currentTmplat--${pageName}").text(resp.extrStngTitle);
+				
+				$P.extrArtclStngMap = resp.extrArtclStngMap;
+
+				$P.renderExtrArtclStngGrid("tbodyPredefined--${pageName}", 
+						$P.extrArtclStngMap.predefined.prototypeList, 
+						$P.extrArtclStngMap.predefined.dataList);
+				$P.renderExtrArtclStngGrid("tbodyCustom--${pageName}", 
+						$P.extrArtclStngMap.custom.prototypeList, 
+						$P.extrArtclStngMap.custom.dataList);
+			}
+		});
+		
+	}
+	
+	
+	//추출 요소 그리드 렌더링
+	$P.renderExtrArtclStngGrid = (tbodyId, prototypeList, dataList) => {
+		
+		for(var i=0; i < dataList.length; i++){
+			var data = dataList[i];
+			var found = document.getElementById("found--${pageName}").innerHTML;
+					
+			found = found.replace(/{EXTR_FORM_ID}/gi, data.EXTR_FORM_ID);
+			$("#"+tbodyId).append(found);
+			
+			var lastTr = $("#"+tbodyId).find("tr").last()[0];
+			
+			$($P.fnGetElement(lastTr,"extrArtclNm")).set(data.EXTR_ARTCL_NM);
+			$($P.fnGetElement(lastTr,"extrArtclDscrp")).set(data.EXTR_ARTCL_DSCRP);
+			
+			$($P.fnGetElement(lastTr,"componentType")).set(data.COMPONENT_TYPE);
+			
+			$($P.fnGetElement(lastTr,"leftPstn")).set(!isEmpty(data.LEFT_PSTN) ? data.LEFT_PSTN : "0");
+			$($P.fnGetElement(lastTr,"topPstn")).set(!isEmpty(data.TOP_PSTN) ? data.TOP_PSTN : "0");
+			$($P.fnGetElement(lastTr,"widthSz")).set(!isEmpty(data.WIDTH_SZ) ? data.WIDTH_SZ : "0");
+			$($P.fnGetElement(lastTr,"heightSz")).set(!isEmpty(data.HEIGHT_SZ) ? data.HEIGHT_SZ : "0");
+			
+		}
+		
+		$("#"+tbodyId).find("tr").each(function(){
+
+			if(tbodyId == "tbodyPredefined--${pageName}"){	
+				var el = $P.fnGetElement(this,"extrArtclNm");
+				$(el).attr("disabled","disabled");
+				$(el).addClass("no-bgi");
+			}
+			
+
+			
+			var scrollDiv = "";
+			if(tbodyId == "tbodyPredefined--${pageName}"){
+				scrollDiv = "scrollPredefined--${pageName}";
+			} else {
+				scrollDiv = "scrollCustom--${pageName}";
+			}
+			
+			var rowSpinButtons = $(this).find("td[data-col='extrArtclOrdr']").find("button");
+			
+			fnMakeRowSpinner(this,rowSpinButtons[0],rowSpinButtons[1],document.getElementById(scrollDiv), $P.valid);
+		});
+	}
+	
+	$P.fnGetElement = (tableRow, colName) => {
+		return $(tableRow).find("td[data-col='"+colName+"']").children("input, select").first()[0];
+	}
+	
+
+	//추출 요소 선택
+	$P.choiceExtrArtclNm = () => {
+		$("#dropdownPredefinedAdd--${pageName}").html("");
+		
+		var prototypeList = $P.extrArtclStngMap.predefined.prototypeList;
+		var existArr = [];
+		
+		$("#tbodyPredefined--${pageName} tr").each(function(){
+			var el = $P.fnGetElement(this,"extrArtclNm");
+			existArr.push($(el).val());
+		});
+		
+		var selectableArr = prototypeList.filter(item => existArr.indexOf(item.extrArtclNm) == -1);
+		
+		var template = document.getElementById("dropdownTemplate--${pageName}");
+		
+		if(selectableArr.length < 1){
+			var li = template.innerHTML;
+			li = li.replace(/{onclick}/gi, "");
+			li = li.replace(/{DSCRP}/gi, "추가할 수 있는 항목이 없습니다.");
+			$("#dropdownPredefinedAdd--${pageName}").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].extrArtclNm + "','"+selectableArr[i].extrArtclDscrp+"')");
+				li = li.replace(/{DSCRP}/gi, selectableArr[i].extrArtclDscrp);
+				$("#dropdownPredefinedAdd--${pageName}").append(li);
+			}
+		}
+	}
+	
+	//행 추가
+	$P.addRow = (extrArtclNm, extrArtclDscrp) => {
+		
+		var prototypeList;
+		var tbodyId;
+		
+		if(extrArtclNm == null || extrArtclNm == ""){
+			prototypeList = $P.extrArtclStngMap.custom.prototypeList;
+			tbodyId = "tbodyCustom--${pageName}";
+		} else {
+			prototypeList = $P.extrArtclStngMap.predefined.prototypeList;
+			tbodyId = "tbodyPredefined--${pageName}";
+		}
+
+		var template = document.getElementById("found--${pageName}").innerHTML;
+		template = template.replace(/{EXTR_FORM_ID}/gi, "");
+		
+		$("#"+tbodyId).append(template);
+		
+		var lastTr = $("#"+tbodyId).find("tr").last()[0];
+		
+		
+		var scrollDiv = "";
+		if(tbodyId == "tbodyPredefined--${pageName}"){
+			scrollDiv = "scrollPredefined--${pageName}";
+		} else {
+			scrollDiv = "scrollCustom--${pageName}";
+		}
+		var rowSpinButtons = $(lastTr).find("td[data-col='extrArtclOrdr']").find("button");
+		fnMakeRowSpinner(lastTr,rowSpinButtons[0],rowSpinButtons[1],document.getElementById(scrollDiv), $P.valid);
+		
+		if(extrArtclNm != null && extrArtclNm != ""){	
+			
+			$($P.fnGetElement(lastTr,"extrArtclNm")).set(extrArtclNm);
+			$($P.fnGetElement(lastTr,"extrArtclDscrp")).set(extrArtclDscrp);
+			
+			var componentType = (extrArtclNm == "photoArea" ? "사진" : "텍스트");
+			$($P.fnGetElement(lastTr,"componentType")).set(componentType);
+
+			$($P.fnGetElement(lastTr,"leftPstn")).set("0");
+			$($P.fnGetElement(lastTr,"topPstn")).set("0");
+			$($P.fnGetElement(lastTr,"widthSz")).set("0");
+			$($P.fnGetElement(lastTr,"heightSz")).set("0");
+		} else {
+			$($P.fnGetElement(lastTr,"componentType")).set("텍스트");
+		}
+		
+		if(tbodyId == "tbodyPredefined--${pageName}"){
+			$($P.fnGetElement(lastTr,"extrArtclNm")).attr("disabled","disabled").addClass("no-bgi");
+			$($P.fnGetElement(lastTr,"extrArtclDscrp")).attr("disabled","disabled").addClass("no-bgi");
+		}
+		
+		//셀렉트 스피너
+		var sel = $P.fnGetElement(lastTr,"textSort");
+		var toPrev = $(sel).siblings()[0];
+		var toNext = $(sel).siblings()[1];
+		fnMakeSpinnerSelect(sel, toPrev, toNext);
+		
+		if(tbodyId == "tbodyPredefined--${pageName}"){
+			$("#scrollPredefined--${pageName}").scrollTop($("#scrollPredefined--${pageName}")[0].scrollHeight);
+		} else {
+			$("#scrollCustom--${pageName}").scrollTop($("#scrollCustom--${pageName}")[0].scrollHeight);
+		}
+		
+		
+	}
+	
+	//행 삭제
+	$P.delRow = (tbodyId) => {
+		
+		if($("#"+tbodyId).find("tr").length <= 0){
+			alert('삭제할 항목이 없습니다.');
+			return;
+		}
+		
+		if($("#"+tbodyId).find("input[name='del'][type='checkbox']:checked").length <= 0){
+			alert('체크된 항목이 없습니다.');
+			return;
+		}
+		
+		//TODO : 삭제 불가 항목 확인
+		
+		$("#"+tbodyId).find("tr").filter(function(index, selector){
+			if($(selector).find("input[name='del'][type='checkbox']").is(":checked")){
+				$(selector).remove();
+			}
+		});
+	}
+	
+
+	
+	//추출 요소 설정 값 추출
+	$P.getRowData = (tbodyId, formData) => {
+		var rowArr = [];
+		$("#"+tbodyId+" tr").each(function(){
+			var row = {};
+
+			row.extrFormId = this.dataset.key;
+			row.extrArtclNm = $($P.fnGetElement(this,"extrArtclNm")).val();
+			row.extrArtclDscrp = $($P.fnGetElement(this,"extrArtclDscrp")).val();
+			row.leftPstn = $($P.fnGetElement(this,"leftPstn")).val();
+			row.topPstn = $($P.fnGetElement(this,"topPstn")).val();
+			row.widthSz = $($P.fnGetElement(this,"widthSz")).val();
+			row.heightSz = $($P.fnGetElement(this,"heightSz")).val();
+			
+			row.extrArtclOrdr = $($P.fnGetElement(this,"extrArtclOrdr")).val();
+
+			row.sggCd = formData.get("sggCd");
+			row.taskSeCd = formData.get("taskSeCd");
+			row.tmplatId = formData.get("tmplatId");
+			
+			rowArr.push(row);
+		});
+		
+		return rowArr;
+	}
+	
+	//추출 설정 저장
+	$P.fnSave = () => {
+		
+		var formData = new FormData(document.getElementById("frmEdit--${pageName}"));
+		
+		//템플릿 문자열
+		formData.append("mobilePageTmplt",$("#mobilePageTmplt--${pageName}").val());
+		
+		//추출 요소 설정
+		var rowArr1 = $P.getRowData("tbodyPredefined--${pageName}", formData);
+		var rowArr2 = $P.getRowData("tbodyCustom--${pageName}", formData);
+		var rowArr = [...rowArr1, ...rowArr2];
+		for(var i=0; i<rowArr.length; i++){
+			if(rowArr[i].extrArtclNm == ""){
+				alert("추출항목명을 입력하세요.");
+				return;
+			}
+			if(rowArr[i].extrArtclDscrp == ""){
+				alert("추출항목설명을 입력하세요.");
+				return;
+			}
+		}
+		
+		var extrArtclStngList = fnJsonArrayToFormData(rowArr,"extrArtclStngList");
+		var keys = Object.keys(extrArtclStngList);
+		for(var i=0; i < keys.length; i++){
+			formData.append(keys[i], extrArtclStngList[keys[i]]);
+		}
+		
+		ajax.post({
+			url : wctx.url("/stng/stng01/020/save.do"),
+			data : formData,
+			contentType : false, processData : false,
+			success : (resp) => {
+				if(resp.saved){
+					
+					alert("저장되었습니다.");
+					
+					var ff = new FimsFormFields("#frmEdit--${pageName}").get();
+					$("#frmSearch--${pageName}").find("[name='sggCd']").val(ff.sggCd);
+					$("#frmSearch--${pageName}").find("[name='taskSeCd']").val(ff.taskSeCd);
+					$("#frmSearch--${pageName}").find("[name='tmplatId']").val(ff.tmplatId);
+			
+					$("#btnLoad--${pageName}").click();
+				}
+			}
+		});
+	}
+	
+	//
+	$P.valid = (eventInfo) => {
+		return true;
+	};
+	
+
+	$("#theadPredefined--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
+	$("#theadCustom--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
+	
+	$("#btnLoad--${pageName}").on("click", () => $P.fnLoad() );
+	
+	$("#btnPredefinedAdd--${pageName}").on("click", () => $P.choiceExtrArtclNm() );
+	$("#btnCustomAdd--${pageName}").on("click", () => $P.addRow() );
+	
+	$("#btnPredefinedDel--${pageName}").on("click", () => $P.delRow('tbodyPredefined--${pageName}') );
+	$("#btnCustomDel--${pageName}").on("click", () => $P.delRow('tbodyCustom--${pageName}') );
+	
+	$("#btnSave--${pageName}").on("click", () => $P.fnSave() );
+
+	var markerFinder = function(tr){
+		return $P.fnGetElement(tr,"extrArtclOrdr");
+	};
+	var markerSetter = function(marker, value){
+		marker.value = value;
+	};
+	
+	fnMakeRowNumberingTable(document.getElementById('tbodyPredefined--${pageName}'), markerFinder, markerSetter);
+	fnMakeRowNumberingTable(document.getElementById('tbodyCustom--${pageName}'), markerFinder, markerSetter);
+
+});
+
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/jsp/include/top.jsp b/src/main/webapp/WEB-INF/jsp/include/top.jsp
index c3a5d891..18de8e13 100644
--- a/src/main/webapp/WEB-INF/jsp/include/top.jsp
+++ b/src/main/webapp/WEB-INF/jsp/include/top.jsp
@@ -170,7 +170,7 @@
 		<button type="button" class="btn btn-xl btn-primary">수신단속파일(장비) 서식 설정</button>
 		<button type="button" class="btn btn-xl btn-primary">송신단속파일(차세대) 서식 설정</button>
 		<button type="button" class="btn btn-xl btn-primary" onclick="fnOpenOtptStngDialog();">출력물 서식 설정</button>
-		<button type="button" class="btn btn-xl btn-primary">pdf 고지서 정보 추출 설정</button>
+		<button type="button" class="btn btn-xl btn-primary" onclick="fnOpenExtrStngDialog();">pdf 고지서 정보 추출 설정</button>
 	</span>
 </template>
 
@@ -217,7 +217,6 @@ function fnOpenOtptStngDialog(){
 					
 					$("#"+dialogId).find("form[name='frmSearch']").find("[name='sggCd']").val(MY_INFO.info.sggCd);
 					
-					//$("#"+dialogId).find("form[name='frmSearch']").find("[name='sndngSeCd']").val("03");
 				}
 				, onClose : () => { }
 			});
@@ -226,6 +225,35 @@ function fnOpenOtptStngDialog(){
 	
 }
 
+function fnOpenExtrStngDialog(){
+	dialog.close("selectStngDialog");
+	
+	var url = wctx.url("/stng/stng01/020/main.do");
+	var dialogId = "extrStngDialog";
+	
+	ajax.post({
+		url : url,
+		data : {},
+		success : (resp) => {
+
+			dialog.open({
+				id : dialogId
+				, title : "PDF자료 추출 설정"
+				, size : "xxl"
+				, content : resp
+				, init : () => { 
+					
+					$("#"+dialogId).find("input[name='dialogId']").val(dialogId);
+					
+					$("#"+dialogId).find("form[name='frmSearch']").find("[name='sggCd']").val(MY_INFO.info.sggCd);
+					
+				}
+				, onClose : () => { }
+			});
+		}
+	});
+}
+
 function fnOpenMyInfo(){
 	window.open(
 		wctx.url("/user/openMyInfo.do")