From 90530ef3a4a984a8027b4aaf85d47d56e24eeda0 Mon Sep 17 00:00:00 2001
From: leebeomjun <leebj91@xit.co.kr>
Date: Wed, 21 Jun 2023 11:04:22 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=B3=84=20?=
 =?UTF-8?q?=EC=9E=90=EB=B0=94=EC=8A=A4=ED=81=AC=EB=A6=BD=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B0=9D=EC=B2=B4=EB=AA=85,=ED=95=A8=EC=88=98=EB=AA=85=20?=
 =?UTF-8?q?=EC=A4=91=EB=B3=B5=20=EB=B0=A9=EC=A7=80=20=EC=B2=98=EB=A6=AC?=
 =?UTF-8?q?=EB=A5=BC=20=EC=9C=84=ED=95=B4=20pageObject=20=EA=B0=9D?=
 =?UTF-8?q?=EC=B2=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../crdn/web/AbstractCrdn06Controller.java    |  10 +-
 .../sprt/web/AbstractSprt01Controller.java    |   3 +-
 .../WEB-INF/jsp/fims/crdn/crdn06010-main.jsp  | 285 +++++----------
 .../WEB-INF/jsp/fims/crdn/crdn06030-main.jsp  | 344 +++++++++++++++++-
 src/main/webapp/WEB-INF/jsp/index.jsp         |   2 +
 5 files changed, 446 insertions(+), 198 deletions(-)

