diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/initData-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/initData-main.jsp
new file mode 100644
index 00000000..0e82b584
--- /dev/null
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/initData-main.jsp
@@ -0,0 +1,698 @@
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
+<%@ 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" style="max-height:750px!important;">
+		<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" title="시민신고개별등록">시민신고개별등록</button>
+				            <button type="button" class="btn btn-darkgray" id="btnMenualRegist" title="위반자료수기등록">위반자료수기등록</button>
+				            <button type="button" class="btn btn-darkgray" id="btnExtrRegist" title="외부연계파일처리">외부연계파일처리</button>
+				        </span>
+				    </div>
+
+				    <!-- tab 공통 -->
+				    <form id="frmSearch" 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">
+				                            <%--
+
+				                            <code:radio
+				                            grpId="FIM001"
+				                            id="sysSeCd"
+				                            name="sysSeCd"
+				                            cls="form-check-input"
+				                            alt="시스템구분"/>
+
+				                             --%>
+				                            </span>
+				                        </div>
+				                        <div class="col-12">
+				                            <select id="schDateOpt" name="schDateOpt" class="form-select">
+				                                <option value="crdnYmd">단속일자</option>
+				                                <option value="regDt">등록일자</option>
+				                            </select>
+				                            <span class="form-search-linebox">
+				                                <input id="schDateFrom" 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" 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>
+				                            <span class="form-search-linebox">
+				                            <%--
+				                                <code:radio type="CMM_ETC2" id="crdnSeCd" name="crdnSeCd" grpId="FIM002"
+				                                         cls="form-check-input" alt="단속구분" />
+				                            --%>
+				                            </span>
+
+				                        </div>
+				                        <div class="col-12">
+				                            <label class="form-label fw-bold form-search-title">자료상태</label>
+				                            <%--
+				                            <code:select id="crdnSttsCd" name="crdnSttsCd"
+				                                         grpId="FIM010" defaultSelect="01" title="단속처리상태" cls="form-select" alt="단속처리상태" disabled="false"/>
+				                                --%>
+				                            <select id="schOpt" name="schOpt" class="form-select">
+				                                <option value="schVhrno">차량번호</option>
+				                            </select>
+				                            <input type="text" id="schWord" 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" title="검색">검색</button>
+				                </div>
+				            </div>
+				        </div>
+				        <div id="searchDetail" class="container-search container-search-detail collapse">
+				            상세조회조건
+				        </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="container-search">
+				        <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>
+
+				    <div id="tabs" class="nav-align-top mt-3">
+				        <ul class="nav nav-tabs">
+				            <li class="nav-item">
+				                <button id="0" type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabContent0">전체</button>
+				            </li>
+				            <li class="nav-item">
+				                <button id="1" type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabContent0">부분1</button>
+				            </li>
+				            <li class="nav-item">
+				                <button id="2" type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabContent0">부분2</button>
+				            </li>
+				            <li class="nav-item">
+				                <button id="3" type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#tabContent0">부분3</button>
+				            </li>
+				        </ul>
+				    </div>
+
+				    <div class="tab-content">
+				        <div id="tabContent0" style="flex-direction: column" class="tab-pane fade show active">
+				            <div id="tabs_t0"></div>
+				        </div>
+				        <div id="tabContent1" class="tab-pane fade">
+				            <div id="tabs_t1"></div>
+				        </div>
+				        <div id="tabContent2" class="tab-pane fade">
+				            <div id="tabs_t2"></div>
+				        </div>
+				    </div>
+				    <div id="grid"></div>
+				    <div class="d-flex flex-row p-3 justify-content-between">
+				        <label id="grid1PagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
+				        <ul id="grid1Paging" class="pagination pagination-primary"></ul>
+				    </div>
+				</div>
+			</div>
+		</div>
+
+	</div>
+
+	<jsp:include page="/WEB-INF/jsp/include/bottom.jsp" />
+
+  	<div class="content-backdrop fade"></div>
+</div>
+
+
+<script>
+
+$(function(){
+
+
+});
+
+
+
+/**************************************************************************
+ * Global Variable
+ **************************************************************************/
+/**
+ * tab index : 0 부터 시작
+ * @type {number}
+ */
+var CUR_TAB_IDX = 0;
+/**
+ * tui-grid array
+ * @type {*[]}
+ */
+var GRID = {};
+/**
+ * PageNavigation
+ * @type {*[]}
+ */
+var pageNav = {};
+
+/**
+ * 부과대상 데이타 배열
+ * 단속ID, 접수번호
+ * @type {Array<{crdnId: string, cvlcptRcptNo: string}>}
+ */
+var IMPOSE_DATA;
+
+/**
+ * 단속진행 상태
+ * 01 - 초기등록
+ * 10 - 부과대상
+ * @type {string[]}
+ */
+var ARR_PRC_STS_CODE = ['01', '10']
+
+
+/**
+ * 팝업 객체
+ * @type {null}
+ */
+popup = null;
+/**
+ *
+ */
+var popupDiv;
+
+/**
+ * 팝업창에서 호출하는 콜백함수
+ */
+var callbackSearch = () => searchCrdnList();
+
+
+var crdnControl = new FimsDatasetControl({
+    prefix:"crdn",
+    prefixName:"초기자료",
+    infoSize:"xl",
+    urls : {
+        load : wctx.url("/{biz}/crdn/list.do")
+    },
+    keymapper:info => info ? info.CRDN_ID : "",
+    dataGetter:obj => obj.crdnList
+});
+crdnControl._paginationInfo.pagingType = "scroll";
+crdnControl._paginationInfo.fetchSize = 50;
+crdnControl._paginationInfo.scrollFuncName = scrollCrdns;
+
+crdnControl.onDatasetChange = obj => {
+
+    var prefix = obj.prefixInfo;
+    crdnControl._paginationInfo.totalSize = obj[prefix+"Total"];
+
+    if(crdnControl._paginationInfo.pagingType == "nav"){
+        crdnControl._paginationInfo.pageNum = (obj[prefix+"Start"]+obj[prefix+"Fetch"])/obj[prefix+"Fetch"];
+    }
+
+    renderCrdnList(obj);
+
+    if(crdnControl._paginationInfo.paging && crdnControl._paginationInfo.pagingType == "nav"){
+        $("#grid1Paging").setPaging({
+            list: crdnControl.dataset,
+            prefix: "grid1",
+            start: obj[prefix+"Start"],
+            totalSize: obj[prefix+"Total"],
+            fetchSize: obj[prefix+"Fetch"],
+            func: "crdnControl.load({index})"
+        });
+    }
+
+    //집계 표시
+    crdnControl.totalCountSetting(obj);
+};
+
+function searchCrdnList(){
+    crdnControl.query = fnBiz.getParams();
+    GRID.clear();
+    crdnControl.load(1);
+}
+
+function scrollCrdns(){
+    crdnControl.load(crdnControl._paginationInfo.pageNum + 1, "more");
+}
+
+function renderCrdnList(data) {
+    if(crdnControl._paginationInfo.paging && crdnControl._paginationInfo.pagingType == "nav"){
+        GRID.clear();
+    }
+
+    GRID.appendRows(data.crdnList);
+}
+
+/*******************************
+ * Biz function
+ *******************************/
+    // tab 전체
+const fnBiz = {
+        getParams: () => {
+
+            return {
+            	[$('#schOpt').val()]: $('#schWord').val()
+                ,schDateOpt: $('#schDateOpt').val()
+                ,schDateFrom: $('#schDateFrom').val()
+                ,schDateTo: $('#schDateTo').val()
+                ,sysSeCd: $('input:radio[name=sysSeCd]:checked').val()
+                ,crdnSeCd: CUR_TAB_IDX === 2 ? '09' : $('input:radio[name=crdnSeCd]:checked').val()
+                ,crdnSttsCd: CUR_TAB_IDX === 2 ? 'NON-INIT' : $('#crdnSttsCd').val()
+                ,ctznAnsYn: $('input:radio[name=ctznAnsYn]:checked').val()
+            }
+        }
+        ,pagePopup: function(flag, params){
+            let url;
+            let popTitle;
+            let 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);
+        }
+        ,onClickGrid: function(props){
+            const selColumn = props.columnInfo.name;
+            switch (selColumn){
+                case 'cvlcptRcptNo':
+                    popupDiv = 'edit';
+                    const rowDatas = GRID.store.data.rawData.map(d => {
+                        return {crdnSeCd: d.crdnSeCd, crdnId: d.crdnId, crdnSttsCd: d.crdnSttsCd}
+                    })
+                    pageNav = new PageNavigation(GRID, rowDatas, props.rowKey);
+
+                    fnBiz.pagePopup(popupDiv, pageNav.gridInfo.curRowData);
+
+                    $(".tooltip").remove();
+
+                    break;
+
+                default:
+                    break;
+            }
+        }
+        ,resetBtn: function() {
+            switch(CUR_TAB_IDX){
+                case 0:
+                    $('#btnExtrRegist').show();
+                    $('#divImpose').hide();
+                    $('#divAnswer').hide();
+                    $('#ansDiv').hide();
+                    $('#crdnSttsCd').show();
+                    $('#fldCrdnSeCd').show();
+                    break;
+                case 1:
+                    $('#btnExtrRegist').hide();
+                    $('#divImpose').show();
+                    $('#divAnswer').hide();
+                    $('#ansDiv').hide();
+                    $('#crdnSttsCd').show();
+                    $('#fldCrdnSeCd').show();
+                    break;
+                case 2:
+                    $('#btnExtrRegist').hide();
+                    $('#divImpose').hide();
+                    $('#divAnswer').show();
+                    $('#ansDiv').show();
+                    $('#crdnSttsCd').show();
+                    $('#fldCrdnSeCd').hide();
+                    break;
+            }
+        }
+        ,onDblClickGrid: function (props) {
+            popupDiv = 'total';
+            const rowDatas = GRID.store.data.rawData.map(d => {
+                return {crdnSeCd: d.crdnSeCd, crdnId: d.crdnId, crdnSttsCd: d.crdnSttsCd}
+            });
+
+            pageNav = new PageNavigation(GRID, rowDatas, props.rowKey);
+            fnBiz.pagePopup(popupDiv, pageNav.gridInfo.curRowData);
+        }
+        ,getAnswerSeCode: (stsCode) => {
+            /*
+            ,{value: '10', text: '부과대상'}
+            ,{value: '11', text: '서손'}
+            ,{value: '12', text: '계도'}
+            ,{value: '20', text: '부과'}
+            */
+            let answerSeCode;
+            switch(stsCode){
+                // 부과
+                case '10':
+                case '20':
+                    answerSeCode = '${ansSeCodeImpose}';
+                    break;
+                // 서손
+                case '11':
+                    answerSeCode = '${ansSeCodeDisallow}';
+                    break;
+                // 계도
+                case '12':
+                    answerSeCode = '${ansSeCodeEnlight}';
+                    break;
+            }
+            return answerSeCode;
+        }
+    };
+
+/**************************************************************************
+ * event
+ **************************************************************************/
+
+$(() => {
+    $("#tabs").on("click", "li", function () {
+
+        CUR_TAB_IDX = parseInt($("#tabs .nav-link.active").attr("id"));
+
+    });
+
+    $('#btnSearch').on('click', () => searchCrdnList());
+
+    $('#btnMenualRegist').on('click', () => {
+        //fnBiz.pagePopup('edit', {});
+    });
+
+    $('#btnExtrRegist').on('click', () => {
+        //fnBiz.pagePopup('file');
+    });
+
+
+});
+
+
+/* *******************************
+ * Grid
+ ******************************* */
+const gridColumns = [
+    {
+        header: '등록구분',
+        name: 'CRDN_REG_SE_CD',
+        minWidth: 50,
+        sortable: false,
+        align: 'center',
+        formatter({value}) {
+            return (new CodeFormat(ComboCodeData.crdnRegSeCd)).format(value);
+        }
+    },
+    {
+        header: '접수번호',
+        name: 'CVLCPT_RCPT_NO',
+        minWidth: 130,
+        sortable: false,
+        align: 'center',
+        renderer: {
+            type: CustomButtonRenderer,
+            options: {
+                formatter: (props)=>{
+                    const rowData = props.grid.getRow(props.rowKey);
+                    return {
+                        formatter: rowData.crdnSeCd === '09' ? rowData.cvlcptRcptNo : rowData.fileLinkId
+                        ,element: "text"
+                        ,dataAttrs : {
+                            bsToggle: "tooltip",
+                            bsOffset: "0,4",
+                            bsPlacement: "top",
+                            bsHtml: "true"
+                        }
+                        ,attrs : {
+                            title : "<i class='bx bx-window bx-xs'></i> <span>단속현황 정보</span>"
+                        }
+                    }
+                }
+                ,eventFunction: fnBiz.onClickGrid
+                ,eventType: "click"
+
+            }
+        }
+    },
+    {
+        header: '차량번호',
+        name: 'VHRNO',
+        minWidth: 80,
+        sortable: false,
+        align: 'center'
+    },
+    {
+        header: '단속구분(신고방법)',
+        name: 'CRDN_SE_CD',
+        minWidth: 100,
+        sortable: false,
+        align: 'center',
+        formatter: 'listItemText',
+        disabled: true,
+        editor: {
+            type: "select",
+            options: {
+                listItems: [...ComboCodeData.crdnSeCd]
+            }
+        }
+    },
+    {
+        header: '위반일시',
+        name: 'CRDN_YMD_TM',
+        minWidth: 120,
+        sortable: false,
+        align: 'center',
+        formatter({value}) {
+            return datetimeFormat.format(value); //
+        }
+    },
+    {
+        header: '사진건수',
+        name: 'ATCH_FILE_CNT',
+        minWidth: 40,
+        sortable: false,
+        align: 'center'
+    },
+    {
+        header: '수납금액',
+        name: 'RCVMT_AMT',
+        minWidth: 100,
+        sortable: false,
+        align: 'right',
+        formatter({value}) {
+            return numberFormat.format(value); //
+        }
+    },
+    {
+        header: '위반횟수',
+        name: 'VLTN_NMTM',
+        minWidth: 80,
+        sortable: false,
+        align: 'right'
+    },
+    {
+        header: '위반장소',
+        name: 'CRDN_PLC',
+        minWidth: 200,
+        sortable: false
+    },
+    {
+        header: '주민번호(전체)',
+        name: 'RTPYR_NO',
+        minWidth: 110,
+        sortable: false,
+        align: 'center',
+        className: "privacy"
+    },
+    {
+        header: '주민번호(마스킹)',
+        name: 'RTPYR_NO_MASK',
+        minWidth: 110,
+        sortable: false,
+        align: 'center',
+        className: "privacy-mask"
+    },
+    {
+        header: '특기사항',
+        name: 'ETC_CN',
+        width: 80,
+        sortable: false,
+        align: 'center'
+    },
+    {
+        header: '서손사유',
+        name: 'ETC_CN', //levyExclRsnCd
+        width: 80,
+        sortable: false,
+        align: 'center'
+    },
+    {
+        header: '처리상태명',
+        name: 'CRDN_STTS_NM',
+        hidden: true
+    },
+    {
+        header: '접수일자',
+        name: 'CVLCPT_RCPT_YMD',
+        minWidth: 80,
+        sortable: false,
+        align: 'center',
+        formatter({value}) {
+            return dateFormat.format(value); //
+        }
+    },
+    {
+        header: '처리기한',
+        name: 'CVLCPT_PRCS_PRNMNT_DT',
+        minWidth: 80,
+        sortable: false,
+        align: 'center',
+        formatter({value}) {
+            return dateFormat.format(value); //
+        }
+    },
+    {
+        header: '신고자',
+        name: 'CVLCPT_APLCNT_NM',
+        minWidth: 80,
+        sortable: false,
+        align: 'center'
+    },
+    {
+        header: '등록일시',
+        name: 'REG_DT',
+        minWidth: 150,
+        sortable: false,
+        align: 'center',
+        formatter({value}) {
+            return datetimeFormat.format(value); //
+        }
+    },
+    {
+        header: '최종처리일시',
+        name: 'MDFCN_DT',
+        minWidth: 150,
+        sortable: false,
+        align: 'center',
+        formatter({value}) {
+            return datetimeFormat.format(value);
+        }
+    },
+    {
+        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
+    }
+];
+const gridOptions = {
+    el: 'grid',
+    rowHeaders: ['rowNum'],
+    columns: gridColumns,
+    columnOptions: {
+        frozenCount: 3
+    },
+    paginationInfoRef : crdnControl._paginationInfo
+};
+
+const initGrid = () => {
+    GRID = TuiGrid.of(gridOptions);
+    GRID.on('dblclick', function (props) { fnBiz.onDblClickGrid(props); });
+};
+
+$(document).ready(function(){
+
+
+    CUR_TAB_IDX = 0;
+    fnBiz.resetBtn();
+    initGrid();
+
+
+    $("#schDateFrom").datepicker({
+        changeMonth: true,
+        changeYear: true,
+        showButtonPanel: true
+    });
+    $("#schDateTo").datepicker({
+        changeMonth: true,
+        changeYear: true,
+        showButtonPanel: true
+    });
+  	$('#schDateFrom').datepicker('setDate', DateUtil.getDateDay(-5475).date);
+    $('#schDateTo').datepicker('setDate', new Date());
+
+    $( "#frmSearch .form-date" ).next("button.bx-calendar").on("click", function() {
+        $(this).prev().focus();
+    });
+});
+
+</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 c95268b7..320a0e3d 100644
--- a/src/main/webapp/WEB-INF/jsp/include/top.jsp
+++ b/src/main/webapp/WEB-INF/jsp/include/top.jsp
@@ -21,13 +21,13 @@
     </div>
     <!-- /Search -->
 	<div class="ms-2 me-2" style="min-width: max-content;">
-      <select id="schOpt" class="form-select">
+      <select id="schOptTop" class="form-select">
         <option value="vhrno">차량번호</option>
         <option value="rtpyrNm">납부자명</option>
         <option value="rtpyrNo">납부자번호</option>
         <option value="petitionerNm">신고인명</option>
       </select>
-      <input type="text" id="schWord" class="form-control" />
+      <input type="text" id="schWordTop" class="form-control" />
       <button type="button" id="fastSearch" class="btn btn-outline-dark bg-orange" title="통합조회">
         <i class="bx bx-search"></i>통합조회
       </button>
@@ -57,7 +57,7 @@
       </button>
     </div>
     <ul class="navbar-nav flex-row align-items-center ms-auto">
-      
+
       <!-- Style Switcher -->
       <li class="nav-item me-2 me-xl-0">
         <a class="nav-link style-switcher-toggle hide-arrow" href="javascript:void(0);">
@@ -66,7 +66,7 @@
       </li>
       <!--/ Style Switcher -->
 
-      
+
       <!-- User -->
       <li class="nav-item navbar-dropdown dropdown-user dropdown">
         <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">