From a30bd41dfefc03485488628d09dedb99ed736201 Mon Sep 17 00:00:00 2001
From: jjh <jaehyun81@xit.co.kr>
Date: Wed, 14 Aug 2024 17:29:14 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B0=9C=EB=B3=84=EC=B4=9D=EC=A0=95=EB=B3=B4?=
 =?UTF-8?q?=20=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/sprt/sprt02010-main.jsp  |  194 +--
 .../WEB-INF/jsp/fims/sprt/sprt02020-info.jsp  |  784 ++++-----
 .../WEB-INF/jsp/fims/sprt/sprt02030-info.jsp  | 1037 ++++++------
 .../WEB-INF/jsp/fims/sprt/sprt02040-info.jsp  | 1220 +++++++-------
 .../WEB-INF/jsp/fims/sprt/sprt02050-info.jsp  | 1415 ++++++++---------
 5 files changed, 2313 insertions(+), 2337 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02010-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02010-main.jsp
index dae20067..3b774150 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02010-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02010-main.jsp
@@ -3,95 +3,95 @@
 
 <!-- Page Body -->
 <div class="card wrapper-list" data-doctx="${pageName}">
-	<div>
-		<!-- 입력 영역 -->
-		<form name="frmEdit">
-			<!-- hidden -->
+    <div>
+        <!-- 입력 영역 -->
+        <form name="frmEdit">
+            <!-- hidden -->
             <input type="hidden" name="crdnId" data-map="CRDN_ID" />
 
-			<div class="row g-1">
-				<!-- 차량번호 -->
-				<div class="col-md-2">
-					<label is="name-label" class="w-px-80 bg-lighter pe-2 col-form-label text-sm-end" for="vhrno">차량번호</label>
-					<input is="id-input" type="text" class="form-control w-65 fw-bold" name="vhrno" data-map="VHRNO" readonly />
-				</div>
-				<!-- 단속일시 -->
-				<div class="col-md-2">
-					<label is="name-label" class="w-px-80 bg-lighter pe-2 col-form-label text-sm-end" for="crdnYmdTm">단속일시</label>
-					<input is="id-input" type="text" class="form-control w-65 fw-bold" name="crdnYmdTm" data-map="CRDN_YMD_TM" readonly />
-				</div>
+            <div class="row g-1">
+                <!-- 차량번호 -->
+                <div class="col-md-2">
+                    <label is="name-label" class="w-px-80 bg-lighter pe-2 col-form-label text-sm-end" for="vhrno">차량번호</label>
+                    <input is="id-input" type="text" class="form-control w-65 fw-bold" name="vhrno" data-map="VHRNO" readonly />
+                </div>
+                <!-- 단속일시 -->
+                <div class="col-md-2">
+                    <label is="name-label" class="w-px-80 bg-lighter pe-2 col-form-label text-sm-end" for="crdnYmdTm">단속일시</label>
+                    <input is="id-input" type="text" class="form-control w-65 fw-bold" name="crdnYmdTm" data-map="CRDN_YMD_TM" readonly />
+                </div>
                 <!-- 고지번호 -->
                 <div class="col-md-2">
                     <label is="name-label" class="w-px-80 bg-lighter pe-2 col-form-label text-sm-end" for="gojiNo">고지번호</label>
                     <input is="id-input" type="text" class="form-control w-65 fw-bold" name="gojiNo" data-map="GOJI_NO" readonly />
                 </div>
-				<!-- 단속상태 -->
-				<div class="col-md-4">
-					<label is="name-label" class="w-px-80 bg-lighter pe-2 col-form-label text-sm-end" for="crdnSttsNm">단속상태</label>
+                <!-- 단속상태 -->
+                <div class="col-md-4">
+                    <label is="name-label" class="w-px-80 bg-lighter pe-2 col-form-label text-sm-end" for="crdnSttsNm">단속상태</label>
                     <input is="id-input" type="text" class="form-control w-30 fw-bold text-primary" name="crdnSttsNm" data-map="CRDN_STTS_NM" readonly />
-					<input is="id-input" type="text" class="form-control w-35 fw-bold" name="crdnSttsChgDt" data-map="CRDN_STTS_CHG_DT" readonly />
-					<input type="hidden" name="crdnSttsCd" data-map="CRDN_STTS_CD" />
-				</div>
-				<!-- 자료 이동 버튼 -->
-				<div class="col-md-2 text-end">
-					<input type="text" class="form-control w-px-120 text-center fw-bold" name="countStauts" readonly />
-					<button type="button" class="w-px-50 btn-PageUp" name="btnPrev">◀</button>
-					<button type="button" class="w-px-50 btn-PageDown" name="btnNext">▶</button>
-				</div>
-			</div> <!-- <div class="row g-1"> -->
-		</form>
-		<!-- 입력 영역 -->
-	</div>
-
-	<div class="nav-align-top">
-		<ul class="nav nav-tabs" role="tablist">
-			<li class="nav-item">
-				<button type="button" class="nav-link w-px-160 h-75 active" name="btnCrdnPayer" role="tab" data-bs-toggle="tab" data-bs-target="#crdnPayerInfo"	aria-controls="crdnPayerInfo" aria-selected="true">
-					단속 정보
-				</button>
-			</li>
-			<li class="nav-item">
-				<button type="button" class="nav-link w-px-160 h-75" name="btnOpnnSbmsn" role="tab" data-bs-toggle="tab" data-bs-target="#opnnSbmsnInfo" aria-controls="opnnSbmsnInfo" aria-selected="false">
-					의견제출 정보
-				</button>
-			</li>
-			<li class="nav-item">
-				<button type="button" class="nav-link w-px-160 h-75" name="btnSndng" role="tab" data-bs-toggle="tab" data-bs-target="#sndngInfo" aria-controls="sndngInfo" aria-selected="false">
-					발송반송 정보
-				</button>
-			</li>
-			<li class="nav-item">
-				<button type="button" class="nav-link w-px-160 h-75" name="btnPrcs" role="tab" data-bs-toggle="tab" data-bs-target="#prcsInfo" aria-controls="prcsInfo" aria-selected="false">
-					처리상세 정보
-				</button>
-			</li>
-			<li class="nav-item">
-				<button type="button" class="nav-link w-px-160 h-75" name="btnLevy" role="tab" data-bs-toggle="tab" data-bs-target="#levyInfo" aria-controls="levyInfo" aria-selected="false">
-					부과체납 정보
-				</button>
-			</li>
-			<li class="nav-item">
-				<button type="button" class="nav-link w-px-160 h-75" name="btnRcvmt" role="tab" data-bs-toggle="tab" data-bs-target="#rcvmtInfo" aria-controls="rcvmtInfo" aria-selected="false">
-					수납 정보
-				</button>
-			</li>
-			<li class="nav-item">
-				<button type="button" class="nav-link w-px-160 h-75" name="btnCvlcptDscsn" role="tab" data-bs-toggle="tab" data-bs-target="#cvlcptDscsnInfo" aria-controls="cvlcptDscsnInfo" aria-selected="false">
-					민원상담 정보
-				</button>
-			</li>
-		</ul>
-
-		<div class="tab-content p-0">
-			<div class="tab-pane fade show active" id="crdnPayerInfo" role="tabpanel">단속 정보</div>
-			<div class="tab-pane fade" id="opnnSbmsnInfo" role="tabpanel">의견제출 정보</div>
-			<div class="tab-pane fade" id="sndngInfo" role="tabpanel">발송반송 정보</div>
-			<div class="tab-pane fade" id="prcsInfo" role="tabpanel">처리상세 정보</div>
-			<div class="tab-pane fade" id="levyInfo" role="tabpanel">부과체납 정보</div>
-			<div class="tab-pane fade" id="rcvmtInfo" role="tabpanel">수납 정보</div>
-			<div class="tab-pane fade" id="cvlcptDscsnInfo" role="tabpanel">민원상담 정보</div>
-		</div>
-	</div>
+                    <input is="id-input" type="text" class="form-control w-35 fw-bold" name="crdnSttsChgDt" data-map="CRDN_STTS_CHG_DT" readonly />
+                    <input type="hidden" name="crdnSttsCd" data-map="CRDN_STTS_CD" />
+                </div>
+                <!-- 자료 이동 버튼 -->
+                <div class="col-md-2 text-end">
+                    <input type="text" class="form-control w-px-120 text-center fw-bold" name="countStauts" readonly />
+                    <button type="button" class="w-px-50 btn-PageUp" name="btnPrev">◀</button>
+                    <button type="button" class="w-px-50 btn-PageDown" name="btnNext">▶</button>
+                </div>
+            </div> <!-- <div class="row g-1"> -->
+        </form>
+        <!-- 입력 영역 -->
+    </div>
+
+    <div class="nav-align-top">
+        <ul class="nav nav-tabs" role="tablist">
+            <li class="nav-item">
+                <button type="button" class="nav-link w-px-160 h-75 active" name="btnCrdnPayer" role="tab" data-bs-toggle="tab" data-bs-target="#crdnPayerInfo" aria-controls="crdnPayerInfo" aria-selected="true">
+                    단속 정보
+                </button>
+            </li>
+            <li class="nav-item">
+                <button type="button" class="nav-link w-px-160 h-75" name="btnOpnnSbmsn" role="tab" data-bs-toggle="tab" data-bs-target="#opnnSbmsnInfo" aria-controls="opnnSbmsnInfo" aria-selected="false">
+                    의견제출 정보
+                </button>
+            </li>
+            <li class="nav-item">
+                <button type="button" class="nav-link w-px-160 h-75" name="btnSndng" role="tab" data-bs-toggle="tab" data-bs-target="#sndngInfo" aria-controls="sndngInfo" aria-selected="false">
+                    발송반송 정보
+                </button>
+            </li>
+            <li class="nav-item">
+                <button type="button" class="nav-link w-px-160 h-75" name="btnPrcs" role="tab" data-bs-toggle="tab" data-bs-target="#prcsInfo" aria-controls="prcsInfo" aria-selected="false">
+                    처리상세 정보
+                </button>
+            </li>
+            <li class="nav-item">
+                <button type="button" class="nav-link w-px-160 h-75" name="btnLevy" role="tab" data-bs-toggle="tab" data-bs-target="#levyInfo" aria-controls="levyInfo" aria-selected="false">
+                    부과체납 정보
+                </button>
+            </li>
+            <li class="nav-item">
+                <button type="button" class="nav-link w-px-160 h-75" name="btnRcvmt" role="tab" data-bs-toggle="tab" data-bs-target="#rcvmtInfo" aria-controls="rcvmtInfo" aria-selected="false">
+                    수납 정보
+                </button>
+            </li>
+            <li class="nav-item">
+                <button type="button" class="nav-link w-px-160 h-75" name="btnCvlcptDscsn" role="tab" data-bs-toggle="tab" data-bs-target="#cvlcptDscsnInfo" aria-controls="cvlcptDscsnInfo" aria-selected="false">
+                    민원상담 정보
+                </button>
+            </li>
+        </ul>
+
+        <div class="tab-content p-0">
+            <div class="tab-pane fade show active" id="crdnPayerInfo" role="tabpanel">단속 정보</div>
+            <div class="tab-pane fade" id="opnnSbmsnInfo" role="tabpanel">의견제출 정보</div>
+            <div class="tab-pane fade" id="sndngInfo" role="tabpanel">발송반송 정보</div>
+            <div class="tab-pane fade" id="prcsInfo" role="tabpanel">처리상세 정보</div>
+            <div class="tab-pane fade" id="levyInfo" role="tabpanel">부과체납 정보</div>
+            <div class="tab-pane fade" id="rcvmtInfo" role="tabpanel">수납 정보</div>
+            <div class="tab-pane fade" id="cvlcptDscsnInfo" role="tabpanel">민원상담 정보</div>
+        </div>
+    </div>
 </div> <!-- <div class="card wrapper-list"> -->
 
 <script>
@@ -161,7 +161,7 @@
 
             ajax.get({
                   url: wctx.url(params.taskSeCd + "/sprt/sprt02/010/main.do")
-                , headers: { Accept: "application/json; charset=utf-8" }		// json
+                , headers: { Accept: "application/json; charset=utf-8" }        // json
                 , data: params || {}
                 , success: resp => {
                     if (resp.totalInfo) {
@@ -169,20 +169,20 @@
                         $P.mainCtrl.setData([resp.totalInfo]);
 
                         if ($P.activeTabIndex == 0) {
-                            $P.fnCrdnPayerInfo();								// 단속 납부자 Data 셋팅
+                            $P.fnCrdnPayerInfo();                               // 단속 납부자 Data 셋팅
                         } else if ($P.activeTabIndex == 1) {
-                            $P.fnOpnnSbmsnInfo();								// 의견제출 정보
+                            $P.fnOpnnSbmsnInfo();                               // 의견제출 정보
                         } else if ($P.activeTabIndex == 2) {
-	                        $P.fnSndngInfo();									// 발송 반송 정보
-	                    } else if ($P.activeTabIndex == 3) {
-	                        $P.fnPrcsInfo();									// 처리 상세 정보
-	                    } else if ($P.activeTabIndex == 4) {
-	                        $P.fnLevyInfo();									// 부과체납 정보
-	                    } else if ($P.activeTabIndex == 5) {
-	                        $P.fnRcvmtInfo();									// 수납 정보
-	                    } else if ($P.activeTabIndex == 6) {
-	                        $P.fnCvlcptDscsnInfo();								// 민원상담 정보
-	                    }
+                            $P.fnSndngInfo();                                   // 발송 반송 정보
+                        } else if ($P.activeTabIndex == 3) {
+                            $P.fnPrcsInfo();                                    // 처리 상세 정보
+                        } else if ($P.activeTabIndex == 4) {
+                            $P.fnLevyInfo();                                    // 부과체납 정보
+                        } else if ($P.activeTabIndex == 5) {
+                            $P.fnRcvmtInfo();                                   // 수납 정보
+                        } else if ($P.activeTabIndex == 6) {
+                            $P.fnCvlcptDscsnInfo();                             // 민원상담 정보
+                        }
                     }
                 }
             });