diff --git a/src/main/java/cokr/xit/fims/crdn/web/AbstractCrdn06Controller.java b/src/main/java/cokr/xit/fims/crdn/web/AbstractCrdn06Controller.java
index 8201d82f..c808096a 100644
--- a/src/main/java/cokr/xit/fims/crdn/web/AbstractCrdn06Controller.java
+++ b/src/main/java/cokr/xit/fims/crdn/web/AbstractCrdn06Controller.java
@@ -26,7 +26,7 @@ public class AbstractCrdn06Controller extends ApplicationController {
 	public ModelAndView crackdownDataInquireMain() {
 		ModelAndView mav = new ModelAndView();
 		mav.setViewName("fims/crdn/crdn06010-main");
-		mav.addObject("pageSuffix", "crdn06010-main");
+		mav.addObject("pageName", "crdn06010-main");
 		
 		Map<String, List<CommonCode>> commonCodes = getCodesOf("FIM001", "FIM002", "FIM010", "FIM026");
 		mav.addObject("FIM001List", commonCodes.get("FIM001"));
@@ -43,7 +43,13 @@ public class AbstractCrdn06Controller extends ApplicationController {
 	public ModelAndView tagInformationUndefinedDataMain() {
 		ModelAndView mav = new ModelAndView();
 		mav.setViewName("fims/crdn/crdn06030-main");
-		mav.addObject("pageSuffix","crdn06030-main");
+		mav.addObject("pageName","crdn06030-main");
+		
+		Map<String, List<CommonCode>> commonCodes = getCodesOf("FIM001", "FIM002", "FIM010", "FIM026");
+		mav.addObject("FIM001List", commonCodes.get("FIM001"));
+		mav.addObject("FIM002List", commonCodes.get("FIM002"));
+		mav.addObject("FIM010List", commonCodes.get("FIM010"));
+		addCodes(commonCodes, mav, "FIM002", "FIM026");
 		return mav;
 	}
 	
diff --git a/src/main/java/cokr/xit/fims/sprt/web/AbstractSprt01Controller.java b/src/main/java/cokr/xit/fims/sprt/web/AbstractSprt01Controller.java
index 87451b41..e995a008 100644
--- a/src/main/java/cokr/xit/fims/sprt/web/AbstractSprt01Controller.java
+++ b/src/main/java/cokr/xit/fims/sprt/web/AbstractSprt01Controller.java
@@ -25,7 +25,7 @@ public class AbstractSprt01Controller extends ApplicationController {
 	public ModelAndView integratedInquireMain() {
 		ModelAndView mav = new ModelAndView();
 		mav.setViewName("fims/sprt/sprt01010-main");
-		mav.addObject("pageSuffix", "sprt01010-main");
+		mav.addObject("pageName", "sprt01010-main");
 		
 		
 		return mav;
@@ -40,6 +40,7 @@ public class AbstractSprt01Controller extends ApplicationController {
 	 */
 	public ModelAndView getTotalDataInfo(String crdnId) {
 		ModelAndView mav = new ModelAndView("fims/sprt/sprt01020-info");
+		mav.addObject("pageName", "sprt01020-info");
 		if (!isEmpty(crdnId)) {
 			mav.addObject("totalDataInfo", sprt01Service.getTotalDataInfo(crdnId));
 		}
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp
index 588e838b..f2b28a53 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp
@@ -4,20 +4,20 @@
 <!-- inner page html -->
 <div class="content-wrapper">
 	<div class="container-xxl flex-grow-1 container-p-y">
-		<c:set var="prefixName" scope="request">단속 초기자료</c:set>
+		<c:set var="prefixName" scope="request">단속 자료 조회</c:set>
 		<div class="card">
 			<div class="wrapper-list">
 				<div>
 				    <div class="container-page-btn">
 				        <button type="button" class="btn btn-outline-dark">초기화</button>
 				        <span class="container-window-btn-right">
-				            <button type="button" class="btn btn-darkgray" id="btnSingoRegist--${pageSuffix}" title="시민신고개별등록">시민신고개별등록</button>
-				            <button type="button" class="btn btn-darkgray" id="btnMenualRegist--${pageSuffix}" title="위반자료수기등록">위반자료수기등록</button>
-				            <button type="button" class="btn btn-darkgray" id="btnExtrRegist--${pageSuffix}" title="외부연계파일처리">외부연계파일처리</button>
+				            <button type="button" class="btn btn-darkgray" id="btnSingoRegist--${pageName}" title="시민신고개별등록">시민신고개별등록</button>
+				            <button type="button" class="btn btn-darkgray" id="btnMenualRegist--${pageName}" title="위반자료수기등록">위반자료수기등록</button>
+				            <button type="button" class="btn btn-darkgray" id="btnExtrRegist--${pageName}" title="외부연계파일처리">외부연계파일처리</button>
 				        </span>
 				    </div>
 
-				    <form id="frmSearch--${pageSuffix}" name="frmSearch">
+				    <form id="frmSearch--${pageName}" name="frmSearch">
 				        <div class="container-search">
 				            <div class="row">
 				                <div class="col-11">
@@ -29,29 +29,29 @@
 													<label>
 														<input name="sysSeCd" type="radio" value="${item.code}"
 														class="form-check-input" alt="시스템구분"
-														onchange="fnResetAndChangeBiz(this.value);">
+														onchange="pageObject['${pageName}'].fnResetAndChangeBiz(this.value);">
 														${item.value}
 													</label> 
 												</c:forEach>
 				                            </span>
 				                        </div>
 				                        <div class="col-12">
-				                            <select id="schDateOpt--${pageSuffix}" name="schDateOpt" class="form-select">
+				                            <select id="schDateOpt--${pageName}" name="schDateOpt" class="form-select">
 				                                <option value="crdnYmd">단속일자</option>
 				                                <option value="regDt">등록일자</option>
 				                            </select>
 				                            <span class="form-search-linebox">
-				                                <input id="schDateFrom--${pageSuffix}" class="form-control form-date" data-fmt-type="day" name="schDateFrom" type="text" title="시작 날짜 선택">
+				                                <input id="schDateFrom--${pageName}" class="form-control form-date" data-fmt-type="day" name="schDateFrom" type="text" title="시작 날짜 선택">
 				                                <button type="button" class="bx bx-calendar bg-white"></button>
 				                                ~
-				                                <input id="schDateTo--${pageSuffix}" class="form-control form-date" data-fmt-type="day" name="schDateTo" type="text" title="종료 날짜 선택">
+				                                <input id="schDateTo--${pageName}" class="form-control form-date" data-fmt-type="day" name="schDateTo" type="text" title="종료 날짜 선택">
 				                                <button type="button" class="bx bx-calendar bg-white"></button>
 				                            </span>
 
 				                        </div>
 				                        <div class="col-12">
 				                            <label class="form-label fw-bold form-search-title">단속구분</label>
-				                            <select id="crdnSeCd--${pageSuffix}" name="crdnSeCd" class="form-select">
+				                            <select id="crdnSeCd--${pageName}" name="crdnSeCd" class="form-select">
 				                            	<option value="">전체</option>
 				                            	<c:forEach items="${FIM002List}" var="item">
 				                            		<option value="${item.code}">${item.value}</option>
@@ -60,17 +60,17 @@
 				                        </div>
 				                        <div class="col-12">
 				                            <label class="form-label fw-bold form-search-title">자료상태</label>
-				                            <select id="crdnSttsCd--${pageSuffix}" name="crdnSttsCd" class="form-select">
+				                            <select id="crdnSttsCd--${pageName}" name="crdnSttsCd" class="form-select">
 				                            	<option value="">전체</option>
 				                            	<c:forEach items="${FIM010List}" var="item">
 				                            		<option value="${item.code}">${item.value}</option>
 				                            	</c:forEach>
 				                            </select>
 				                                
-				                            <select id="schOpt--${pageSuffix}" name="schOpt" class="form-select">
+				                            <select id="schOpt--${pageName}" name="schOpt" class="form-select">
 				                                <option value="schVhrno">차량번호</option>
 				                            </select>
-				                            <input type="text" id="schWord--${pageSuffix}" name="schWord" class="form-control" value="" />
+				                            <input type="text" id="schWord--${pageName}" name="schWord" class="form-control" value="" />
 
 				                            <span class="flr">
 				                                <button type="button" class="btn btn-open-detail btn-sm" data-bs-toggle="collapse" data-bs-target="#searchDetail">
@@ -82,7 +82,7 @@
 				                    </div>
 				                </div>
 				                <div class="col-1 d-flex align-items-center justify-content-center">
-				                    <button type="button" class="btn btn-search btn-square h-px-75" id="btnSearch--${pageSuffix}" title="검색">검색</button>
+				                    <button type="button" class="btn btn-search btn-square h-px-75" id="btnSearch--${pageName}" title="검색">검색</button>
 				                </div>
 				            </div>
 				        </div>
@@ -111,24 +111,24 @@
 
 				    
 				    <div class="card-datatable text-nowrap">
-				        <div id="DataTables_Table_0_wrapper--${pageSuffix}" class="dataTables_wrapper dt-bootstrap5 no-footer">
-							<div id="table-responsive--${pageSuffix}" class="table-responsive" 
+				        <div id="DataTables_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer">
+							<div id="table-responsive--${pageName}" class="table-responsive" 
 								style="max-width: 1200px;overflow-x: scroll;height:400px;overflow-y: scroll;border-width: 1px">
 								<table id="DataTables_Table_0"
 									class="datatables-ajax table table-bordered dataTable no-footer" 
 									aria-describedby="DataTables_Table_0_info"
 									>
 									<thead>
-										<tr id="crdnTheadTr--${pageSuffix}">
+										<tr id="crdnTheadTr--${pageName}">
 										</tr>
 				                    </thead>
-				                    <tbody id="crdnTbody--${pageSuffix}">
+				                    <tbody id="crdnTbody--${pageName}">
 									</tbody>
 								</table>
 							</div>
 							<div class="d-flex flex-row p-3 justify-content-between">
 								<label id="crdnPagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
-				                 <ul id="crdnPaging--${pageSuffix}" class="pagination pagination-primary">
+				                 <ul id="crdnPaging--${pageName}" class="pagination pagination-primary">
 				                 </ul>
 							</div>
 						</div>
@@ -147,41 +147,17 @@
 
 <script>
 
-$(function(){
-
+/**************************************************************************
+ * Global Variable
+ **************************************************************************/
+var FIM002 = new CommonCodes(${FIM002});
+var FIM026 = new CommonCodes(${FIM026});
 
-});
 
 
+pageObject['${pageName}'] = {};
 
-/**************************************************************************
- * Global Variable
- **************************************************************************/
- var FIM002 = new CommonCodes(${FIM002});
- var FIM026 = new CommonCodes(${FIM026});
- 
-////////////////////////////////////////////////
-/**
- * PageNavigation
- * @type {*[]}
- */
-var pageNav = {};
-/**
- * 팝업 객체
- * @type {null}
- */
-popup = null;
-/**
- *
- */
-var popupDiv;
-/**
- * 팝업창에서 호출하는 콜백함수
- */
-var callbackSearch = () => searchCrdnList();
-//////////////////////////////////////////////////
-
-var crdnControl = new DatasetControl({
+pageObject['${pageName}'].crdnControl = new DatasetControl({
     prefix:"crdn",
     prefixName:"종합",
     infoSize:"xl",
@@ -205,167 +181,77 @@ var crdnControl = new DatasetControl({
     dataGetter:obj => obj.crdnList,
     appendData:true
 });
-
-
-
-crdnControl.onDatasetChange = obj => {
+	
+pageObject['${pageName}'].crdnControl.onDatasetChange = obj => {
 
     var prefix = obj.infoPrefix;
-    renderCrdnList(obj);
+    pageObject['${pageName}'].renderCrdnList(obj);
 
-    $("#crdnPaging--${pageSuffix}").setPagingInfo({
-        list: crdnControl.dataset,
+    $("#crdnPaging--${pageName}").setPagingInfo({
+        list: pageObject['${pageName}'].crdnControl.dataset,
         prefix: "crdn",
         start: obj[prefix+"Start"],
         totalSize: obj[prefix+"Total"],
         fetchSize: obj[prefix+"Fetch"],
-        func: "crdnControl.load({index})"
+        func: "pageObject['${pageName}'].crdnControl.load({index})"
     });
 
 };
 
 
-function fnResetAndChangeBiz(sysSeCd){
-	$("#crdnTbody--${pageSuffix}").html("");
-	crdnControl.urls.load = wctx.url("/crdn/crdn06/010/"+ sysSeCd +"/list.do");
-	crdnControl.urls.getInfo = wctx.url("/sprt/sprt01/020/"+ sysSeCd +"/info.do");
+pageObject['${pageName}'].fnResetAndChangeBiz = sysSeCd => {
+	$("#crdnTbody--${pageName}").html("");
+	pageObject['${pageName}'].crdnControl.urls.load = wctx.url("/crdn/crdn06/010/"+ sysSeCd +"/list.do");
+	pageObject['${pageName}'].crdnControl.urls.getInfo = wctx.url("/sprt/sprt01/020/"+ sysSeCd +"/info.do");
 }
 
-function searchCrdnList(){
-    crdnControl.query = fnBiz.getParams();
-    $("#crdnTbody--${pageSuffix}").html("");
-    crdnControl.load(1);
+pageObject['${pageName}'].searchCrdnList = () => {
+	pageObject['${pageName}'].crdnControl.query = pageObject['${pageName}'].getParams();
+    $("#crdnTbody--${pageName}").html("");
+    pageObject['${pageName}'].crdnControl.load(1);
 }
 
-function scrollCrdns(){
-    crdnControl.load(crdnControl.query.pageNum + 1);
+pageObject['${pageName}'].scrollCrdnList = () => {
+	pageObject['${pageName}'].crdnControl.load(pageObject['${pageName}'].crdnControl.query.pageNum + 1);
 }
 
-function renderCrdnList(data) {
-    if(!crdnControl.appendData){
-    	$("#crdnTbody--${pageSuffix}").html("");
+pageObject['${pageName}'].renderCrdnList = data => {
+    if(!pageObject['${pageName}'].crdnControl.appendData){
+    	$("#crdnTbody--${pageName}").html("");
     }
     
-    var crdnList = crdnControl.dataset;
+    var crdnList = pageObject['${pageName}'].crdnControl.dataset;
     
 	var empty = crdnList.empty;
 	
-	var trs = empty ? [ tbodyTemplate.notFound ] : crdnList.inStrings(tbodyTemplate.found);
+	var trs = empty ? [ pageObject['${pageName}'].tbodyTemplate.notFound ] : crdnList.inStrings(pageObject['${pageName}'].tbodyTemplate.found);
 
-	$("#crdnTbody--${pageSuffix}").html(trs.join());
+	$("#crdnTbody--${pageName}").html(trs.join());
 
 }
 
-/*******************************
- * Biz function
- *******************************/
-var fnBiz = {
-	getParams: () => {
-		var form = $("#frmSearch--${pageSuffix}");
-		
-           return {
-           	sysSeCd: form.find("[name='sysSeCd']:checked").val()
-           	,[form.find("[name='schOpt']").val()]: form.find("[name='schWord']").val()
-               ,schDateOpt: form.find("[name='schDateOpt']").val()
-               ,schDateFrom: form.find("[name='schDateFrom']").val()
-               ,schDateTo: form.find("[name='schDateTo']").val()
-               ,crdnSeCd: form.find("[name='crdnSeCd']").val()
-               ,crdnSttsCd: form.find("[name='crdnSttsCd']").val()
-               ,ctznAnsYn: form.find("[name='ctznAnsYn']:checked").val()
-               ,fetchSize: 30
-           }
-       }
-	,resetBtn: function() { }
+pageObject['${pageName}'].getParams = () => {
+	var form = $("#frmSearch--${pageName}");
 	
-    ,pagePopup: function(flag, params){
-	    var url;
-	    var popTitle;
-	    var popOption;
-	    switch (flag) {
-	        case "total":
-	            url = fimsApiUrl.POPUP_CRACKDOWN_TOTAL;
-	            popOption = {width: 1200, height:900};
-	            popTitle = "개별총정보";
-	            break;
-	        case "edit":
-	            url = fimsApiUrl.POPUP_CRACKDOWN_EDIT;
-	            popOption = {width: 1200, height:900};
-	            popTitle = "정보 변경";
-	            break;
-	        case "file":
-	            url = fimsApiUrl.POPUP_EXTR_CRACKDOWN_FILE_SEL;
-	            popOption = {width: 900, height:750};
-	            popTitle = "외부연계 데이타 선택";
-	            break;
-	        case "impose":
-	            url = fimsApiUrl.POPUP_IMPOSE;
-	            popOption = {width: 500, height: 400};
-	            popTitle = "과태료 시스템 등록";
-	            break;
-	        case "answerPreview":
-	            url = fimsApiUrl.POPUP_CTZN_ANS_PREVIEW;
-	            popOption = {width: 600, height: 620};
-	            popTitle = "답변 내용 미리 보기";
-	            break;
-	        default:
-	            break;
-	    }
-	    popup = CmmPopup.openModal(url, params, popOption, popTitle);
-	}
-        
-
-    ,getAnswerSeCode: (stsCode) => {
-	    /*
-	    ,{value: '10', text: '부과대상'}
-	    ,{value: '11', text: '서손'}
-	    ,{value: '12', text: '계도'}
-	    ,{value: '20', text: '부과'}
-	    */
-	    var answerSeCode;
-	    switch(stsCode){
-	        // 부과
-	        case '10':
-	        case '20':
-	            answerSeCode = '${ansSeCodeImpose}';
-	            break;
-	        // 서손
-	        case '11':
-	            answerSeCode = '${ansSeCodeDisallow}';
-	            break;
-	        // 계도
-	        case '12':
-	            answerSeCode = '${ansSeCodeEnlight}';
-	            break;
-	    }
-	    return answerSeCode;
-	}
-};
-
-/**************************************************************************
- * event
- **************************************************************************/
-
-$(() => {
-   
-
-    $('#btnSearch--${pageSuffix}').on('click', () => searchCrdnList());
-
-    $('#btnMenualRegist--${pageSuffix}').on('click', () => {
-        //fnBiz.pagePopup('edit', {});
-    });
-
-    $('#btnExtrRegist--${pageSuffix}').on('click', () => {
-        //fnBiz.pagePopup('file');
-    });
-
+	return {
+		sysSeCd: form.find("[name='sysSeCd']:checked").val()
+		,[form.find("[name='schOpt']").val()]: form.find("[name='schWord']").val()
+	    ,schDateOpt: form.find("[name='schDateOpt']").val()
+	    ,schDateFrom: form.find("[name='schDateFrom']").val()
+	    ,schDateTo: form.find("[name='schDateTo']").val()
+	    ,crdnSeCd: form.find("[name='crdnSeCd']").val()
+	    ,crdnSttsCd: form.find("[name='crdnSttsCd']").val()
+	    ,ctznAnsYn: form.find("[name='ctznAnsYn']:checked").val()
+	    ,fetchSize: 30
+	};
+}
 
-});
 
 
 /* *******************************
  * Grid
  ******************************* */
-var gridColumns = [
+pageObject['${pageName}'].gridColumns = [
     { header: '차량번호', 			name: 'VHRNO', 					width: 80, 	align: 'center' },
     { header: '단속구분(신고방법)', 	name: 'CRDN_SE_CD', 			width: 100, align: 'center' },
     { header: '위반일시', 			name: 'CRDN_YMD_TM', 			width: 120, align: 'center' },
@@ -391,57 +277,68 @@ var gridColumns = [
     { header: '서손사유코드', 		name: 'LEVY_EXCL_RSN_CD', 	 hidden: true },
     { header: 'interfaceSeqN', 	name: 'INTERFACE_SEQN', 	 hidden: true }
 ];
-var gridOptions = {
-    theadTr: 'crdnTheadTr--${pageSuffix}',
+pageObject['${pageName}'].gridOptions = {
+    theadTr: 'crdnTheadTr--${pageName}',
     rowHeader: 'No.',
     trDataKey: 'CRDN_ID',
     infoPrefix: "crdn",
     prefixName : "단속",
-    clickEvent : "crdnControl.setCurrent('{CRDN_ID}')",
-    dblClickEvent : "crdnControl.getInfo({})",
-    columns: gridColumns
+    clickEvent : "pageObject['${pageName}'].crdnControl.setCurrent('{CRDN_ID}')",
+    dblClickEvent : "pageObject['${pageName}'].crdnControl.getInfo({})",
+    columns: pageObject['${pageName}'].gridColumns
 };
 
-var tbodyTemplate = {};
+pageObject['${pageName}'].tbodyTemplate = {};
 
 
 $(document).ready(function(){
 
+	var thisPO = pageObject['${pageName}'];
+	
 	//페이지로딩 후 초기화  
-    fnBiz.resetBtn();
-    tbodyTemplate = initGrid(gridOptions);
+    thisPO.tbodyTemplate = initGrid(thisPO.gridOptions);
 
-    $("#schDateFrom--${pageSuffix}").datepicker({
+    $("#schDateFrom--${pageName}").datepicker({
         changeMonth: true,
         changeYear: true,
         showButtonPanel: true
     });
-    $("#schDateTo--${pageSuffix}").datepicker({
+    $("#schDateTo--${pageName}").datepicker({
         changeMonth: true,
         changeYear: true,
         showButtonPanel: true
     });
-  	$('#schDateFrom--${pageSuffix}').datepicker('setDate', DateUtil.getDateDay(-5475).date);
-    $('#schDateTo--${pageSuffix}').datepicker('setDate', new Date());
+  	$('#schDateFrom--${pageName}').datepicker('setDate', DateUtil.getDateDay(-5475).date);
+    $('#schDateTo--${pageName}').datepicker('setDate', new Date());
 
-    $( "#frmSearch--${pageSuffix} .form-date" ).next("button.bx-calendar").on("click", function() {
+    $( "#frmSearch--${pageName} .form-date" ).next("button.bx-calendar").on("click", function() {
         $(this).prev().focus();
     });
 
     var defaultBizValue = $("#layout-navbar input[name='sysSeCd']:checked").val();
-	$("#frmSearch--${pageSuffix} input[name='sysSeCd'][value='" + defaultBizValue + "']").prop("checked",true);
-    fnResetAndChangeBiz(defaultBizValue);
+	$("#frmSearch--${pageName} input[name='sysSeCd'][value='" + defaultBizValue + "']").prop("checked",true);
+	thisPO.fnResetAndChangeBiz(defaultBizValue);
     
     //스크롤 이벤트 추가
-    $("#table-responsive--${pageSuffix}").scroll(function(){
+    $("#table-responsive--${pageName}").scroll(function(){
     	var el = $(this);
     	if(el.scrollTop() == 0){
     		return;
     	}
     	if((el[0].scrollHeight - el.scrollTop() + 15) == el.outerHeight()){
-    		scrollCrdns();
+    		thisPO.scrollCrdnList();
     	}
     });
+    
+    $('#btnSearch--${pageName}').on('click', () => thisPO.searchCrdnList());
+
+    $('#btnMenualRegist--${pageName}').on('click', () => {
+        
+    });
+
+    $('#btnExtrRegist--${pageName}').on('click', () => {
+        
+    });
 });
 
 </script>
diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06030-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06030-main.jsp
index fb7f94eb..6a2343df 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06030-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06030-main.jsp
@@ -1,2 +1,344 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
-<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
\ No newline at end of file
+<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
+
+<!-- inner page html -->
+<div class="content-wrapper">
+	<div class="container-xxl flex-grow-1 container-p-y">
+		<c:set var="prefixName" scope="request">표지 정보 미확인 자료</c:set>
+		<div class="card">
+			<div class="wrapper-list">
+				<div>
+				    <div class="container-page-btn">
+				        <button type="button" class="btn btn-outline-dark">초기화</button>
+				        <span class="container-window-btn-right">
+				            <button type="button" class="btn btn-darkgray" id="btnSingoRegist--${pageName}" title="시민신고개별등록">시민신고개별등록</button>
+				            <button type="button" class="btn btn-darkgray" id="btnMenualRegist--${pageName}" title="위반자료수기등록">위반자료수기등록</button>
+				            <button type="button" class="btn btn-darkgray" id="btnExtrRegist--${pageName}" title="외부연계파일처리">외부연계파일처리</button>
+				        </span>
+				    </div>
+
+				    <form id="frmSearch--${pageName}" name="frmSearch">
+				        <div class="container-search">
+				            <div class="row">
+				                <div class="col-11">
+				                    <div class="row">
+				                        <div class="col-12">
+				                            <label class="form-label fw-bold form-search-title">시스템구분</label>
+				                            <span class="form-search-linebox">
+												<c:forEach items="${FIM001List}" var="item">
+													<label>
+														<input name="sysSeCd" type="radio" value="${item.code}"
+														class="form-check-input" alt="시스템구분"
+														onchange="pageObject['${pageName}'].fnResetAndChangeBiz(this.value);">
+														${item.value}
+													</label> 
+												</c:forEach>
+				                            </span>
+				                        </div>
+				                        <div class="col-12">
+				                            <select id="schDateOpt--${pageName}" name="schDateOpt" class="form-select">
+				                                <option value="crdnYmd">단속일자</option>
+				                                <option value="regDt">등록일자</option>
+				                            </select>
+				                            <span class="form-search-linebox">
+				                                <input id="schDateFrom--${pageName}" class="form-control form-date" data-fmt-type="day" name="schDateFrom" type="text" title="시작 날짜 선택">
+				                                <button type="button" class="bx bx-calendar bg-white"></button>
+				                                ~
+				                                <input id="schDateTo--${pageName}" class="form-control form-date" data-fmt-type="day" name="schDateTo" type="text" title="종료 날짜 선택">
+				                                <button type="button" class="bx bx-calendar bg-white"></button>
+				                            </span>
+
+				                        </div>
+				                        <div class="col-12">
+				                            <label class="form-label fw-bold form-search-title">단속구분</label>
+				                            <select id="crdnSeCd--${pageName}" name="crdnSeCd" class="form-select">
+				                            	<option value="">전체</option>
+				                            	<c:forEach items="${FIM002List}" var="item">
+				                            		<option value="${item.code}">${item.value}</option>
+				                            	</c:forEach>
+				                            </select>
+				                        </div>
+				                        <div class="col-12">
+				                            <label class="form-label fw-bold form-search-title">자료상태</label>
+				                            <select id="crdnSttsCd--${pageName}" name="crdnSttsCd" class="form-select">
+				                            	<option value="">전체</option>
+				                            	<c:forEach items="${FIM010List}" var="item">
+				                            		<option value="${item.code}">${item.value}</option>
+				                            	</c:forEach>
+				                            </select>
+				                                
+				                            <select id="schOpt--${pageName}" name="schOpt" class="form-select">
+				                                <option value="schVhrno">차량번호</option>
+				                            </select>
+				                            <input type="text" id="schWord--${pageName}" name="schWord" class="form-control" value="" />
+
+				                            <span class="flr">
+				                                <button type="button" class="btn btn-open-detail btn-sm" data-bs-toggle="collapse" data-bs-target="#searchDetail">
+				                                    <i class="bx bx-chevron-down"></i>
+				                                    상세조회조건
+				                                </button>
+				                            </span>
+				                        </div>
+				                    </div>
+				                </div>
+				                <div class="col-1 d-flex align-items-center justify-content-center">
+				                    <button type="button" class="btn btn-search btn-square h-px-75" id="btnSearch--${pageName}" title="검색">검색</button>
+				                </div>
+				            </div>
+				        </div>
+				        <div id="searchDetail" class="container-search container-search-detail collapse">
+				            <div class="row">
+					            <div class="col-12">
+					                <span class="me-5">동적 조회조건</span>
+					                <label class="form-label fw-bold form-search-title">클릭한 항목</label>
+					                <input type="text" id="" name="" class="form-control" value="" />
+					            </div>
+					        </div>
+				        </div>
+				        
+				    </form>
+
+				    <div>
+				        <span class="container-page-btn">
+				            <div id="totCnt">전체 ㅣ <span></span></div>
+				            <span class="container-window-btn-right">
+				                선택 | n건
+				                <a href="#" class="btn btn-blue" id="" title="업무처리1">업무 처리1</a>
+				                <a href="#" class="btn btn-blue" id="" title="업무처리2">업무 처리2</a>
+				            </span>
+				        </span>
+				    </div>
+
+				    
+				    <div class="card-datatable text-nowrap">
+				        <div id="DataTables_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer">
+							<div id="table-responsive--${pageName}" class="table-responsive" 
+								style="max-width: 1200px;overflow-x: scroll;height:400px;overflow-y: scroll;border-width: 1px">
+								<table id="DataTables_Table_0"
+									class="datatables-ajax table table-bordered dataTable no-footer" 
+									aria-describedby="DataTables_Table_0_info"
+									>
+									<thead>
+										<tr id="crdnTheadTr--${pageName}">
+										</tr>
+				                    </thead>
+				                    <tbody id="crdnTbody--${pageName}">
+									</tbody>
+								</table>
+							</div>
+							<div class="d-flex flex-row p-3 justify-content-between">
+								<label id="crdnPagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
+				                 <ul id="crdnPaging--${pageName}" class="pagination pagination-primary">
+				                 </ul>
+							</div>
+						</div>
+				    </div>
+				</div>
+			</div>
+		</div>
+
+	</div>
+
+	<jsp:include page="/WEB-INF/jsp/include/bottom.jsp" />
+
+  	<div class="content-backdrop fade"></div>
+</div>
+
+
+<script>
+
+/**************************************************************************
+ * Global Variable
+ **************************************************************************/
+var FIM002 = new CommonCodes(${FIM002});
+var FIM026 = new CommonCodes(${FIM026});
+
+
+
+pageObject['${pageName}'] = {};
+
+pageObject['${pageName}'].crdnControl = new DatasetControl({
+    prefix:"crdn",
+    prefixName:"종합",
+    infoSize:"xl",
+    urls : {
+        load : "",
+        getInfo : ""
+    },
+    formats: {
+    	CRDN_YMD_TM : datetimeFormat,
+    	REG_DT : datetimeFormat,
+    	MDFCN_DT : datetimeFormat,
+    	CVLCPT_PRCS_PRNMNT_DT : dateFormat,
+    	CVLCPT_RCPT_YMD : dateFormat,
+    	
+    	RCVMT_AMT : numberFormat,
+    	
+    	CRDN_SE_CD: FIM002,
+    	CRDN_REG_SE_CD: FIM026
+	},
+    keymapper:info => info ? info.CRDN_ID : "",
+    dataGetter:obj => obj.crdnList,
+    appendData:true
+});
+	
+pageObject['${pageName}'].crdnControl.onDatasetChange = obj => {
+
+    var prefix = obj.infoPrefix;
+    pageObject['${pageName}'].renderCrdnList(obj);
+
+    $("#crdnPaging--${pageName}").setPagingInfo({
+        list: pageObject['${pageName}'].crdnControl.dataset,
+        prefix: "crdn",
+        start: obj[prefix+"Start"],
+        totalSize: obj[prefix+"Total"],
+        fetchSize: obj[prefix+"Fetch"],
+        func: "pageObject['${pageName}'].crdnControl.load({index})"
+    });
+
+};
+
+
+pageObject['${pageName}'].fnResetAndChangeBiz = sysSeCd => {
+	$("#crdnTbody--${pageName}").html("");
+	pageObject['${pageName}'].crdnControl.urls.load = wctx.url("/crdn/crdn06/010/"+ sysSeCd +"/list.do");
+	pageObject['${pageName}'].crdnControl.urls.getInfo = wctx.url("/sprt/sprt01/020/"+ sysSeCd +"/info.do");
+}
+
+pageObject['${pageName}'].searchCrdnList = () => {
+	pageObject['${pageName}'].crdnControl.query = pageObject['${pageName}'].getParams();
+    $("#crdnTbody--${pageName}").html("");
+    pageObject['${pageName}'].crdnControl.load(1);
+}
+
+pageObject['${pageName}'].scrollCrdnList = () => {
+	pageObject['${pageName}'].crdnControl.load(pageObject['${pageName}'].crdnControl.query.pageNum + 1);
+}
+
+pageObject['${pageName}'].renderCrdnList = data => {
+    if(!pageObject['${pageName}'].crdnControl.appendData){
+    	$("#crdnTbody--${pageName}").html("");
+    }
+    
+    var crdnList = pageObject['${pageName}'].crdnControl.dataset;
+    
+	var empty = crdnList.empty;
+	
+	var trs = empty ? [ pageObject['${pageName}'].tbodyTemplate.notFound ] : crdnList.inStrings(pageObject['${pageName}'].tbodyTemplate.found);
+
+	$("#crdnTbody--${pageName}").html(trs.join());
+
+}
+
+pageObject['${pageName}'].getParams = () => {
+	var form = $("#frmSearch--${pageName}");
+	
+	return {
+		sysSeCd: form.find("[name='sysSeCd']:checked").val()
+		,[form.find("[name='schOpt']").val()]: form.find("[name='schWord']").val()
+	    ,schDateOpt: form.find("[name='schDateOpt']").val()
+	    ,schDateFrom: form.find("[name='schDateFrom']").val()
+	    ,schDateTo: form.find("[name='schDateTo']").val()
+	    ,crdnSeCd: form.find("[name='crdnSeCd']").val()
+	    ,crdnSttsCd: form.find("[name='crdnSttsCd']").val()
+	    ,ctznAnsYn: form.find("[name='ctznAnsYn']:checked").val()
+	    ,fetchSize: 30
+	};
+}
+
+
+
+/* *******************************
+ * Grid
+ ******************************* */
+pageObject['${pageName}'].gridColumns = [
+    { header: '차량번호', 			name: 'VHRNO', 					width: 80, 	align: 'center' },
+    { header: '단속구분(신고방법)', 	name: 'CRDN_SE_CD', 			width: 100, align: 'center' },
+    { header: '위반일시', 			name: 'CRDN_YMD_TM', 			width: 120, align: 'center' },
+    { header: '사진건수', 			name: 'ATCH_FILE_CNT', 			width: 40, 	align: 'center' },
+    { header: '수납금액', 			name: 'RCVMT_AMT', 				width: 100, align: 'right'  },
+    { header: '위반횟수', 			name: 'VLTN_NMTM', 				width: 80, 	align: 'right' },
+    { header: '위반장소', 			name: 'CRDN_PLC', 				width: 150 },
+    { header: '주민번호(전체)', 	name: 'RTPYR_NO', 				width: 110, align: 'center', className: "privacy" },
+    { header: '주민번호(마스킹)', 	name: 'RTPYR_NO_MASK', 			width: 110, align: 'center', className: "privacy-mask" },
+    { header: '특기사항', 			name: 'ETC_CN', 				width: 80, 	align: 'center' },
+    { header: '서손사유', 			name: 'ETC_CN', 				width: 80, 	align: 'center' },
+    { header: '처리상태명', 		name: 'CRDN_STTS_NM',    		width: 80},
+    { header: '민원접수번호', 		name: 'CVLCPT_RCPT_NO',			width: 150, align: 'center' },
+    { header: '민원접수일자', 		name: 'CVLCPT_RCPT_YMD', 		width: 80, 	align: 'center' },
+    { header: '처리기한', 			name: 'CVLCPT_PRCS_PRNMNT_DT', 	width: 80, 	align: 'center' },
+    { header: '신고자', 			name: 'CVLCPT_APLCNT_NM', 		width: 80, 	align: 'center' },
+    { header: '등록구분', 			name: 'CRDN_REG_SE_CD',			width: 50, 	align: 'center' },
+    { header: '등록일시', 			name: 'REG_DT', 				width: 150, align: 'center' },
+    { header: '최종처리일시', 		name: 'MDFCN_DT', 				width: 150, align: 'center' },
+    { header: '상태', 			name: 'CRDN_STTS_CD', 		 hidden: true },
+    { header: '서손ID', 			name: 'LEVY_EXCL_ID', 		 hidden: true },
+    { header: '소유자ID', 		name: 'RTPYR_ID', 			 hidden: true },
+    { header: '서손사유코드', 		name: 'LEVY_EXCL_RSN_CD', 	 hidden: true },
+    { header: 'interfaceSeqN', 	name: 'INTERFACE_SEQN', 	 hidden: true }
+];
+pageObject['${pageName}'].gridOptions = {
+    theadTr: 'crdnTheadTr--${pageName}',
+    rowHeader: 'No.',
+    trDataKey: 'CRDN_ID',
+    infoPrefix: "crdn",
+    prefixName : "단속",
+    clickEvent : "pageObject['${pageName}'].crdnControl.setCurrent('{CRDN_ID}')",
+    dblClickEvent : "pageObject['${pageName}'].crdnControl.getInfo({})",
+    columns: pageObject['${pageName}'].gridColumns
+};
+
+pageObject['${pageName}'].tbodyTemplate = {};
+
+
+$(document).ready(function(){
+
+	var thisPO = pageObject['${pageName}'];
+	
+	//페이지로딩 후 초기화  
+    thisPO.tbodyTemplate = initGrid(thisPO.gridOptions);
+
+    $("#schDateFrom--${pageName}").datepicker({
+        changeMonth: true,
+        changeYear: true,
+        showButtonPanel: true
+    });
+    $("#schDateTo--${pageName}").datepicker({
+        changeMonth: true,
+        changeYear: true,
+        showButtonPanel: true
+    });
+  	$('#schDateFrom--${pageName}').datepicker('setDate', DateUtil.getDateDay(-5475).date);
+    $('#schDateTo--${pageName}').datepicker('setDate', new Date());
+
+    $( "#frmSearch--${pageName} .form-date" ).next("button.bx-calendar").on("click", function() {
+        $(this).prev().focus();
+    });
+
+    var defaultBizValue = $("#layout-navbar input[name='sysSeCd']:checked").val();
+	$("#frmSearch--${pageName} input[name='sysSeCd'][value='" + defaultBizValue + "']").prop("checked",true);
+	thisPO.fnResetAndChangeBiz(defaultBizValue);
+    
+    //스크롤 이벤트 추가
+    $("#table-responsive--${pageName}").scroll(function(){
+    	var el = $(this);
+    	if(el.scrollTop() == 0){
+    		return;
+    	}
+    	if((el[0].scrollHeight - el.scrollTop() + 15) == el.outerHeight()){
+    		thisPO.scrollCrdnList();
+    	}
+    });
+    
+    $('#btnSearch--${pageName}').on('click', () => thisPO.searchCrdnList());
+
+    $('#btnMenualRegist--${pageName}').on('click', () => {
+        
+    });
+
+    $('#btnExtrRegist--${pageName}').on('click', () => {
+        
+    });
+});
+
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
index 4ccffaff..c9a86015 100644
--- a/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -42,6 +42,8 @@
             ${onload}
 			$("#layout-navbar input[name='sysSeCd'][value='PVS']").prop("checked",true);
         });
+        
+        let pageObject = {};
     </script>
 
 	<script>