@@ -248,7 +248,7 @@
 
             for (iLoop = $P.curDataIndex; iLoop >= 0; iLoop--) {
                 if (dataItems[iLoop].data.CRDN_ID == curCrdnId) {
-                    if (iLoop - 1 < 0) return; 									// 종료
+                    if (iLoop - 1 < 0) return;                                  // 종료
 
                     $P.curDataIndex = iLoop - 1;
                     break;
@@ -282,7 +282,7 @@
 
             for (iLoop = $P.curDataIndex; iLoop < dataItems.length; iLoop++) {
                 if (dataItems[iLoop].data.CRDN_ID == curCrdnId) {
-                    if (iLoop + 1 >= dataItems.length) return;				// 종료
+                    if (iLoop + 1 >= dataItems.length) return;              // 종료
 
                     $P.curDataIndex = iLoop + 1;
                     break;
@@ -498,7 +498,7 @@
 
         // 기본 데이터 설정
         $P.initData = () => {
-        	// 화면이 열릴때 초기 값으로 null로 설정해야 건수가 정상 표시 된다.
+            // 화면이 열릴때 초기 값으로 null로 설정해야 건수가 정상 표시 된다.
             $P.curDataIndex = null;
         }
 
diff --git a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02020-info.jsp b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02020-info.jsp
index c29d3573..6cd0095f 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02020-info.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02020-info.jsp
@@ -3,337 +3,337 @@
 
 <!-- Page Body -->
 <div class="content-pop" data-doctx="${pageName}">
-	<div class="d-flex flex-row justify-content-evenly">
- 		<div class="w-px-1150">
-			<!-- 입력 영역 -->
-			<form name="frmEdit">
-				<input type="hidden" name="crdnId" data-map="CRDN_ID" />
-				<input type="hidden" name="rtpyrId" data-map="RTPYR_ID" />
-
-				<!-- 단속 정보 -->
-				<div class="card">
-					<!-- 업무 버튼 -->
-					<div class="container-page-btn">
-						<label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">단속 정보</label>
-						<!-- 버튼 우측 정렬 -->
-						<span class="container-window-btn-right">
-							<button type="button" class="btn btn-primary" name="btnViewCvlcptOrgnl" title="민원 원본 보기">
-								민원 원본 보기
-							</button>
-							<button type="button" class="btn btn-primary" name="btnViewAnswerPreview" title="민원 답변 보기">
-								민원 답변 보기
-							</button>
-							<button type="button" class="btn btn-primary" name="btnUpdateCrdn" title="단속 정보 수정">
-								단속정보 수정
-							</button>
-							<button type="button" class="btn btn-primary" name="btnRemoveCrdn" title="단속 정보 삭제">
-								단속정보 삭제
-							</button>
-							<button type="button" class="btn btn-primary" name="btnCreateCrdnReReg" title="단속 재등록">
-								단속 재등록
-							</button>
-							<button type="button" class="btn btn-primary" name="btnPrintNhtPdf01" title="고지서 출력(PDF-A4)">
-								고지서출력(A4)
-							</button>
-							<button type="button" class="btn btn-primary" name="btnPrintNhtPdf02" title="고지서 출력(PDF-Letter)">
-								고지서서출력(Letter)
-							</button>
-							<button type="button" class="btn btn-primary" name="btnUpdateCrdnSttsCd" title="단속 상태 변경">
-								단속상태 변경
-							</button>
-						</span>
-					</div> <!-- <div class="container-page-btn"> -->
-
-					<div class="row g-1">
-						<!-- 등록구분 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnRegSeNm">등록구분</label>
-							<input is="id-input" type="text" class="form-control w-45" name="crdnRegSeNm" data-map="CRDN_REG_SE_NM" readonly />
-						</div>
-						<!-- 입력구분 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnInptSeNm">입력구분</label>
-							<input is="id-input" type="text" class="form-control w-45" name="crdnInptSeNm" data-map="CRDN_INPT_SE_NM" readonly />
-						</div>
-						<!-- 단속 시작 시각 ~ 단속 종료 시각 -->
-						<div class="col-md-4">
-							<span slot="edit">
-								<template class="pes pvs"> <!-- 밤샘주차 주정차 -->
-									<slot>
-										<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnBgngTm">단속시간</label>
-										<input is="id-input" type="text" class="form-control w-25" name="crdnBgngTm" data-map="CRDN_BGNG_TM" readonly /> ~
-										<input is="id-input" type="text" class="form-control w-25" name="crdnEndTm" data-map="CRDN_END_TM" readonly />
-									</slot>
-								</template>
-							</span>
-						</div>
-						<!-- 단속 일시 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnYmdTm">단속일시</label>
-							<input is="id-input" type="text" class="form-control w-45" name="crdnYmdTm" data-map="CRDN_YMD_TM" readonly />
-						</div>
-						<!-- 차량번호 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="vhrno">차량번호</label>
-							<input is="id-input" type="text" class="form-control w-45" name="vhrno" data-map="VHRNO" readonly />
-						</div>
-						<!-- 위반 내용 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="vltnArtcl">위반내용</label>
-							<input is="id-input" type="text" class="form-control w-45" name="vltnArtcl" data-map="VLTN_ARTCL" readonly />
-							<span slot="edit">
-								<template class="dpv"> <!-- 장애인 -->
-									<slot>
+    <div class="d-flex flex-row justify-content-evenly">
+        <div class="w-px-1150">
+            <!-- 입력 영역 -->
+            <form name="frmEdit">
+                <input type="hidden" name="crdnId" data-map="CRDN_ID" />
+                <input type="hidden" name="rtpyrId" data-map="RTPYR_ID" />
+
+                <!-- 단속 정보 -->
+                <div class="card">
+                    <!-- 업무 버튼 -->
+                    <div class="container-page-btn">
+                        <label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">단속 정보</label>
+                        <!-- 버튼 우측 정렬 -->
+                        <span class="container-window-btn-right">
+                            <button type="button" class="btn btn-primary" name="btnViewCvlcptOrgnl" title="민원 원본 보기">
+                                민원 원본 보기
+                            </button>
+                            <button type="button" class="btn btn-primary" name="btnViewAnswerPreview" title="민원 답변 보기">
+                                민원 답변 보기
+                            </button>
+                            <button type="button" class="btn btn-primary" name="btnUpdateCrdn" title="단속 정보 수정">
+                                단속정보 수정
+                            </button>
+                            <button type="button" class="btn btn-primary" name="btnRemoveCrdn" title="단속 정보 삭제">
+                                단속정보 삭제
+                            </button>
+                            <button type="button" class="btn btn-primary" name="btnCreateCrdnReReg" title="단속 재등록">
+                                단속 재등록
+                            </button>
+                            <button type="button" class="btn btn-primary" name="btnPrintNhtPdf01" title="고지서 출력(PDF-A4)">
+                                고지서출력(A4)
+                            </button>
+                            <button type="button" class="btn btn-primary" name="btnPrintNhtPdf02" title="고지서 출력(PDF-Letter)">
+                                고지서서출력(Letter)
+                            </button>
+                            <button type="button" class="btn btn-primary" name="btnUpdateCrdnSttsCd" title="단속 상태 변경">
+                                단속상태 변경
+                            </button>
+                        </span>
+                    </div> <!-- <div class="container-page-btn"> -->
+
+                    <div class="row g-1">
+                        <!-- 등록구분 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnRegSeNm">등록구분</label>
+                            <input is="id-input" type="text" class="form-control w-45" name="crdnRegSeNm" data-map="CRDN_REG_SE_NM" readonly />
+                        </div>
+                        <!-- 입력구분 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnInptSeNm">입력구분</label>
+                            <input is="id-input" type="text" class="form-control w-45" name="crdnInptSeNm" data-map="CRDN_INPT_SE_NM" readonly />
+                        </div>
+                        <!-- 단속 시작 시각 ~ 단속 종료 시각 -->
+                        <div class="col-md-4">
+                            <span slot="edit">
+                                <template class="pes pvs"> <!-- 밤샘주차 주정차 -->
+                                    <slot>
+                                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnBgngTm">단속시간</label>
+                                        <input is="id-input" type="text" class="form-control w-25" name="crdnBgngTm" data-map="CRDN_BGNG_TM" readonly /> ~
+                                        <input is="id-input" type="text" class="form-control w-25" name="crdnEndTm" data-map="CRDN_END_TM" readonly />
+                                    </slot>
+                                </template>
+                            </span>
+                        </div>
+                        <!-- 단속 일시 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnYmdTm">단속일시</label>
+                            <input is="id-input" type="text" class="form-control w-45" name="crdnYmdTm" data-map="CRDN_YMD_TM" readonly />
+                        </div>
+                        <!-- 차량번호 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="vhrno">차량번호</label>
+                            <input is="id-input" type="text" class="form-control w-45" name="vhrno" data-map="VHRNO" readonly />
+                        </div>
+                        <!-- 위반 내용 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="vltnArtcl">위반내용</label>
+                            <input is="id-input" type="text" class="form-control w-45" name="vltnArtcl" data-map="VLTN_ARTCL" readonly />
+                            <span slot="edit">
+                                <template class="dpv"> <!-- 장애인 -->
+                                    <slot>
                                         <label>
                                             <input type="checkbox" class="form-check-input" name="dstrbncYn" data-map="DSTRBNC_YN" disabled />1면방해
                                         </label>
-									</slot>
-								</template>
-							</span>
-						</div>
-						<!-- 법정동 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnStdgNm">법정동</label>
-							<input is="id-input" type="text" class="form-control w-45" name="crdnStdgNm" data-map="CRDN_STDG_NM" readonly />
-						</div>
-						<!-- 단속 장소 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnPlc">단속장소</label>
-							<input is="id-input" type="text" class="form-control w-60" name="crdnPlc" data-map="CRDN_PLC" readonly />
-						</div>
-						<!-- 단속일련번호 / 상세단속장소 -->
-						<div class="col-md-4">
-							<span slot="edit">
-								<template class="dpv eca pvs"> <!-- 장애인 전기차 주정차 -->
-									<slot>
-										<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnSn">단속일련번호</label>
-										<input is="id-input" type="text" class="form-control w-45" name="crdnSn" maxlength="20" data-maxlengthb="20" data-map="CRDN_SN" readonly />
-									</slot>
-								</template>
-								<template class="bpv"> <!-- 전용차로 -->
-									<slot>
-										<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="dtlCrdnPlc">상세단속장소</label>
-										<input is="id-input" type="text" class="form-control w-60" name="dtlCrdnPlc" data-map="DTL_CRDN_PLC" readonly />
-									</slot>
-								</template>
-							</span>
-						</div>
-						<!-- 민원 신청인 명 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="cvlcptAplcntNm">민원신청인</label>
-							<input is="id-input" type="text" class="form-control w-45" name="cvlcptAplcntNm" data-map="CVLCPT_APLCNT_NM" readonly />
-						</div>
-						<!-- 민원 접수 일자 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="cvlcptRcptYmd">민원접수일</label>
-							<input is="id-input" type="text" class="form-control w-30" name="cvlcptRcptYmd" data-map="CVLCPT_RCPT_YMD" readonly />
-						</div>
-						<!-- 담당자 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="cvlcptPrcsPicNm">담당자</label>
-							<input is="id-input" type="text" class="form-control w-45" name="cvlcptPrcsPicNm" data-map="CVLCPT_PRCS_PIC_NM" readonly />
-						</div>
-						<!-- 차대번호 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="vin">차대번호</label>
-							<input is="id-input" type="text" class="form-control w-45" name="vin" data-map="VIN"  />
-						</div>
-						<!-- 차량 명 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="vhclNm">차량명</label>
-							<input is="id-input" type="text" class="form-control w-60" name="vhclNm" data-map="VHCL_NM" readonly />
-						</div>
-						<!-- 차량 색상 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="vhclColr">차량색상</label>
-							<input is="id-input" type="text" class="form-control w-45" name="vhclColr" data-map="VHCL_COLR" readonly />
-						</div>
-						<!-- 사전통지 일자 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="advntceBgngYmd">사전통지일자</label>
-							<input is="id-input" type="text" class="form-control w-30" name="advntceBgngYmd" data-map="ADVNTCE_BGNG_YMD" readonly /> ~
-							<input is="id-input" type="text" class="form-control w-30" name="advntceDudtYmd" data-map="ADVNTCE_DUDT_YMD" readonly />
-						</div>
-						<!-- 기타 내용 -->
-						<div class="col-md-8">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end align-top" for="etcCn">기타내용</label>
-							<textarea is="id-input" type="text" class="form-control w-80" name="etcCn" data-map="ETC_CN" cols="100%" rows="3" readonly></textarea>
-						</div>
-						<!-- 과태료 단속원금 -->
-						<div class="col-md-3">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ffnlgCrdnAmt">과태료단속원금</label>
-							<input is="id-input" type="text" class="form-control w-40 text-sm-end" name="ffnlgCrdnAmt" data-map="FFNLG_CRDN_AMT" data-fmt-type="number" readonly />
-						</div>
-						<!-- 과태료 감경 율 -->
-						<div class="col-md-3">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ffnlgRdcrt">과태료감경율</label>
-							<input is="id-input" type="text" class="form-control w-20 text-sm-end" name="ffnlgRdcrt" data-map="FFNLG_RDCRT" readonly /> %
-						</div>
-						<!-- 과태료 금액 -->
-						<div class="col-md-3">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ffnlgAmt">과태료금액</label>
-							<input is="id-input" type="text" class="form-control w-40 text-sm-end" name="ffnlgAmt" data-map="FFNLG_AMT" data-fmt-type="number" readonly />
-						</div>
-						<!-- 사전통지 금액 -->
-						<div class="col-md-3">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="advntceAmt">사전감경금액</label>
-							<input is="id-input" type="text" class="form-control w-40 text-sm-end" name="advntceAmt" data-map="ADVNTCE_AMT" data-fmt-type="number" readonly />
-						</div>
-						<!-- 부과 금액 -->
-						<div class="col-md-3">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="levyAmt">부과금액</label>
-							<input is="id-input" type="text" class="form-control w-40 text-sm-end" name="levyAmt" data-map="LEVY_AMT" data-fmt-type="number" readonly />
-						</div>
-						<!-- 감액 금액 -->
-						<div class="col-md-3">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="reducAmt">감액금액</label>
-							<input is="id-input" type="text" class="form-control w-40 text-sm-end" name="reducAmt" data-map="REDUC_AMT" data-fmt-type="number" readonly />
-						</div>
-						<!-- 수납 금액 -->
-						<div class="col-md-3">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rcvmtAmt">수납금액</label>
-							<input is="id-input" type="text" class="form-control w-40 text-sm-end" name="rcvmtAmt" data-map="RCVMT_AMT" data-fmt-type="number" readonly />
-						</div>
-						<!-- 미납 금액 -->
-						<div class="col-md-3">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="sumAmt">미납금액</label>
-							<input is="id-input" type="text" class="form-control w-40 text-sm-end fw-bold text-red" name="sumAmt" data-map="SUM_AMT" data-fmt-type="number" readonly />
-						</div>
-						<!-- 업무별 화면 표시 -->
-						<div class="col-md-3">
-							<span slot="edit">
-								<template class="bpv pvs"> <!-- 전용차로 주정차 -->
-									<slot>
-										<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ffnlgCarmdlNm">과태료차종</label>
-										<input is="id-input" type="text" class="form-control w-50" name="ffnlgCarmdlNm" data-map="FFNLG_CARMDL_NM" readonly />
-									</slot>
-								</template>
-								<template class="dpv"> <!-- 장애인 -->
-									<slot>
-										<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="prkPsbltyRsltNm">주차가능결과</label>
-										<input is="id-input" type="text" class="form-control w-50" name="prkPsbltyRsltNm" data-map="PRK_PSBLTY_RSLT_NM" readonly />
-									</slot>
-								</template>
-								<template class="eca"> <!-- 전기차 -->
-									<slot>
-										<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="useFuelNm">연료구분</label>
-										<input is="id-input" type="text" class="form-control w-50" name="useFuelNm" data-map="USE_FUEL_NM" readonly />
-									</slot>
-								</template>
-							</span>
-						</div>
-						<div class="col-md-3">
-							<span slot="edit">
-								<template class="pvs"> <!-- 주정차 -->
-									<slot>
-										<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnSpareaNm">단속특별구역</label>
-										<input is="id-input" type="text" class="form-control w-50" name="crdnSpareaNm" data-map="CRDN_SPAREA_NM" readonly />
-									</slot>
-								</template>
-							</span>
-						</div>
-						<div class="col-md-3">
-							<span slot="edit">
-								<template class="pvs"> <!-- 주정차 -->
-									<slot>
-										<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ovtmNm">2시간초과</label>
-										<input is="id-input" type="text" class="form-control w-50" name="ovtmNm" data-map="OVTM_NM" readonly />
-									</slot>
-								</template>
-							</span>
-						</div>
-						<div class="col-md-3">
-							<span slot="edit">
-								<template class="pvs"> <!-- 주정차 -->
-									<slot>
-										<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="towngNm">견인지시</label>
-										<input is="id-input" type="text" class="form-control w-50" name="towngNm" data-map="TOWNG_NM" readonly />
-									</slot>
-								</template>
-							</span>
-						</div>
-					</div>
-				</div> <!-- <div class="card"> -->
-				<!-- 단속 정보 -->
-
-				<!-- 납부자 정보 -->
-				<div class="card">
-					<!-- 업무 버튼 -->
-					<div class="container-page-btn">
-						<label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">납부자 정보</label>
-						<!-- 버튼 우측 정렬 -->
-						<span class="container-window-btn-right">
-							<button type="button" class="btn btn-primary" name="btnDeleteCrdnPayer" title="납부자 초기화">
-								납부자 초기화
-							</button>
-							<button type="button" class="btn btn-primary" name="btnUpdatePayer" title="납부자 수정">
-								납부자 수정
-							</button>
-						</span>
-					</div> <!-- <div class="container-page-btn"> -->
-
-					<div class="row g-1">
-						<!-- 납부자 명 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrNm">납부자 성명</label>
-							<input is="id-input" type="text" class="form-control w-50" name="rtpyrNm" data-map="RTPYR_NM" readonly />
-						</div>
-						<!-- 납부자 구분 코드 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrSeNm">납부자 구분</label>
-							<input is="id-input" type="text" class="form-control w-25" name="rtpyrSeNm" data-map="RTPYR_SE_NM" readonly />
-						</div>
-						<!-- 납부자 번호 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrNo">납부자 번호</label>
-							<input is="id-input" type="text" class="form-control w-40" name="rtpyrNo" data-map="RTPYR_NO" readonly />
-						</div>
-						<!-- 납부자 전화번호 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrTelno">전화번호</label>
-							<input is="id-input" type="text" class="form-control w-40" name="rtpyrTelno" data-map="RTPYR_TELNO" readonly />
-						</div>
-						<!-- 납부자 휴대 전화번호 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrMblTelno">휴대전화번호</label>
-							<input is="id-input" type="text" class="form-control w-40" name="rtpyrMblTelno" data-map="RTPYR_MBL_TELNO" readonly />
-						</div>
-						<!-- 납부자 이메일 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrEml">이메일</label>
-							<input is="id-input" type="text" class="form-control w-60" name="rtpyrEml" data-map="RTPYR_EML" readonly />
-						</div>
-						<!-- 납부자 전체주소 -->
-						<div class="col-md-12">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="wholAddr">주소</label>
-							<input is="id-input" type="text" class="form-control w-80" name="wholAddr" data-map="WHOL_ADDR" readonly />
-							<input is="id-input" type="text" class="form-control w-px-75" name="zip" data-map="ZIP" readonly />
-						</div>
-						<!-- 납부자 입력 구분 코드 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrInptSeNm">입력구분</label>
-							<input is="id-input" type="text" class="form-control w-50" name="rtpyrInptSeNm" data-map="RTPYR_INPT_SE_NM" readonly />
-						</div>
-						<!-- 수정 일시 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="pMdfcnDt">수정일시</label>
-							<input is="id-input" type="text" class="form-control w-50" name="pMdfcnDt" data-map="P_MDFCN_DT" readonly />
-						</div>
-						<!-- 수정자 -->
-						<div class="col-md-4">
-							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="pMdfrNm">수정자</label>
-							<input is="id-input" type="text" class="form-control w-40" name="pMdfrNm" data-map="P_MDFR_NM" readonly />
-						</div>
-					</div>
-				</div> <!-- <div class="card"> -->
-				<!-- 납부자 정보 -->
-			</form>
-			<!-- 입력 영역 -->
-		</div> <!-- <div class="w-px-1150"> -->
-
-		<!-- 단속 이미지 -->
-		<jsp:include page="/WEB-INF/jsp/fims/photo-main.jsp" />
-	</div> <!-- <div class="d-flex flex-row justify-content-evenly"> -->
+                                    </slot>
+                                </template>
+                            </span>
+                        </div>
+                        <!-- 법정동 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnStdgNm">법정동</label>
+                            <input is="id-input" type="text" class="form-control w-45" name="crdnStdgNm" data-map="CRDN_STDG_NM" readonly />
+                        </div>
+                        <!-- 단속 장소 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnPlc">단속장소</label>
+                            <input is="id-input" type="text" class="form-control w-60" name="crdnPlc" data-map="CRDN_PLC" readonly />
+                        </div>
+                        <!-- 단속일련번호 / 상세단속장소 -->
+                        <div class="col-md-4">
+                            <span slot="edit">
+                                <template class="dpv eca pvs"> <!-- 장애인 전기차 주정차 -->
+                                    <slot>
+                                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnSn">단속일련번호</label>
+                                        <input is="id-input" type="text" class="form-control w-45" name="crdnSn" maxlength="20" data-maxlengthb="20" data-map="CRDN_SN" readonly />
+                                    </slot>
+                                </template>
+                                <template class="bpv"> <!-- 전용차로 -->
+                                    <slot>
+                                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="dtlCrdnPlc">상세단속장소</label>
+                                        <input is="id-input" type="text" class="form-control w-60" name="dtlCrdnPlc" data-map="DTL_CRDN_PLC" readonly />
+                                    </slot>
+                                </template>
+                            </span>
+                        </div>
+                        <!-- 민원 신청인 명 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="cvlcptAplcntNm">민원신청인</label>
+                            <input is="id-input" type="text" class="form-control w-45" name="cvlcptAplcntNm" data-map="CVLCPT_APLCNT_NM" readonly />
+                        </div>
+                        <!-- 민원 접수 일자 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="cvlcptRcptYmd">민원접수일</label>
+                            <input is="id-input" type="text" class="form-control w-30" name="cvlcptRcptYmd" data-map="CVLCPT_RCPT_YMD" readonly />
+                        </div>
+                        <!-- 담당자 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="cvlcptPrcsPicNm">담당자</label>
+                            <input is="id-input" type="text" class="form-control w-45" name="cvlcptPrcsPicNm" data-map="CVLCPT_PRCS_PIC_NM" readonly />
+                        </div>
+                        <!-- 차대번호 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="vin">차대번호</label>
+                            <input is="id-input" type="text" class="form-control w-45" name="vin" data-map="VIN"  />
+                        </div>
+                        <!-- 차량 명 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="vhclNm">차량명</label>
+                            <input is="id-input" type="text" class="form-control w-60" name="vhclNm" data-map="VHCL_NM" readonly />
+                        </div>
+                        <!-- 차량 색상 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="vhclColr">차량색상</label>
+                            <input is="id-input" type="text" class="form-control w-45" name="vhclColr" data-map="VHCL_COLR" readonly />
+                        </div>
+                        <!-- 사전통지 일자 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="advntceBgngYmd">사전통지일자</label>
+                            <input is="id-input" type="text" class="form-control w-30" name="advntceBgngYmd" data-map="ADVNTCE_BGNG_YMD" readonly /> ~
+                            <input is="id-input" type="text" class="form-control w-30" name="advntceDudtYmd" data-map="ADVNTCE_DUDT_YMD" readonly />
+                        </div>
+                        <!-- 기타 내용 -->
+                        <div class="col-md-8">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end align-top" for="etcCn">기타내용</label>
+                            <textarea is="id-textarea" type="text" class="form-control w-80" name="etcCn" data-map="ETC_CN" cols="100%" rows="3" readonly></textarea>
+                        </div>
+                        <!-- 과태료 단속원금 -->
+                        <div class="col-md-3">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ffnlgCrdnAmt">과태료단속원금</label>
+                            <input is="id-input" type="text" class="form-control w-40 text-sm-end" name="ffnlgCrdnAmt" data-map="FFNLG_CRDN_AMT" data-fmt-type="number" readonly />
+                        </div>
+                        <!-- 과태료 감경 율 -->
+                        <div class="col-md-3">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ffnlgRdcrt">과태료감경율</label>
+                            <input is="id-input" type="text" class="form-control w-20 text-sm-end" name="ffnlgRdcrt" data-map="FFNLG_RDCRT" readonly /> %
+                        </div>
+                        <!-- 과태료 금액 -->
+                        <div class="col-md-3">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ffnlgAmt">과태료금액</label>
+                            <input is="id-input" type="text" class="form-control w-40 text-sm-end" name="ffnlgAmt" data-map="FFNLG_AMT" data-fmt-type="number" readonly />
+                        </div>
+                        <!-- 사전통지 금액 -->
+                        <div class="col-md-3">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="advntceAmt">사전감경금액</label>
+                            <input is="id-input" type="text" class="form-control w-40 text-sm-end" name="advntceAmt" data-map="ADVNTCE_AMT" data-fmt-type="number" readonly />
+                        </div>
+                        <!-- 부과 금액 -->
+                        <div class="col-md-3">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="levyAmt">부과금액</label>
+                            <input is="id-input" type="text" class="form-control w-40 text-sm-end" name="levyAmt" data-map="LEVY_AMT" data-fmt-type="number" readonly />
+                        </div>
+                        <!-- 감액 금액 -->
+                        <div class="col-md-3">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="reducAmt">감액금액</label>
+                            <input is="id-input" type="text" class="form-control w-40 text-sm-end" name="reducAmt" data-map="REDUC_AMT" data-fmt-type="number" readonly />
+                        </div>
+                        <!-- 수납 금액 -->
+                        <div class="col-md-3">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rcvmtAmt">수납금액</label>
+                            <input is="id-input" type="text" class="form-control w-40 text-sm-end" name="rcvmtAmt" data-map="RCVMT_AMT" data-fmt-type="number" readonly />
+                        </div>
+                        <!-- 미납 금액 -->
+                        <div class="col-md-3">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="sumAmt">미납금액</label>
+                            <input is="id-input" type="text" class="form-control w-40 text-sm-end fw-bold text-red" name="sumAmt" data-map="SUM_AMT" data-fmt-type="number" readonly />
+                        </div>
+                        <!-- 업무별 화면 표시 -->
+                        <div class="col-md-3">
+                            <span slot="edit">
+                                <template class="bpv pvs"> <!-- 전용차로 주정차 -->
+                                    <slot>
+                                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ffnlgCarmdlNm">과태료차종</label>
+                                        <input is="id-input" type="text" class="form-control w-50" name="ffnlgCarmdlNm" data-map="FFNLG_CARMDL_NM" readonly />
+                                    </slot>
+                                </template>
+                                <template class="dpv"> <!-- 장애인 -->
+                                    <slot>
+                                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="prkPsbltyRsltNm">주차가능결과</label>
+                                        <input is="id-input" type="text" class="form-control w-50" name="prkPsbltyRsltNm" data-map="PRK_PSBLTY_RSLT_NM" readonly />
+                                    </slot>
+                                </template>
+                                <template class="eca"> <!-- 전기차 -->
+                                    <slot>
+                                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="useFuelNm">연료구분</label>
+                                        <input is="id-input" type="text" class="form-control w-50" name="useFuelNm" data-map="USE_FUEL_NM" readonly />
+                                    </slot>
+                                </template>
+                            </span>
+                        </div>
+                        <div class="col-md-3">
+                            <span slot="edit">
+                                <template class="pvs"> <!-- 주정차 -->
+                                    <slot>
+                                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnSpareaNm">단속특별구역</label>
+                                        <input is="id-input" type="text" class="form-control w-50" name="crdnSpareaNm" data-map="CRDN_SPAREA_NM" readonly />
+                                    </slot>
+                                </template>
+                            </span>
+                        </div>
+                        <div class="col-md-3">
+                            <span slot="edit">
+                                <template class="pvs"> <!-- 주정차 -->
+                                    <slot>
+                                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ovtmNm">2시간초과</label>
+                                        <input is="id-input" type="text" class="form-control w-50" name="ovtmNm" data-map="OVTM_NM" readonly />
+                                    </slot>
+                                </template>
+                            </span>
+                        </div>
+                        <div class="col-md-3">
+                            <span slot="edit">
+                                <template class="pvs"> <!-- 주정차 -->
+                                    <slot>
+                                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="towngNm">견인지시</label>
+                                        <input is="id-input" type="text" class="form-control w-50" name="towngNm" data-map="TOWNG_NM" readonly />
+                                    </slot>
+                                </template>
+                            </span>
+                        </div>
+                    </div>
+                </div> <!-- <div class="card"> -->
+                <!-- 단속 정보 -->
+
+                <!-- 납부자 정보 -->
+                <div class="card">
+                    <!-- 업무 버튼 -->
+                    <div class="container-page-btn">
+                        <label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">납부자 정보</label>
+                        <!-- 버튼 우측 정렬 -->
+                        <span class="container-window-btn-right">
+                            <button type="button" class="btn btn-primary w-px-120" name="btnDeleteCrdnPayer" title="납부자 초기화">
+                                납부자 초기화
+                            </button>
+                            <button type="button" class="btn btn-primary w-px-120" name="btnUpdatePayer" title="납부자 수정">
+                                납부자 수정
+                            </button>
+                        </span>
+                    </div> <!-- <div class="container-page-btn"> -->
+
+                    <div class="row g-1">
+                        <!-- 납부자 명 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrNm">납부자 성명</label>
+                            <input is="id-input" type="text" class="form-control w-50" name="rtpyrNm" data-map="RTPYR_NM" readonly />
+                        </div>
+                        <!-- 납부자 구분 코드 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrSeNm">납부자 구분</label>
+                            <input is="id-input" type="text" class="form-control w-25" name="rtpyrSeNm" data-map="RTPYR_SE_NM" readonly />
+                        </div>
+                        <!-- 납부자 번호 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrNo">납부자 번호</label>
+                            <input is="id-input" type="text" class="form-control w-40" name="rtpyrNo" data-map="RTPYR_NO" readonly />
+                        </div>
+                        <!-- 납부자 전화번호 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrTelno">전화번호</label>
+                            <input is="id-input" type="text" class="form-control w-40" name="rtpyrTelno" data-map="RTPYR_TELNO" readonly />
+                        </div>
+                        <!-- 납부자 휴대 전화번호 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrMblTelno">휴대전화번호</label>
+                            <input is="id-input" type="text" class="form-control w-40" name="rtpyrMblTelno" data-map="RTPYR_MBL_TELNO" readonly />
+                        </div>
+                        <!-- 납부자 이메일 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrEml">이메일</label>
+                            <input is="id-input" type="text" class="form-control w-60" name="rtpyrEml" data-map="RTPYR_EML" readonly />
+                        </div>
+                        <!-- 납부자 전체주소 -->
+                        <div class="col-md-12">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="wholAddr">주소</label>
+                            <input is="id-input" type="text" class="form-control w-80" name="wholAddr" data-map="WHOL_ADDR" readonly />
+                            <input is="id-input" type="text" class="form-control w-px-75" name="zip" data-map="ZIP" readonly />
+                        </div>
+                        <!-- 납부자 입력 구분 코드 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rtpyrInptSeNm">입력구분</label>
+                            <input is="id-input" type="text" class="form-control w-50" name="rtpyrInptSeNm" data-map="RTPYR_INPT_SE_NM" readonly />
+                        </div>
+                        <!-- 수정 일시 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="pMdfcnDt">수정일시</label>
+                            <input is="id-input" type="text" class="form-control w-50" name="pMdfcnDt" data-map="P_MDFCN_DT" readonly />
+                        </div>
+                        <!-- 수정자 -->
+                        <div class="col-md-4">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="pMdfrNm">수정자</label>
+                            <input is="id-input" type="text" class="form-control w-40" name="pMdfrNm" data-map="P_MDFR_NM" readonly />
+                        </div>
+                    </div>
+                </div> <!-- <div class="card"> -->
+                <!-- 납부자 정보 -->
+            </form>
+            <!-- 입력 영역 -->
+        </div> <!-- <div class="w-px-1150"> -->
+
+        <!-- 단속 이미지 -->
+        <jsp:include page="/WEB-INF/jsp/fims/photo-main.jsp" />
+    </div> <!-- <div class="d-flex flex-row justify-content-evenly"> -->
 </div> <!-- <div class="content-pop"> -->
 
 <script>
@@ -362,7 +362,7 @@
          * DatasetControl
          **************************************************************************/
         $P.ctrl = new DatasetControl({
-              prefix: "crdnPayer"
+              prefix: "crdn"
             , prefixName: "단속"
             , keymapper: info => info ? info.CRDN_ID : ""
             , dataGetter: obj => obj.crdnPayerInfo
@@ -405,14 +405,14 @@
                   url: wctx.url("/" + params.taskSeCd + "/crdn/crdn06/020/info.do")
                 , data: params || {}
                 , success: (resp) => {
-                    let dialogName = "crdnDialog";
+                    let dialogName = $P.ctrl.prefixed("Dialog");
                     let dialogId = dialogName + "-" + uuid();
 
                     dialog.open({
                           id: dialogId
-                        , title: params.title
-                        , content: resp
+                        , title: params.btnTitle
                         , size: "lg"
+                        , content: resp
                         , init: () => {
                             setDialogZindex();
 
@@ -433,11 +433,10 @@
                   content: showMessage
                 , init: () => { setDialogZindex(); }
                 , onOK: () => { }
+                , onClose: () => {
+                    if (resp.saved) { pageObject["${mainPageName}"].fnClose(true); }
+                }
             });
-
-            if (resp.saved) {
-                pageObject["${mainPageName}"].fnClose(true);
-            }
         }
 
         // 삭제
@@ -445,7 +444,7 @@
             if (!params) return;
 
             ajax.post({
-                url: wctx.url("/" + params.taskSeCd + "/crdn/crdn06/010/remove.do")
+                  url: wctx.url("/" + params.taskSeCd + "/crdn/crdn06/010/remove.do")
                 , data: params || {}
                 , success: (resp) => {
                     $P.ctrl.onRemove(params, resp);
@@ -458,8 +457,8 @@
          **************************************************************************/
         // 자료 재조회
         $P.fnRefreshDataInfo = () => {
-            // 단속 ID
-            let crdnId = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID");
+            let crdnId = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID");    // 단속 ID
+
             // 단속 ID 가 없다면.. return
             if (typeof crdnId == "undefined" || crdnId == null || crdnId == "") return;
 
@@ -478,6 +477,7 @@
                 , success: (resp) => {
                     // 초기화
                     $P.find("frmEdit").reset();                                 // 화면 초기화
+
                     $P.ctrl.dataset.clear();                                    // Dataset 초기화
 
                     // sprt02010-main 단속 정보
@@ -502,7 +502,7 @@
 
                     dialog.open({
                           id: dialogId
-                        , title: params.title
+                        , title: params.btnTitle
                         , size: "xl"
                         , content: resp
                         , init: () => {
@@ -529,7 +529,7 @@
 
                     dialog.open({
                           id: dialogId
-                        , title: params.title
+                        , title: params.btnTitle
                         , size: "xl"
                         , content: resp
                         , init: () => {
@@ -547,10 +547,11 @@
         $P.callbackRsn = (obj) => {
             // 서버에 전송할 data(파라미터) 생성
             let params = {
-                  sggCd: $P.ctrl.getValue("SGG_CD")                             // 시군구 코드
+                  callPurpose: "remove"
+                , sggCd: $P.ctrl.getValue("SGG_CD")                             // 시군구 코드
                 , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")                      // 업무 구분 코드
                 , crdnId: $P.ctrl.getValue("CRDN_ID")                           // 단속 ID
-                , btnTitle: obj.reason                                          // 버튼 title
+                , btnTitle: obj.btnTitle                                        // 버튼 title
                 , delRsn: obj.reason                                            // 삭제 사유
             };
 
@@ -589,7 +590,7 @@
 
                     dialog.open({
                           id: dialogId
-                        , title: params.title
+                        , title: params.btnTitle
                         , size: "lg"
                         , content: resp
                         , init: () => {
@@ -612,15 +613,16 @@
                   url: wctx.url("/" + params.taskSeCd + "/crdn/crdn06/010/removeCrdnPayer.do")
                 , data: params || {}
                 , success: (resp) => {
-                    let showMessage = resp.rtnMsg.replace(/[S]|[F]/g, params.title);
+                    let showMessage = resp.rtnMsg.replace(/[S]|[F]/g, params.btnTitle);
 
                     dialog.alert({
                           content: showMessage
                         , init: () => { setDialogZindex(); }
                         , onOK: () => { }
+                        , onClose: () => {
+                            if (resp.saved) { $P.fnRefreshDataInfo(); }         // 자료 재조회
+                        }
                     });
-
-                    if (resp.saved) { $P.fnRefreshDataInfo(); }                 // 자료 재조회
                 }
             });
         }
@@ -674,8 +676,8 @@
             // 민원 연계 ID가 없다면.. return
             if (typeof cvlcptLinkId == "undefined" || cvlcptLinkId == null || cvlcptLinkId == "") {
                 dialog.alert({
-                      content: "조회된 단속 민원 대장 정보가 없습니다."
-                            + "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
+                      content: "조회된 민원 대장 정보가 없습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
                     , init: () => { setDialogZindex(); }
                     , onOK: () => { }
                 });
@@ -684,7 +686,7 @@
 
             let params = {
                   callPurpose: "view"
-                , title: btnTitle
+                , btnTitle: btnTitle
                 , sggCd: $P.ctrl.getValue("SGG_CD")                             // 시군구 코드
                 , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")                      // 업무 구분 코드
                 , crdnId: $P.ctrl.getValue("CRDN_ID")                           // 단속 ID
@@ -703,17 +705,17 @@
             // 민원 연계 ID가 없다면.. return
             if (typeof cvlcptLinkId == "undefined" || cvlcptLinkId == null || cvlcptLinkId == "") {
                 dialog.alert({
-                      content: "조회된 단속 민원 대장 정보가 없습니다."
-                            + "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-				    , init: () => { setDialogZindex(); }
-		            , onOK: () => { }
-		        });
+                      content: "조회된 민원 대장 정보가 없습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , init: () => { setDialogZindex(); }
+                    , onOK: () => { }
+                });
                 return;
             }
 
             let params = {
                   callPurpose : "view"
-                , title: btnTitle
+                , btnTitle: btnTitle
                 , sggCd: $P.ctrl.getValue("SGG_CD")                             // 시군구 코드
                 , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")                      // 업무 구분 코드
                 , crdnId: $P.ctrl.getValue("CRDN_ID")                           // 단속 ID
@@ -731,7 +733,7 @@
 
             let params = {
                   callPurpose: "update"
-                , title: btnTitle
+                , btnTitle: btnTitle
                 , sggCd: $P.ctrl.getValue("SGG_CD")                             // 시군구 코드
                 , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")                      // 업무 구분 코드
                 , crdnId: $P.ctrl.getValue("CRDN_ID")                           // 단속 ID
@@ -748,8 +750,8 @@
             if (typeof crdnId == "undefined" || crdnId == null || crdnId == "") return;
 
             // 단속 상태 코드
-            let crdnSttsCd = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_STTS_CD");
-            let crdnSttsNm = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_STTS_NM");
+            let crdnSttsCd = $P.ctrl.getValue("CRDN_STTS_CD");
+            let crdnSttsNm = $P.ctrl.getValue("CRDN_STTS_NM");
 
             // 단속 상태 코드 확인
             if (Number(crdnSttsCd) > 51) {
@@ -797,15 +799,15 @@
             if (typeof bfrCrdnId == "undefined" || bfrCrdnId == null || bfrCrdnId == "") return;
 
             // 단속 상태 코드
-            let crdnSttsCd = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_STTS_CD");
-            let crdnSttsNm = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_STTS_NM");
+            let crdnSttsCd = $P.ctrl.getValue("CRDN_STTS_CD");
+            let crdnSttsNm = $P.ctrl.getValue("CRDN_STTS_NM");
 
             // 단속 상태 코드 확인
             if (Number(crdnSttsCd) < 80 || Number(crdnSttsCd) > 88) {
                 dialog.alert({
-                      content: "[" + title + "]" + " 작업은 단속상태가 '비부과', '계고', '부과취소' 자료만 처리 가능합니다."
+                      content: "[" + btnTitle + "]" + " 작업은 단속상태가 '비부과', '계고', '부과취소' 자료만 처리 가능합니다."
                             + "<br>" + "단속상태 : " + crdnSttsNm
-                            + "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
                     , init: () => { setDialogZindex(); }
                     , onOK: () => { }
                 });
@@ -818,7 +820,7 @@
                 , onOK: () => {
                     let params = {
                           callPurpose: "create"
-                        , title: btnTitle
+                        , btnTitle: btnTitle
                         , sggCd: $P.ctrl.getValue("SGG_CD")                     // 시군구 코드
                         , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")              // 업무 구분 코드
                         , bfrCrdnId: $P.ctrl.getValue("CRDN_ID")                // 단속 ID
@@ -831,6 +833,9 @@
 
         // 고지서출력
         $P.fnMakeFileNht = (title, fileType, paper) => {
+            let url = "";
+            let fileTypeName = "";
+
             if (fileType == "pdf") {
                 url = wctx.url("/sprt/sprt01/150/makeNhtPdf.do");
                 fileTypeName = "PDF 파일";
@@ -886,7 +891,7 @@
         }
 
         // 단속 상태 변경
-        $P.fnUpdateCrdnSttsCd = (title) => {
+        $P.fnUpdateCrdnSttsCd = (btnTitle) => {
             let crdnId = $P.ctrl.getValue("CRDN_ID");                           // 단속 ID
 
             // 단속 ID 가 없다면.. return
@@ -894,7 +899,7 @@
 
             let params = {
                   callPurpose: "update"
-                , title: title
+                , btnTitle: btnTitle
                 , sggCd: $P.ctrl.getValue("SGG_CD")                             // 시군구 코드
                 , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")                      // 업무 구분 코드
                 , crdnId: $P.ctrl.getValue("CRDN_ID")                           // 단속 ID
@@ -904,7 +909,7 @@
         }
 
         // 납부자 초기화
-        $P.fnDeleteCrdnPayer = (title) => {
+        $P.fnDeleteCrdnPayer = (btnTitle) => {
             let crdnId = $P.ctrl.getValue("CRDN_ID");                           // 단속 ID
             let rtpyrId = $P.ctrl.getValue("RTPYR_ID");                         // 납부자 ID
 
@@ -914,7 +919,7 @@
             if (rtpyrId == null || rtpyrId == "") {
                 dialog.alert({
                       content: "조회된 납부자 대장 정보가 없습니다."
-                            + "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
                     , init: () => { setDialogZindex(); }
                     , onOK: () => { }
                 });
@@ -926,7 +931,8 @@
                 , init: () => { setDialogZindex(); }
                 , onOK: () => {
                     let params = {
-                          title: title
+                          callPurpose: "initialize"
+                        , btnTitle: btnTitle
                         , sggCd: $P.ctrl.getValue("SGG_CD")                     // 시군구 코드
                         , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")              // 업무 구분 코드
                         , crdnId: $P.ctrl.getValue("CRDN_ID")                   // 단속 ID
@@ -940,7 +946,7 @@
         }
 
         // 납부자 수정
-        $P.fnUpdatePayer = (title) => {
+        $P.fnUpdatePayer = (btnTitle) => {
             let crdnId = $P.ctrl.getValue("CRDN_ID");                           // 단속 ID
 
             // 단속 ID 가 없다면.. return
@@ -948,7 +954,7 @@
 
             let params = {
                   callPurpose: "update"
-                , title: title
+                , btnTitle: btnTitle
                 , sggCd: $P.ctrl.getValue("SGG_CD")                             // 시군구 코드
                 , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")                      // 업무 구분 코드
                 , crdnId: $P.ctrl.getValue("CRDN_ID")                           // 단속 ID
@@ -973,48 +979,48 @@
         $P.setEvent = () => {
             // 업무 버튼 이벤트
             $P.$find("btnViewCvlcptOrgnl").on("click", () => {
-                $P.fnViewCvlcptOrgnl($P.$find("btnViewCvlcptOrgnl").attr("title"));     // 민원 원본 보기
+                $P.fnViewCvlcptOrgnl($P.$find("btnViewCvlcptOrgnl").attr("title"));         // 민원 원본 보기
             });
             $P.$find("btnViewAnswerPreview").on("click", () => {
-                $P.fnViewAnswerPreview($P.$find("btnViewAnswerPreview").attr("title")); // 민원 답변 보기
+                $P.fnViewAnswerPreview($P.$find("btnViewAnswerPreview").attr("title"));     // 민원 답변 보기
             });
             $P.$find("btnUpdateCrdn").on("click", () => {
-                $P.fnUpdateCrdn($P.$find("btnUpdateCrdn").attr("title"));               // 단속 정보 수정
+                $P.fnUpdateCrdn($P.$find("btnUpdateCrdn").attr("title"));                   // 단속 정보 수정
             });
             $P.$find("btnRemoveCrdn").on("click", () => {
-                $P.fnRemoveCrdn($P.$find("btnRemoveCrdn").attr("title"));               // 단속 정보 삭제
+                $P.fnRemoveCrdn($P.$find("btnRemoveCrdn").attr("title"));                   // 단속 정보 삭제
             });
             $P.$find("btnCreateCrdnReReg").on("click", () => {
-                $P.fnCreateCrdnReReg($P.$find("btnCreateCrdnReReg").attr("title"));     // 단속 재등록
+                $P.fnCreateCrdnReReg($P.$find("btnCreateCrdnReReg").attr("title"));         // 단속 재등록
             });
             $P.$find("btnPrintNhtPdf01").on("click", () => {
-                $P.fnMakeFileNht($P.$find("btnPrintNhtPdf01").attr("title"));           // 고지서 출력
+                $P.fnMakeFileNht($P.$find("btnPrintNhtPdf01").attr("title"), "pdf", "01");  // 고지서 출력
             });
             $P.$find("btnPrintNhtPdf02").on("click", () => {
-                $P.fnMakeFileNht($P.$find("btnPrintNhtPdf02").attr("title"));           // 고지서 출력
+                $P.fnMakeFileNht($P.$find("btnPrintNhtPdf02").attr("title"), "pdf", "02");  // 고지서 출력
             });
             $P.$find("btnUpdateCrdnSttsCd").on("click", () => {
-                $P.fnUpdateCrdnSttsCd($P.$find("btnUpdateCrdnSttsCd").attr("title"));   // 단속 상태 변경
+                $P.fnUpdateCrdnSttsCd($P.$find("btnUpdateCrdnSttsCd").attr("title"));       // 단속 상태 변경
             });
             $P.$find("btnDeleteCrdnPayer").on("click", () => {
-                $P.fnDeleteCrdnPayer($P.$find("btnDeleteCrdnPayer").attr("title"));     // 납부자 초기화
+                $P.fnDeleteCrdnPayer($P.$find("btnDeleteCrdnPayer").attr("title"));         // 납부자 초기화
             });
             $P.$find("btnUpdatePayer").on("click", () => {
-                $P.fnUpdatePayer($P.$find("btnUpdatePayer").attr("title"));             // 납부자 수정
+                $P.fnUpdatePayer($P.$find("btnUpdatePayer").attr("title"));                 // 납부자 수정
             });
-		}
+        }
 
         // 초기 화면 설정
         $P.initForm = () => {
             // 화면 호출(callPurpose)이 view라면 버튼 비활성화 disabled = true
             if (pageObject['${mainPageName}'].callPurpose == "view") {
-            	$P.$find("btnUpdateCrdn").prop("disabled", true);
-            	$P.$find("btnRemoveCrdn").prop("disabled", true);
-            	$P.$find("btnCreateCrdnReReg").prop("disabled", true);
-            	$P.$find("btnPrintNotice").prop("disabled", true);
-            	$P.$find("btnUpdateCrdnSttsCd").prop("disabled", true);
-            	$P.$find("btnDeleteCrdnPayer").prop("disabled", true);
-            	$P.$find("btnUpdatePayer").prop("disabled", true);
+                $P.$find("btnUpdateCrdn").prop("disabled", true);
+                $P.$find("btnRemoveCrdn").prop("disabled", true);
+                $P.$find("btnCreateCrdnReReg").prop("disabled", true);
+                $P.$find("btnPrintNotice").prop("disabled", true);
+                $P.$find("btnUpdateCrdnSttsCd").prop("disabled", true);
+                $P.$find("btnDeleteCrdnPayer").prop("disabled", true);
+                $P.$find("btnUpdatePayer").prop("disabled", true);
                 $P.$find("btnOpenVideoCapture").prop("disabled", true);
                 $P.$find("btnAddFile").prop("disabled", true);
                 $P.$find("btnEditPhoto").prop("disabled", true);
diff --git a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02030-info.jsp b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02030-info.jsp
index 8c4a0e71..84818b78 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02030-info.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02030-info.jsp
@@ -2,10 +2,10 @@
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
 
 <!-- Page Body -->
-<div class="content-pop">
+<div class="content-pop" data-doctx="${pageName}">
 	<!-- 입력 영역 -->
-	<form id="frmEdit--${pageName}" name="frmEdit">
-		<input type="text" id="opnnId--${pageName}" name="opnnId" data-map="OPNN_ID" hidden />
+	<form name="frmEdit">
+		<input type="hidden" name="opnnId" data-map="OPNN_ID" />
 
 		<div class="d-flex flex-row justify-content-evenly">
 			<!-- 의견제출 정보 -->
@@ -13,19 +13,19 @@
 				<div class="card">
 					<!-- 업무 버튼 -->
 					<div class="container-page-btn">
-						<label class="w-px-120 bg-label-danger pe-2 col-form-label text-sm-center">의견제출 정보</label>
+						<label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">의견제출 정보</label>
 						<!-- 버튼 우측 정렬 -->
 						<span class="container-window-btn-right">
-							<button type="button" class="btn btn-primary" id="btnCreateOpnnSbmsn--${pageName}" title="의견제출 등록">
+							<button type="button" class="btn btn-primary w-px-120" name="btnCreateOpnnSbmsn" title="의견제출 등록">
 								의견제출 등록
 							</button>
-							<button type="button" class="btn btn-primary" id="btnUpdateOpnnSbmsn--${pageName}" title="의견제출 수정">
+							<button type="button" class="btn btn-primary w-px-120" name="btnUpdateOpnnSbmsn" title="의견제출 수정">
 								의견제출 수정
 							</button>
-							<button type="button" class="btn btn-primary" id="btnRemoveOpnnSbmsn--${pageName}" title="의견제출 삭제">
+							<button type="button" class="btn btn-primary w-px-120" name="btnRemoveOpnnSbmsn" title="의견제출 삭제">
 								의견제출 삭제
 							</button>
-							<button type="button" class="btn btn-primary" id="btnPrintDlbrDecsn--${pageName}" title="심의의결서 출력">
+							<button type="button" class="btn btn-primary w-px-120" name="btnPrintDlbrDecsn" title="심의의결서 출력">
 								심의의결서 출력
 							</button>
 						</span>
@@ -34,91 +34,90 @@
 					<div class="row g-1">
 						<!-- 접수 번호 -->
 						<div class="col-md-4">
-							<label for="rcptNoMask--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">접수번호</label>
-							<input type="text" class="form-control w-30" id="rcptNoMask--${pageName}" name="rcptNoMask" data-map="RCPT_NO_MASK" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rcptNoMask">접수번호</label>
+							<input is="id-input" type="text" class="form-control w-30" name="rcptNoMask" data-map="RCPT_NO_MASK" readonly />
 						</div>
 						<!-- 접수 일자 -->
 						<div class="col-md-4">
-							<label for="rcptYmd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">접수일자</label>
-							<input type="text" class="form-control w-30" id="rcptYmd--${pageName}" name="rcptYmd" data-map="RCPT_YMD" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rcptYmd">접수일자</label>
+							<input is="id-input" type="text" class="form-control w-30" name="rcptYmd" data-map="RCPT_YMD" readonly />
 						</div>
 						<!-- 접수 구분 -->
 						<div class="col-md-4">
-							<label for="rcptSeNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">접수구분</label>
-							<input type="text" class="form-control w-30" id="rcptSeNm--${pageName}" name="rcptSeNm" data-map="RCPT_SE_NM" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rcptSeNm">접수구분</label>
+							<input is="id-input" type="text" class="form-control w-30" name="rcptSeNm" data-map="RCPT_SE_NM" readonly />
 						</div>
 						<!-- 진술자 이름 -->
 						<div class="col-md-4">
-							<label for="sttrNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">성명</label>
-							<input type="text" class="form-control w-40" id="sttrNm--${pageName}" name="sttrNm" data-map="STTR_NM" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="sttrNm">성명</label>
+							<input is="id-input" type="text" class="form-control w-40" name="sttrNm" data-map="STTR_NM" readonly />
 						</div>
 						<!-- 진술자 생년월일 -->
 						<div class="col-md-4">
-							<label for="sttrBrdtMask--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">생년월일</label>
-							<input type="text" class="form-control w-30" id="sttrBrdtMask--${pageName}" name="sttrBrdtMask" data-map="STTR_BRDT_MASK" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="sttrBrdtMask">생년월일</label>
+							<input is="id-input" type="text" class="form-control w-30" name="sttrBrdtMask" data-map="STTR_BRDT_MASK" readonly />
 						</div>
 						<!-- 소유주 관계 구분 명 -->
 						<div class="col-md-4">
-							<label for="ownrRelNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">소유주관계</label>
-							<input type="text" class="form-control w-40" id="ownrRelNm--${pageName}" name="ownrRelNm" data-map="OWNR_REL_NM" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ownrRelNm">소유주관계</label>
+							<input is="id-input" type="text" class="form-control w-40" name="ownrRelNm" data-map="OWNR_REL_NM" readonly />
 						</div>
 						<!-- 진술자 주소 --><!-- 진술자 우편번호 -->
 						<div class="col-md-12">
-							<label for="sttrAddr--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">주소</label>
-							<input type="text" class="form-control w-80" id="sttrAddr--${pageName}" name="sttrAddr" data-map="STTR_ADDR" readonly />
-							<input type="text" class="form-control w-px-75" id="sttrZip--${pageName}" name="sttrZip" data-map="STTR_ZIP" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="sttrAddr">주소</label>
+							<input is="id-input" type="text" class="form-control w-80" name="sttrAddr" data-map="STTR_ADDR" readonly />
+							<input is="id-input" type="text" class="form-control w-px-75" name="sttrZip" data-map="STTR_ZIP" readonly />
 						</div>
 						<!-- 진술자 상세주소 -->
 						<div class="col-md-12">
-							<label for="sttrDaddr--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">상세주소</label>
-							<input type="text" class="form-control w-87" id="sttrDaddr--${pageName}" name="sttrDaddr" data-map="STTR_DADDR" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="sttrDaddr">상세주소</label>
+							<input is="id-input" type="text" class="form-control w-87" name="sttrDaddr" data-map="STTR_DADDR" readonly />
 						</div>
 						<!-- 진술자 연락처 -->
 						<div class="col-md-4">
-							<label for="sttrCttpc--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">연락처</label>
-							<input type="text" class="form-control w-35" id="sttrCttpc--${pageName}" name="sttrCttpc" data-map="STTR_CTTPC" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="sttrCttpc">연락처</label>
+							<input is="id-input" type="text" class="form-control w-35" name="sttrCttpc" data-map="STTR_CTTPC" readonly />
 						</div>
 						<!-- 진술자 이메일 -->
 						<div class="col-md-8">
-							<label for="sttrEml--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">이메일</label>
-							<input type="text" class="form-control w-35" id="sttrEml--${pageName}" name="sttrEml" data-map="STTR_EML" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="sttrEml">이메일</label>
+							<input is="id-input" type="text" class="form-control w-35" name="sttrEml" data-map="STTR_EML" readonly />
 						</div>
 						<!-- 의견 제출 내용 -->
 						<div class="col-md-12">
-							<label for="opnnSbmsnCn--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">의견제출내용</label>
-							<textarea type="text" class="form-control w-87" id="opnnSbmsnCn--${pageName}" name="opnnSbmsnCn" data-map="OPNN_SBMSN_CN" rows="4" data-maxlengthb="4000" readonly></textarea>
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end align-top" for="opnnSbmsnCn">의견제출내용</label>
+							<textarea is="id-textarea" type="text" class="form-control w-87" name="opnnSbmsnCn" data-map="OPNN_SBMSN_CN" rows="4" data-maxlengthb="4000" readonly></textarea>
 						</div>
 						<!-- 의견 제출 구분 명 -->
 						<div class="col-md-4">
-							<label for="opnnSbmsnSeNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">의견제출구분</label>
-							<input type="text" class="form-control w-50" id="opnnSbmsnSeNm--${pageName}" name="opnnSbmsnSeNm" data-map="OPNN_SBMSN_SE_NM" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="opnnSbmsnSeNm">의견제출구분</label>
+							<input is="id-input" type="text" class="form-control w-50" name="opnnSbmsnSeNm" data-map="OPNN_SBMSN_SE_NM" readonly />
 						</div>
 						<!-- 의견 제출 요지 -->
 						<div class="col-md-8">
-							<label for="opnnSbmsnGist--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">의견제출요지</label>
-							<input type="text" class="form-control w-80" id="opnnSbmsnGist--${pageName}" name="opnnSbmsnGist" data-map="OPNN_SBMSN_GIST" data-maxlengthb="300" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="opnnSbmsnGist">의견제출요지</label>
+							<input is="id-input" type="text" class="form-control w-80" name="opnnSbmsnGist" data-map="OPNN_SBMSN_GIST" data-maxlengthb="300" readonly />
 						</div>
 						<!-- 담당자 검토 의견 -->
 						<div class="col-md-12">
-							<label for="picRvwOpnn--${pageName}" class="w-px-120  bg-lighter pe-2 col-form-label text-sm-end">검토의견</label>
-							<textarea class="form-control w-87" id="picRvwOpnn--${pageName}" name="picRvwOpnn" data-map="PIC_RVW_OPNN" rows="3" data-maxlengthb="1000" readonly>
-							</textarea>
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end align-top" for="picRvwOpnn">검토의견</label>
+							<textarea is="id-textarea" type="text" class="form-control w-87" name="picRvwOpnn" data-map="PIC_RVW_OPNN" rows="2" data-maxlengthb="1000" readonly></textarea>
 						</div>
                         <!-- 등록 일시 / 등록자 -->
                         <div class="col-md-6">
-                            <label for="regDt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">등록일시</label>
-                            <input type="text" class="form-control w-30" id="regDt--${pageName}" name="regDt" data-map="REG_DT" readonly />
-                            <input type="text" class="form-control w-25" id="rgtrNm--${pageName}" name="rgtrNm" data-map="RGTR_NM" readonly />
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="regDt">등록일시</label>
+                            <input is="id-input" type="text" class="form-control w-30" name="regDt" data-map="REG_DT" readonly />
+                            <input is="id-input" type="text" class="form-control w-25" name="rgtrNm" data-map="RGTR_NM" readonly />
                         </div>
                         <!-- 수정 일시 / 수정자 -->
                         <div class="col-md-6">
-                            <label for="mdfcnDt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">수정일시</label>
-                            <input type="text" class="form-control w-30" id="mdfcnDt--${pageName}" name="mdfcnDt" data-map="MDFCN_DT" readonly />
-                            <input type="text" class="form-control w-25" id="mdfrNm--${pageName}" name="mdfrNm" data-map="MDFR_NM" readonly />
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="mdfcnDt">수정일시</label>
+                            <input is="id-input" type="text" class="form-control w-30" name="mdfcnDt" data-map="MDFCN_DT" readonly />
+                            <input is="id-input" type="text" class="form-control w-25" name="mdfrNm" data-map="MDFR_NM" readonly />
                         </div>
 						<!-- 첨부 파일 테이블 -->
 						<div class="table-responsive">
-							<table class="table table-bordered table-hover table-striped" id="fileList--${pageName}">
+							<table class="table table-bordered table-hover table-striped" name="fileList">
 								<thead>
 									<th class="text-center" style="width: 24px">No.</th>
 									<th class="text-center" style="width: 200px">파일번호</th>
@@ -126,7 +125,8 @@
 									<th class="text-center" style="width: 200px">파일크기</th>
 									<th class="text-center" style="width: 120px">다운로드</th>
 								</thead>
-								<tbody></tbody>
+                                <tbody name="tbodyFileList">
+                                </tbody>
 							</table>
 						</div> <!-- 첨부 파일 테이블 <div class="table-responsive"> -->
 					</div> <!-- <div class="row g-1"> -->
@@ -142,7 +142,7 @@
 						<label class="w-px-120 bg-label-danger pe-2 col-form-label text-sm-center">심의 정보</label>
 						<!-- 버튼 우측 정렬 -->
 						<span class="container-window-btn-right">
-							<button type="button" class="btn btn-primary" id="btnUpdateOpnnSbmsnDlbrt--${pageName}" title="의견제출 심의">
+							<button type="button" class="btn btn-primary w-px-120" name="btnUpdateOpnnSbmsnDlbrt" title="의견제출 심의">
 								의견제출 심의
 							</button>
 						</span>
@@ -151,318 +151,331 @@
 					<div class="row g-1">
 						<!-- 문서 번호 -->
 						<div class="col-md-12">
-							<label for="docNo--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">문서번호</label>
-							<input type="text" class="form-control w-45" id="docNo--${pageName}" name="docNo" data-map="DOC_NO" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="docNo">문서번호</label>
+							<input is="id-input" type="text" class="form-control w-45" name="docNo" data-map="DOC_NO" readonly />
 						</div>
 						<!-- 통보 구분 -->
 						<div class="col-md-12">
-							<label for="ntfctnSeNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">통보구분</label>
-							<input type="text" class="form-control w-30" id="ntfctnSeNm--${pageName}" name="ntfctnSeNm" data-map="NTFCTN_SE_NM" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ntfctnSeNm">통보구분</label>
+							<input is="id-input" type="text" class="form-control w-30" name="ntfctnSeNm" data-map="NTFCTN_SE_NM" readonly />
 						</div>
 						<!-- 의견 제출 상태 코드 -->
 						<div class="col-md-12">
-							<label for="opnnSbmsnSttsNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">심의결과</label>
-							<input type="text" class="form-control w-30" id="opnnSbmsnSttsNm--${pageName}" name="opnnSbmsnSttsNm" data-map="OPNN_SBMSN_STTS_NM" readonly />
-							<input type="hidden" id="opnnSbmsnSttsCd--${pageName}" name="opnnSbmsnSttsCd" data-map="OPNN_SBMSN_STTS_CD" />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="opnnSbmsnSttsNm">심의결과</label>
+							<input is="id-input" type="text" class="form-control w-30" name="opnnSbmsnSttsNm" data-map="OPNN_SBMSN_STTS_NM" readonly />
+							<input is="id-input" type="hidden" name="opnnSbmsnSttsCd" data-map="OPNN_SBMSN_STTS_CD" />
 						</div>
-						<!-- 답변일시 -->
+						<!-- 답변 일시 -->
 						<div class="col-md-12">
-							<label for="ansYmdTm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">심의일시</label>
-							<input type="text" class="form-control w-45" id="ansYmdTm--${pageName}" name="ansYmdTm" data-map="ANS_YMD_TM" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ansYmdTm">심의일시</label>
+							<input is="id-input" type="text" class="form-control w-45" name="ansYmdTm" data-map="ANS_YMD_TM" readonly />
 						</div>
-						<!-- 답변 내용 -->
+						<!-- 심의 내용 -->
 						<div class="col-md-12">
-							<label for="ansCn--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">심의내용</label>
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ansCn">심의내용</label>
 						</div>
 						<div class="col-md-12">
-							<textarea type="text" class="form-control w-100" id="ansCn--${pageName}" name="ansCn" data-map="ANS_CN" rows="14" data-maxlengthb="4000"></textarea>
+							<textarea is="id-textarea" type="text" class="form-control w-100" name="ansCn" data-map="ANS_CN" rows="14" data-maxlengthb="4000"></textarea>
 						</div>
 					</div>
 				</div> <!-- <div class="card"> -->
 			</div> <!-- <div class="col-xl-3 mx-0"> -->
 			<!-- 심의 정보 -->
 		</div> <!-- <div class="d-flex flex-row justify-content-evenly"> -->
-
-		<span id="tempArea--${pageName}" hidden></span>
 	</form>
 	<!-- 입력 영역 -->
 </div> <!-- <div class="content-pop"> -->
 
 <script>
-	/**************************************************************************
-	 * Global Variable
-	 **************************************************************************/
-	pageObject["${pageName}"] = {};
-
-	/**************************************************************************
-	 * script 진입
-	 **************************************************************************/
-	$(document).ready(function() {
-		// pageObject
-		let $P = pageObject["${pageName}"];
-
-		// FormFields
-	 	$P.formFields = new FimsFormFields("#frmEdit--${pageName}");
-	 	// 파일 리스트
-	 	$P.fileListArr = new Array();
-
-		/**************************************************************************
-		 * DatasetControl
-		 **************************************************************************/
-		$P.control = new DatasetControl({
-			  prefix: "opnn"
-			, prefixName: "의견제출"
-			, keymapper: info => info ? info.OPNN_ID : ""
-			, dataGetter: obj => obj.opnnSbmsnInfo
-			, formats: {
-				  RCPT_YMD: dateFormat
-				, ANS_YMD_TM: datetimeFormat
-				, REG_DT: datetimeFormat
-				, MDFCN_DT: datetimeFormat
-			}
-		});
-
-		/**************************************************************************
-		 * DatasetControl 이벤트
-		 **************************************************************************/
-		// 현재 선택 자료 변경 이벤트
-		$P.control.onCurrentChange = item => {
-			if (!item) return;
-
-			$P.formFields.set($P.control, item);
-
-			let key = item.data.OPNN_ID;
-
-			// 첨부파일 조회
-	 		if (key != null) {
-	 			$P.fnSearchFileList(item.data.OPNN_ID);
-	 		}
-		}
-
-		// 의견제출 dialog
-		$P.control.getInfo = (params) => {
-			if (!params) return;
-
-			ajax.get({
-				  url: wctx.url("/" + params.taskSeCd + "/excl/excl02/020/info.do") + "?openerPageName=${pageName}"
-				, data: params || {}
-				, success: resp => {
-					if ((typeof resp) != "string") {
-						if (resp.rtnMsg != "") {
-							dialog.alert(resp.rtnMsg);
-						}
-						return;
-					} else {
-						dialog.open({
-							  id: $P.control.prefixed("Dialog--${pageName}")
-							, title: params.title
-							, content: resp
-							, size: "lg"
-							, onClose: () => { $P.fnRefreshDataInfo(); }		// 자료 재조회
-						});
-					}
-				}
-			});
-		}
-
-		// 삭제 callback
-		$P.control.onRemove = (resp) => {
-			let btnTitle = $("#btnRemoveOpnnSbmsn--${pageName}").attr("title");
-	  		let showMessage = resp.rtnMsg.replace(/[S]|[F]/g, btnTitle);
-
-			dialog.alert({
-				  content: showMessage
-				, onOK: () => { }
-			});
-
-			if (resp.saved) { $P.fnRefreshDataInfo(); }            				// 자료 재조회
-		}
-
-		// 삭제
-		$P.control.remove = (params) => {
-			if (!params) return;
-
-			ajax.post({
-				  url: wctx.url("/" + params.taskSeCd + "/excl/excl02/010/remove.do")
-				, data: params || {}
-				, success: resp => $P.control.onRemove(resp)
-			});
-		}
-
-		/**************************************************************************
-		 * 사용자 함수(function)
-		 **************************************************************************/
-		// 자료 재조회
-		$P.fnRefreshDataInfo = () => {
-			// 단속 ID
-			let crdnId = $("#crdnId--${pageNameMain}").val();
-			// 단속 ID 가 없다면.. return
-			if (typeof crdnId == "undefined" || crdnId == null || crdnId == "") return;
-
-			let params = {
-				  callPurpose: "refresh"
-				, crdnId: crdnId
-				, sggCd: $("#sggCd--${pageNameMain}").val()
-				, taskSeCd: $("#taskSeCd--${pageNameMain}").val()
-				, delYn: "N"
-			};
-
-			ajax.get({
-				  url: wctx.url("/" + params.taskSeCd + "/sprt/sprt02/030/info.do")
-				, headers: { Accept: "application/json; charset=utf-8" }		// json
-				, data: params || {}
-				, success: resp => {
-					// 초기화
-					$("#frmEdit--${pageName}")[0].reset();						// 화면 초기화
-					$P.control.dataset.clear();									// Dataset 초기화
-
-					// sprt02010-main 단속 정보
-					pageObject["${pageNameMain}"].mainControl.setData([resp.totalInfo]);
-
-					// 의견제출 정보
-					if (resp.opnnSbmsnInfo) { $P.control.setData([resp.opnnSbmsnInfo]); }
-				}
-			});
-		}
-
-		// 심의 dialog
-		$P.getOpnnSbmsnDlbrtInfo = (params) => {
-			if (!params) return;
-
-			ajax.get({
-				  url: wctx.url("/" + params.taskSeCd + "/excl/excl02/030/info.do") + "?openerPageName=${pageName}"
-				, data: params || {}
-				, success: resp => {
-					dialog.open({
-						  id: "opnnDlbrDialog--${pageName}"
-						, title: params.title
-						, content: resp
-						, size: "lg"
-						, onClose: () => { $P.fnRefreshDataInfo(); }			// 자료 재조회
-					});
-				}
-			});
-		}
-
-		// 사유 callback
-		$P.callbackRsn = (obj) => {
-			// 서버에 전송할 data(파라미터) 생성
-			let params = {
-				  callPurpose: "remove"
-				, sggCd: $P.control.dataset.getValue("SGG_CD")					// 시군구 코드
-				, taskSeCd: $P.control.dataset.getValue("TASK_SE_CD")			// 업무 구분 코드
-				, opnnId: $P.control.dataset.getValue("OPNN_ID")				// 의견제출 ID
-				, delRsn: obj.reason											// 삭제 사유
-			};
-
-			$P.control.remove(params);
-		}
-
-		// 심의의결서 출력
-		$P.makeHwpFileDlbrDecsn = (params) => {
-			if (!params) return;
-
-			let url = wctx.url("/" + params.taskSeCd + "/excl/excl02/010/makeHwp.do")
-
-			let parameter = toQuery({
-				  opnnIds: params.opnnIds
-				, taskSeCd: params.taskSeCd
-			});
-
-			document.location.href = url + "?" + parameter;
-		}
-
-		/**************************************************************************
-		 * 버튼 clickEvent
-		 **************************************************************************/
-		// 의견제출 등록 버튼 이벤트
-		$P.fnCreateOpnnSbmsn = (title) => {
-			// 단속 ID
-			let crdnId = $("#crdnId--${pageNameMain}").val();
-			// 단속 ID 가 없다면.. return
-			if (typeof crdnId == "undefined" || crdnId == null || crdnId == "") return;
-
-			// 단속 상태 코드
-			let crdnSttsCd = $("#crdnSttsCd--${pageNameMain}").val();
-			let crdnSttsNm = $("#crdnSttsNm--${pageNameMain}").val();
-			// 단속 상태 코드 확인
-			if (Number(crdnSttsCd) < 01 || Number(crdnSttsCd) > 45) {
-				dialog.alert({
-					  content: "[" + title + "]" + " 작업은 단속상태가 '부과 이전' 자료만 처리 가능합니다."
-							+ "<br>" + "단속상태 : " + crdnSttsNm
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose: "create"
-				, title: title
-				, sggCd: $("#sggCd--${pageNameMain}").val()						// 시군구 코드
-				, taskSeCd: $("#taskSeCd--${pageNameMain}").val()				// 업무 구분 코드
-				, crdnId: crdnId												// 단속 ID
-			};
-
-			$P.control.getInfo(params);
-		}
-
-		// 의견제출 수정 버튼 이벤트
-		$P.fnUpdateOpnnSbmsn = (title) => {
-			// 의견제출 ID
-			let opnnId = $P.control.dataset.getValue("OPNN_ID");
-			// 의견제출 ID 가 없다면.. return
-			if (typeof opnnId == "undefined" || opnnId == null || opnnId == "") {
-				dialog.alert({
-					  content: "조회된 의견제출 대장 정보가 없습니다."
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose: "update"
-				, title: title
-				, sggCd: $P.control.dataset.getValue("SGG_CD")					// 시군구 코드
-				, taskSeCd: $P.control.dataset.getValue("TASK_SE_CD")			// 업무 구분 코드
-				, opnnId: opnnId												// 의견제출 ID
-			};
-
-			$P.control.getInfo(params);
-		}
-
-		// 의견제출 삭제 버튼 이벤트
-		$P.fnRemoveOpnnSbmsn = (title) => {
-			// 의견제출 ID
-			let opnnId = $P.control.dataset.getValue("OPNN_ID");
-			// 의견제출 ID 가 없다면.. return
-			if (typeof opnnId == "undefined" || opnnId == null || opnnId == "") {
-				dialog.alert({
-					  content: "조회된 의견제출 대장 정보가 없습니다."
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			// 의견제출 상태 코드
-			let opnnSbmsnSttsCd = $("#opnnSbmsnSttsCd--${pageName}").val();
-			let opnnSbmsnSttsNm = $("#opnnSbmsnSttsNm--${pageName}").val();
-			// 의견제출 상태 코드 확인
-			if (opnnSbmsnSttsCd != '00' && opnnSbmsnSttsCd != '03') {
-				dialog.alert({
-					  content: "[" + title + "]" + " 작업은 심의결과가 '접수', '자진취하' 자료만 삭제 가능합니다."
-				  		+ "<br>" + "심의결과 : " + opnnSbmsnSttsNm
-						+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
+    /**************************************************************************
+     * Global Variable
+     **************************************************************************/
+    pageObject["${pageName}"] = newDoctxFinder("${pageName}");
+
+    /**************************************************************************
+     * script 진입
+     **************************************************************************/
+    $(document).ready(function() {
+        // pageObject
+        let $P = pageObject["${pageName}"];
+
+        // FormFields
+        $P.formFields = new FimsFormFields($P.selector("frmEdit"));
+        // 파일 리스트
+        $P.fileListArr = new Array();
+
+        /**************************************************************************
+         * DatasetControl
+         **************************************************************************/
+        $P.ctrl = new DatasetControl({
+              prefix: "opnn"
+            , prefixName: "의견제출"
+            , keymapper: info => info ? info.OPNN_ID : ""
+            , dataGetter: obj => obj.opnnInfo
+            , formats: {
+                  RCPT_YMD: dateFormat
+                , ANS_YMD_TM: datetimeFormat
+                , REG_DT: datetimeFormat
+                , MDFCN_DT: datetimeFormat
+            }
+        });
+
+        /**************************************************************************
+         * DatasetControl 이벤트
+         **************************************************************************/
+        // 현재 선택 자료 변경 이벤트
+        $P.ctrl.onCurrentChange = (item) => {
+            if (!item) return;
+
+            $P.formFields.set($P.ctrl, item);
+
+            let key = item.data.OPNN_ID;
+
+            // 첨부파일 조회
+            if (key != null) { $P.fnSearchFileList(key); }
+        }
+
+        // 의견제출 정보 dialog
+        $P.ctrl.getInfo = (params) => {
+            if (!params) return;
+
+            ajax.get({
+                  url: wctx.url("/" + params.taskSeCd + "/excl/excl02/020/info.do")
+                , data: params || {}
+                , success: (resp) => {
+                    if ((typeof resp) != "string") {
+                        if (resp.rtnMsg != "") {
+                            dialog.alert(resp.rtnMsg);
+                        }
+                        return;
+                    } else {
+                        let dialogName = $P.ctrl.prefixed("Dialog");
+                        let dialogId = dialogName + "-" + uuid();
+
+                        dialog.open({
+                              id: dialogId
+                            , title: params.btnTitle
+                            , size: "lg"
+                            , content: resp
+                            , init: () => {
+                                setDialogZindex();
+
+                                $("#" + dialogId).attr("name", dialogName);
+                                $("#" + dialogId).attr("data-ref-doctx", "${pageName}");
+                            }
+                            , onClose: () => { $P.fnRefreshDataInfo(); }        // 자료 재조회
+                        });
+                    }
+                }
+            });
+        }
+
+        // 삭제 callback
+        $P.ctrl.onRemove = (params, resp) => {
+            let showMessage = resp.rtnMsg.replace(/[S]|[F]/g, params.btnTitle);
+
+            dialog.alert({
+                  content: showMessage
+                , init: () => { setDialogZindex(); }
+                , onOK: () => { }
+                , onClose: () => {
+                    if (resp.saved) {
+                    	$P.fnSearchFileList();                                  // 첨부파일 조회
+                    	$P.fnRefreshDataInfo();                                 // 자료 재조회
+                    }
+                }
+            });
+        }
+
+        // 삭제
+        $P.ctrl.remove = (params) => {
+            if (!params) return;
+
+            ajax.post({
+                  url: wctx.url("/" + params.taskSeCd + "/excl/excl02/010/remove.do")
+                , data: params || {}
+                , success: (resp) => {
+                    $P.ctrl.onRemove(params, resp);
+                }
+            });
+        }
+
+        /**************************************************************************
+         * 사용자 함수(function)
+         **************************************************************************/
+        // 자료 재조회
+        $P.fnRefreshDataInfo = () => {
+            let crdnId = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID");    // 단속 ID
+
+            // 단속 ID 가 없다면.. return
+            if (!crdnId) return;
+
+            let params = {
+                  callPurpose: "refresh"
+                , sggCd: pageObject["${mainPageName}"].mainCtrl.getValue("SGG_CD")
+                , taskSeCd: pageObject["${mainPageName}"].mainCtrl.getValue("TASK_SE_CD")
+                , crdnId: pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID")
+                , delYn: "N"
+            };
+
+            ajax.get({
+                  url: wctx.url("/" + params.taskSeCd + "/sprt/sprt02/030/info.do")
+                , headers: { Accept: "application/json; charset=utf-8" }        // json
+                , data: params || {}
+                , success: (resp) => {
+                    // 초기화
+                    $P.find("frmEdit").reset();                                 // 화면 초기화
+
+                    $P.ctrl.dataset.clear();                                    // Dataset 초기화
+
+                    // sprt02010-main 단속 정보
+                    pageObject["${mainPageName}"].mainCtrl.setData([resp.totalInfo]);
+
+                    // Dataset 셋팅
+                    if (resp.opnnInfo) {
+                        $P.ctrl.setData([resp.opnnInfo]);                       // 의견제출 정보
+                    }
+                }
+            });
+        }
+
+        // 심의 dialog
+        $P.getOpnnSbmsnDlbrtInfo = (params) => {
+            if (!params) return;
+
+            ajax.get({
+                  url: wctx.url("/" + params.taskSeCd + "/excl/excl02/030/info.do")
+                , data: params || {}
+                , success: (resp) => {
+                    let dialogName = "opnnDlbrDialog";
+                    let dialogId = dialogName + "-" + uuid();
+
+                    dialog.open({
+                          id: dialogId
+                        , title: params.btnTitle
+                        , size: "lg"
+                        , content: resp
+                        , init: () => {
+                            setDialogZindex();
+
+                            $("#" + dialogId).attr("name", dialogName);
+                            $("#" + dialogId).attr("data-ref-doctx", "${pageName}");
+                        }
+                        , onClose: () => { $P.fnRefreshDataInfo(); }            // 자료 재조회
+                    });
+                }
+            });
+        }
+
+        // 삭제 사유 callback
+        $P.callbackRsn = (obj) => {
+            // 서버에 전송할 data(파라미터) 생성
+            let params = {
+                  callPurpose: "remove"
+                , sggCd: $P.ctrl.getValue("SGG_CD")                             // 시군구 코드
+                , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")                      // 업무 구분 코드
+                , opnnId: $P.ctrl.getValue("OPNN_ID")                           // 의견제출 ID
+                , btnTitle: obj.btnTitle                                        // 버튼 title
+                , delRsn: obj.reason                                            // 삭제 사유
+            };
+
+            $P.ctrl.remove(params);
+        }
+
+        // 심의의결서 출력
+        $P.makeHwpFileDlbrDecsn = (params) => {
+            if (!params) return;
+
+            let url = wctx.url("/" + params.taskSeCd + "/excl/excl02/010/makeHwp.do")
+
+            let parameter = toQuery({
+                  opnnIds: params.opnnIds
+                , taskSeCd: params.taskSeCd
+            });
+
+            document.location.href = url + "?" + parameter;
+        }
+
+        /**************************************************************************
+         * 버튼 clickEvent
+         **************************************************************************/
+        // 의견제출 등록 버튼 이벤트
+        $P.fnCreateOpnnSbmsn = (btnTitle) => {
+            let crdnId = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID");        // 단속 ID
+
+            // 단속 ID 가 없다면.. return
+            if (!crdnId) return;
+
+            let params = {
+                  callPurpose: "create"
+                , btnTitle: btnTitle
+                , sggCd: pageObject["${mainPageName}"].mainCtrl.getValue("SGG_CD")          // 시군구 코드
+                , taskSeCd: pageObject["${mainPageName}"].mainCtrl.getValue("TASK_SE_CD")   // 업무 구분 코드
+                , crdnId: pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID")        // 단속 ID
+                , delYn: "N"
+            };
+
+            $P.ctrl.getInfo(params);
+        }
+
+        // 의견제출 수정 버튼 이벤트
+        $P.fnUpdateOpnnSbmsn = (btnTitle) => {
+            let opnnId = $P.ctrl.getValue("OPNN_ID");                           // 의견제출 ID
+
+            // 의견제출 ID 가 없다면.. return
+            if (!opnnId) {
+                dialog.alert({
+                      content: "조회된 의견제출 대장 정보가 없습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            let params = {
+                  callPurpose: "update"
+                , btnTitle: btnTitle
+                , sggCd: $P.ctrl.getValue("SGG_CD")                             // 시군구 코드
+                , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")                      // 업무 구분 코드
+                , crdnId: $P.ctrl.getValue("CRDN_ID")                           // 단속 ID
+                , opnnId: $P.ctrl.getValue("OPNN_ID")                           // 의견제출 ID
+            };
+
+            $P.ctrl.getInfo(params);
+        }
+
+        // 의견제출 삭제 버튼 이벤트
+        $P.fnRemoveOpnnSbmsn = (btnTitle) => {
+            let opnnId = $P.ctrl.getValue("OPNN_ID");                           // 의견제출 ID
+
+            // 의견제출 ID 가 없다면.. return
+            if (!opnnId) {
+                dialog.alert({
+                      content: "조회된 의견제출 대장 정보가 없습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            // 의견제출 상태 코드
+            let opnnSbmsnSttsCd = $P.ctrl.getValue("OPNN_SBMSN_STTS_CD");
+            let opnnSbmsnSttsNm = $P.ctrl.getValue("OPNN_SBMSN_STTS_NM");
+
+            // 의견제출 상태 코드 확인
+            if (opnnSbmsnSttsCd != '00' && opnnSbmsnSttsCd != '03') {
+                dialog.alert({
+                      content: "[" + btnTitle + "]" + " 작업은 심의결과가 '접수', '자진취하' 자료만 삭제 가능합니다."
+                            + "<br>" + "심의결과 : " + opnnSbmsnSttsNm
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , onOK: () => { }
+                });
+                return;
+            }
 
             // 삭제 메세지 확인
             dialog.alert({
-                  content: "선택하신 " + selected.length + "건의 " + $P.control.prefixName + " 정보를 삭제하시겠습니까?"
+                  content: "선택하신 " + $P.ctrl.prefixName + " 정보를 삭제하시겠습니까?"
                 , onOK: () => {
                     // 삭제 사유 입력
                     fetch(wctx.url("/resources/html/inputRsnDialog.html"))
@@ -470,196 +483,190 @@
                         .then(function(template) {
                             dialog.open({
                                   id: "inputDelRsnDialog"
-                                , title: title
+                                , title: btnTitle
                                 , size: "lg"
                                 , content: template
                                 , init: () => { setDialogZindex(); }
                                 , onOK: () => {
-                                    $P.callbackRsn({ reason: $("#reason").val() });
+                                    $P.callbackRsn({
+                                    	  btnTitle: btnTitle                    // 버튼 title
+                                        , reason: $("#reason").val()            // 삭제 사유
+                                    });
                                 }
                             });
                         });
                 }
             });
-		}
-
-		// 심의의결서 출력 버튼 이벤트
-		$P.fnPrintDlbrDecsn = (title) => {
-			// 의견제출 ID
-			let opnnId = $P.control.dataset.getValue("OPNN_ID");
-			// 의견제출 ID 가 없다면.. return
-			if (typeof opnnId == "undefined" || opnnId == null || opnnId == "") {
-				dialog.alert({
-					  content: "조회된 의견제출 대장 정보가 없습니다."
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose: "download"
-				, title: title
-				, sggCd: $P.control.dataset.getValue("SGG_CD")					// 시군구 코드
-				, taskSeCd: $P.control.dataset.getValue("TASK_SE_CD")			// 업무 구분 코드
-				, opnnIds: opnnId												// 의견제출 ID
-			};
-
-			$P.makeHwpFileDlbrDecsn(params);
-		}
-
-		// 의견제출 심의 버튼 이벤트
-		$P.fnUpdateOpnnSbmsnDlbrt = (title) => {
-			// 의견제출 ID
-			let opnnId = $P.control.dataset.getValue("OPNN_ID");
-			// 의견제출 ID 가 없다면.. return
-			if (typeof opnnId == "undefined" || opnnId == null || opnnId == "") {
-				dialog.alert({
-					  content: "조회된 의견제출 대장 정보가 없습니다."
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			// 단속 상태 코드
-			let crdnSttsCd = $("#crdnSttsCd--${pageNameMain}").val();
-			let crdnSttsNm = $("#crdnSttsNm--${pageNameMain}").val();
-			// 단속 상태 코드 확인
-			if ( (Number(crdnSttsCd) != 82 && Number(crdnSttsCd) != 87) && (Number(crdnSttsCd) < 21 || Number(crdnSttsCd) > 45) ) {
-				dialog.alert({
-					  content: "[" + title + "]" + " 작업은 단속상태가 '의견제출수용', '경찰서이첩', '부과 이전' 자료만 처리 가능합니다."
-							+ "<br>" + "단속상태 : " + crdnSttsNm
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose: "update"
-				, title: title
-				, sggCd: $P.control.dataset.getValue("SGG_CD")					// 시군구 코드
-				, taskSeCd: $P.control.dataset.getValue("TASK_SE_CD")			// 업무 구분 코드
-				, opnnId: opnnId												// 의견제출 ID
-			};
-
-			$P.getOpnnSbmsnDlbrtInfo(params);
-		}
-
-		// 첨부파일 조회
-		$P.fnSearchFileList = (opnnId) => {
-			// 의견제출 등록일 경우에는 첨부파일을 조회하지 안는다..
-			if (typeof opnnId == "undefined" || opnnId == null || opnnId == "") return;
-
-			let iLoop = 0;
-			// 기존 table에 자료가 존재하면 table 삭제
-			let fileListTable = document.getElementById("fileList--${pageName}");	// table element 찾기
-
-			if (fileListTable.rows.length == 1) { iLoop = 2; }
-			else { iLoop = 1; }
-
-			for (iLoop; iLoop <= fileListTable.rows.length; iLoop++) {
-				let newRow = fileListTable.deleteRow(fileListTable.rows.length-1);	// table 행(Row) 삭제
-			}
-
-		    // 첨부파일 리스트
-		    ajax.get({
-				  url : "file/list.do"
-				, data : {
-					  infoType : "110"
-					, infoKeys : opnnId
-					, fetchSize : 0
-				}
-				, success : resp => {
-					let fileNo = 0;
-					let fileList = resp.fileList;
-
-					fileList.forEach(function (item, index, array) {
-						fileNo = index + 1;
-
-						let innerHtml = "";
-
-						innerHtml += "<tr>";
-						innerHtml += "<td class='text-center'>" + fileNo + "</td>";
-						innerHtml += "<td class='text-center'>" + item.FILE_ID + "</td>";
-						innerHtml += "<td class='text-center'>" + item.FILE_NM + "</td>";
-						innerHtml += "<td class='text-center'>" + item.FILE_SIZE + " byte</td>";
-						innerHtml += "<td class='text-center'>" + "<button type='button' class='btn' onclick=";
-						innerHtml += "pageObject['${pageName}'].fnFileDownload(" + item.FILE_ID + ");" + "><i class='bx bx-download me-1'></i></button>" + "</td>";
-						innerHtml += "</tr>";
-
-						$("#fileList--${pageName} > tbody:last").append(innerHtml);
-					});
-				}
-			});
-		}
-
-		// 첨부파일 다운로드 버튼 이벤트
-		$P.fnFileDownload = (fileID) => {
-			if (pageObject['${pageNameMain}'].callPurpose == "view") { return; }
-
-			top.location.href = "/file/download.do?fileID=" + fileID;
-		}
-
-		/**************************************************************************
-		 * 초기 셋팅
-		 **************************************************************************/
-		// 이벤트 설정
-		$P.setEvent = () => {
-			// 의견제출 등록 버튼 이벤트
-			$("#btnCreateOpnnSbmsn--${pageName}").on("click", function() {
-				$P.fnCreateOpnnSbmsn($(this).attr("title"));
-			});
-			// 의견제출 수정 버튼 이벤트
-			$("#btnUpdateOpnnSbmsn--${pageName}").on("click", function() {
-				$P.fnUpdateOpnnSbmsn($(this).attr("title"));
-			});
-			// 의견제출 삭제 버튼 이벤트
-			$("#btnRemoveOpnnSbmsn--${pageName}").on("click", function() {
-				$P.fnRemoveOpnnSbmsn($(this).attr("title"));
-			});
-			// 심의의결서 출력 버튼 이벤트
-			$("#btnPrintDlbrDecsn--${pageName}").on("click", function() {
-				$P.fnPrintDlbrDecsn($(this).attr("title"));
-			});
-			// 의견제출 심의 버튼 이벤트
-			$("#btnUpdateOpnnSbmsnDlbrt--${pageName}").on("click", function() {
-				$P.fnUpdateOpnnSbmsnDlbrt($(this).attr("title"));
-			});
-		}
-
-		// 초기 화면 설정
-		$P.initForm = () => {
-			// button 요소들을 disabled = true
-			$("#btnCreateOpnnSbmsn--${pageName}").prop("disabled", true);
-			$("#btnUpdateOpnnSbmsn--${pageName}").prop("disabled", true);
-			$("#btnRemoveOpnnSbmsn--${pageName}").prop("disabled", true);
-			$("#btnUpdateOpnnSbmsnDlbrt--${pageName}").prop("disabled", true);
-
-			// 화면 호출(callPurpose)이 view가 아니라면 버튼 비활성화 disabled = false
-			if (pageObject['${pageNameMain}'].callPurpose != "view") {
-				$("#btnCreateOpnnSbmsn--${pageName}").prop("disabled", false);
-				$("#btnUpdateOpnnSbmsn--${pageName}").prop("disabled", false);
-				$("#btnRemoveOpnnSbmsn--${pageName}").prop("disabled", false);
-				$("#btnUpdateOpnnSbmsnDlbrt--${pageName}").prop("disabled", false);
-			}
-		}
-
-		/**************************************************************************
-		 * 최초 실행 함수
-		 **************************************************************************/
-		// 1. 이벤트 설정
-		$P.setEvent();
-
-		// 2. 초기 화면 설정
-		$P.initForm();
-
-		// 3. Dataset 설정
-		let opnnSbmsnInfo = ${opnnSbmsnInfo};									// 의견제출 정보
-		if (opnnSbmsnInfo) {
-			$P.control.setData([opnnSbmsnInfo]);
-		}
-	});
+        }
+
+        // 심의의결서 출력 버튼 이벤트
+        $P.fnPrintDlbrDecsn = (btnTitle) => {
+            let opnnId = $P.ctrl.getValue("OPNN_ID");                           // 의견제출 ID
+
+            // 의견제출 ID 가 없다면.. return
+            if (typeof opnnId == "undefined" || opnnId == null || opnnId == "") {
+                dialog.alert({
+                      content: "조회된 의견제출 대장 정보가 없습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            let params = {
+                  callPurpose: "download"
+                , btnTitle: btnTitle
+                , sggCd: $P.ctrl.getValue("SGG_CD")                             // 시군구 코드
+                , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")                      // 업무 구분 코드
+                , opnnIds: $P.ctrl.getValue("OPNN_ID")                          // 의견제출 ID
+            };
+
+            $P.makeHwpFileDlbrDecsn(params);
+        }
+
+        // 의견제출 심의 버튼 이벤트
+        $P.fnUpdateOpnnSbmsnDlbrt = (btnTitle) => {
+            let opnnId = $P.ctrl.getValue("OPNN_ID");                           // 의견제출 ID
+
+            // 의견제출 ID 가 없다면.. return
+            if (typeof opnnId == "undefined" || opnnId == null || opnnId == "") {
+                dialog.alert({
+                      content: "조회된 의견제출 대장 정보가 없습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            // 단속 상태 코드
+            let crdnSttsCd = $P.ctrl.getValue("CRDN_STTS_CD");
+            let crdnSttsNm = $P.ctrl.getValue("CRDN_STTS_NM");
+
+            // 단속 상태 코드 확인
+            if ( (Number(crdnSttsCd) != 82 && Number(crdnSttsCd) != 87) && (Number(crdnSttsCd) < 21 || Number(crdnSttsCd) > 45) ) {
+                dialog.alert({
+                      content: "[" + btnTitle + "]" + " 작업은 단속상태가 '의견제출수용', '경찰서이첩', '부과 이전' 자료만 처리 가능합니다."
+                            + "<br>" + "단속상태 : " + crdnSttsNm
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            let params = {
+                  callPurpose: "update"
+                , btnTitle: btnTitle
+                , sggCd: $P.ctrl.getValue("SGG_CD")                             // 시군구 코드
+                , taskSeCd: $P.ctrl.getValue("TASK_SE_CD")                      // 업무 구분 코드
+                , opnnId: $P.ctrl.getValue("OPNN_ID")                           // 의견제출 ID
+            };
+
+            $P.getOpnnSbmsnDlbrtInfo(params);
+        }
+
+        // 첨부파일 조회
+        $P.fnSearchFileList = (opnnId) => {
+            let tableFileList = $P.find("fileList");                            // table element 찾기
+            let fileLength = tableFileList.rows.length;
+
+            // 기존 table에 자료가 존재하면 tableRow 삭제
+            for (let iLoop = 1; iLoop < fileLength; iLoop++) {
+            	tableFileList.deleteRow(1);                                     // table 행(Row) 삭제
+            }
+
+            // 의견제출 ID 가 없다면 첨부파일을 조회하지 않는다..
+            if (!opnnId) return;
+
+            // 첨부파일 리스트
+            ajax.get({
+                  url: "file/list.do"
+                , data: {
+                      infoType: "110"
+                    , infoKeys: opnnId
+                    , fetchSize: 0
+                }
+                , success: resp => {
+                    let fileNo = 0;
+                    let fileList = resp.fileList;
+
+                    fileList.forEach(function (item, index, array) {
+                        fileNo = index + 1;
+
+                        let innerHtml = "";
+
+                        innerHtml += "<tr>";
+                        innerHtml += "<td class='text-center'>" + fileNo + "</td>";
+                        innerHtml += "<td class='text-center'>" + item.FILE_ID + "</td>";
+                        innerHtml += "<td class='text-center'>" + item.FILE_NM + "</td>";
+                        innerHtml += "<td class='text-center'>" + item.FILE_SIZE + " byte</td>";
+                        innerHtml += "<td class='text-center'>" + "<button type='button' class='btn' onclick=";
+                        innerHtml += "pageObject['${pageName}'].fnFileDownload(" + item.FILE_ID + ");" + "><i class='bx bx-download me-1'></i></button>" + "</td>";
+                        innerHtml += "</tr>";
+
+                        $P.$find("tbodyFileList").append(innerHtml);
+                    });
+                }
+            });
+        }
+
+        // 첨부파일 다운로드 버튼 이벤트
+        $P.fnFileDownload = (fileID) => {
+            if (pageObject['${mainPageName}'].callPurpose == "view") { return; }
+
+            top.location.href = "/file/download.do?fileID=" + fileID;
+        }
+
+        /**************************************************************************
+         * 초기 셋팅
+         **************************************************************************/
+        // 이벤트 설정
+        $P.setEvent = () => {
+        	// 업무 버튼 이벤트
+            $P.$find("btnCreateOpnnSbmsn").on("click", function() {
+                $P.fnCreateOpnnSbmsn($P.$find("btnCreateOpnnSbmsn").attr("title"));             // 의견제출 등록
+            });
+            $P.$find("btnUpdateOpnnSbmsn").on("click", function() {
+                $P.fnUpdateOpnnSbmsn($P.$find("btnUpdateOpnnSbmsn").attr("title"));             // 의견제출 수정
+            });
+            $P.$find("btnRemoveOpnnSbmsn").on("click", function() {
+                $P.fnRemoveOpnnSbmsn($P.$find("btnRemoveOpnnSbmsn").attr("title"));             // 의견제출 삭제
+            });
+            $P.$find("btnPrintDlbrDecsn").on("click", function() {
+                $P.fnPrintDlbrDecsn($P.$find("btnPrintDlbrDecsn").attr("title"));               // 심의의결서 출력
+            });
+            $P.$find("btnUpdateOpnnSbmsnDlbrt").on("click", function() {
+                $P.fnUpdateOpnnSbmsnDlbrt($P.$find("btnUpdateOpnnSbmsnDlbrt").attr("title"));   // 의견제출 심의
+            });
+        }
+
+        // 초기 화면 설정
+        $P.initForm = () => {
+            // 화면 호출(callPurpose)이 view라면 버튼 비활성화 disabled = true
+            if (pageObject['${mainPageName}'].callPurpose == "view") {
+                $P.$find("btnCreateOpnnSbmsn").prop("disabled", true);
+                $P.$find("btnUpdateOpnnSbmsn").prop("disabled", true);
+                $P.$find("btnRemoveOpnnSbmsn").prop("disabled", true);
+                $P.$find("btnUpdateOpnnSbmsnDlbrt").prop("disabled", true);
+            } else {
+                $P.$find("btnCreateOpnnSbmsn").prop("disabled", false);
+                $P.$find("btnUpdateOpnnSbmsn").prop("disabled", false);
+                $P.$find("btnRemoveOpnnSbmsn").prop("disabled", false);
+                $P.$find("btnUpdateOpnnSbmsnDlbrt").prop("disabled", false);
+            }
+        }
+
+        /**************************************************************************
+         * 최초 실행 함수
+         **************************************************************************/
+        // 1. 이벤트 설정
+        $P.setEvent();
+
+        // 2. 초기 화면 설정
+        $P.initForm();
+
+        // 3. Dataset 설정
+        let opnnInfo = ${opnnInfo};                                             // 의견제출 정보
+        if (opnnInfo) { $P.ctrl.setData([opnnInfo]); }
+    });
 
 </script>
diff --git a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02040-info.jsp b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02040-info.jsp
index 231bda1b..bf007655 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02040-info.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02040-info.jsp
@@ -2,616 +2,620 @@
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
 
 <!-- Page Body -->
-<div class="content-pop">
-	<div class="d-flex flex-row justify-content-evenly">
-		<!-- 발송 정보 -->
-		<div class="col-xl-12 mx-1">
-			<div class="card">
-				<!-- 업무 버튼 -->
-				<div class="container-page-btn">
-					<label class="w-px-120 bg-label-danger pe-2 col-form-label text-sm-center">발송 이력</label>
-					<!-- 버튼 우측 정렬 -->
-					<span class="container-window-btn-right">
-						<button type="button" class="btn btn-primary" id="btnCreateSndbk--${pageName}" title="개별 반송 등록">
-							개별 반송 등록
-						</button>
-						<button type="button" class="btn btn-primary" id="btnUpdateSndbk--${pageName}" title="개별 반송 수정">
-							개별 반송 수정
-						</button>
-						<button type="button" class="btn btn-primary" id="btnRemoveSndbk--${pageName}" title="개별 반송 삭제">
-							개별 반송 삭제
-						</button>
-						<button type="button" class="btn btn-primary" id="btnViewPostTrace--${pageName}" title="우편 종적 보기">
-							우편 종적 보기
-						</button>
-					</span>
-				</div> <!-- <div class="container-page-btn"> -->
-
-				<div class="row g-1">
-					<!-- DataTables(그리드) -->
-					<div class="card-datatable text-nowrap">
-						<div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_0_wrapper--${pageName}">
-							<div class="table-responsive ox-scroll oy-scroll h-px-300" id="table-responsive-sndngDtl--${pageName}">
-								<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer"
-										id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
-									<thead class="sticky-thead">
-										<tr id="theadTrSndngDtl--${pageName}">
-											<th class="cmn" style="width: 120px">발송상태</th>
-											<th class="cmn" style="width: 100px">수납</th>
-											<th class="cmn" style="width: 100px">취급구분</th>
-											<th class="cmn" style="width: 140px">발송구분</th>
-											<th class="cmn" style="width: 120px">발송일자</th>
-											<th class="cmn" style="width: 120px">납기일자</th>
-											<th class="cmn" style="width: 160px">등기번호</th>
-											<th class="cmn" style="width: 200px">성명</th>
-											<th class="cmn" style="width: 100px">우편번호</th>
-											<th class="cmn" style="width: 240px">주소</th>
-											<th class="cmn" style="width: 280px">상세주소</th>
-											<th class="cmn" style="width: 100px">회계연도</th>
-											<th class="cmn" style="width: 120px">부과번호</th>
-											<th class="cmn" style="width: 120px">미납금액</th>
-											<th class="cmn" style="width: 120px">배달일자</th>
-											<th class="cmn" style="width: 100px">배달시각</th>
-											<th class="cmn" style="width: 160px">미배달사유</th>
-											<th class="cmn" style="width: 120px">수령인</th>
-											<th class="cmn" style="width: 160px">수령인관계</th>
-											<th class="cmn" style="width: 180px">등록일시</th>
-											<th class="cmn" style="width: 140px">등록사용자</th>
-											<th class="cmn" style="width: 180px">수정일시</th>
-											<th class="cmn" style="width: 140px">수정사용자</th>
-											<th class="cmn dummy-th"></th>
-										</tr>
-									</thead>
-									<tbody id="tbodySndngDtl--${pageName}">
-									</tbody>
-									<template id="sndngDtlRow--${pageName}">
-										<tr data-key="{SNDNG_DTL_ID}">
-											<td class="text-center" onclick="{onclick}">{SNDNG_DTL_STTS_NM}</td>
-											<td class="text-center" onclick="{onclick}">{SNDNG_RCVMT_NM}</td>
-											<td class="text-center" onclick="{onclick}">{DIV_KB_NM}</td>
-											<td class="text-center" onclick="{onclick}">{SNDNG_SE_NM}</td>
-											<td class="text-center" onclick="{onclick}">{SNDNG_YMD}</td>
-											<td class="text-center" onclick="{onclick}">{DUDT_YMD}</td>
-											<td class="text-center" onclick="{onclick}">{RG_NO}</td>
-											<td class="text-start"  onclick="{onclick}">{RCPN_NM}</td>
-											<td class="text-center" onclick="{onclick}">{RCPN_ZIP}</td>
-											<td class="text-start"  onclick="{onclick}">{RCPN_ADDR}</td>
-											<td class="text-start"  onclick="{onclick}">{RCPN_DTL_ADDR}</td>
-											<td class="text-center" onclick="{onclick}">{FYR}</td>
-											<td class="text-center" onclick="{onclick}">{LEVY_NO}</td>
-											<td class="text-end"    onclick="{onclick}">{SUM_AMT}</td>
-											<td class="text-center" onclick="{onclick}">{DLVR_YMD}</td>
-											<td class="text-center" onclick="{onclick}">{DLVR_TM}</td>
-											<td class="text-start"  onclick="{onclick}">{UNDLVR_RSN_NM}</td>
-											<td class="text-start"  onclick="{onclick}">{ACTL_RCPN_NM}</td>
-											<td class="text-center" onclick="{onclick}">{RCPN_REL_NM}</td>
-											<td class="text-center" onclick="{onclick}">{REG_DT}</td>
-											<td class="text-center" onclick="{onclick}">{RGTR_NM}</td>
-											<td class="text-center" onclick="{onclick}">{MDFCN_DT}</td>
-											<td class="text-center" onclick="{onclick}">{MDFR_NM}</td>
-											<td class="cmn dummy-td"></td>
-										</tr>
-									</template>
-									<template id="sndngDtlNotFound--${pageName}">
-										<tr class="odd">
-											<td valign="top" colspan="23" class="dataTables_empty text-center">발송 정보를 찾지 못했습니다.</td>
-										</tr>
-									</template>
-								</table>
-							</div>
-						</div>
-					</div> <!-- DataTables(그리드) -->
-				</div> <!-- <div class="row g-1"> -->
-			</div> <!-- <div class="card"> -->
-		</div> <!-- <div class="col-xl-12 mx-1"> -->
-		<!-- 발송 정보 -->
-	</div> <!-- <div class="d-flex flex-row justify-content-evenly"> -->
-
-	<div class="d-flex flex-row justify-content-evenly">
-		<!-- 가상계좌 정보 -->
-		<div class="col-xl-3 mx-1">
-			<!-- 입력 영역 -->
-			<form id="frmEdit--${pageName}" name="frmEdit">
-				<!-- hidden -->
-				<input type="hidden" id="sndngDtlId--${pageName}" name="sndngDtlId" data-map="SNDNG_DTL_ID" />
-				<input type="hidden" id="sndngId--${pageName}" name="sndngId" data-map="SNDNG_ID" />
-
-				<div class="card">
-					<!-- 업무 버튼 -->
-					<div class="container-page-btn">
-						<label class="w-px-120 bg-label-danger pe-2 col-form-label text-sm-center">가상계좌 정보</label>
-					</div> <!-- <div class="container-page-btn"> -->
-					<div class="row g-1">
-						<!-- 가상계좌 -->
-						<div class="col-md-12">
-							<textarea type="text" class="form-control w-100" id="vrActno--${pageName}" name="vrActno" cols="100%" rows="10" readonly></textarea>
-						</div>
-						<!-- 전자납부번호 -->
-						<div class="col-md-12">
-							<label for="epayno--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">전자납부번호</label>
-							<input type="text" class="form-control w-65" id="epayno--${pageName}" name="epayno" data-map="EPAYNO" readonly />
-						</div>
-					</div>
-				</div> <!-- <div class="card"> -->
-			</form>
-		</div> <!-- <div class="col-xl-3 mx-1"> -->
-		<!-- 가상계좌 정보 -->
-
-		<!-- 공시송달 이력 -->
-		<div class="col-xl-9 mx-1">
-			<div class="card">
-				<!-- 업무 버튼 -->
-				<div class="container-page-btn">
-					<label class="w-px-120 bg-label-danger pe-2 col-form-label text-sm-center">공시송달 이력</label>
-				</div>
-				<div class="row g-1">
-					<!-- DataTables(그리드) -->
-					<div class="card-datatable text-nowrap">
-						<div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_1_wrapper--${pageName}">
-							<div class="table-responsive ox-scroll oy-scroll h-px-250" id="table-responsive-1--${pageName}">
-								<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer"
-										id="DataTables_Table_1--${pageName}" aria-describedby="DataTables_Table_0_info">
-									<thead class="sticky-thead">
-										<tr id="theadTrSvbtc--${pageName}">
-											<th class="cmn" style="width: 120px">공시송달일자</th>
-											<th class="cmn" style="width: 180px">문서번호</th>
-											<th class="cmn" style="width: 280px">제목</th>
-											<th class="cmn" style="width: 280px">기타내용</th>
-											<th class="cmn" style="width: 180px">등록일시</th>
-											<th class="cmn" style="width: 140px">등록사용자</th>
-											<th class="cmn dummy-th"></th>
-										</tr>
-									</thead>
-									<tbody id="tbodySvbtc--${pageName}">
-									</tbody>
-									<template id="svbtcRow--${pageName}">
-										<tr data-key="{SVBTC_ID}">
-											<td class="text-center" onclick="{onclick}">{SVBTC_YMD}</td>
-											<td class="text-start" onclick="{onclick}">{DOC_NO}</td>
-											<td class="text-start" onclick="{onclick}">{TTL_NM}</td>
-											<td class="text-start" onclick="{onclick}">{ETC_CN}</td>
-											<td class="text-center" onclick="{onclick}">{REG_DT}</td>
-											<td class="text-center" onclick="{onclick}">{RGTR_NM}</td>
-											<td class="cmn dummy-td"></td>
-										</tr>
-									</template>
-									<template id="svbtcNotFound--${pageName}">
-										<tr class="odd">
-											<td valign="top" colspan="7" class="dataTables_empty text-center">공시송달 정보를 찾지 못했습니다.</td>
-										</tr>
-									</template>
-								</table>
-							</div>
-						</div>
-					</div> <!-- DataTables(그리드) -->
-				</div> <!-- <div class="row g-1"> -->
-			</div> <!-- <div class="card"> -->
-		</div> <!-- <div class="col-xl-9 mx-1"> -->
-		<!-- 공시송달 이력 -->
-	</div> <!-- <div class="d-flex flex-row justify-content-evenly"> -->
+<div class="content-pop" data-doctx="${pageName}">
+    <div class="d-flex flex-row justify-content-evenly">
+        <!-- 발송 정보 -->
+        <div class="col-xl-12 mx-1">
+            <div class="card">
+                <!-- 업무 버튼 -->
+                <div class="container-page-btn">
+                    <label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">발송 이력</label>
+                    <!-- 버튼 우측 정렬 -->
+                    <span class="container-window-btn-right">
+                        <button type="button" class="btn btn-primary w-px-120" name="btnCreateSndbk" title="개별 반송 등록">
+                            반송 등록
+                        </button>
+                        <button type="button" class="btn btn-primary w-px-120" name="btnUpdateSndbk" title="개별 반송 수정">
+                            반송 수정
+                        </button>
+                        <button type="button" class="btn btn-primary w-px-120" name="btnRemoveSndbk" title="개별 반송 삭제">
+                            반송 삭제
+                        </button>
+                        <button type="button" class="btn btn-primary w-px-120" name="btnViewPostTrace" title="우편 종적 보기">
+                            우편 종적 보기
+                        </button>
+                    </span>
+                </div> <!-- <div class="container-page-btn"> -->
+
+                <div class="row g-1">
+                    <!-- DataTables(그리드) -->
+                    <div class="card-datatable text-nowrap">
+                        <div class="dataTables_wrapper dt-bootstrap5 no-footer">
+                            <div class="table-responsive ox-scroll oy-scroll h-px-300" name="tableRspnsSndngDtl">
+                                <table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" aria-describedby="DataTables_Table_0_info">
+                                    <thead class="sticky-thead">
+                                        <tr name="theadTrSndngDtl">
+                                            <th class="cmn" style="width: 120px">발송상태</th>
+                                            <th class="cmn" style="width: 100px">수납</th>
+                                            <th class="cmn" style="width: 100px">취급구분</th>
+                                            <th class="cmn" style="width: 140px">발송구분</th>
+                                            <th class="cmn" style="width: 120px">발송일자</th>
+                                            <th class="cmn" style="width: 120px">납기일자</th>
+                                            <th class="cmn" style="width: 160px">등기번호</th>
+                                            <th class="cmn" style="width: 200px">성명</th>
+                                            <th class="cmn" style="width: 100px">우편번호</th>
+                                            <th class="cmn" style="width: 240px">주소</th>
+                                            <th class="cmn" style="width: 280px">상세주소</th>
+                                            <th class="cmn" style="width: 100px">회계연도</th>
+                                            <th class="cmn" style="width: 120px">부과번호</th>
+                                            <th class="cmn" style="width: 120px">미납금액</th>
+                                            <th class="cmn" style="width: 120px">배달일자</th>
+                                            <th class="cmn" style="width: 100px">배달시각</th>
+                                            <th class="cmn" style="width: 160px">미배달사유</th>
+                                            <th class="cmn" style="width: 120px">수령인</th>
+                                            <th class="cmn" style="width: 160px">수령인관계</th>
+                                            <th class="cmn" style="width: 200px">발송상세ID</th>
+                                            <th class="cmn" style="width: 180px">등록일시</th>
+                                            <th class="cmn" style="width: 140px">등록사용자</th>
+                                            <th class="cmn" style="width: 180px">수정일시</th>
+                                            <th class="cmn" style="width: 140px">수정사용자</th>
+                                            <th class="cmn dummy-th"></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody name="tableTbodySndngDtl">
+                                    </tbody>
+                                    <template is="curly-brackets" name="tableRowsSndngDtl">
+                                        <tr data-key="SNDNG_DTL_ID">
+                                            <td class="text-center" onclick="{onclick}">{SNDNG_DTL_STTS_NM}</td>
+                                            <td class="text-center" onclick="{onclick}">{SNDNG_RCVMT_NM}</td>
+                                            <td class="text-center" onclick="{onclick}">{DIV_KB_NM}</td>
+                                            <td class="text-center" onclick="{onclick}">{SNDNG_SE_NM}</td>
+                                            <td class="text-center" onclick="{onclick}">{SNDNG_YMD}</td>
+                                            <td class="text-center" onclick="{onclick}">{DUDT_YMD}</td>
+                                            <td class="text-center" onclick="{onclick}">{RG_NO}</td>
+                                            <td class="text-start"  onclick="{onclick}">{RCPN_NM}</td>
+                                            <td class="text-center" onclick="{onclick}">{RCPN_ZIP}</td>
+                                            <td class="text-start"  onclick="{onclick}">{RCPN_ADDR}</td>
+                                            <td class="text-start"  onclick="{onclick}">{RCPN_DTL_ADDR}</td>
+                                            <td class="text-center" onclick="{onclick}">{FYR}</td>
+                                            <td class="text-center" onclick="{onclick}">{LEVY_NO}</td>
+                                            <td class="text-end"    onclick="{onclick}">{SUM_AMT}</td>
+                                            <td class="text-center" onclick="{onclick}">{DLVR_YMD}</td>
+                                            <td class="text-center" onclick="{onclick}">{DLVR_TM}</td>
+                                            <td class="text-start"  onclick="{onclick}">{UNDLVR_RSN_NM}</td>
+                                            <td class="text-start"  onclick="{onclick}">{ACTL_RCPN_NM}</td>
+                                            <td class="text-center" onclick="{onclick}">{RCPN_REL_NM}</td>
+                                            <td class="text-center" onclick="{onclick}">{SNDNG_DTL_ID}</td>
+                                            <td class="text-center" onclick="{onclick}">{REG_DT}</td>
+                                            <td class="text-center" onclick="{onclick}">{RGTR_NM}</td>
+                                            <td class="text-center" onclick="{onclick}">{MDFCN_DT}</td>
+                                            <td class="text-center" onclick="{onclick}">{MDFR_NM}</td>
+                                            <td class="cmn dummy-td"></td>
+                                        </tr>
+                                    </template>
+                                    <template name="notFoundSndngDtl">
+                                        <tr class="odd">
+                                            <td valign="top" colspan="25" class="dataTables_empty text-center">발송 정보를 찾지 못했습니다.</td>
+                                        </tr>
+                                    </template>
+                                </table>
+                            </div>
+                        </div>
+                    </div> <!-- DataTables(그리드) -->
+                </div> <!-- <div class="row g-1"> -->
+            </div> <!-- <div class="card"> -->
+        </div> <!-- <div class="col-xl-12 mx-1"> -->
+        <!-- 발송 정보 -->
+    </div> <!-- <div class="d-flex flex-row justify-content-evenly"> -->
+
+    <div class="d-flex flex-row justify-content-evenly">
+        <!-- 가상계좌 정보 -->
+        <div class="col-xl-3 mx-1">
+            <!-- 입력 영역 -->
+            <form name="frmEdit">
+                <!-- hidden -->
+                <input type="hidden" name="sndngDtlId" data-map="SNDNG_DTL_ID" />
+                <input type="hidden" name="sndngId" data-map="SNDNG_ID" />
+
+                <div class="card">
+                    <!-- 업무 버튼 -->
+                    <div class="container-page-btn">
+                        <label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">가상계좌 정보</label>
+                    </div> <!-- <div class="container-page-btn"> -->
+                    <div class="row g-1">
+                        <!-- 가상계좌 -->
+                        <div class="col-md-12">
+                            <textarea is="id-textarea" type="text" class="form-control w-100" name="vrActno" cols="100%" rows="10" readonly></textarea>
+                        </div>
+                        <!-- 전자납부번호 -->
+                        <div class="col-md-12">
+                            <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="epayno">전자납부번호</label>
+                            <input is="id-input" type="text" class="form-control w-65" name="epayno" data-map="EPAYNO" readonly />
+                        </div>
+                    </div>
+                </div> <!-- <div class="card"> -->
+            </form>
+        </div> <!-- <div class="col-xl-3 mx-1"> -->
+        <!-- 가상계좌 정보 -->
+
+        <!-- 공시송달 이력 -->
+        <div class="col-xl-9 mx-1">
+            <div class="card">
+                <!-- 업무 버튼 -->
+                <div class="container-page-btn">
+                    <label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">공시송달 이력</label>
+                </div>
+                <div class="row g-1">
+                    <!-- DataTables(그리드) -->
+                    <div class="card-datatable text-nowrap">
+                        <div class="dataTables_wrapper dt-bootstrap5 no-footer">
+                            <div class="table-responsive ox-scroll oy-scroll h-px-250" name="tableRspnsSvbtc">
+                                <table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" aria-describedby="DataTables_Table_0_info">
+                                    <thead class="sticky-thead">
+                                        <tr name="theadTrSvbtc">
+                                            <th class="cmn sorting" style="width: 140px" data-field="SNDNG_SE_NM">발송구분</th>
+                                            <th class="cmn sorting" style="width: 120px" data-field="SNDNG_YMD">발송일자</th>
+                                            <th class="cmn sorting" style="width: 120px" data-field="SVBTC_YMD">공시송달일자</th>
+                                            <th class="cmn sorting" style="width: 180px" data-field="DOC_NO">문서번호</th>
+                                            <th class="cmn sorting" style="width: 300px" data-field="TTL_NM">제목</th>
+                                            <th class="cmn sorting" style="width: 300px" data-field="ETC_CN">기타내용</th>
+                                            <th class="cmn sorting" style="width: 200px" data-field="SNDNG_DTL_ID">발송상세ID</th>
+                                            <th class="cmn sorting" style="width: 180px" data-field="REG_DT">등록일시</th>
+                                            <th class="cmn sorting" style="width: 140px" data-field="RGTR_NM">등록사용자</th>
+                                            <th class="cmn dummy-th"></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody name="tableTbodySvbtc">
+                                    </tbody>
+                                    <template is="curly-brackets" name="tableRowsSvbtc">
+                                        <tr data-key="SNDNG_DTL_ID">
+                                            <td class="text-center" onclick>{SNDNG_SE_NM}</td>
+                                            <td class="text-center" onclick>{SNDNG_YMD}</td>
+                                            <td class="text-center" onclick>{SVBTC_YMD}</td>
+                                            <td class="text-start"  onclick>{DOC_NO}</td>
+                                            <td class="text-start"  onclick>{TTL_NM}</td>
+                                            <td class="text-start"  onclick>{ETC_CN}</td>
+                                            <td class="text-center" onclick>{SNDNG_DTL_ID}</td>
+                                            <td class="text-center" onclick>{REG_DT}</td>
+                                            <td class="text-center" onclick>{RGTR_NM}</td>
+                                            <td class="cmn dummy-td"></td>
+                                        </tr>
+                                    </template>
+                                    <template name="notFoundSvbtc">
+                                        <tr class="odd">
+                                            <td valign="top" colspan="9" class="dataTables_empty text-center">공시송달 정보를 찾지 못했습니다.</td>
+                                        </tr>
+                                    </template>
+                                </table>
+                            </div>
+                        </div>
+                    </div> <!-- DataTables(그리드) -->
+                </div> <!-- <div class="row g-1"> -->
+            </div> <!-- <div class="card"> -->
+        </div> <!-- <div class="col-xl-9 mx-1"> -->
+        <!-- 공시송달 이력 -->
+    </div> <!-- <div class="d-flex flex-row justify-content-evenly"> -->
 </div> <!-- <div class="content-pop"> -->
 
 <script>
-	/**************************************************************************
-	 * Global Variable
-	 **************************************************************************/
-	pageObject["${pageName}"] = {};
-
-	/**************************************************************************
-	 * script 진입
-	 **************************************************************************/
-	$(document).ready(function() {
-		// pageObject
-		let $P = pageObject["${pageName}"];
-
-		// FormFields
-	 	$P.formFields = new FimsFormFields("#frmEdit--${pageName}");
-
-		/**************************************************************************
-		 * DatasetControl
-		 **************************************************************************/
-		// 발송 상세 정보 DatasetControl
-		$P.sndngDtlControl = new DatasetControl({
-			  prefix: "sndng"
-			, prefixName: "발송 반송"
-			, keymapper: info => info ? info.SNDNG_DTL_ID : ""
-			, dataGetter: obj => obj.sndngDtls
-			, appendData: true
-			, formats: {
-				  SNDNG_YMD: dateFormat
-				, DUDT_YMD: dateFormat
-				, SUM_AMT: numberFormat
-				, DLVR_YMD: dateFormat
-				, DLVR_TM: timeFormat
-		    	, REG_DT: datetimeFormat
-		    	, MDFCN_DT: datetimeFormat
-			}
-		});
-
-		// 공시송달 정보 DatasetControl
-		$P.svbtcDtlControl = new DatasetControl({
-			  prefix: "svbtc"
-			, prefixName: "공시송달"
-			, keymapper: info => info ? info.SVBTC_ID : ""
-			, dataGetter: obj => obj.svbtcDtls
-			, appendData: true
-			, formats: {
-				  SVBTC_YMD: dateFormat
-				, REG_DT: datetimeFormat
-			}
-		});
-
-		/**************************************************************************
-		 * 발송 상세 DatasetControl 이벤트
-		 **************************************************************************/
-		// Dataset 변경
-		$P.sndngDtlControl.onDatasetChange = (obj, option) => {
-			$P.renderSndngList();
-		};
-
-		// 현재 선택 자료 변경 이벤트
-		$P.sndngDtlControl.onCurrentChange = (item) => {
-			if (!item) return;
-
-			let key = item.data.SNDNG_DTL_ID;
-
-			$("#tbodySndngDtl--${pageName}").setCurrentRow(key);
-
-			// 가상계좌번호
-			let vrActno = "";
-
-			if (item.data.BANK_NM   != null && item.data.BANK_NM   != "") vrActno += item.data.BANK_NM   + " " + item.data.VR_ACTNO   + "\n";	// 가상 계좌번호
-			if (item.data.BANK_NM2  != null && item.data.BANK_NM2  != "") vrActno += item.data.BANK_NM2  + " " + item.data.VR_ACTNO2  + "\n";	// 가상 계좌번호2
-			if (item.data.BANK_NM3  != null && item.data.BANK_NM3  != "") vrActno += item.data.BANK_NM3  + " " + item.data.VR_ACTNO3  + "\n";	// 가상 계좌번호3
-			if (item.data.BANK_NM4  != null && item.data.BANK_NM4  != "") vrActno += item.data.BANK_NM4  + " " + item.data.VR_ACTNO4  + "\n";	// 가상 계좌번호4
-			if (item.data.BANK_NM5  != null && item.data.BANK_NM5  != "") vrActno += item.data.BANK_NM5  + " " + item.data.VR_ACTNO5  + "\n";	// 가상 계좌번호5
-			if (item.data.BANK_NM6  != null && item.data.BANK_NM6  != "") vrActno += item.data.BANK_NM6  + " " + item.data.VR_ACTNO6  + "\n";	// 가상 계좌번호6
-			if (item.data.BANK_NM7  != null && item.data.BANK_NM7  != "") vrActno += item.data.BANK_NM7  + " " + item.data.VR_ACTNO7  + "\n";	// 가상 계좌번호7
-			if (item.data.BANK_NM8  != null && item.data.BANK_NM8  != "") vrActno += item.data.BANK_NM8  + " " + item.data.VR_ACTNO8  + "\n";	// 가상 계좌번호8
-			if (item.data.BANK_NM9  != null && item.data.BANK_NM9  != "") vrActno += item.data.BANK_NM9  + " " + item.data.VR_ACTNO9  + "\n";	// 가상 계좌번호9
-			if (item.data.BANK_NM10 != null && item.data.BANK_NM10 != "") vrActno += item.data.BANK_NM10 + " " + item.data.VR_ACTNO10 + "\n";	// 가상 계좌번호10
-			if (item.data.BANK_NM11 != null && item.data.BANK_NM11 != "") vrActno += item.data.BANK_NM11 + " " + item.data.VR_ACTNO11 + "\n";	// 가상 계좌번호11
-			if (item.data.BANK_NM12 != null && item.data.BANK_NM12 != "") vrActno += item.data.BANK_NM12 + " " + item.data.VR_ACTNO12 + "\n";	// 가상 계좌번호12
-			if (item.data.BANK_NM13 != null && item.data.BANK_NM13 != "") vrActno += item.data.BANK_NM13 + " " + item.data.VR_ACTNO13 + "\n";	// 가상 계좌번호13
-			if (item.data.BANK_NM14 != null && item.data.BANK_NM14 != "") vrActno += item.data.BANK_NM14 + " " + item.data.VR_ACTNO14 + "\n";	// 가상 계좌번호14
-			if (item.data.BANK_NM15 != null && item.data.BANK_NM15 != "") vrActno += item.data.BANK_NM15 + " " + item.data.VR_ACTNO15 + "\n";	// 가상 계좌번호15
-			if (item.data.BANK_NM16 != null && item.data.BANK_NM16 != "") vrActno += item.data.BANK_NM16 + " " + item.data.VR_ACTNO16 + "\n";	// 가상 계좌번호16
-			if (item.data.BANK_NM17 != null && item.data.BANK_NM17 != "") vrActno += item.data.BANK_NM17 + " " + item.data.VR_ACTNO17 + "\n";	// 가상 계좌번호17
-			if (item.data.BANK_NM18 != null && item.data.BANK_NM18 != "") vrActno += item.data.BANK_NM18 + " " + item.data.VR_ACTNO18 + "\n";	// 가상 계좌번호18
-			if (item.data.BANK_NM19 != null && item.data.BANK_NM19 != "") vrActno += item.data.BANK_NM19 + " " + item.data.VR_ACTNO19 + "\n";	// 가상 계좌번호19
-			if (item.data.BANK_NM20 != null && item.data.BANK_NM20 != "") vrActno += item.data.BANK_NM20 + " " + item.data.VR_ACTNO20 + "\n";	// 가상 계좌번호20
-
-			$("#vrActno--${pageName}").val(vrActno);							// 가상 계좌번호
-			$("#epayno--${pageName}").val(item.data.EPAYNO_MASK); 				// 전자납부번호
-		}
-
-
-		// 개별 반송 dialog
-		$P.sndngDtlControl.getInfo = (params) => {
-			if (!params) return;
-
-			ajax.get({
-				  url: wctx.url("/" + params.taskSeCd + "/sndb/sndb01/230/info.do") + "?openerPageName=${pageName}"
-				, data: params || {}
-				, success: resp => {
-					dialog.open({
-						  id: "sndbkDialog--${pageName}"
-						, title: params.title
-						, content: resp
-						, size: "md"
-						, onClose: () => { $P.fnRefreshDataInfo(); }			// 자료 재조회
-					});
-				}
-			});
-		}
-
-		// 개별 반송 삭제 callback
-		$P.sndngDtlControl.onRemove = (resp) => {
-	  		let btnTitle = $("#btnRemoveSndbk--${pageName}").attr("title");
-	  		let showMessage = resp.rtnMsg.replace(/[S]|[F]/g, btnTitle);
-
-			dialog.alert({
-				  content: showMessage
-				, init: () => { setDialogZindex(); }
-				, onOK: () => { }
-	  		});
-
-			if (resp.saved) { $P.fnRefreshDataInfo(); }							// 자료 재조회
-		}
-
-		// 개별 반송 삭제
-		$P.sndngDtlControl.remove = (params) => {
-			if (!params) return;
-
-			ajax.post({
-				  url: wctx.url("/" + params.taskSeCd + "/sndb/sndb01/220/remove.do")
-				, data: params || {}
-				, success: resp => $P.sndngDtlControl.onRemove(resp)
-			});
-		}
-
-		/**************************************************************************
-		 * 공시송달 DatasetControl 이벤트
-		 **************************************************************************/
-		// Dataset 변경
-		$P.svbtcDtlControl.onDatasetChange = (obj, option) => {
-			$P.renderSvbtcList();
-		}
-
-		// 현재 선택 자료 변경 이벤트
-		$P.svbtcDtlControl.onCurrentChange = (item) => {
- 			if (!item) return;
-
- 			let key = item.data.SVBTC_ID;
-
- 			$("#tbodySvbtc--${pageName}").setCurrentRow(key);
- 		}
-
-		/**************************************************************************
-		 * DataTables 이벤트
-		 **************************************************************************/
-		// DataTables에 click, dbclick 이벤트
-		$P.renderSndngList = () => {
-			let sndngDtlList = $P.sndngDtlControl.dataset;
-			let empty = sndngDtlList.empty;
-
-			let trs = empty ?
-				[document.getElementById("sndngDtlNotFound--${pageName}").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
-				sndngDtlList.inStrings(
-					document.getElementById("sndngDtlRow--${pageName}").innerHTML, <%-- from template#${infoPrefix}Row --%>
-					(str, dataItem) => str
-						.replace(/{onclick}/gi, "pageObject['${pageName}'].sndngDtlControl.setCurrent('" + dataItem.getValue("SNDNG_DTL_ID") + "');")
-				);
-
-			$("#tbodySndngDtl--${pageName}").html(trs.join());
-		}
-
-		// 공시송달 정보 DataTables에 click 이벤트
-		$P.renderSvbtcList = () => {
-			let svbtcDtlList = $P.svbtcDtlControl.dataset;
-			let empty = svbtcDtlList.empty;
-
-			let trs = empty ?
-				[document.getElementById("svbtcNotFound--${pageName}").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
-				svbtcDtlList.inStrings(
-					document.getElementById("svbtcRow--${pageName}").innerHTML, <%-- from template#${infoPrefix}Row --%>
-					(str, dataItem) => str
-						.replace(/{onclick}/gi, "pageObject['${pageName}'].svbtcDtlControl.setCurrent('" + dataItem.getValue("SVBTC_ID") + "');")
-				);
-
-			$("#tbodySvbtc--${pageName}").html(trs.join());
-		}
-
-		/**************************************************************************
-		 * 사용자 함수(function)
-		 **************************************************************************/
-		// 자료 재조회
-		$P.fnRefreshDataInfo = () => {
-			// 단속 ID
-			let crdnId = $("#crdnId--${pageNameMain}").val();
-			// 단속 ID 가 없다면.. return
-			if (typeof crdnId == "undefined" || crdnId == null || crdnId == "") return;
-
-			let params = {
-				  callPurpose: "refresh"
-				, sggCd: $("#sggCd--${pageNameMain}").val()
-				, taskSeCd: $("#taskSeCd--${pageNameMain}").val()
-				, crdnId: crdnId
-				, delYn: "N"
-			};
-
-			ajax.get({
-				  url: wctx.url("/" + params.taskSeCd + "/sprt/sprt02/040/info.do")
-				, headers: { Accept: "application/json; charset=utf-8" }		// json
-				, data: params || {}
-				, success: resp => {
-					// 초기화
-					$("#frmEdit--${pageName}")[0].reset();						// 화면 초기화
-					$P.sndngDtlControl.dataset.clear();							// 발송 상세 Dataset 초기화
-					$P.svbtcDtlControl.dataset.clear();							// 공시송달 Dataset 초기화
-
-					// sprt02010-main 단속 정보
-					pageObject["${pageNameMain}"].mainControl.setData([resp.totalInfo]);
-
-					// Dataset 셋팅
-					$P.sndngDtlControl.setData(resp.sndngDtls);					// 발송 이력 정보
-					$P.svbtcDtlControl.setData(resp.svbtcDtls);					// 공시송달 이력 정보
-				}
-			});
-		}
-
-		/**************************************************************************
-		 * 버튼 clickEvent
-		 **************************************************************************/
-		// 개별 반송 등록
-		$P.fnCreateSndbk = (title) => {
-			// 발송 상세 ID
-			let sndngDtlId = $P.sndngDtlControl.dataset.getValue("SNDNG_DTL_ID");
-			// 발송상세ID 가 없다면.. return
-			if (typeof sndngDtlId == "undefined" || sndngDtlId == null || sndngDtlId == "") return;
-
-			// 미배달 사유 명
-			let undlvrRsnNm = $P.sndngDtlControl.dataset.getValue("UNDLVR_RSN_NM");
-			// 미배달 사유 확인
-			if (undlvrRsnNm != "" ) {
-				dialog.alert({
-					  content: "미배달 사유가 " + undlvrRsnNm + " (으)로 반송 등록 되어 있습니다."
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, init: () => { setDialogZindex(); }
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			// 발송 상세 상태 코드
-			let sndngDtlSttsCd = $P.sndngDtlControl.dataset.getValue("SNDNG_DTL_STTS_CD");
-			let sndngDtlSttsNm = $P.sndngDtlControl.dataset.getValue("SNDNG_DTL_STTS_NM");
-			// 발송상세 상태코드 확인 (FIM050 - 03:발송 04:발송확인)
-			if (sndngDtlSttsCd != "03" && sndngDtlSttsCd != "04") {
-				dialog.alert({
-					  content: "[" + title + "]" + " 작업은 발송상세 상태가 '발송' 또는 '발송확인' 자료만 처리 가능합니다."
-							+ "<br>" + "발송상세상태 : " + sndngDtlSttsNm
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, init: () => { setDialogZindex(); }
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose: "create"
-				, title: title
-				, sggCd: $P.sndngDtlControl.dataset.getValue("SGG_CD")			// 시군구 코드
-				, taskSeCd: $P.sndngDtlControl.dataset.getValue("TASK_SE_CD")	// 업무 구분 코드
-				, sndngDtlId: sndngDtlId										// 발송 상세 ID
-				, delYn: "N"
-			};
-
-			$P.sndngDtlControl.getInfo(params);
-		}
-
-		// 개별 반송 수정
-		$P.fnUpdateSndbk = (title) => {
-			// 발송 상세 ID
-			let sndngDtlId = $P.sndngDtlControl.dataset.getValue("SNDNG_DTL_ID");
-			// 발송상세ID 가 없다면.. return
-			if (typeof sndngDtlId == "undefined" || sndngDtlId == null || sndngDtlId == "") return;
-
-			// 미배달 사유 코드
-			let undlvrRsnCd = $P.sndngDtlControl.dataset.getValue("UNDLVR_RSN_CD");
-			let undlvrRsnNm = $P.sndngDtlControl.dataset.getValue("UNDLVR_RSN_NM");
-
-			// 발송상세 상태코드 확인 (FIM050 - 05:반송)
-			if (undlvrRsnNm == null || undlvrRsnNm == "") {
-				dialog.alert({
-					  content: "조회된 반송(미배달) 사유가 없습니다."
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, init: () => { setDialogZindex(); }
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose: "update"
-				, title: title
-				, sggCd: $P.sndngDtlControl.dataset.getValue("SGG_CD")						// 시군구 코드
-				, taskSeCd: $P.sndngDtlControl.dataset.getValue("TASK_SE_CD")				// 업무 구분 코드
-				, sndngDtlId: sndngDtlId													// 발송 상세 ID
-				, sndngDtlSttsCd: $P.sndngDtlControl.dataset.getValue("SNDNG_DTL_STTS_CD")	// 발송 상세 상태 코드
-				, undlvrRsnNm: $P.sndngDtlControl.dataset.getValue("UNDLVR_RSN_NM")			// 미배달 사유 명
-				, delYn : "N"
-			};
-
-			$P.sndngDtlControl.getInfo(params);
-		}
-
-		// 개별 반송 삭제
-		$P.fnRemoveSndbk = (title) => {
-			// 발송 상세 ID
-			let sndngDtlId = $P.sndngDtlControl.dataset.getValue("SNDNG_DTL_ID");
-			// 발송상세ID 가 없다면.. return
-			if (typeof sndngDtlId == "undefined" || sndngDtlId == null || sndngDtlId == "") return;
-
-			// 발송 상세 상태 코드
-			let sndngDtlSttsCd = $P.sndngDtlControl.dataset.getValue("SNDNG_DTL_STTS_CD");
-			let sndngDtlSttsNm = $P.sndngDtlControl.dataset.getValue("SNDNG_DTL_STTS_NM");
-			// 발송상세 상태코드 확인 (FIM050 - 05:반송)
-			if (sndngDtlSttsCd != "05") {
-				dialog.alert({
-					  content: "[" + title + "]" + " 작업은 발송상세 상태가 '반송' 자료만 처리 가능합니다."
-							+ "<br>" + "발송상세상태 : " + sndngDtlSttsNm
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, init: () => { setDialogZindex(); }
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose: "delete"
-				, title: title
-				, sggCd: $P.sndngDtlControl.dataset.getValue("SGG_CD")			// 시군구 코드
-				, taskSeCd: $P.sndngDtlControl.dataset.getValue("TASK_SE_CD")	// 업무 구분 코드
-				, sndngDtlId: sndngDtlId										// 발송 상세 ID
-				, sndngDtlSttsCd: "03"											// 발송 상세 상태 코드(SNDNG_DTL_STTS_CD) FIM050 - 03 발송
-			};
-
-			dialog.alert({
-				  content: "선택한 반송 정보를 삭제하시겠습니까?"
-				, init: () => { setDialogZindex(); }
-				, onOK: () => {
-					$P.sndngDtlControl.remove(params);
-				}
-			});
-		}
-
-		// 우편 종적 보기
-		$P.fnViewPostTrace = () => {
-			// 취급 구분
-			let divKb = $P.sndngDtlControl.dataset.getValue("DIV_KB");
-			// 취급 구분이 일반이라면..
-			if (typeof divKb == "undefined" || divKb == null || divKb == "" || divKb == "000") return;
-
-			// 등기번호
-			let rgNo = $P.sndngDtlControl.dataset.getValue("RG_NO");
-			// 등기번호가 없다면..
-			if (typeof rgNo == "undefined" || rgNo == null || rgNo == "") return;
-
-			window.open("https://service.epost.go.kr/trace.RetrieveRegiPrclDeliv.postal?sid1=" + rgNo+"&displayHeader=N", "trace_view", "");
-		}
-
-		/**************************************************************************
-		 * 초기 셋팅
-		 **************************************************************************/
-		// 이벤트 설정
-		$P.setEvent = () => {
-			// 업무 버튼 이벤트
-			$("#btnCreateSndbk--${pageName}").on("click", function() {
-				$P.fnCreateSndbk($(this).attr("title"));						// 개별 반송 등록
-			});
-			$("#btnUpdateSndbk--${pageName}").on("click", function() {
-				$P.fnUpdateSndbk($(this).attr("title"));						// 개별 반송 수정
-			});
-			$("#btnRemoveSndbk--${pageName}").on("click", function() {
-				$P.fnRemoveSndbk($(this).attr("title"));						// 개별 반송 삭제
-			});
-			$("#btnViewPostTrace--${pageName}").on("click", function() {
-				$P.fnViewPostTrace($(this).attr("title"));						// 우편 종적 보기
-			});
-
-			// DataTables width 변경 조정
-			fnMakeResizableTable($("#table-responsive-sndngDtl--${pageName}")[0]);
-			fnMakeResizableTable($("#table-responsive-1--${pageName}")[0]);
-		}
-
-		// 초기 화면 설정
-		$P.initForm = () => {
-			// button 요소들을 disabled = true
-			$("#btnCreateSndbk--${pageName}").prop("disabled", true);
-			$("#btnUpdateSndbk--${pageName}").prop("disabled", true);
-			$("#btnRemoveSndbk--${pageName}").prop("disabled", true);
-
-			// 화면 호출(callPurpose)이 view가 아니라면 버튼 비활성화 disabled = false
-			if (pageObject['${pageNameMain}'].callPurpose != "view") {
-				$("#btnCreateSndbk--${pageName}").prop("disabled", false);
-				$("#btnUpdateSndbk--${pageName}").prop("disabled", false);
-				$("#btnRemoveSndbk--${pageName}").prop("disabled", false);
-			}
-		}
-
-		/**************************************************************************
-		 * 최초 실행 함수
-		 **************************************************************************/
-		// 1. 이벤트 설정
-		$P.setEvent();
-
-		// 2. 초기 화면 설정
-		$P.initForm();
-
-		// 3. Dataset 설정
-		$P.sndngDtlControl.setData(${sndngDtls});								// 발송 이력
-		$P.svbtcDtlControl.setData(${svbtcDtls});								// 공시송달 이력
-	});
+    /**************************************************************************
+     * Global Variable
+     **************************************************************************/
+    pageObject["${pageName}"] = newDoctxFinder("${pageName}");
+
+    /**************************************************************************
+     * script 진입
+     **************************************************************************/
+    $(document).ready(function() {
+        // pageObject
+        let $P = pageObject["${pageName}"];
+
+        // FormFields
+        $P.formFields = new FimsFormFields($P.selector("frmEdit"));
+
+        /**************************************************************************
+         * DatasetControl
+         **************************************************************************/
+        // 발송 상세 정보 DatasetControl
+        $P.ctrlSndngDtl = new DatasetControl({
+              prefix: "sndng"
+            , prefixName: "발송반송"
+            , keymapper: info => info ? info.SNDNG_DTL_ID : ""
+            , dataGetter: obj => obj.sndngDtls
+            , appendData: true
+            , formats: {
+                  SNDNG_YMD: dateFormat
+                , DUDT_YMD: dateFormat
+                , SUM_AMT: numberFormat
+                , DLVR_YMD: dateFormat
+                , DLVR_TM: timeFormat
+                , REG_DT: datetimeFormat
+                , MDFCN_DT: datetimeFormat
+            }
+        });
+
+        // 공시송달 정보 DatasetControl
+        $P.ctrlSvbtc = new DatasetControl({
+              prefix: "svbtc"
+            , prefixName: "공시송달"
+            , keymapper: info => info ? info.SNDNG_DTL_ID : ""
+            , dataGetter: obj => obj.svbtcDtls
+            , appendData: true
+            , formats: {
+                  SNDNG_YMD: dateFormat
+                , SVBTC_YMD: dateFormat
+                , REG_DT: datetimeFormat
+            }
+        });
+
+        /**************************************************************************
+         * 발송 상세 DatasetControl 이벤트
+         **************************************************************************/
+        // Dataset 변경 이벤트
+        $P.ctrlSndngDtl.onDatasetChange = (obj, option) => {
+            $P.renderSndngDtlList();
+        };
+
+        // 현재 선택 자료 변경 이벤트
+        $P.ctrlSndngDtl.onCurrentChange = (item) => {
+            if (!item) return;
+
+            let key = item.data.SNDNG_DTL_ID;
+
+            $P.$find("tableTbodySndngDtl").setCurrentRow(key);
+
+            // 가상계좌번호
+            let vrActno = Array.from({length: 20}, (x, i) => {
+                let no = i + 1
+                  , bank = "BANK_NM" + (no > 1 ? no : "")
+                  , account = "VR_ACTNO" + (no > 1 ? no : "");
+
+                return [bank, account]
+            })
+            .map(entry => {
+                let bank = item.data[entry[0]]
+                  , account = item.data[entry[1]];
+
+                return bank ? bank + " " + account : null;
+            })
+            .filter(txt => txt != null)
+            .join("\n");
+
+            $P.$find("vrActno").val(vrActno);                                   // 가상 계좌번호
+            $P.$find("epayno").val(item.data.EPAYNO_MASK);                      // 전자납부번호
+        }
+
+        // 개별 반송 dialog
+        $P.ctrlSndngDtl.getInfo = (params) => {
+            if (!params) return;
+
+            ajax.get({
+                  url: wctx.url("/" + params.taskSeCd + "/sndb/sndb01/230/info.do")
+                , data: params || {}
+                , success: (resp) => {
+                    let dialogName = "sndbkDialog";
+                    let dialogId = dialogName + "-" + uuid();
+
+                    dialog.open({
+                          id: dialogId
+                        , title: params.title
+                        , size: "md"
+                        , content: resp
+                        , init: () => {
+                            setDialogZindex();
+
+                            $("#" + dialogId).attr("name", dialogName);
+                            $("#" + dialogId).attr("data-ref-doctx", "${pageName}");
+                        }
+                        , onClose: () => { $P.fnRefreshDataInfo(); }            // 자료 재조회
+                    });
+                }
+            });
+        }
+
+        // 개별 반송 삭제 callback
+        $P.ctrlSndngDtl.onRemove = (params, resp) => {
+            let showMessage = resp.rtnMsg.replace(/[S]|[F]/g, params.btnTitle);
+
+            dialog.alert({
+                  content: showMessage
+                , init: () => { setDialogZindex(); }
+                , onOK: () => { }
+                , onClose: () => {
+                    if (resp.saved) { $P.fnRefreshDataInfo(); }                 // 자료 재조회
+                }
+            });
+        }
+
+        // 개별 반송 삭제
+        $P.ctrlSndngDtl.remove = (params) => {
+            if (!params) return;
+
+            ajax.post({
+                  url: wctx.url("/" + params.taskSeCd + "/sndb/sndb01/220/remove.do")
+                , data: params || {}
+                , success: (resp) => {
+                    $P.ctrlSndngDtl.onRemove(params, resp);
+                }
+            });
+        }
+
+        /**************************************************************************
+         * 공시송달 DatasetControl 이벤트
+         **************************************************************************/
+        // Dataset 변경
+        $P.ctrlSvbtc.onDatasetChange = (obj, option) => {
+            $P.renderSvbtcList();
+        }
+
+        // 현재 선택 자료 변경 이벤트
+        $P.ctrlSvbtc.onCurrentChange = (item) => {
+            if (!item) return;
+
+            let key = item.data.SNDNG_DTL_ID;
+
+            $P.$find("tableTbodySvbtc").setCurrentRow(key);
+        }
+
+        /**************************************************************************
+         * DataTables 이벤트
+         **************************************************************************/
+        // DataTables에 click, dbclick 이벤트
+        $P.renderSndngDtlList = () => {
+            let sndngDtlList = $P.ctrlSndngDtl.dataset;
+            let empty = sndngDtlList.empty;
+
+            let trs = empty ? [$P.find("notFoundSndngDtl").innerHTML] :
+                sndngDtlList.inStrings($P.find("tableRowsSndngDtl").innerHTML
+                    , (str, dataItem) => str
+                        .replace(/{onclick}/gi, "pageObject['${pageName}'].ctrlSndngDtl.setCurrent('" + dataItem.getValue("SNDNG_DTL_ID") + "');")
+                );
+
+            $P.$find("tableTbodySndngDtl").html(trs.join());
+        }
+
+        // 공시송달 정보 DataTables에 click 이벤트
+        $P.renderSvbtcList = () => {
+            let svbtcList = $P.ctrlSvbtc.dataset;
+            let empty = svbtcList.empty;
+
+            let trs = empty ? [$P.find("notFoundSvbtc").innerHTML] :
+                svbtcList.inStrings($P.find("tableRowsSvbtc").innerHTML
+                    , (str, dataItem) => str
+                        .replace(/{onclick}/gi, "pageObject['${pageName}'].ctrlSvbtc.setCurrent('" + dataItem.getValue("SNDNG_DTL_ID") + "');")
+                );
+
+            $P.$find("tableTbodySvbtc").html(trs.join());
+        }
+
+        /**************************************************************************
+         * 사용자 함수(function)
+         **************************************************************************/
+        // 자료 재조회
+        $P.fnRefreshDataInfo = () => {
+            let crdnId = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID");    // 단속 ID
+
+            // 단속 ID 가 없다면.. return
+            if (typeof crdnId == "undefined" || crdnId == null || crdnId == "") return;
+
+            let params = {
+                  callPurpose: "refresh"
+                , sggCd: pageObject["${mainPageName}"].mainCtrl.getValue("SGG_CD")
+                , taskSeCd: pageObject["${mainPageName}"].mainCtrl.getValue("TASK_SE_CD")
+                , crdnId: pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID")
+                , delYn: "N"
+            };
+
+            ajax.get({
+                  url: wctx.url("/" + params.taskSeCd + "/sprt/sprt02/040/info.do")
+                , headers: { Accept: "application/json; charset=utf-8" }        // json
+                , data: params || {}
+                , success: resp => {
+                    // 초기화
+                    $P.find("frmEdit").reset();                                 // 화면 초기화
+
+                    $P.ctrlSndngDtl.dataset.clear();                            // 발송상세 Dataset 초기화
+                    $P.ctrlSvbtc.dataset.clear();                               // 공시송달 Dataset 초기화
+
+                    // sprt02010-main 단속 정보
+                    pageObject["${pageNameMain}"].mainControl.setData([resp.totalInfo]);
+
+                    // Dataset 셋팅
+                    $P.ctrlSndngDtl.setData(resp.sndngDtls);                    // 발송 이력 정보
+                    $P.ctrlSvbtc.setData(resp.svbtcDtls);                       // 공시송달 이력 정보
+                }
+            });
+        }
+
+        /**************************************************************************
+         * 버튼 clickEvent
+         **************************************************************************/
+        // 개별 반송 등록
+        $P.fnCreateSndbk = (btnTitle) => {
+            let sndngDtlId = $P.ctrlSndngDtl.getValue("SNDNG_DTL_ID");          // 발송 상세 ID
+            let undlvrRsnNm = $P.ctrlSndngDtl.getValue("UNDLVR_RSN_NM");        // 미배달 사유 명
+
+            // 발송상세ID 가 없다면.. return
+            if (typeof sndngDtlId == "undefined" || sndngDtlId == null || sndngDtlId == "") return;
+            // 미배달 사유 확인
+            if (undlvrRsnNm != "" ) {
+                dialog.alert({
+                      content: "미배달 사유가 " + undlvrRsnNm + " (으)로 반송 등록 되어 있습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , init: () => { setDialogZindex(); }
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            // 발송 상세 상태 코드
+            let sndngDtlSttsCd = $P.ctrlSndngDtl.getValue("SNDNG_DTL_STTS_CD");
+            let sndngDtlSttsNm = $P.ctrlSndngDtl.getValue("SNDNG_DTL_STTS_NM");
+
+            // 발송상세 상태코드 확인 (FIM050 - 03:발송 04:발송확인)
+            if (sndngDtlSttsCd != "03" && sndngDtlSttsCd != "04") {
+                dialog.alert({
+                      content: "[" + btnTitle + "]" + " 작업은 발송상세 상태가 '발송' 또는 '발송확인' 자료만 처리 가능합니다."
+                            + "<br>" + "발송상세상태 : " + sndngDtlSttsNm
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , init: () => { setDialogZindex(); }
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            let params = {
+                  callPurpose: "create"
+                , btnTitle: btnTitle
+                , sggCd: $P.ctrlSndngDtl.getValue("SGG_CD")                     // 시군구 코드
+                , taskSeCd: $P.ctrlSndngDtl.getValue("TASK_SE_CD")              // 업무 구분 코드
+                , sndngDtlId: $P.ctrlSndngDtl.getValue("SNDNG_DTL_ID")          // 발송 상세 ID
+                , delYn: "N"
+            };
+
+            $P.ctrlSndngDtl.getInfo(params);
+        }
+
+        // 개별 반송 수정
+        $P.fnUpdateSndbk = (btnTitle) => {
+            let sndngDtlId = $P.ctrlSndngDtl.getValue("SNDNG_DTL_ID");          // 발송 상세 ID
+
+            // 발송상세ID 가 없다면.. return
+            if (!sndngDtlId) return;
+
+            // 미배달 사유 코드
+            let undlvrRsnCd = $P.ctrlSndngDtl.getValue("UNDLVR_RSN_CD");
+            let undlvrRsnNm = $P.ctrlSndngDtl.getValue("UNDLVR_RSN_NM");
+
+            // 발송상세 상태코드 확인 (FIM050 - 05:반송)
+            if (!undlvrRsnNm) {
+                dialog.alert({
+                      content: "조회된 반송(미배달) 사유가 없습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , init: () => { setDialogZindex(); }
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            let params = {
+                  callPurpose: "update"
+                , title: btnTitle
+                , sggCd: $P.ctrlSndngDtl.getValue("SGG_CD")                     // 시군구 코드
+                , taskSeCd: $P.ctrlSndngDtl.getValue("TASK_SE_CD")              // 업무 구분 코드
+                , sndngDtlId: $P.ctrlSndngDtl.getValue("SNDNG_DTL_ID")          // 발송 상세 ID
+                , sndngDtlSttsCd: $P.ctrlSndngDtl.getValue("SNDNG_DTL_STTS_CD") // 발송 상세 상태 코드
+                , undlvrRsnNm: $P.ctrlSndngDtl.getValue("UNDLVR_RSN_NM")        // 미배달 사유 명
+                , delYn : "N"
+            };
+
+            $P.ctrlSndngDtl.getInfo(params);
+        }
+
+        // 개별 반송 삭제
+        $P.fnRemoveSndbk = (btnTitle) => {
+            let sndngDtlId = $P.ctrlSndngDtl.getValue("SNDNG_DTL_ID");          // 발송 상세 ID
+            let sndngDtlSttsCd = $P.ctrlSndngDtl.getValue("SNDNG_DTL_STTS_CD"); // 발송 상세 상태 코드
+            let sndngDtlSttsNm = $P.ctrlSndngDtl.getValue("SNDNG_DTL_STTS_NM"); // 발송 상세 상태 명
+
+            // 발송상세ID 가 없다면.. return
+            if (typeof sndngDtlId == "undefined" || sndngDtlId == null || sndngDtlId == "") return;
+            // 발송상세 상태코드 확인 (FIM050 - 05:반송)
+            if (sndngDtlSttsCd != "05") {
+                dialog.alert({
+                      content: "[" + btnTitle + "]" + " 작업은 발송상세 상태가 '반송' 자료만 처리 가능합니다."
+                            + "<br>" + "발송상세상태 : " + sndngDtlSttsNm
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , init: () => { setDialogZindex(); }
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            let params = {
+                  callPurpose: "delete"
+                , btnTitle: btnTitle
+                , sggCd: $P.ctrlSndngDtl.getValue("SGG_CD")                     // 시군구 코드
+                , taskSeCd: $P.ctrlSndngDtl.getValue("TASK_SE_CD")              // 업무 구분 코드
+                , sndngDtlId: $P.ctrlSndngDtl.getValue("SNDNG_DTL_ID")          // 발송 상세 ID
+                , sndngDtlSttsCd: "03"                                          // 발송 상세 상태 코드(SNDNG_DTL_STTS_CD) FIM050 - 03 발송
+            };
+
+            dialog.alert({
+                  content: "선택한 반송 정보를 삭제하시겠습니까?"
+                , init: () => { setDialogZindex(); }
+                , onOK: () => {
+                    $P.ctrlSndngDtl.remove(params);
+                }
+            });
+        }
+
+        // 우편 종적 보기
+        $P.fnViewPostTrace = () => {
+            let divKb = $P.ctrlSndngDtl.getValue("DIV_KB");                     // 취급 구분
+            let rgNo = $P.ctrlSndngDtl.getValue("RG_NO");                       // 등기번호
+
+            // 취급 구분이 일반이라면..
+            if (typeof divKb == "undefined" || divKb == null || divKb == "" || divKb == "000") return;
+            // 등기번호가 없다면..
+            if (typeof rgNo == "undefined" || rgNo == null || rgNo == "") return;
+
+            window.open("https://service.epost.go.kr/trace.RetrieveRegiPrclDeliv.postal?sid1=" + rgNo+"&displayHeader=N", "trace_view", "");
+        }
+
+        /**************************************************************************
+         * 초기 셋팅
+         **************************************************************************/
+        // 이벤트 설정
+        $P.setEvent = () => {
+            // 업무 버튼 이벤트
+            $P.$find("btnCreateSndbk").on("click", function() {
+                $P.fnCreateSndbk($P.$find("btnCreateSndbk").attr("title"));     // 개별 반송 등록
+            });
+            $P.$find("btnUpdateSndbk").on("click", function() {
+                $P.fnUpdateSndbk($P.$find("btnUpdateSndbk").attr("title"));     // 개별 반송 수정
+            });
+            $P.$find("btnRemoveSndbk").on("click", function() {
+                $P.fnRemoveSndbk($P.$find("btnRemoveSndbk").attr("title"));     // 개별 반송 삭제
+            });
+            $P.$find("btnViewPostTrace").on("click", function() {
+                $P.fnViewPostTrace($P.$find("btnViewPostTrace").attr("title")); // 개별 반송 등록
+            });
+
+            // DataTables width 변경 조정
+            fnMakeResizableTable($P.find("tableRspnsSndngDtl"));
+            fnMakeResizableTable($P.find("tableRspnsSvbtc"));
+        }
+
+        // 초기 화면 설정
+        $P.initForm = () => {
+            // 화면 호출(callPurpose)이 view라면 버튼 비활성화 disabled = true
+            if (pageObject['${mainPageName}'].callPurpose == "view") {
+                $P.$find("btnCreateSndbk").prop("disabled", true);
+                $P.$find("btnUpdateSndbk").prop("disabled", true);
+                $P.$find("btnRemoveSndbk").prop("disabled", true);
+            } else {
+                $P.$find("btnCreateSndbk").prop("disabled", false);
+                $P.$find("btnUpdateSndbk").prop("disabled", false);
+                $P.$find("btnRemoveSndbk").prop("disabled", false);
+            }
+        }
+
+        /**************************************************************************
+         * 최초 실행 함수
+         **************************************************************************/
+        // 1. 이벤트 설정
+        $P.setEvent();
+
+        // 2. 초기 화면 설정
+        $P.initForm();
+
+        // 정렬
+//        tableSorter($P.ctrlSndngDtl, "th[data-field]");
+
+        // 3. Dataset 설정
+        $P.ctrlSndngDtl.setData(${sndngDtls});                                  // 발송 이력
+        $P.ctrlSvbtc.setData(${svbtcDtls});                                     // 공시송달 이력
+    });
 
 </script>
diff --git a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02050-info.jsp b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02050-info.jsp
index 6a61af09..7e5300c0 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02050-info.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt02050-info.jsp
@@ -2,67 +2,68 @@
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
 
 <!-- Page Body -->
-<div class="content-pop">
+<div class="content-pop" data-doctx="${pageName}">
 	<!-- 화면 분할 -->
 	<div class="d-flex flex-row justify-content-evenly">
+
 		<!-- 감경 정보 -->
 		<div class="col-xl-6 mx-1">
 			<div class="card">
 				<!-- 업무 버튼 -->
 				<div class="container-page-btn">
-					<label class="w-px-120 bg-label-danger pe-2 col-form-label text-sm-center">감경 정보</label>
+					<label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">감경 정보</label>
 					<!-- 버튼 우측 정렬 -->
 					<span class="container-window-btn-right">
-						<button type="button" class="btn btn-primary w-px-120" id="btnCreateRdct--${pageName}" title="감경 등록">
+						<button type="button" class="btn btn-primary w-px-120" name="btnCreateRdct" title="감경 등록">
 							감경 등록
 						</button>
-						<button type="button" class="btn btn-primary w-px-120" id="btnUpdateRdct--${pageName}" title="감경 수정">
+						<button type="button" class="btn btn-primary w-px-120" name="btnUpdateRdct" title="감경 수정">
 							감경 수정
 						</button>
-						<button type="button" class="btn btn-primary w-px-120" id="btnRemoveRdct--${pageName}" title="감경 삭제">
+						<button type="button" class="btn btn-primary w-px-120" name="btnRemoveRdct" title="감경 삭제">
 							감경 삭제
 						</button>
 					</span>
 				</div> <!-- <div class="container-page-btn"> -->
 
 				<!-- 입력 영역 -->
-				<form id="frmRdctEdit--${pageName}" name="frmRdctEdit">
+				<form name="frmEditRdct">
 					<!-- hidden -->
-					<input type="hidden" id="rdctId--${pageName}${pageDataName1}" name="rdctId" data-map="RDCT_ID" />
+					<input type="hidden" name="rdctId" data-map="RDCT_ID" />
 
 					<div class="row g-1">
 						<!-- 감경 일자 -->
 						<div class="col-md-6">
-							<label for="rdctYmd--${pageName}${pageDataName1}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">감경일자</label>
-							<input type="text" class="form-control w-30" id="rdctYmd--${pageName}${pageDataName1}" name="rdctYmd" data-map="RDCT_YMD" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rdctYmd">감경일자</label>
+							<input is="id-input" type="text" class="form-control w-30" name="rdctYmd" data-map="RDCT_YMD" readonly />
 						</div>
 						<!--  -->
 						<div class="col-md-6">
 						</div>
 						<!-- 감경 사유 명 -->
 						<div class="col-md-6">
-							<label for="rdctRsnNm--${pageName}${pageDataName1}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">감경사유</label>
-							<input type="text" class="form-control w-50" id="rdctRsnNm--${pageName}${pageDataName1}" name="rdctRsnNm" data-map="RDCT_RSN_NM" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rdctRsnNm">감경사유</label>
+							<input is="id-input" type="text" class="form-control w-50" name="rdctRsnNm" data-map="RDCT_RSN_NM" readonly />
 						</div>
 						<!-- 감경 금액 -->
 						<div class="col-md-6">
-							<label for="rdctAmt--${pageName}${pageDataName1}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">감경금액</label>
-							<input type="text" class="form-control w-30 text-end" id="rdctAmt--${pageName}${pageDataName1}" name="rdctAmt" data-map="RDCT_AMT" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="rdctAmt">감경금액</label>
+							<input is="id-input" type="text" class="form-control w-30 text-end" name="rdctAmt" data-map="RDCT_AMT" readonly />
 						</div>
 						<!-- 기타 내용 -->
 						<div class="col-md-12">
-							<label for="etcCn--${pageName}${pageDataName1}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">기타내용</label>
-							<textarea type="text" class="form-control w-80" id="etcCn--${pageName}${pageDataName1}" name="etcCn" data-map="ETC_CN" rows="3" data-maxlengthb="1000" readonly></textarea>
+							<label class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end align-top" for="etcCn">기타내용</label>
+							<textarea type="text" class="form-control w-80" name="etcCn" data-map="ETC_CN" rows="3" data-maxlengthb="1000" readonly></textarea>
 						</div>
 						<!-- 수정 일시 -->
 						<div class="col-md-6">
-                            <label for="mdfcnDt--${pageName}${pageDataName1}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">수정일시</label>
-                            <input type="text" class="form-control w-45" id="mdfcnDt--${pageName}${pageDataName1}" name="mdfcnDt" data-map="MDFCN_DT" readonly />
+                            <label class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="mdfcnDt">수정일시</label>
+                            <input type="text" class="form-control w-45" name="mdfcnDt" data-map="MDFCN_DT" readonly />
 						</div>
 						<!-- 수정자 -->
 						<div class="col-md-6">
-                            <label for="mdfrNm--${pageName}${pageDataName1}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">수정자</label>
-                            <input type="text" class="form-control w-40" id="mdfrNm--${pageName}${pageDataName1}" name="mdfrNm" data-map="MDFR_NM" readonly />
+                            <label class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="mdfrNm">수정자</label>
+                            <input type="text" class="form-control w-40" name="mdfrNm" data-map="MDFR_NM" readonly />
 						</div>
 					</div> <!-- <div class="row g-1"> -->
 				</form>
@@ -76,62 +77,62 @@
 			<div class="card">
 				<!-- 업무 버튼 -->
 				<div class="container-page-btn">
-					<label class="w-px-120 bg-label-danger pe-2 col-form-label text-sm-center">부과제외 정보</label>
+					<label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">부과제외 정보</label>
 					<!-- 버튼 우측 정렬 -->
 					<span class="container-window-btn-right">
-						<button type="button" class="btn btn-primary w-px-120" id="btnCreateWrng--${pageName}" title="계고 등록">
+						<button type="button" class="btn btn-primary w-px-120" name="btnCreateWrng" title="계고 등록">
 							계고 등록
 						</button>
-						<button type="button" class="btn btn-primary w-px-120" id="btnCreateLevyExcl--${pageName}" title="부과제외 등록">
+						<button type="button" class="btn btn-primary w-px-120" name="btnCreateLevyExcl" title="부과제외 등록">
 							부과제외 등록
 						</button>
-						<button type="button" class="btn btn-primary w-px-120" id="btnUpdateLevyExcl--${pageName}" title="부과제외 수정">
+						<button type="button" class="btn btn-primary w-px-120" name="btnUpdateLevyExcl" title="부과제외 수정">
 							부과제외 수정
 						</button>
-						<button type="button" class="btn btn-primary w-px-120" id="btnRemoveLevyExcl--${pageName}" title="부과제외 삭제">
+						<button type="button" class="btn btn-primary w-px-120" name="btnRemoveLevyExcl" title="부과제외 삭제">
 							부과제외 삭제
 						</button>
 					</span>
 				</div> <!-- <div class="container-page-btn"> -->
 
 				<!-- 입력 영역 -->
-				<form id="frmExclEdit--${pageName}" name="frmExclEdit">
+				<form name="frmEditLevyExcl">
 					<!-- hidden -->
-					<input type="hidden" id="levyExclId--${pageName}${pageDataName2}" name="levyExclId" data-map="LEVY_EXCL_ID" />
+					<input type="hidden" name="levyExclId" data-map="LEVY_EXCL_ID" />
 
 					<div class="row g-1">
 						<!-- 부과제외 일자 -->
 						<div class="col-md-6">
-							<label for="levyExclYmd--${pageName}${pageDataName2}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">부과제외 일자</label>
-							<input type="text" class="form-control w-30" id="levyExclYmd--${pageName}${pageDataName2}" name="levyExclYmd" data-map="LEVY_EXCL_YMD" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="levyExclYmd">부과제외 일자</label>
+							<input is="id-input" type="text" class="form-control w-30" name="levyExclYmd" data-map="LEVY_EXCL_YMD" readonly />
 						</div>
 						<!--  -->
 						<div class="col-md-6">
 						</div>
 						<!-- 부과제외 구분 명 -->
 						<div class="col-md-6">
-							<label for="levyExclSeNm--${pageName}${pageDataName2}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">부과제외구분</label>
-							<input type="text" class="form-control w-30" id="levyExclSeNm--${pageName}${pageDataName2}" name="levyExclSeNm" data-map="LEVY_EXCL_SE_NM" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="levyExclSeNm">부과제외구분</label>
+							<input is="id-input" type="text" class="form-control w-30" name="levyExclSeNm" data-map="LEVY_EXCL_SE_NM" readonly />
 						</div>
 						<!-- 부과제외 사유 명 -->
 						<div class="col-md-6">
-							<label for="levyExclRsnNm--${pageName}${pageDataName2}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">부과제외사유</label>
-							<input type="text" class="form-control w-60" id="levyExclRsnNm--${pageName}${pageDataName2}" name="levyExclRsnNm" data-map="LEVY_EXCL_RSN_NM" readonly />
+							<label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="levyExclRsnNm">부과제외사유</label>
+							<input is="id-input" type="text" class="form-control w-60" name="levyExclRsnNm" data-map="LEVY_EXCL_RSN_NM" readonly />
 						</div>
 						<!-- 기타 내용 -->
 						<div class="col-md-12">
-							<label for="etcCn--${pageName}${pageDataName2}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">기타내용</label>
-							<textarea type="text" class="form-control w-80" id="etcCn--${pageName}${pageDataName2}" name="etcCn" data-map="ETC_CN" rows="3" data-maxlengthb="1000" readonly></textarea>
+							<label class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end align-top" for="etcCn">기타내용</label>
+							<textarea type="text" class="form-control w-80" name="etcCn" data-map="ETC_CN" rows="3" data-maxlengthb="1000" readonly></textarea>
 						</div>
 						<!-- 수정 일시 -->
 						<div class="col-md-6">
-                            <label for="mdfcnDt--${pageName}${pageDataName2}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">수정일시</label>
-                            <input type="text" class="form-control w-45" id="mdfcnDt--${pageName}${pageDataName2}" name="mdfcnDt" data-map="MDFCN_DT" readonly />
+                            <label class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="mdfcnDt">수정일시</label>
+                            <input type="text" class="form-control w-45" name="mdfcnDt" data-map="MDFCN_DT" readonly />
 						</div>
 						<!-- 수정자 -->
 						<div class="col-md-6">
-                            <label for="mdfrNm--${pageName}${pageDataName2}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">수정자</label>
-                            <input type="text" class="form-control w-40" id="mdfrNm--${pageName}${pageDataName2}" name="mdfrNm" data-map="MDFR_NM" readonly />
+                            <label class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="mdfrNm">수정자</label>
+                            <input type="text" class="form-control w-40" name="mdfrNm" data-map="MDFR_NM" readonly />
 						</div>
 					</div> <!-- <div class="row g-1"> -->
 				</form>
@@ -147,38 +148,37 @@
 			<div class="card">
 				<!-- 업무 버튼 -->
 				<div class="container-page-btn">
-					<label class="w-px-120 bg-label-danger pe-2 col-form-label text-sm-center">처리 상태 이력</label>
+					<label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">처리 상태 이력</label>
 				</div>
 				<div class="row g-1">
 					<!-- DataTables(그리드) -->
 					<div class="card-datatable text-nowrap">
-						<div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_0_wrapper--${pageName}">
-							<div class="table-responsive ox-scroll oy-scroll h-px-350" id="table-responsive-crdnSttsHstry--${pageName}">
-								<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer"
-										id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
+						<div class="dataTables_wrapper dt-bootstrap5 no-footer">
+							<div class="table-responsive ox-scroll oy-scroll h-px-350" name="tableRspnsCrdnSttsHstry">
+								<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" aria-describedby="DataTables_Table_0_info">
 									<thead class="sticky-thead">
-										<tr id="theadTrCrdnSttsHstry--${pageName}">
-											<th class="cmn" style="width: 180px;">등록일시</th>
-											<th class="cmn" style="width: 120px;">등록사용자</th>
-											<th class="cmn" style="width: 160px;">단속상태</th>
-											<th class="cmn" style="width: 280px;">기타내용</th>
-											<th class="cmn" style="width: 100px;">사용여부</th>
+										<tr name="theadTrCrdnSttsHstry">
+											<th class="cmn sorting" style="width: 180px;" data-field="REG_DT">등록일시</th>
+											<th class="cmn sorting" style="width: 120px;" data-field="RGTR_NM">등록사용자</th>
+											<th class="cmn sorting" style="width: 160px;" data-field="CRDN_STTS_NM">단속상태</th>
+											<th class="cmn sorting" style="width: 280px;" data-field="ETC_CN">기타내용</th>
+											<th class="cmn sorting" style="width: 100px;" data-field="USE_YN_NM">사용여부</th>
 											<th class="cmn dummy-th"></th>
 										</tr>
 									</thead>
-									<tbody id="tbodyCrdnSttsHstry--${pageName}">
+									<tbody name="tableTbodyCrdnSttsHstry">
 									</tbody>
-									<template id="crdnSttsHstryRow--${pageName}">
-										<tr data-key="{STTS_HSTRY_ID}">
+									<template is="curly-brackets" name="tableRowsCrdnSttsHstry">
+										<tr data-key="STTS_HSTRY_ID">
 											<td class="cmn text-center" onclick="{onclick}">{REG_DT}</td>
 											<td class="cmn text-center" onclick="{onclick}">{RGTR_NM}</td>
 											<td class="cmn text-center" onclick="{onclick}">{CRDN_STTS_NM}</td>
-											<td class="cmn text-start" onclick="{onclick}">{ETC_CN}</td>
+											<td class="cmn text-start"  onclick="{onclick}">{ETC_CN}</td>
 											<td class="cmn text-center" onclick="{onclick}">{USE_YN_NM}</td>
 											<td class="cmn dummy-td"></td>
 										</tr>
 									</template>
-									<template id="crdnSttsHstryNotFound--${pageName}">
+									<template name="notFoundCrdnSttsHstry">
 										<tr class="odd">
 											<td valign="top" colspan="6" class="dataTables_empty text-center">처리상태 이력 정보를 찾지 못했습니다.</td>
 										</tr>
@@ -197,36 +197,35 @@
 			<div class="card">
 				<!-- 업무 버튼 -->
 				<div class="container-page-btn">
-					<label class="w-px-120 bg-label-danger pe-2 col-form-label text-sm-center">주소 변동 이력</label>
+					<label class="col-form-label bg-label-danger pe-2 w-px-120 text-sm-center">주소 변동 이력</label>
 				</div>
 				<div class="row g-1">
 					<!-- DataTables(그리드) -->
 					<div class="card-datatable text-nowrap">
-						<div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_1_wrapper--${pageName}">
-							<div class="table-responsive ox-scroll oy-scroll h-px-350" id="table-responsive-1--${pageName}">
-								<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer"
-										id="DataTables_Table_1--${pageName}" aria-describedby="DataTables_Table_0_info">
+						<div class="dataTables_wrapper dt-bootstrap5 no-footer">
+							<div class="table-responsive ox-scroll oy-scroll h-px-350" name="tableRspnsPayerHstry">
+								<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" aria-describedby="DataTables_Table_0_info">
 									<thead class="sticky-thead">
-										<tr id="theadTrPayerHstry--${pageName}">
-											<th class="cmn" style="width: 180px;">등록일시</th>
-											<th class="cmn" style="width: 140px;">등록사용자</th>
-											<th class="cmn" style="width: 100px;">우편번호</th>
-											<th class="cmn" style="width: 480px;">전체주소</th>
+										<tr name="theadTrPayerHstry">
+											<th class="cmn sorting" style="width: 180px;" data-field="REG_DT">등록일시</th>
+											<th class="cmn sorting" style="width: 140px;" data-field="RGTR_NM">등록사용자</th>
+											<th class="cmn sorting" style="width: 100px;" data-field="ZIP">우편번호</th>
+											<th class="cmn sorting" style="width: 480px;" data-field="WHOL_ADDR">전체주소</th>
 											<th class="cmn dummy-th"></th>
 										</tr>
 									</thead>
-									<tbody id="tbodyPayerHstry--${pageName}">
+									<tbody name="tableTbodyPayerHstry">
 									</tbody>
-									<template id="payerHstryRow--${pageName}">
-										<tr data-key="{HSTRY_SN}">
+									<template is="curly-brackets" name="tableRowsPayerHstry">
+										<tr data-key="HSTRY_SN">
 											<td class="cmn text-center" onclick="{onclick}">{REG_DT}</td>
 											<td class="cmn text-center" onclick="{onclick}">{RGTR_NM}</td>
 											<td class="cmn text-center" onclick="{onclick}">{ZIP}</td>
-											<td class="cmn text-start" onclick="{onclick}">{WHOL_ADDR}</td>
+											<td class="cmn text-start"  onclick="{onclick}">{WHOL_ADDR}</td>
 											<td class="cmn dummy-td"></td>
 										</tr>
 									</template>
-									<template id="payerHstryNotFound--${pageName}">
+									<template name="notFoundPayerHstry">
 										<tr class="odd">
 											<td valign="top" colspan="5" class="dataTables_empty text-center">주소변동 이력 정보를 찾지 못했습니다.</td>
 										</tr>
@@ -243,458 +242,436 @@
 </div> <!-- <div class="content-pop"> -->
 
 <script>
-	/**************************************************************************
-	 * Global Variable
-	 **************************************************************************/
-	pageObject["${pageName}"] = {};
-
-	/**************************************************************************
-	 * script 진입
-	 **************************************************************************/
-	$(document).ready(function() {
-		// pageObject
-		let $P = pageObject["${pageName}"];
-
-		// FormFields
-	 	$P.rdctFormFields = new FimsFormFields("#frmRdctEdit--${pageName}");
-	 	$P.exclFormFields = new FimsFormFields("#frmExclEdit--${pageName}");
-
-		/**************************************************************************
-		 * DatasetControl
-		 **************************************************************************/
-		// 감경 정보 DatasetControl
-		$P.rdctControl = new DatasetControl({
-			  prefix: "rdct"
-			, prefixName: "감경"
-			, keymapper: info => info ? info.RDCT_ID : ""
-			, dataGetter: obj => obj.rdctInfo
-			, formats: {
-				  RDCT_YMD: dateFormat
-				, RDCT_AMT: numberFormat
-				, REG_DT: datetimeFormat
-				, MDFCN_DT: datetimeFormat
-			}
-		});
-
-		// 부과제외 정보 DatasetControl
-		$P.levyExclControl = new DatasetControl({
-			  prefix: "levyExcl"
-			, prefixName: "부과제외"
-			, keymapper: info => info ? info.LEVY_EXCL_ID : ""
-			, dataGetter: obj => obj.levyExclInfo
-			, formats: {
-				  LEVY_EXCL_YMD: dateFormat
-				, REG_DT: datetimeFormat
-				, MDFCN_DT: datetimeFormat
-			}
-		});
-
-		// 단속상태이력 DatasetControl
-		$P.crdnSttsHstryControl = new DatasetControl({
-			  prefix: "crdnSttsHstry"
-			, prefixName: "단속상태 이력"
-			, keymapper: info => info ? info.STTS_HSTRY_ID : ""
-			, dataGetter: obj => obj.crdnSttsHstrys
-			, appendData: true
-			, formats: {
-				REG_DT: datetimeFormat
-			}
-		});
-
-		// 납부자 변경 이력 DatasetControl
-		$P.payerHstryControl = new DatasetControl({
-			  prefix: "payerHstry"
-			, prefixName: "납부자변경 이력"
-			, keymapper: info => info ? info.HSTRY_SN : ""
-			, dataGetter: obj => obj.payerHstrys
-			, appendData: true
-			, formats: {
-				REG_DT: datetimeFormat
-			}
-		});
-
-		/**************************************************************************
-		 * 감경 DatasetControl 이벤트
-		 **************************************************************************/
-		// 현재 선택 자료 변경 이벤트
-		$P.rdctControl.onCurrentChange = (item) => {
-			if (!item) return;
-
-			$P.rdctFormFields.set($P.rdctControl, item);
-		}
-
-		// 감경 dialog
-		$P.rdctControl.getInfo = (params) => {
-			if (!params) return;
-
-			ajax.get({
-				  url: wctx.url("/" + params.taskSeCd + "/levy/levy02/020/info.do") + "?openerPageName=${pageName}"
-				, data: params || {}
-				, success: resp => {
-					if ((typeof resp) != "string") {
-						if (resp.rtnMsg != "") {
-							dialog.alert(resp.rtnMsg);
-						}
-						return;
-					} else {
-						dialog.open({
-							  id: $P.rdctControl.prefixed("Dialog--${pageName}")
-							, title: params.title
-							, content: resp
-							, size: "lg"
-							, onClose: () => { $P.fnRefreshDataInfo(); }		// 자료 재조회
-						});
-					}
-				}
-			});
-		}
-
-		// 감경 삭제 callback
-		$P.rdctControl.onRemove = (resp) => {
-			let btnTitle = $("#btnRemoveRdct--${pageName}").attr("title");
-			let showMessage = resp.rtnMsg.replace(/[S]|[F]/g, btnTitle);
-
-			// 메시지 출력
-			dialog.alert({
-				  content: showMessage
-				, onOK: () => { }
-			});
-
-			if (resp.saved) { $P.fnRefreshDataInfo(); }							// 자료 재조회
-		}
-
-		// 감경 삭제
-		$P.rdctControl.remove = (params) => {
-			if (!params) return;
-
-			ajax.post({
-				  url: wctx.url("/" + params.taskSeCd + "/levy/levy02/010/remove.do")
-				, data: params
-				, success: resp => $P.rdctControl.onRemove(resp)
-			});
-		}
-
-		/**************************************************************************
-		 * 부과 제외 DatasetControl 이벤트
-		 **************************************************************************/
-		// 현재 선택 자료 변경 이벤트
-		$P.levyExclControl.onCurrentChange = (item) => {
-			if (!item) return;
-
-			$P.exclFormFields.set($P.levyExclControl, item);
-		}
-
-		// 부과제외 dialog
-		$P.levyExclControl.getInfo = (params) => {
-			if (!params) return;
-
-			ajax.get({
-				  url: wctx.url("/" + params.taskSeCd + "/excl/excl01/020/info.do") + "?openerPageName=${pageName}"
-				, data: params || {}
-				, success: resp => {
-					if ((typeof resp) != "string") {
-						if (resp.rtnMsg != "") {
-							dialog.alert(resp.rtnMsg);
-						}
-						return;
-					} else {
-						dialog.open({
-							  id: $P.levyExclControl.prefixed("Dialog--${pageName}")
-							, title: params.title
-							, content: resp
-							, size: "md"
-							, onClose: () => { $P.fnRefreshDataInfo(); }		// 자료 재조회
-						});
-					}
-				}
-			});
-		}
-
-		// 부과제외 삭제 callback
-		$P.levyExclControl.onRemove = (resp) => {
-			let btnTitle = $("#btnRemoveLevyExcl--${pageName}").attr("title");
-			let showMessage = resp.rtnMsg.replace(/[S]|[F]/g, btnTitle);
-
-			// 메시지 출력
-			dialog.alert({
-				  content: showMessage
-				, onOK: () => { }
-			});
-
-			if (resp.saved) { $P.fnRefreshDataInfo(); }							// 자료 재조회
-		}
-
-		// 부과제외 삭제
-		$P.levyExclControl.remove = (params) => {
-			if (!params) return;
-
-			ajax.post({
-				  url: wctx.url("/" + params.taskSeCd + "/excl/excl01/010/remove.do")
-				, data: params || {}
-				, success: resp => $P.levyExclControl.onRemove(resp)
-			});
-		}
-
-		/**************************************************************************
-		 * 단속 처리 상태 이력 DatasetControl 이벤트
-		 **************************************************************************/
-		// Dataset 변경
-		$P.crdnSttsHstryControl.onDatasetChange = (obj, option) => {
-			$P.renderCrdnSttsHstryList();
-		}
-
-		// 현재 선택 자료 변경 이벤트
-		$P.crdnSttsHstryControl.onCurrentChange = (item) => {
- 			if (!item) return;
-
- 			let key = item.data.STTS_HSTRY_ID;
-
- 			$("#tbodyCrdnSttsHstry--${pageName}").setCurrentRow(key);
- 		}
-
-		/**************************************************************************
-		 * 납부자 변경 이력 DatasetControl 이벤트
-		 **************************************************************************/
-		// Dataset 변경
-		$P.payerHstryControl.onDatasetChange = (obj, option) => {
-			$P.renderPayerHstryList();
-		}
-
-		// 현재 선택 자료 변경 이벤트
-		$P.payerHstryControl.onCurrentChange = (item) => {
-			if (!item) return;
-
-			let key = item.data.HSTRY_SN;
-
-			$("#tbodyPayerHstry--${pageName}").setCurrentRow(key);
-		}
-
-		/**************************************************************************
-		 * DataTables 이벤트
-		 **************************************************************************/
-		// 단속 상태 이력 DataTables에 click 이벤트
-		$P.renderCrdnSttsHstryList = () => {
-			let crdnSttsHstryList = $P.crdnSttsHstryControl.dataset;
-			let empty = crdnSttsHstryList.empty;
-
-			let trs = empty ?
-				[document.getElementById("crdnSttsHstryNotFound--${pageName}").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
-				crdnSttsHstryList.inStrings(
-					document.getElementById("crdnSttsHstryRow--${pageName}").innerHTML, <%-- from template#${infoPrefix}Row --%>
-					(str, dataItem) => str
-						.replace(/{onclick}/gi, "pageObject['${pageName}'].crdnSttsHstryControl.setCurrent('" + dataItem.getValue("STTS_HSTRY_ID") + "');")
-				);
-
-			$("#tbodyCrdnSttsHstry--${pageName}").html(trs.join());
-		}
-
-		// 납부자 이력 DataTables에 click 이벤트
-		$P.renderPayerHstryList = () => {
-			let payerHstryList = $P.payerHstryControl.dataset;
-			let empty = payerHstryList.empty;
-
-			let trs = empty ?
-				[document.getElementById("payerHstryNotFound--${pageName}").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
-				payerHstryList.inStrings(
-					document.getElementById("payerHstryRow--${pageName}").innerHTML, <%-- from template#${infoPrefix}Row --%>
-					(str, dataItem) => str
-						.replace(/{onclick}/gi, "pageObject['${pageName}'].payerHstryControl.setCurrent('" + dataItem.getValue("HSTRY_SN") + "');")
-				);
-
-			$("#tbodyPayerHstry--${pageName}").html(trs.join());
-		}
-
-		/**************************************************************************
-		 * 사용자 함수(function)
-		 **************************************************************************/
-		// 자료 재조회
-		$P.fnRefreshDataInfo = () => {
-			let crdnId = $("#crdnId--${pageNameMain}").val();
-			// 단속 ID 가 없다면.. return
-			if (typeof crdnId == "undefined" || crdnId == null || crdnId == "") return;
-
-			let params = {
-				  callPurpose: "refresh"
-				, sggCd: $("#sggCd--${pageNameMain}").val()
-				, taskSeCd: $("#taskSeCd--${pageNameMain}").val()
-				, crdnId: crdnId
-				, rtpyrId: $("#rtpyrId--${pageNameMain}").val()
-				, delYn: "N"
-			};
-
-			ajax.get({
-				  url: wctx.url("/" + params.taskSeCd + "/sprt/sprt02/050/info.do")
-				, headers: { Accept: "application/json; charset=utf-8" }		// json
-				, data: params || {}
-				, success: resp => {
-					// 초기화
-					$("#frmRdctEdit--${pageName}")[0].reset();					// 감경 화면 초기화
-					$("#frmExclEdit--${pageName}")[0].reset();					// 부과제외 화면 초기화
-					$P.rdctControl.dataset.clear();							    // 감경 Dataset 초기화
-					$P.levyExclControl.dataset.clear();							// 부과제외 Dataset 초기화
-					$P.crdnSttsHstryControl.dataset.clear();					// 단속상태 이력 Dataset 초기화
-					$P.payerHstryControl.dataset.clear();						// 납부자 이력 Dataset 초기화
-
-					// sprt02010-main 단속 정보
-					pageObject["${pageNameMain}"].mainControl.setData([resp.totalInfo]);
-
-					// Dataset 셋팅
-					if (resp.rdctInfo) { $P.rdctControl.setData([resp.rdctInfo]); }				    // 감경 정보
-					if (resp.levyExclInfo) { $P.levyExclControl.setData([resp.levyExclInfo]); }		// 부과제외 정보
-
-					$P.crdnSttsHstryControl.setData(resp.crdnSttsHstrys);		// 단속상태 이력
-					$P.payerHstryControl.setData(resp.payerHstrys);				// 납부자 이력
-				}
-			});
-		}
-
-		// 사유 callback
-		$P.callbackRsnRdct = (obj) => {
-			// 서버에 전송할 data(파라미터) 생성
-			let params = {
-				  sggCd: $P.rdctControl.dataset.getValue("SGG_CD")				// 시군구 코드
-				, taskSeCd: $P.rdctControl.dataset.getValue("TASK_SE_CD")		// 업무 구분 코드
-				, rdctId: $P.rdctControl.dataset.getValue("RDCT_ID")			// 감경 ID
-				, delRsn: obj.reason											// 삭제 사유
-			};
-
-			$P.rdctControl.remove(params);
-		}
-
-		// 부과제외 삭제 사유 callback
-		$P.callbackRsnLevyExcl = (obj) => {
-			// 서버에 전송할 data(파라미터) 생성
-			let params = {
-				  sggCd: $P.levyExclControl.dataset.getValue("SGG_CD")					// 시군구 코드
-				, taskSeCd: $P.levyExclControl.dataset.getValue("TASK_SE_CD")			// 업무 구분 코드
-				, levyExclId: $P.levyExclControl.dataset.getValue("LEVY_EXCL_ID")		// 부과제외 ID
-				, delRsn: obj.reason													// 삭제 사유
-			};
-
-			$P.levyExclControl.remove(params);
-		}
-
-		/**************************************************************************
-		 * 버튼 clickEvent
-		 **************************************************************************/
-		// 감경 등록
-		$P.fnCreateRdct = (title) => {
-			// 단속 ID
-			let crdnId = $("#crdnId--${pageNameMain}").val();
-			// 단속 ID 가 없다면.. return
-			if (typeof crdnId == "undefined" || crdnId == null || crdnId == "") return;
-
-			// 납부자 ID
-			let rtpyrId = $("#rtpyrId--${pageNameMain}").val();
-			// 납부자 ID 가 없다면.. return
-			if (typeof rtpyrId == "undefined" || rtpyrId == null || rtpyrId == "") {
-				dialog.alert({
-					  content: "납부자가 등록되지 않았습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			// 단속 상태 코드
-			let crdnSttsCd = $("#crdnSttsCd--${pageNameMain}").val();
-			let crdnSttsNm = $("#crdnSttsNm--${pageNameMain}").val();
-			// 단속 상태 코드 확인
-			if (Number(crdnSttsCd) < 21 || Number(crdnSttsCd) > 45) {
-				dialog.alert({
-					  content: "[" + title + "]" + " 작업은 단속상태가 '납부자등록', '본부과 이전' 자료만 처리 가능합니다."
-							+ "<br>" + "단속상태 : " + crdnSttsNm
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose: "create"
-				, title: title
-				, sggCd: $("#sggCd--${pageNameMain}").val()
-				, taskSeCd: $("#taskSeCd--${pageNameMain}").val()
-				, crdnId: crdnId
-				, rtpyrId: rtpyrId
-				, delYn: "N"
-			};
-
-			$P.rdctControl.getInfo(params);
-		}
-
-		// 감경 수정
-		$P.fnUpdateRdct = (title) => {
-			// 감경 ID
-			let rdctId = $P.rdctControl.dataset.getValue("RDCT_ID");
-			// 감경 ID 가 없다면.. return
-			if (typeof rdctId == "undefined" || rdctId == null || rdctId == "") {
-				dialog.alert({
-					  content: "조회된 감경 대장 정보가 없습니다."
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			// 단속 상태 코드
-			let crdnSttsCd = $("#crdnSttsCd--${pageNameMain}").val();
-			let crdnSttsNm = $("#crdnSttsNm--${pageNameMain}").val();
-			// 단속 상태 코드 확인
-			if (Number(crdnSttsCd) > 45) {
-				dialog.alert({
-					  content: "[" + title + "]" + " 작업은 단속상태가 '본부과 이전' 자료만 처리 가능합니다."
-							+ "<br>" + "단속상태 : " + crdnSttsNm
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose : "update"
-				, title: title
-				, sggCd: $P.rdctControl.dataset.getValue("SGG_CD")
-				, taskSeCd: $P.rdctControl.dataset.getValue("TASK_SE_CD")
-				, crdnId: $P.rdctControl.dataset.getValue("CRDN_ID")
-				, rdctId: rdctId
-				, delYn: "N"
-			};
-
-			$P.rdctControl.getInfo(params);
-		}
-
-		// 감경 삭제
-		$P.fnRemoveRdct = (title) => {
-			// 감경 ID
-			let rdctId = $P.rdctControl.dataset.getValue("RDCT_ID");
-			// 감경 ID 가 없다면.. return
-			if (typeof rdctId == "undefined" || rdctId == null || rdctId == "") {
-				dialog.alert({
-					  content: "조회된 감경 대장 정보가 없습니다."
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			// 단속 상태 코드
-			let crdnSttsCd = $("#crdnSttsCd--${pageNameMain}").val();
-			let crdnSttsNm = $("#crdnSttsNm--${pageNameMain}").val();
-
-			// 단속 상태 코드 확인
-			if (Number(crdnSttsCd) > 45) {
-				dialog.alert({
-					  content: "[" + title + "]" + " 작업은 단속상태가 '본부과 이전' 자료만 처리 가능합니다."
-							+ "<br>" + "단속상태 : " + crdnSttsNm
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
+    /**************************************************************************
+     * Global Variable
+     **************************************************************************/
+    pageObject["${pageName}"] = newDoctxFinder("${pageName}");
+
+    /**************************************************************************
+     * script 진입
+     **************************************************************************/
+    $(document).ready(function() {
+        // pageObject
+        let $P = pageObject["${pageName}"];
+
+        // FormFields
+        $P.formFieldsRdct = new FimsFormFields($P.selector("frmEditRdct"));
+        $P.formFieldsLevyExcl = new FimsFormFields($P.selector("frmEditLevyExcl"));
+
+        /**************************************************************************
+         * DatasetControl
+         **************************************************************************/
+        // 감경 정보 DatasetControl
+        $P.ctrlRdct = new DatasetControl({
+              prefix: "rdct"
+            , prefixName: "감경"
+            , keymapper: info => info ? info.RDCT_ID : ""
+            , dataGetter: obj => obj.rdctInfo
+            , formats: {
+                  RDCT_YMD: dateFormat
+                , RDCT_AMT: numberFormat
+                , REG_DT: datetimeFormat
+                , MDFCN_DT: datetimeFormat
+            }
+        });
+
+        // 부과제외 정보 DatasetControl
+        $P.ctrlLevyExcl = new DatasetControl({
+              prefix: "levyExcl"
+            , prefixName: "부과제외"
+            , keymapper: info => info ? info.LEVY_EXCL_ID : ""
+            , dataGetter: obj => obj.levyExclInfo
+            , formats: {
+                  LEVY_EXCL_YMD: dateFormat
+                , REG_DT: datetimeFormat
+                , MDFCN_DT: datetimeFormat
+            }
+        });
+
+        // 단속 상태 이력 DatasetControl
+        $P.ctrlCrdnSttsHstry = new DatasetControl({
+              prefix: "crdnSttsHstry"
+            , prefixName: "단속상태 이력"
+            , keymapper: info => info ? info.STTS_HSTRY_ID : ""
+            , dataGetter: obj => obj.crdnSttsHstrys
+            , appendData: true
+            , formats: {
+                REG_DT: datetimeFormat
+            }
+        });
+
+        // 납부자 변경 이력 DatasetControl
+        $P.ctrlPayerHstry = new DatasetControl({
+              prefix: "payerHstry"
+            , prefixName: "납부자변경 이력"
+            , keymapper: info => info ? info.HSTRY_SN : ""
+            , dataGetter: obj => obj.payerHstrys
+            , appendData: true
+            , formats: {
+                REG_DT: datetimeFormat
+            }
+        });
+
+        /**************************************************************************
+         * 감경 DatasetControl 이벤트
+         **************************************************************************/
+        // 현재 선택 자료 변경 이벤트
+        $P.ctrlRdct.onCurrentChange = (item) => {
+            if (!item) return;
+
+            // Dataset 셋팅
+            $P.formFieldsRdct.set($P.ctrlRdct, item);
+
+            let key = item.data.RDCT_ID;
+        }
+
+        // 감경 정보 dialog
+        $P.ctrlRdct.getInfo = (params) => {
+            if (!params) return;
+
+            ajax.get({
+                  url: wctx.url("/" + params.taskSeCd + "/levy/levy02/020/info.do")
+                , data: params || {}
+                , success: (resp) => {
+                    if ((typeof resp) != "string") {
+                        if (resp.rtnMsg != "") {
+                            dialog.alert(resp.rtnMsg);
+                        }
+                        return;
+                    } else {
+                        let dialogName = $P.ctrlRdct.prefixed("Dialog");
+                        let dialogId = dialogName + "-" + uuid();
+
+                        dialog.open({
+                              id: dialogId
+                            , title: params.btnTitle
+                            , size: "lg"
+                            , content: resp
+                            , init: () => {
+                                setDialogZindex();
+
+                                $("#" + dialogId).attr("name", dialogName);
+                                $("#" + dialogId).attr("data-ref-doctx", "${pageName}");
+                            }
+                            , onClose: () => { $P.fnRefreshDataInfo(); }        // 자료 재조회
+                        });
+                    }
+                }
+            });
+        }
+
+        // 감경 삭제 callback
+        $P.ctrlRdct.onRemove = (params, resp) => {
+            let showMessage = resp.rtnMsg.replace(/[S]|[F]/g, params.btnTitle);
+
+            dialog.alert({
+                  content: showMessage
+                , init: () => { setDialogZindex(); }
+                , onOK: () => { }
+                , onClose: () => {
+                    if (resp.saved) { $P.fnRefreshDataInfo(); }                 // 자료 재조회
+                }
+            });
+        }
+
+        // 감경 삭제
+        $P.ctrlRdct.remove = (params) => {
+            if (!params) return;
+
+            ajax.post({
+                  url: wctx.url("/" + params.taskSeCd + "/levy/levy02/010/remove.do")
+                , data: params || {}
+                , success: (resp) => {
+                    $P.rdctControl.onRemove(params, resp);
+                }
+            });
+        }
+
+        /**************************************************************************
+         * 부과 제외 DatasetControl 이벤트
+         **************************************************************************/
+        // 현재 선택 자료 변경 이벤트
+        $P.ctrlLevyExcl.onCurrentChange = (item) => {
+            if (!item) return;
+
+            $P.formFieldsLevyExcl.set($P.ctrlLevyExcl, item);
+
+            let key = item.data.LEVY_EXCL_ID;
+        }
+
+        // 부과제외 정보 dialog
+        $P.ctrlLevyExcl.getInfo = (params) => {
+            if (!params) return;
+
+            ajax.get({
+                  url: wctx.url("/" + params.taskSeCd + "/excl/excl01/020/info.do")
+                , data: params || {}
+                , success: (resp) => {
+                    if ((typeof resp) != "string") {
+                        if (resp.rtnMsg != "") {
+                            dialog.alert(resp.rtnMsg);
+                        }
+                        return;
+                    } else {
+                        let dialogName = $P.ctrlLevyExcl.prefixed("Dialog");
+                        let dialogId = dialogName + "-" + uuid();
+
+                        dialog.open({
+                              id: dialogId
+                            , title: params.btnTitle
+                            , size: "md"
+                            , content: resp
+                            , init: () => {
+                                setDialogZindex();
+
+                                $("#" + dialogId).attr("name", dialogName);
+                                $("#" + dialogId).attr("data-ref-doctx", "${pageName}");
+                            }
+                            , onClose: () => { $P.fnRefreshDataInfo(); }        // 자료 재조회
+                        });
+                    }
+                }
+            });
+        }
+
+        // 부과제외 삭제 callback
+        $P.ctrlLevyExcl.onRemove = (params, resp) => {
+            let showMessage = resp.rtnMsg.replace(/[S]|[F]/g, params.btnTitle);
+
+            // 메시지 출력
+            dialog.alert({
+                  content: showMessage
+                , init: () => { setDialogZindex(); }
+                , onOK: () => { }
+                , onClose: () => {
+                    if (resp.saved) { $P.fnRefreshDataInfo(); }                 // 자료 재조회
+                }
+            });
+        }
+
+        // 부과제외 삭제
+        $P.ctrlLevyExcl.remove = (params) => {
+            if (!params) return;
+
+            ajax.post({
+                  url: wctx.url("/" + params.taskSeCd + "/excl/excl01/010/remove.do")
+                , data: params || {}
+                , success: (resp) => {
+                    $P.ctrlLevyExcl.onRemove(params, resp);
+                }
+            });
+        }
+
+        /**************************************************************************
+         * 단속 처리 상태 이력 DatasetControl 이벤트
+         **************************************************************************/
+        // Dataset 변경
+        $P.ctrlCrdnSttsHstry.onDatasetChange = (obj, option) => {
+            $P.renderCrdnSttsHstryList();
+        }
+
+        // 현재 선택 자료 변경 이벤트
+        $P.ctrlCrdnSttsHstry.onCurrentChange = (item) => {
+            if (!item) return;
+
+            let key = item.data.STTS_HSTRY_ID;
+
+            $P.$find("tableTbodyCrdnSttsHstry").setCurrentRow(key);
+        }
+
+        /**************************************************************************
+         * 납부자 변경 이력 DatasetControl 이벤트
+         **************************************************************************/
+        // Dataset 변경
+        $P.ctrlPayerHstry.onDatasetChange = (obj, option) => {
+            $P.renderPayerHstryList();
+        }
+
+        // 현재 선택 자료 변경 이벤트
+        $P.ctrlPayerHstry.onCurrentChange = (item) => {
+            if (!item) return;
+
+            let key = item.data.HSTRY_SN;
+
+            $P.$find("tableTbodyPayerHstry").setCurrentRow(key);
+        }
+
+        /**************************************************************************
+         * DataTables 이벤트
+         **************************************************************************/
+        // 단속 상태 이력 DataTables에 click 이벤트
+        $P.renderCrdnSttsHstryList = () => {
+            let crdnSttsHstryList = $P.ctrlCrdnSttsHstry.dataset;
+            let empty = crdnSttsHstryList.empty;
+
+            let trs = empty ? [$P.find("notFoundCrdnSttsHstry").innerHTML] :
+                crdnSttsHstryList.inStrings($P.find("tableRowsCrdnSttsHstry").innerHTML
+                    , (str, dataItem) => str
+                        .replace(/{onclick}/gi, "pageObject['${pageName}'].ctrlCrdnSttsHstry.setCurrent('" + dataItem.getValue("STTS_HSTRY_ID") + "');")
+                );
+
+            $P.$find("tableTbodyCrdnSttsHstry").html(trs.join());
+        }
+
+        // 납부자 이력 DataTables에 click 이벤트
+        $P.renderPayerHstryList = () => {
+            let payerHstryList = $P.ctrlPayerHstry.dataset;
+            let empty = payerHstryList.empty;
+
+            let trs = empty ? [$P.find("notFoundPayerHstry").innerHTML] :
+                payerHstryList.inStrings($P.find("tableRowsPayerHstry").innerHTML
+                    , (str, dataItem) => str
+                        .replace(/{onclick}/gi, "pageObject['${pageName}'].ctrlPayerHstry.setCurrent('" + dataItem.getValue("STTS_HSTRY_ID") + "');")
+                );
+
+            $P.$find("tableTbodyPayerHstry").html(trs.join());
+        }
+
+        /**************************************************************************
+         * 사용자 함수(function)
+         **************************************************************************/
+        // 자료 재조회
+        $P.fnRefreshDataInfo = () => {
+            let crdnId = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID");    // 단속 ID
+
+            // 단속 ID 가 없다면.. return
+            if (typeof crdnId == "undefined" || crdnId == null || crdnId == "") return;
+
+            let params = {
+                  callPurpose: "refresh"
+                , sggCd: pageObject["${mainPageName}"].mainCtrl.getValue("SGG_CD")
+                , taskSeCd: pageObject["${mainPageName}"].mainCtrl.getValue("TASK_SE_CD")
+                , crdnId: pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID")
+                , delYn: "N"
+            };
+
+            ajax.get({
+                  url: wctx.url("/" + params.taskSeCd + "/sprt/sprt02/050/info.do")
+                , headers: { Accept: "application/json; charset=utf-8" }        // json
+                , data: params || {}
+                , success: (resp) => {
+                    // 초기화
+                    $P.find("frmEditRdct").reset();                             // 감경 화면 초기화
+                    $P.find("frmEditLevyExcl").reset();                         // 부과제외 화면 초기화
+
+                    $P.ctrlRdct.dataset.clear();                                // 감경 Dataset 초기화
+                    $P.ctrlLevyExcl.dataset.clear();                            // 부과제외 Dataset 초기화
+                    $P.ctrlCrdnSttsHstry.dataset.clear();                       // 단속상태 이력 Dataset 초기화
+                    $P.ctrlPayerHstry.dataset.clear();                          // 납부자 이력 Dataset 초기화
+
+                    // sprt02010-main 단속 정보
+                    pageObject["${mainPageName}"].mainCtrl.setData([resp.totalInfo]);
+
+                    // Dataset 셋팅
+                    if (resp.rdctInfo) {
+                        $P.ctrlRdct.setData([resp.rdctInfo]);                   // 감경 정보
+                    }
+                    if (resp.levyExclInfo) {
+                        $P.ctrlLevyExcl.setData([resp.levyExclInfo]);           // 부과제외 정보
+                    }
+
+                    $P.ctrlCrdnSttsHstry.setData(resp.crdnSttsHstrys);          // 단속상태 이력
+                    $P.ctrlPayerHstry.setData(resp.payerHstrys);                // 납부자 이력
+                }
+            });
+        }
+
+        // 감경 사유 callback
+        $P.callbackRsnRdct = (obj) => {
+            // 서버에 전송할 data(파라미터) 생성
+            let params = {
+                  callPurpose: "remove"
+                , sggCd: $P.ctrlRdct.getValue("SGG_CD")                         // 시군구 코드
+                , taskSeCd: $P.ctrlRdct.getValue("TASK_SE_CD")                  // 업무 구분 코드
+                , rdctId: $P.ctrlRdct.getValue("RDCT_ID")                       // 감경 ID
+                , btnTitle: obj.btnTitle                                        // 버튼 title
+                , delRsn: obj.reason                                            // 삭제 사유
+            };
+
+            $P.ctrlRdct.remove(params);
+        }
+
+        // 부과제외 삭제 사유 callback
+        $P.callbackRsnLevyExcl = (obj) => {
+            // 서버에 전송할 data(파라미터) 생성
+            let params = {
+                  callPurpose: "remove"
+                , sggCd: $P.ctrlLevyExcl.getValue("SGG_CD")	                    // 시군구 코드
+                , taskSeCd: $P.ctrlLevyExcl.getValue("TASK_SE_CD")              // 업무 구분 코드
+                , levyExclId: $P.ctrlLevyExcl.getValue("LEVY_EXCL_ID")          // 부과제외 ID
+                , btnTitle: obj.btnTitle                                        // 버튼 title
+                , delRsn: obj.reason                                            // 삭제 사유
+            };
+
+            $P.ctrlLevyExcl.remove(params);
+        }
+
+        /**************************************************************************
+         * 버튼 clickEvent
+         **************************************************************************/
+        // 감경 등록 버튼 이벤트
+        $P.fnCreateRdct = (btnTitle) => {
+            let crdnId = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID");        // 단속 ID
+
+            // 단속 ID 가 없다면.. return
+            if (!crdnId) return;
+
+            let params = {
+                  callPurpose: "create"
+                , btnTitle: btnTitle
+                , sggCd: pageObject["${mainPageName}"].mainCtrl.getValue("SGG_CD")          // 시군구 코드
+                , taskSeCd: pageObject["${mainPageName}"].mainCtrl.getValue("TASK_SE_CD")   // 업무 구분 코드
+                , crdnId: pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID")        // 단속 ID
+                , delYn: "N"
+            };
+
+            $P.ctrlRdct.getInfo(params);
+        }
+
+        // 감경 수정 버튼 이벤트
+        $P.fnUpdateRdct = (btnTitle) => {
+            let rdctId = $P.ctrlRdct.getValue("RDCT_ID");                       // 감경 ID
+
+            // 감경 ID 가 없다면.. return
+            if (!rdctId) {
+                dialog.alert({
+                      content: "조회된 감경 대장 정보가 없습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            let params = {
+                  callPurpose: "update"
+                , btnTitle: btnTitle
+                , sggCd: $P.ctrlRdct.getValue("SGG_CD")                         // 시군구 코드
+                , taskSeCd: $P.ctrlRdct.getValue("TASK_SE_CD")                  // 업무 구분 코드
+                , crdnId: $P.ctrlRdct.getValue("CRDN_ID")                       // 단속 ID
+                , rdctId: $P.ctrlRdct.getValue("RDCT_ID")                       // 감경 ID
+                , delYn: "N"
+            };
+
+            $P.rdctControl.getInfo(params);
+        }
+
+        // 감경 삭제 버튼 이벤트
+        $P.fnRemoveRdct = (btnTitle) => {
+            let rdctId = $P.ctrlRdct.getValue("RDCT_ID");                       // 감경 ID
+
+            // 감경 ID 가 없다면.. return
+            if (!rdctId) {
+                dialog.alert({
+                      content: "조회된 감경 대장 정보가 없습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , onOK: () => { }
+                });
+                return;
+            }
 
             // 삭제 메세지 확인
             dialog.alert({
-                  content: "선택하신 " + selected.length + "건의 " + $P.control.prefixName + " 정보를 삭제하시겠습니까?"
+                  content: "선택하신 " + $P.ctrlRdct.prefixName + " 정보를 삭제하시겠습니까?"
                 , onOK: () => {
                     // 삭제 사유 입력
                     fetch(wctx.url("/resources/html/inputRsnDialog.html"))
@@ -702,224 +679,206 @@
                         .then(function(template) {
                             dialog.open({
                                   id: "inputDelRsnDialog"
-                                , title: title
+                                , title: btnTitle
                                 , size: "lg"
                                 , content: template
                                 , init: () => { setDialogZindex(); }
                                 , onOK: () => {
-                                    $P.callbackRsn({ reason: $("#reason").val() });
+                                    $P.callbackRsn({
+                                          btnTitle: btnTitle                    // 버튼 title
+                                        , reason: $("#reason").val()            // 삭제 사유
+                                    });
                                 }
                             });
                         });
                 }
             });
-		}
-
-		// 계고 등록
-		$P.fnCreateWrng = (title) => {
-			// 단속 ID
-			let crdnId = $("#crdnId--${pageNameMain}").val();
-
-			if (typeof crdnId == "undefined" || crdnId == null || crdnId == "") return;
-
-			// 단속 상태 코드
-			let crdnSttsCd = $("#crdnSttsCd--${pageNameMain}").val();
-			let crdnSttsNm = $("#crdnSttsNm--${pageNameMain}").val();
-			// 단속 상태 코드 확인
-			if (Number(crdnSttsCd) < 01 || Number(crdnSttsCd) > 45 || Number(crdnSttsCd) == 31) {
-				dialog.alert({
-					  content: "[" + title + "]" + " 작업은 단속상태가 '본부과 이전' 자료만 처리 가능합니다."
-							+ "<br>" + "단속상태 : " + crdnSttsNm
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose: "create"
-				, title: title
-				, sggCd: $("#sggCd--${pageNameMain}").val()
-				, taskSeCd: $("#taskSeCd--${pageNameMain}").val()
-				, crdnId: crdnId
-				, levyExclSeCd: "2"
-				, delYn: "N"
-			};
-
-			$P.levyExclControl.getInfo(params);
-		}
-
-		// 부과제외 등록
-		$P.fnCreateLevyExcl = (title) => {
-			// 단속 ID
-			let crdnId = $("#crdnId--${pageNameMain}").val();
-			// 단속 ID 가 없다면.. return
-			if (typeof crdnId == "undefined" || crdnId == null || crdnId == "") return;
-
-			// 단속 상태 코드
-			let crdnSttsCd = $("#crdnSttsCd--${pageNameMain}").val();
-			let crdnSttsNm = $("#crdnSttsNm--${pageNameMain}").val();
-			// 단속 상태 코드 확인
-			if (Number(crdnSttsCd) < 01 || Number(crdnSttsCd) > 45 || Number(crdnSttsCd) == 31) {
-				dialog.alert({
-					  content: "[" + title + "]" + " 작업은 단속상태가 '본부과 이전' 자료만 처리 가능합니다."
-						+ "<br>" + "단속상태 : " + crdnSttsNm
-						+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose: "create"
-				, title: title
-				, sggCd: $("#sggCd--${pageNameMain}").val()
-				, taskSeCd: $("#taskSeCd--${pageNameMain}").val()
-				, crdnId: crdnId
-				, levyExclSeCd: "1"
-				, delYn: "N"
-			};
-
-			$P.levyExclControl.getInfo(params);
-		}
-
-		// 부과제외 수정
-		$P.fnUpdateLevyExcl = (title) => {
-			// 부과제외 ID
-			let levyExclId = $P.levyExclControl.dataset.getValue("LEVY_EXCL_ID");
-
-			if (typeof levyExclId == "undefined" || levyExclId == null || levyExclId == "") {
-				dialog.alert({
-					  content : "조회된 부과제외 대장 정보가 없습니다."
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK : () => { }
-				});
-				return;
-			}
-
-			let params = {
-				  callPurpose: "update"
-				, title: title
-				, sggCd: $P.levyExclControl.dataset.getValue("SGG_CD")
-				, taskSeCd: $P.levyExclControl.dataset.getValue("TASK_SE_CD")
-				, crdnId: $P.levyExclControl.dataset.getValue("CRDN_ID")
-				, levyExclId: levyExclId
-				, delYn: "N"
-			};
-
-			$P.levyExclControl.getInfo(params);
-		}
-
-		// 부과제외 삭제
-		$P.fnRemoveLevyExcl = (title) => {
-			// 부과제외 ID
-			let levyExclId = $P.levyExclControl.dataset.getValue("LEVY_EXCL_ID");
-
-			if (typeof levyExclId == "undefined" || levyExclId == null || levyExclId == "") {
-				dialog.alert({
-					  content: "조회된 부과제외 대장 정보가 없습니다."
-							+ "<br><br>" + "[" + title + "]" + " 실행이 취소되었습니다."
-					, onOK: () => { }
-				});
-				return;
-			}
-
-			// 삭제 메세지 확인
-			dialog.alert({
-				  content: "선택하신 " + $P.levyExclControl.prefixName + " 정보를 삭제하시겠습니까?"
-				, onOK: () => {
-					// 삭제 사유 입력
-					fetch(wctx.url("/resources/html/inputRsnDialog.html"))
-						.then(function(resp) { return resp.text(); })
-						.then(function(template) {
-							dialog.open({
-					 			  id: "inputDelRsnDialog"
-								, title: title
-								, size: "lg"
-								, content: template
-								, onOK: () => {
-									$P.callbackRsnLevyExcl({ reason: $("#reason").val() });
-								}
-							});
-						});
-				}
-			});
-		}
-
-		/**************************************************************************
-		 * 초기 셋팅
-		 **************************************************************************/
-		// 이벤트 설정
-		$P.setEvent = () => {
-			// 업무 버튼 이벤트
-			$("#btnCreateRdct--${pageName}").on("click", function() {
-				$P.fnCreateRdct($(this).attr("title"));						    // 감경 등록
-			});
-			$("#btnUpdateRdct--${pageName}").on("click", function() {
-				$P.fnUpdateRdct($(this).attr("title"));						    // 감경 수정
-			});
-			$("#btnRemoveRdct--${pageName}").on("click", function() {
-				$P.fnRemoveRdct($(this).attr("title"));						    // 감경 삭제
-			});
-			$("#btnCreateWrng--${pageName}").on("click", function() {
-				$P.fnCreateWrng($(this).attr("title"));							// 계고 등록
-			});
-			$("#btnCreateLevyExcl--${pageName}").on("click", function() {
-				$P.fnCreateLevyExcl($(this).attr("title"));						// 비부과 등록
-			});
-			$("#btnUpdateLevyExcl--${pageName}").on("click", function() {
-				$P.fnUpdateLevyExcl($(this).attr("title"));						// 부과제외 수정
-			});
-			$("#btnRemoveLevyExcl--${pageName}").on("click", function() {
-				$P.fnRemoveLevyExcl($(this).attr("title"));						// 부과제외 삭제
-			});
-
-			// DataTables width 변경 조정
-			fnMakeResizableTable($("#table-responsive-crdnSttsHstry--${pageName}")[0]);
-			fnMakeResizableTable($("#table-responsive-1--${pageName}")[0]);
-		}
-
-		// 초기 화면 설정
-		$P.initForm = () => {
-			// button 요소들을 disabled = true
-			$("#btnCreateRdct--${pageName}").prop("disabled", true);
-			$("#btnUpdateRdct--${pageName}").prop("disabled", true);
-			$("#btnRemoveRdct--${pageName}").prop("disabled", true);
-			$("#btnCreateLevyExcl--${pageName}").prop("disabled", true);
-			$("#btnCreateWrng--${pageName}").prop("disabled", true);
-			$("#btnUpdateLevyExcl--${pageName}").prop("disabled", true);
-			$("#btnRemoveLevyExcl--${pageName}").prop("disabled", true);
-
-			// 화면 호출(callPurpose)이 view가 아니라면 버튼 비활성화 disabled = false
-			if (pageObject['${pageNameMain}'].callPurpose != "view") {
-				$("#btnCreateRdct--${pageName}").prop("disabled", false);
-				$("#btnUpdateRdct--${pageName}").prop("disabled", false);
-				$("#btnRemoveRdct--${pageName}").prop("disabled", false);
-				$("#btnCreateLevyExcl--${pageName}").prop("disabled", false);
-				$("#btnCreateWrng--${pageName}").prop("disabled", false);
-				$("#btnUpdateLevyExcl--${pageName}").prop("disabled", false);
-				$("#btnRemoveLevyExcl--${pageName}").prop("disabled", false);
-			}
-		}
-
-		/**************************************************************************
-		 * 최초 실행 함수
-		 **************************************************************************/
-		// 1. 이벤트 설정
-		$P.setEvent();
-
-		// 2. 초기 화면 설정
-		$P.initForm();
-
-		// 3. Dataset 설정
-		let rdctInfo = ${rdctInfo};											// 감경 정보
-		if (rdctInfo) { $P.rdctControl.setData([rdctInfo]); }
-
-		let levyExclInfo = ${levyExclInfo};										// 부과제외 정보
-		if (levyExclInfo) { $P.levyExclControl.setData([levyExclInfo]); }
-
-		$P.crdnSttsHstryControl.setData(${crdnSttsHstrys});						// 단속상태 이력
-		$P.payerHstryControl.setData(${payerAddrHstrys});						// 납부자주소 이력
-	});
+        }
+
+        // 계고 등록 버튼 이벤트
+        $P.fnCreateWrng = (btnTitle) => {
+            let crdnId = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID");        // 단속 ID
+
+            // 단속 ID 가 없다면.. return
+            if (!crdnId) return;
+
+            let params = {
+                  callPurpose: "create"
+                , btnTitle: btnTitle
+                , sggCd: pageObject["${mainPageName}"].mainCtrl.getValue("SGG_CD")          // 시군구 코드
+                , taskSeCd: pageObject["${mainPageName}"].mainCtrl.getValue("TASK_SE_CD")   // 업무 구분 코드
+                , crdnId: pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID")        // 단속 ID
+                , levyExclSeCd: "2"                                                         // 부과 제외 구분 코드
+                , delYn: "N"
+            };
+
+            $P.ctrlLevyExcl.getInfo(params);
+        }
+
+        // 부과제외 등록 버튼 이벤트
+        $P.fnCreateLevyExcl = (btnTitle) => {
+            let crdnId = pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID");        // 단속 ID
+
+            // 단속 ID 가 없다면.. return
+            if (!crdnId) return;
+
+            let params = {
+                  callPurpose: "create"
+                , btnTitle: btnTitle
+                , sggCd: pageObject["${mainPageName}"].mainCtrl.getValue("SGG_CD")          // 시군구 코드
+                , taskSeCd: pageObject["${mainPageName}"].mainCtrl.getValue("TASK_SE_CD")   // 업무 구분 코드
+                , crdnId: pageObject["${mainPageName}"].mainCtrl.getValue("CRDN_ID")        // 단속 ID
+                , levyExclSeCd: "1"                                                         // 부과 제외 구분 코드
+                , delYn: "N"
+            };
+
+            $P.ctrlLevyExcl.getInfo(params);
+        }
+
+        // 부과제외 수정 버튼 이벤트
+        $P.fnUpdateLevyExcl = (btnTitle) => {
+            let levyExclId = $P.ctrlLevyExcl.getValue("LEVY_EXCL_ID");          // 부과제외 ID
+
+             // 부과제외 ID 가 없다면.. return
+            if (!levyExclId) {
+                dialog.alert({
+                      content: "조회된 부과제외 대장 정보가 없습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            let params = {
+                  callPurpose: "update"
+                , btnTitle: btnTitle
+                , sggCd: $P.ctrlLevyExcl.getValue("SGG_CD")                     // 시군구 코드
+                , taskSeCd: $P.ctrlLevyExcl.getValue("TASK_SE_CD")              // 업무 구분 코드
+                , crdnId: $P.ctrlLevyExcl.getValue("CRDN_ID")                   // 단속 ID
+                , levyExclId: $P.ctrlLevyExcl.getValue("LEVY_EXCL_ID")          // 부과제외 ID
+                , delYn: "N"
+            };
+
+            $P.ctrlLevyExcl.getInfo(params);
+        }
+
+        // 부과제외 삭제 버튼 이벤트
+        $P.fnRemoveLevyExcl = (btnTitle) => {
+            let levyExclId = $P.ctrlLevyExcl.getValue("LEVY_EXCL_ID");          // 부과제외 ID
+
+            // 부과제외 ID 가 없다면.. return
+            if (!levyExclId) {
+                dialog.alert({
+                      content: "조회된 부과제외 대장 정보가 없습니다."
+                            + "<br><br>" + "[" + btnTitle + "]" + " 실행이 취소되었습니다."
+                    , onOK: () => { }
+                });
+                return;
+            }
+
+            // 삭제 메세지 확인
+            dialog.alert({
+                  content: "선택하신 " + $P.ctrlLevyExcl.prefixName + " 정보를 삭제하시겠습니까?"
+                , onOK: () => {
+                    // 삭제 사유 입력
+                    fetch(wctx.url("/resources/html/inputRsnDialog.html"))
+                        .then(function(resp) { return resp.text(); })
+                        .then(function(template) {
+                            dialog.open({
+                                  id: "inputDelRsnDialog"
+                                , title: btnTitle
+                                , size: "lg"
+                                , content: template
+                                , init: () => { setDialogZindex(); }
+                                , onOK: () => {
+                                    $P.callbackRsnLevyExcl({
+                                          btnTitle: btnTitle                    // 버튼 title
+                                        , reason: $("#reason").val()            // 삭제 사유
+                                    });
+                                }
+                            });
+                        });
+                }
+            });
+        }
+
+        /**************************************************************************
+         * 초기 셋팅
+         **************************************************************************/
+        // 이벤트 설정
+        $P.setEvent = () => {
+            // 업무 버튼 이벤트
+            $P.$find("btnCreateRdct").on("click", function() {
+                $P.fnCreateRdct($P.$find("btnCreateRdct").attr("title"));           // 감경 등록
+            });
+            $P.$find("btnUpdateRdct").on("click", function() {
+                $P.fnUpdateRdct($P.$find("btnUpdateRdct").attr("title"));           // 감경 수정
+            });
+            $P.$find("btnRemoveRdct").on("click", function() {
+                $P.fnRemoveRdct($P.$find("btnRemoveRdct").attr("title"));           // 감경 등록
+            });
+            $P.$find("btnCreateWrng").on("click", function() {
+                $P.fnCreateWrng($P.$find("btnCreateWrng").attr("title"));           // 계고 등록
+            });
+            $P.$find("btnCreateLevyExcl").on("click", function() {
+                $P.fnCreateLevyExcl($P.$find("btnCreateLevyExcl").attr("title"));   // 비부과 등록
+            });
+            $P.$find("btnUpdateLevyExcl").on("click", function() {
+                $P.fnUpdateLevyExcl($P.$find("btnUpdateLevyExcl").attr("title"));   // 부과제외 수정
+            });
+            $P.$find("btnRemoveLevyExcl").on("click", function() {
+                $P.fnRemoveLevyExcl($P.$find("btnRemoveLevyExcl").attr("title"));   // 부과제외 삭제
+            });
+
+            // DataTables width 변경 조정
+            fnMakeResizableTable($P.find("tableRspnsCrdnSttsHstry"));
+            fnMakeResizableTable($P.find("tableRspnsPayerHstry"));
+        }
+
+        // 초기 화면 설정
+        $P.initForm = () => {
+            // 화면 호출(callPurpose)이 view라면 버튼 비활성화 disabled = true
+            if (pageObject['${mainPageName}'].callPurpose == "view") {
+                $P.$find("btnCreateRdct").prop("disabled", true);
+                $P.$find("btnUpdateRdct").prop("disabled", true);
+                $P.$find("btnRemoveRdct").prop("disabled", true);
+                $P.$find("btnCreateWrng").prop("disabled", true);
+                $P.$find("btnCreateLevyExcl").prop("disabled", true);
+                $P.$find("btnUpdateLevyExcl").prop("disabled", true);
+                $P.$find("btnRemoveLevyExcl").prop("disabled", true);
+            } else {
+                $P.$find("btnCreateRdct").prop("disabled", false);
+                $P.$find("btnUpdateRdct").prop("disabled", false);
+                $P.$find("btnRemoveRdct").prop("disabled", false);
+                $P.$find("btnCreateWrng").prop("disabled", false);
+                $P.$find("btnCreateLevyExcl").prop("disabled", false);
+                $P.$find("btnUpdateLevyExcl").prop("disabled", false);
+                $P.$find("btnRemoveLevyExcl").prop("disabled", false);
+            }
+        }
+
+        /**************************************************************************
+         * 최초 실행 함수
+         **************************************************************************/
+        // 1. 이벤트 설정
+        $P.setEvent();
+
+        // 2. 초기 화면 설정
+        $P.initForm();
+
+        // 3. Dataset 설정
+        let rdctInfo = ${rdctInfo};                                             // 감경 정보
+        if (rdctInfo) {
+            $P.ctrlRdct.setData([rdctInfo]);
+        }
+
+        let levyExclInfo = ${levyExclInfo};                                     // 부과제외 정보
+        if (levyExclInfo) {
+            $P.ctrlLevyExcl.setData([levyExclInfo]);
+        }
+
+        $P.ctrlCrdnSttsHstry.setData(${crdnSttsHstrys});                        // 단속상태 이력
+        $P.ctrlPayerHstry.setData(${payerAddrHstrys});                          // 납부자주소 이력
+    });
 
 </script>