From f9d32847a522253a0f5b806784a263843cb42181 Mon Sep 17 00:00:00 2001
From: leebeomjun <leebj91@xit.co.kr>
Date: Mon, 31 Jul 2023 10:54:39 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=91=20=EC=88=98=EC=A0=95=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WEB-INF/jsp/fims/crdn/crdn01020-info.jsp  |  96 ++++---
 .../WEB-INF/jsp/fims/sprt/sprt03020-main.jsp  | 121 +++++++-
 .../fims/biz/paintweb/es6-promise.auto.min.js |   1 -
 .../lib/fims/biz/paintweb/es6-promise.min.js  |   1 -
 .../paintweb/interfaces/default/layout.xhtml  |  13 +-
 .../biz/paintweb/interfaces/default/script.js |   1 +
 .../lib/fims/biz/paintweb/lang/en.json        | 268 ------------------
 .../fims/biz/paintweb/lang/{ko.json => ko.js} |  13 +-
 ...aintweb-config.json => paintweb-config.js} |  53 ++--
 .../lib/fims/biz/paintweb/paintweb.js         |  87 ++----
 10 files changed, 222 insertions(+), 432 deletions(-)
 delete mode 100644 src/main/webapp/resources/lib/fims/biz/paintweb/es6-promise.auto.min.js
 delete mode 100644 src/main/webapp/resources/lib/fims/biz/paintweb/es6-promise.min.js
 delete mode 100644 src/main/webapp/resources/lib/fims/biz/paintweb/lang/en.json
 rename src/main/webapp/resources/lib/fims/biz/paintweb/lang/{ko.json => ko.js} (98%)
 rename src/main/webapp/resources/lib/fims/biz/paintweb/{paintweb-config.json => paintweb-config.js} (92%)

diff --git a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn01020-info.jsp b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn01020-info.jsp
index a67b8443..cc6b47be 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn01020-info.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/crdn/crdn01020-info.jsp
@@ -2,7 +2,7 @@
 <%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
 
 <div class="d-flex flex-row justify-content-evenly">
-	<div class="card" style="max-width:1100px;" title="민원접수 초기자료 편집">
+	<div class="card" style="max-width:1000px;" title="민원접수 초기자료 편집">
 		<form id="frmEdit--${pageName}">
 			<input id="crdnId--${pageName}" name="crdnId" type="hidden" data-map="CRDN_ID" />
 			<input id="taskSeCd--${pageName}" name="taskSeCd" type="hidden" value="${taskSeCd}" />
@@ -10,7 +10,7 @@
 				<div class="col-md-12" slot="edit">
 					<template class="pvs bpv">
 						<slot>
-							<label for="crdnSeCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">단속구분</label>
+							<label for="crdnSeCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">단속구분</label>
 							<select id="crdnSeCd--${pageName}" name="crdnSeCd" data-map="CRDN_SE_CD" class="form-select">
 								<c:forEach items="${FIM002List}" var="item">
 									<option value="${item.code}">${item.value}</option>
@@ -20,7 +20,7 @@
 					</template>
 				</div>
 				<div class="col-md-4">
-					<label for="crdnYmd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end required">
+					<label for="crdnYmd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end required">
 						위반일자
 					</label>
 					<input type="text" id="crdnYmd--${pageName}" name="crdnYmd" data-map="CRDN_YMD"
@@ -28,7 +28,7 @@
 		            <button type="button" class="bx bx-sm bx-calendar bg-white"></button>
 				</div>
 				<div class="col-md-4">
-					<label for="crdnTm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end required">
+					<label for="crdnTm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end required">
 						위반시간
 					</label>
 		            <input type="text" id="crdnTm--${pageName}" name="crdnTm" data-map="CRDN_TM"
@@ -36,14 +36,14 @@
 		            	placeholder="시:분:초" />
 				</div>
 				<div class="col-md-4">
-					<label for="vhrno--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end required">
+					<label for="vhrno--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end required">
 						차량번호
 					</label>
 					<input type="text" id="vhrno--${pageName}" name="vhrno" data-map="VHRNO" class="form-control" 
 						data-maxlengthb="30" required />
 				</div>
 				<div class="col-md-6">
-					<label for="vltnCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">
+					<label for="vltnCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">
 						위반내용
 					</label>
 					<select id="vltnCd--${pageName}" name="vltnCd" class="form-select" data-map="VLTN_CD">
@@ -53,26 +53,26 @@
 					</select>
 				</div>
 				<div class="col-md-6 select2-primary">
-					<label for="crdnStdgNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">법정동</label>
+					<label for="crdnStdgNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">법정동</label>
 					<input type="text" id="crdnStdgNm--${pageName}" name="crdnStdgNm" data-map="CRDN_STDG_NM" class="form-control" readonly/>
 					<button type="button" class="btn btn-sm btn-outline-dark" onclick="">검색</button>
 				</div>
 				<div class="col-md-4">
-					<label for="crdnPlc--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">위반장소</label>
+					<label for="crdnPlc--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">위반장소</label>
 					<input type="text" id="crdnPlc--${pageName}" name="crdnPlc" data-map="CRDN_PLC" class="form-control" 
 						data-maxlengthb="200" />
 				</div>
 				<div class="col-md-8" slot="edit">
 					<template class="bpv">
 						<slot>
-							<label for="dtlCrdnPlc--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">상세위반장소</label>
+							<label for="dtlCrdnPlc--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">상세위반장소</label>
 							<input type="text" id="dtlCrdnPlc--${pageName}" name="dtlCrdnPlc" data-map="DTL_CRDN_PLC" class="form-control" 
 								data-maxlenghb="200" />
 						</slot>
 					</template>
 					<template class="pvs">
 						<slot>
-							<label for="crdnSpareaCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">특별구역</label>
+							<label for="crdnSpareaCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">특별구역</label>
 							<select id="crdnSpareaCd--${pageName}" name="crdnSpareaCd" data-map="CRDN_SPAREA_CD" class="form-select">
 								<c:forEach items="${FIM007List}" var="item">
 									<option value="${item.code}">${item.value}</option>
@@ -82,45 +82,45 @@
 					</template>
 				</div>
 				<div class="col-md-6">
-					<label for="cvlcptAplcntNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">신고자</label>
+					<label for="cvlcptAplcntNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">신고자</label>
 					<input type="text" id="cvlcptAplcntNm--${pageName}" name="cvlcptAplcntNm" data-map="CVLCPT_APLCNT_NM" 
 						class="form-control" />
 				</div>
 				<div class="col-md-6">
-					<label for="cvlcptPrcsPicNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">담당자</label>
+					<label for="cvlcptPrcsPicNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">담당자</label>
 					<input type="text" id="cvlcptPrcsPicNm--${pageName}" name="cvlcptPrcsPicNm" data-map="CVLCPT_PRCS_PIC_NM" 
 						class="form-control" />
 				</div>
 				<div class="col-md-12">
-					<label for="cvlcptAplyCn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end align-top"
+					<label for="cvlcptAplyCn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end align-top"
 					>신고내용</label>
 					<textarea type="text" id="cvlcptAplyCn--${pageName}" name="cvlcptAplyCn" data-map="CVLCPT_APLY_CN" 
 						class="form-control" cols="100%" rows="4"
 					></textarea>
 				</div>
 				<div class="col-md-6">
-					<label for="cvlcptRcptYmd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">접수일</label>
+					<label for="cvlcptRcptYmd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">접수일</label>
 					<input type="text" id="cvlcptRcptYmd--${pageName}" name="cvlcptRcptYmd" data-map="CVLCPT_RCPT_YMD" 
 						class="form-control form-date" data-fmt-type="day" maxlength="10" disabled />
 				</div>
 				<div class="col-md-6">
 					<label for="cvldptPrcsPrnmntDt--${pageName}" 
-						class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">답변기한</label>
+						class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">답변기한</label>
 					<input type="text" id="cvldptPrcsPrnmntDt--${pageName}" name="cvldptPrcsPrnmntDt" data-map="CVLCPT_PRCS_PRNMNT_DT" 
 						class="form-control form-date" data-fmt-type="day" maxlength="10" disabled />
 				</div>
 				<div class="col-md-12">
-					<label for="etcCn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">특기사항</label>
+					<label for="etcCn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">특기사항</label>
 					<input type="text" id="etcCn--${pageName}" name="etcCn" data-map="ETC_CN" class="form-control" 
 						data-maxlengthb="1000" />
 				</div>
 				<div class="col-md-4">
-					<label for="rtpyrNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">소유자</label>
+					<label for="rtpyrNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">소유자</label>
 					<input type="text" id="rtpyrNm--${pageName}" name="rtpyrNm" data-map="RTPYR_NM" class="form-control" 
 						/>
 				</div>
 				<div class="col-md-4">
-					<label for="rtpyrSeCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">주민번호구분</label>
+					<label for="rtpyrSeCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">주민번호구분</label>
 					<select id="rtpyrSeCd--${pageName}" name="rtpyrSeCd" data-map="RTPYR_SE_CD" class="form-select">
 						<c:forEach items="${FIM011List}" var="item">
 							<option value="${item.code}">${item.value}</option>
@@ -128,22 +128,22 @@
 					</select>
 				</div>
 				<div class="col-md-4">
-					<label for="rtpyrNo--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">주민번호</label>
+					<label for="rtpyrNo--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">주민번호</label>
 					<input type="text" id="rtpyrNo--${pageName}" name="rtpyrNo" data-map="RTPYR_NO" class="form-control privacy" />
 					<input type="text" id="mask-rtpyrNo--${pageName}" class="form-control privacy-mask" disabled value="******"/>
 				</div>
 				<div class="col-md-12">
-					<label for="addr--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">주소</label>
+					<label for="addr--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">주소</label>
 					<input type="text" id="addr--${pageName}" name="addr" data-map="ADDR" class="form-control w-px-700" 
 						data-maxlengthb="320" />
 				</div>
 				<div class="col-md-12">
-					<label for="dtlAddr--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">상세주소</label>
+					<label for="dtlAddr--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">상세주소</label>
 					<input type="text" id="dtlAddr--${pageName}" name="dtlAddr" data-map="DTL_ADDR" class="form-control w-px-700" 
 						data-maxlengthb="200" />
 				</div>
 				<div class="col-md-6">
-					<label for="zip--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">우편번호</label>
+					<label for="zip--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">우편번호</label>
 					<input type="text" id="zip--${pageName}" name="zip" data-map="ZIP" class="form-control w-px-100" 
 						maxlength="7" pattern="(\d{3}-\d{3}|\d{6}|\d{5})" />
 					<button type="button" class="btn btn-sm btn-outline-dark" onclick="">검색</button>
@@ -152,36 +152,36 @@
 
 				</div>
 				<div class="col-md-4">
-					<label for="vin--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차대번호</label>
+					<label for="vin--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차대번호</label>
 					<input type="text" id="vin--${pageName}" name="vin" data-map="VIN" class="form-control" readonly 
 						placeholder="입력항목이 아닙니다." />
 				</div>
 				<div class="col-md-4" slot="edit">
 					<template class="pvs bpv">
 						<slot>
-							<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차량구분</label>
+							<label class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차량구분</label>
 						</slot>
 					</template>
 				</div>
 				<div class="col-md-4" slot="edit">
 					<template class="pvs bpv">
 						<slot>
-							<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차종</label>
+							<label class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차종</label>
 						</slot>
 					</template>
 				</div>
 				<div class="col-md-4">
-					<label for="vhclNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차량명칭</label>
+					<label for="vhclNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차량명칭</label>
 					<input type="text" id="vhclNm--${pageName}" name="vhclNm" data-map="VHCL_NM" class="form-control" readonly 
 						placeholder="입력항목이 아닙니다." />
 				</div>
 				<div class="col-md-4">
-					<label for="vhclColor--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차량색상</label>
+					<label for="vhclColor--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차량색상</label>
 					<input type="text" id="vhclColor--${pageName}" name="vhclColor" data-map="VHCL_COLOR" class="form-control" readonly 
 						placeholder="입력항목이 아닙니다." />
 				</div>
 				<div class="col-md-4">
-					<label for="useFuelCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">연료구분</label>
+					<label for="useFuelCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">연료구분</label>
 					<select id="useFuelCd--${pageName}" name="useFuelCd" data-map="USE_FUEL_CD" class="form-select" disabled>
 						<c:forEach items="${LVS005List}" var="item">
 							<option value=""></option>
@@ -192,7 +192,7 @@
 				<div class="col-md-4" slot="edit">
 					<template class="dpv eca pvs">
 						<slot>
-							<label for="towngYn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">견인지시</label>
+							<label for="towngYn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">견인지시</label>
 							<select id="towngYn--${pageName}" name="towngYn" class="form-select" data-map="TOWNG_YN">
 								<c:forEach items="${FIM053List}" var="item">
 									<option value="${item.code}">${item.value}</option>
@@ -204,7 +204,7 @@
 				<div class="col-md-4" slot="edit">
 					<template class="dpv eca pvs">
 						<slot>
-							<label for="crdnSn--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">스티커번호</label>
+							<label for="crdnSn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">스티커번호</label>
 							<input type="text" id="crdnSn--${pageName}" name="crdnSn" data-map="CRDN_SN" class="form-control" 
 								maxlength="20" data-maxlengthb="20" />
 						</slot>
@@ -213,7 +213,7 @@
 				<div class="col-md-4" slot="edit">
 					<template class="dpv">
 						<slot>
-							<label for="parkngPsbltyRsltCd--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">장애차량확인</label>
+							<label for="parkngPsbltyRsltCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">장애차량확인</label>
 							<select id="parkngPsbltyRsltCd--${pageName}" name="parkngPsbltyRsltCd" data-map="PARKNG_PSBLTY_RSLT_CD" class="form-select">
 								<c:forEach items="${FIM034List}" var="item">
 									<option value="${item.code}">${item.value}</option>
@@ -225,7 +225,7 @@
 				<div class="col-md-12" slot="edit">
 					<template class="pvs bpv">
 						<slot>
-							<label for="teamNm--${pageName}" class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">단속조</label>
+							<label for="teamNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">단속조</label>
 							<select id="teamNm--${pageName}" name="teamNm" data-map="TEAM_NM" class="form-select">
 							</select>
 						</slot>
@@ -234,7 +234,7 @@
 				<div class="col-md-12" slot="edit">
 					<template class="pvs bpv">
 						<slot>
-							<label class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">단속원</label>
+							<label class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">단속원</label>
 							<input type="text" id="teamer1--${pageName}" name="teamer1" data-map="TEAMER_1" class="form-control" />
 							<input type="text" id="teamer2--${pageName}" name="teamer2" data-map="TEAMER_2" class="form-control" />
 							<input type="text" id="teamer3--${pageName}" name="teamer3" data-map="TEAMER_3" class="form-control" />
@@ -261,17 +261,28 @@
 			
 		</form>
 	</div>
-	<div class="card" style="width:400px;">
-		<form id="frmFile--${pageName}" class="dpv eca" method="post" enctype="multipart/form-data">
-			<input type="file" id="uploadFileList--${pageName}" name="uploadFileList" multiple accept="image/*" hidden />
-		</form>
+	<div class="card" style="width:500px;">
+		
 		<div class="col-md-12 d-flex justify-content-between">
 			<div class="fs-4 fw-bold">등록된 사진</div>
-			<button type="button" id="btnEditPhoto--${pageName}" class="btn btn-blue">선택 사진 편집</button>
+			<div>
+				<button type="button" id="btnDeleteExistPhoto--${pageName}" class="btn btn-blue">선택 사진 삭제</button>
+				<button type="button" id="btnEditPhoto--${pageName}" class="btn btn-blue">선택 사진 편집</button>
+			</div>
 		</div>
 		<div id="display3--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;">
 		</div>
 		
+		<div class="col-md-12 d-flex justify-content-between">
+			<div class="fs-4 fw-bold">추가한 사진(번호판)</div>
+			<button type="button" id="btnNumberPlateDelete--${pageName}" class="btn btn-blue">취소</button>
+		</div>
+		<div id="display4--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;">	
+		</div>
+		
+		<form id="frmFile--${pageName}" class="dpv eca" method="post" enctype="multipart/form-data">
+			<input type="file" id="uploadFileList--${pageName}" name="uploadFileList" multiple accept="image/*" hidden />
+		</form>
 		<div class="col-md-12 d-flex justify-content-between">
 			<div class="fs-4 fw-bold">추가한 사진</div>
 			<button type="button" id="btnAddFile--${pageName}" class="btn btn-blue">사진 추가</button>
@@ -439,7 +450,7 @@ $(document).ready(function(){
 		
 		window.open(wctx.url("/sprt/sprt03/020/main.do?openerPageName=${pageName}&fileId="+fileId)
 				,"editPhoto"
-				,"width=1800,height=950"
+				,"width=1400,height=750"
 		);
 	});
 	
@@ -495,7 +506,7 @@ $(document).ready(function(){
 		var editPhotoArea = "";
 		
 		crdnInfo.fileList.forEach(function(item, index){
-			editPhotoArea += "<label>"
+			editPhotoArea += "<label class='mx-2'>"
 			editPhotoArea += "<input type='radio' name='editTarget' class='form-check-input' value='"+item.FILE_ID +"' ";
 			if(index == 0){
 				editPhotoArea += " checked='checked' ";
@@ -503,7 +514,10 @@ $(document).ready(function(){
 			editPhotoArea += " />";
 			editPhotoArea += "<img src='"+ item.URL +"' width='200' height='200' />";
 			editPhotoArea += "</label>";
-			editPhotoArea += "<br />";
+			
+			if(index % 2 == 1){
+				editPhotoArea += "<br />"
+			}
 		});
 		
 		$("#display3--${pageName}").append(editPhotoArea);
diff --git a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt03020-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt03020-main.jsp
index 60ed5c4c..a1cddf2a 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt03020-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/sprt/sprt03020-main.jsp
@@ -41,11 +41,11 @@
 
 </head>
 <body>
-
 <c:set var="pageKorName" scope="request">사진 편집</c:set>
-<div>
-	<img id="photo" src="" />
-</div>
+
+<img id="editableImage" />
+<div id="paintWebTarget"></div>
+   
 
 <script src="<c:url value="/resources/3rd-party/sneat/js/helpers.js"/>"></script>
 <script src="<c:url value="/resources/3rd-party/sneat/libs/jquery/jquery.js"/>"></script>
@@ -60,23 +60,114 @@
 <script src="<c:url value="/resources/3rd-party/jstree/jstree-support.js"/>"></script>
 <script src="<c:url value='/resources/3rd-party/sneat/js/config.js'/>"></script>
 <script src="<c:url value='/resources/3rd-party/sneat/libs/chartjs/chartjs.js'/>"></script>
+
+
+<script src="<c:url value='/resources/lib/fims/biz/paintweb/lang/ko.js'/>?${ver}"></script>
+<script src="<c:url value='/resources/lib/fims/biz/paintweb/paintweb-config.js'/>?${ver}"></script>
+<script src="<c:url value='/resources/lib/fims/biz/paintweb/paintweb.js'/>?${ver}"></script>
+<script src="<c:url value='/resources/lib/fims/biz/paintweb/html2canvas.min.js'/>?${ver}"></script>
+
+
+
 <script>
 
-$(document).ready(function(){
+    //FIXME: pw instance 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2564 line if(pw.image.modified) 변경 필요
+    var pw;
+    var originalInfomation = {};
+    let editableImage = null;
+
+    const initEditor = () => {
+    	
+        pw = new PaintWeb();
+        pw.config.imageLoad = editableImage;
+        pw.config.guiPlaceholder = document.getElementById('paintWebTarget');
+        pw.config.configFile = 'paintweb-config.json?${ver}';
+        pw.config.imageSave = fnImageSaveTo;
+        pw.config.afterImageSave = fnAfterImageSave;
 
-	var fileInfo = [${fileInfo}];
-	
-	if(fileInfo.length > 0){
-		var fileUrl = fileInfo[0].URL;
+        pw.init();
+    };
+    
+    function fnImageSaveTo(file, imgWidth, imgHeight, doc, _self){
+    	
+    	console.log(doc);
+    	console.log(_self);
+    	
+        const isDelete = imgWidth === 0;
+        
+        if(isDelete){
+            if(!confirm('단속이미지를 정말로 삭제 하시겠습니까?'))  return;
+        }else{
+            if(!confirm('편집한 단속이미지를 저장하시겠습니까?'))  return;
+        }
 
-		$("#photo").attr("src", "${pageContext.request.contextPath}" + "/" + fileUrl);
-					
-	} else {
-		alert("사진 파일이 없습니다.");
-	}
+        //
+ 
+        // var param = originalInfomation 파일아이디,단속아이디,inpoType..
 
-});
+        // 삭제일때
+        if(isDelete){
+            
 
+            //cmmAjax({
+            //    url: '/somePath/removeFile.do',
+            //    data: $.param(param),
+            //    success: (res) => {
+            //        window.opener.callbackReloadImage();
+            //        window.close();
+            //    }
+            //})
+            return true;
+        }
+
+        // 저장일때
+        const formData = new FormData();
+        //formData.append('fileId', fileId);
+        //formData.append('file', file);
+
+        //cmmAjax({
+        //    type: 'post',
+        //    url: '/somePath/save.do',
+        //    processData: false,
+        //    contentType: false,
+        //    data: formData,
+        //    success: (res) => {
+        //        window.opener.callbackReloadImage();
+        //        window.close();
+        //    }
+        //});
+        return true;
+    };
+
+    function fnAfterImageSave(){
+    	console.log('after...');
+        window.close();
+    };
+
+    $(document).ready(function(){
+
+    	var fileInfo = [${fileInfo}];
+    	
+    	if(fileInfo.length > 0){
+    		originalInfomation = fileInfo[0];
+    		
+    		var fileUrl = fileInfo[0].URL;
+    		var fullSrc = "${pageContext.request.contextPath}" + "/" + fileUrl;
+ 		
+    		editableImage = document.getElementById('editableImage');
+    		editableImage.src = fullSrc;
+    		editableImage.onload = function () {
+                initEditor();
+                editableImage.style.display = 'none';
+            }
+            
+            
+    	} else {
+    		alert("사진 파일이 없습니다.");
+    	}
+
+    });
 </script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/webapp/resources/lib/fims/biz/paintweb/es6-promise.auto.min.js b/src/main/webapp/resources/lib/fims/biz/paintweb/es6-promise.auto.min.js
deleted file mode 100644
index fdf8bff2..00000000
--- a/src/main/webapp/resources/lib/fims/biz/paintweb/es6-promise.auto.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.ES6Promise=e()}(this,function(){"use strict";function t(t){var e=typeof t;return null!==t&&("object"===e||"function"===e)}function e(t){return"function"==typeof t}function n(t){B=t}function r(t){G=t}function o(){return function(){return process.nextTick(a)}}function i(){return"undefined"!=typeof z?function(){z(a)}:c()}function s(){var t=0,e=new J(a),n=document.createTextNode("");return e.observe(n,{characterData:!0}),function(){n.data=t=++t%2}}function u(){var t=new MessageChannel;return t.port1.onmessage=a,function(){return t.port2.postMessage(0)}}function c(){var t=setTimeout;return function(){return t(a,1)}}function a(){for(var t=0;t<W;t+=2){var e=V[t],n=V[t+1];e(n),V[t]=void 0,V[t+1]=void 0}W=0}function f(){try{var t=Function("return this")().require("vertx");return z=t.runOnLoop||t.runOnContext,i()}catch(e){return c()}}function l(t,e){var n=this,r=new this.constructor(p);void 0===r[Z]&&O(r);var o=n._state;if(o){var i=arguments[o-1];G(function(){return P(o,r,i,n._result)})}else E(n,r,t,e);return r}function h(t){var e=this;if(t&&"object"==typeof t&&t.constructor===e)return t;var n=new e(p);return g(n,t),n}function p(){}function v(){return new TypeError("You cannot resolve a promise with itself")}function d(){return new TypeError("A promises callback cannot return that same promise.")}function _(t){try{return t.then}catch(e){return nt.error=e,nt}}function y(t,e,n,r){try{t.call(e,n,r)}catch(o){return o}}function m(t,e,n){G(function(t){var r=!1,o=y(n,e,function(n){r||(r=!0,e!==n?g(t,n):S(t,n))},function(e){r||(r=!0,j(t,e))},"Settle: "+(t._label||" unknown promise"));!r&&o&&(r=!0,j(t,o))},t)}function b(t,e){e._state===tt?S(t,e._result):e._state===et?j(t,e._result):E(e,void 0,function(e){return g(t,e)},function(e){return j(t,e)})}function w(t,n,r){n.constructor===t.constructor&&r===l&&n.constructor.resolve===h?b(t,n):r===nt?(j(t,nt.error),nt.error=null):void 0===r?S(t,n):e(r)?m(t,n,r):S(t,n)}function g(e,n){e===n?j(e,v()):t(n)?w(e,n,_(n)):S(e,n)}function A(t){t._onerror&&t._onerror(t._result),T(t)}function S(t,e){t._state===$&&(t._result=e,t._state=tt,0!==t._subscribers.length&&G(T,t))}function j(t,e){t._state===$&&(t._state=et,t._result=e,G(A,t))}function E(t,e,n,r){var o=t._subscribers,i=o.length;t._onerror=null,o[i]=e,o[i+tt]=n,o[i+et]=r,0===i&&t._state&&G(T,t)}function T(t){var e=t._subscribers,n=t._state;if(0!==e.length){for(var r=void 0,o=void 0,i=t._result,s=0;s<e.length;s+=3)r=e[s],o=e[s+n],r?P(n,r,o,i):o(i);t._subscribers.length=0}}function M(t,e){try{return t(e)}catch(n){return nt.error=n,nt}}function P(t,n,r,o){var i=e(r),s=void 0,u=void 0,c=void 0,a=void 0;if(i){if(s=M(r,o),s===nt?(a=!0,u=s.error,s.error=null):c=!0,n===s)return void j(n,d())}else s=o,c=!0;n._state!==$||(i&&c?g(n,s):a?j(n,u):t===tt?S(n,s):t===et&&j(n,s))}function x(t,e){try{e(function(e){g(t,e)},function(e){j(t,e)})}catch(n){j(t,n)}}function C(){return rt++}function O(t){t[Z]=rt++,t._state=void 0,t._result=void 0,t._subscribers=[]}function k(){return new Error("Array Methods must be provided an Array")}function F(t){return new ot(this,t).promise}function Y(t){var e=this;return new e(U(t)?function(n,r){for(var o=t.length,i=0;i<o;i++)e.resolve(t[i]).then(n,r)}:function(t,e){return e(new TypeError("You must pass an array to race."))})}function q(t){var e=this,n=new e(p);return j(n,t),n}function D(){throw new TypeError("You must pass a resolver function as the first argument to the promise constructor")}function K(){throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.")}function L(){var t=void 0;if("undefined"!=typeof global)t=global;else if("undefined"!=typeof self)t=self;else try{t=Function("return this")()}catch(e){throw new Error("polyfill failed because global object is unavailable in this environment")}var n=t.Promise;if(n){var r=null;try{r=Object.prototype.toString.call(n.resolve())}catch(e){}if("[object Promise]"===r&&!n.cast)return}t.Promise=it}var N=void 0;N=Array.isArray?Array.isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)};var U=N,W=0,z=void 0,B=void 0,G=function(t,e){V[W]=t,V[W+1]=e,W+=2,2===W&&(B?B(a):X())},H="undefined"!=typeof window?window:void 0,I=H||{},J=I.MutationObserver||I.WebKitMutationObserver,Q="undefined"==typeof self&&"undefined"!=typeof process&&"[object process]"==={}.toString.call(process),R="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel,V=new Array(1e3),X=void 0;X=Q?o():J?s():R?u():void 0===H&&"function"==typeof require?f():c();var Z=Math.random().toString(36).substring(2),$=void 0,tt=1,et=2,nt={error:null},rt=0,ot=function(){function t(t,e){this._instanceConstructor=t,this.promise=new t(p),this.promise[Z]||O(this.promise),U(e)?(this.length=e.length,this._remaining=e.length,this._result=new Array(this.length),0===this.length?S(this.promise,this._result):(this.length=this.length||0,this._enumerate(e),0===this._remaining&&S(this.promise,this._result))):j(this.promise,k())}return t.prototype._enumerate=function(t){for(var e=0;this._state===$&&e<t.length;e++)this._eachEntry(t[e],e)},t.prototype._eachEntry=function(t,e){var n=this._instanceConstructor,r=n.resolve;if(r===h){var o=_(t);if(o===l&&t._state!==$)this._settledAt(t._state,e,t._result);else if("function"!=typeof o)this._remaining--,this._result[e]=t;else if(n===it){var i=new n(p);w(i,t,o),this._willSettleAt(i,e)}else this._willSettleAt(new n(function(e){return e(t)}),e)}else this._willSettleAt(r(t),e)},t.prototype._settledAt=function(t,e,n){var r=this.promise;r._state===$&&(this._remaining--,t===et?j(r,n):this._result[e]=n),0===this._remaining&&S(r,this._result)},t.prototype._willSettleAt=function(t,e){var n=this;E(t,void 0,function(t){return n._settledAt(tt,e,t)},function(t){return n._settledAt(et,e,t)})},t}(),it=function(){function t(e){this[Z]=C(),this._result=this._state=void 0,this._subscribers=[],p!==e&&("function"!=typeof e&&D(),this instanceof t?x(this,e):K())}return t.prototype["catch"]=function(t){return this.then(null,t)},t.prototype["finally"]=function(t){var e=this,n=e.constructor;return e.then(function(e){return n.resolve(t()).then(function(){return e})},function(e){return n.resolve(t()).then(function(){throw e})})},t}();return it.prototype.then=l,it.all=F,it.race=Y,it.resolve=h,it.reject=q,it._setScheduler=n,it._setAsap=r,it._asap=G,it.polyfill=L,it.Promise=it,it.polyfill(),it});
\ No newline at end of file
diff --git a/src/main/webapp/resources/lib/fims/biz/paintweb/es6-promise.min.js b/src/main/webapp/resources/lib/fims/biz/paintweb/es6-promise.min.js
deleted file mode 100644
index 1d9dc487..00000000
--- a/src/main/webapp/resources/lib/fims/biz/paintweb/es6-promise.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.ES6Promise=e()}(this,function(){"use strict";function t(t){var e=typeof t;return null!==t&&("object"===e||"function"===e)}function e(t){return"function"==typeof t}function n(t){B=t}function r(t){G=t}function o(){return function(){return process.nextTick(a)}}function i(){return"undefined"!=typeof z?function(){z(a)}:c()}function s(){var t=0,e=new J(a),n=document.createTextNode("");return e.observe(n,{characterData:!0}),function(){n.data=t=++t%2}}function u(){var t=new MessageChannel;return t.port1.onmessage=a,function(){return t.port2.postMessage(0)}}function c(){var t=setTimeout;return function(){return t(a,1)}}function a(){for(var t=0;t<W;t+=2){var e=V[t],n=V[t+1];e(n),V[t]=void 0,V[t+1]=void 0}W=0}function f(){try{var t=Function("return this")().require("vertx");return z=t.runOnLoop||t.runOnContext,i()}catch(e){return c()}}function l(t,e){var n=this,r=new this.constructor(p);void 0===r[Z]&&O(r);var o=n._state;if(o){var i=arguments[o-1];G(function(){return P(o,r,i,n._result)})}else E(n,r,t,e);return r}function h(t){var e=this;if(t&&"object"==typeof t&&t.constructor===e)return t;var n=new e(p);return g(n,t),n}function p(){}function v(){return new TypeError("You cannot resolve a promise with itself")}function d(){return new TypeError("A promises callback cannot return that same promise.")}function _(t){try{return t.then}catch(e){return nt.error=e,nt}}function y(t,e,n,r){try{t.call(e,n,r)}catch(o){return o}}function m(t,e,n){G(function(t){var r=!1,o=y(n,e,function(n){r||(r=!0,e!==n?g(t,n):S(t,n))},function(e){r||(r=!0,j(t,e))},"Settle: "+(t._label||" unknown promise"));!r&&o&&(r=!0,j(t,o))},t)}function b(t,e){e._state===tt?S(t,e._result):e._state===et?j(t,e._result):E(e,void 0,function(e){return g(t,e)},function(e){return j(t,e)})}function w(t,n,r){n.constructor===t.constructor&&r===l&&n.constructor.resolve===h?b(t,n):r===nt?(j(t,nt.error),nt.error=null):void 0===r?S(t,n):e(r)?m(t,n,r):S(t,n)}function g(e,n){e===n?j(e,v()):t(n)?w(e,n,_(n)):S(e,n)}function A(t){t._onerror&&t._onerror(t._result),T(t)}function S(t,e){t._state===$&&(t._result=e,t._state=tt,0!==t._subscribers.length&&G(T,t))}function j(t,e){t._state===$&&(t._state=et,t._result=e,G(A,t))}function E(t,e,n,r){var o=t._subscribers,i=o.length;t._onerror=null,o[i]=e,o[i+tt]=n,o[i+et]=r,0===i&&t._state&&G(T,t)}function T(t){var e=t._subscribers,n=t._state;if(0!==e.length){for(var r=void 0,o=void 0,i=t._result,s=0;s<e.length;s+=3)r=e[s],o=e[s+n],r?P(n,r,o,i):o(i);t._subscribers.length=0}}function M(t,e){try{return t(e)}catch(n){return nt.error=n,nt}}function P(t,n,r,o){var i=e(r),s=void 0,u=void 0,c=void 0,a=void 0;if(i){if(s=M(r,o),s===nt?(a=!0,u=s.error,s.error=null):c=!0,n===s)return void j(n,d())}else s=o,c=!0;n._state!==$||(i&&c?g(n,s):a?j(n,u):t===tt?S(n,s):t===et&&j(n,s))}function x(t,e){try{e(function(e){g(t,e)},function(e){j(t,e)})}catch(n){j(t,n)}}function C(){return rt++}function O(t){t[Z]=rt++,t._state=void 0,t._result=void 0,t._subscribers=[]}function k(){return new Error("Array Methods must be provided an Array")}function F(t){return new ot(this,t).promise}function Y(t){var e=this;return new e(U(t)?function(n,r){for(var o=t.length,i=0;i<o;i++)e.resolve(t[i]).then(n,r)}:function(t,e){return e(new TypeError("You must pass an array to race."))})}function q(t){var e=this,n=new e(p);return j(n,t),n}function D(){throw new TypeError("You must pass a resolver function as the first argument to the promise constructor")}function K(){throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.")}function L(){var t=void 0;if("undefined"!=typeof global)t=global;else if("undefined"!=typeof self)t=self;else try{t=Function("return this")()}catch(e){throw new Error("polyfill failed because global object is unavailable in this environment")}var n=t.Promise;if(n){var r=null;try{r=Object.prototype.toString.call(n.resolve())}catch(e){}if("[object Promise]"===r&&!n.cast)return}t.Promise=it}var N=void 0;N=Array.isArray?Array.isArray:function(t){return"[object Array]"===Object.prototype.toString.call(t)};var U=N,W=0,z=void 0,B=void 0,G=function(t,e){V[W]=t,V[W+1]=e,W+=2,2===W&&(B?B(a):X())},H="undefined"!=typeof window?window:void 0,I=H||{},J=I.MutationObserver||I.WebKitMutationObserver,Q="undefined"==typeof self&&"undefined"!=typeof process&&"[object process]"==={}.toString.call(process),R="undefined"!=typeof Uint8ClampedArray&&"undefined"!=typeof importScripts&&"undefined"!=typeof MessageChannel,V=new Array(1e3),X=void 0;X=Q?o():J?s():R?u():void 0===H&&"function"==typeof require?f():c();var Z=Math.random().toString(36).substring(2),$=void 0,tt=1,et=2,nt={error:null},rt=0,ot=function(){function t(t,e){this._instanceConstructor=t,this.promise=new t(p),this.promise[Z]||O(this.promise),U(e)?(this.length=e.length,this._remaining=e.length,this._result=new Array(this.length),0===this.length?S(this.promise,this._result):(this.length=this.length||0,this._enumerate(e),0===this._remaining&&S(this.promise,this._result))):j(this.promise,k())}return t.prototype._enumerate=function(t){for(var e=0;this._state===$&&e<t.length;e++)this._eachEntry(t[e],e)},t.prototype._eachEntry=function(t,e){var n=this._instanceConstructor,r=n.resolve;if(r===h){var o=_(t);if(o===l&&t._state!==$)this._settledAt(t._state,e,t._result);else if("function"!=typeof o)this._remaining--,this._result[e]=t;else if(n===it){var i=new n(p);w(i,t,o),this._willSettleAt(i,e)}else this._willSettleAt(new n(function(e){return e(t)}),e)}else this._willSettleAt(r(t),e)},t.prototype._settledAt=function(t,e,n){var r=this.promise;r._state===$&&(this._remaining--,t===et?j(r,n):this._result[e]=n),0===this._remaining&&S(r,this._result)},t.prototype._willSettleAt=function(t,e){var n=this;E(t,void 0,function(t){return n._settledAt(tt,e,t)},function(t){return n._settledAt(et,e,t)})},t}(),it=function(){function t(e){this[Z]=C(),this._result=this._state=void 0,this._subscribers=[],p!==e&&("function"!=typeof e&&D(),this instanceof t?x(this,e):K())}return t.prototype["catch"]=function(t){return this.then(null,t)},t.prototype["finally"]=function(t){var e=this,n=e.constructor;return e.then(function(e){return n.resolve(t()).then(function(){return e})},function(e){return n.resolve(t()).then(function(){throw e})})},t}();return it.prototype.then=l,it.all=F,it.race=Y,it.resolve=h,it.reject=q,it._setScheduler=n,it._setAsap=r,it._asap=G,it.polyfill=L,it.Promise=it,it});
\ No newline at end of file
diff --git a/src/main/webapp/resources/lib/fims/biz/paintweb/interfaces/default/layout.xhtml b/src/main/webapp/resources/lib/fims/biz/paintweb/interfaces/default/layout.xhtml
index 3837df08..872ce4f4 100644
--- a/src/main/webapp/resources/lib/fims/biz/paintweb/interfaces/default/layout.xhtml
+++ b/src/main/webapp/resources/lib/fims/biz/paintweb/interfaces/default/layout.xhtml
@@ -29,16 +29,17 @@
 
         <li data-pwTool="selection">Selection</li>
         <!--<li data-pwTool="hand">Hand</li>-->
-        <li data-pwTool="rectangle">Rectangle</li>
+        <!-- <li data-pwTool="rectangle">Rectangle</li> -->
 
         <li class="paintweb_toolSeparator">&#160;</li>
 
         <!--<li data-pwCommand="selectionCut">Cut selection</li>-->
-        <!--<li data-pwCommand="selectionCopy">Copy selection</li>-->
+        <li data-pwCommand="selectionCrop">자르기</li>
+        <li data-pwCommand="selectionFill">가림막</li>
+        <li data-pwCommand="selectionCopy">번호판</li>
         <!--<li data-pwCommand="clipboardPaste">Clipboard paste</li>-->
-        <li data-pwCommand="selectionCrop">Crop selection</li>
-        <li data-pwCommand="selectionFill">Fill selection</li>
         <!--<li data-pwTool="insertimg">Insert image</li>-->
+        <!-- 
         <li class="paintweb_strokeFillStyles">
           <p class="paintweb_opt_fillStyle">Fill
             <span data-pwColorInput="fillStyle">&#160;</span>
@@ -47,7 +48,7 @@
             <span data-pwColorInput="strokeStyle">&#160;</span>
           </p>
         </li>
-
+ 		-->
         <li class="paintweb_toolSeparator">&#160;</li>
 
         <li data-pwCommand="imageRotate">Rotate image</li>
@@ -72,7 +73,7 @@
         <!--<li data-pwTool="pencil">Pencil</li>-->
 
         <!--<li data-pwTool="eraser">Eraser</li>-->
-        <li data-pwCommand="imageClear">Clear image</li>
+        <!-- <li data-pwCommand="imageClear">Clear image</li> -->
         <li data-pwCommand="imageSave">Save image</li>
 
       </ul>
diff --git a/src/main/webapp/resources/lib/fims/biz/paintweb/interfaces/default/script.js b/src/main/webapp/resources/lib/fims/biz/paintweb/interfaces/default/script.js
index cfa042c1..86050415 100644
--- a/src/main/webapp/resources/lib/fims/biz/paintweb/interfaces/default/script.js
+++ b/src/main/webapp/resources/lib/fims/biz/paintweb/interfaces/default/script.js
@@ -1413,6 +1413,7 @@ pwlib.gui = function (app) {
       button.type = "button";
       button.classList.add('btn');
       button.classList.add('blue');
+      button.classList.add('p-1');
       button.appendChild(doc.createTextNode(button.title));
 
       if (elem.firstChild) {
diff --git a/src/main/webapp/resources/lib/fims/biz/paintweb/lang/en.json b/src/main/webapp/resources/lib/fims/biz/paintweb/lang/en.json
deleted file mode 100644
index fd4d6c38..00000000
--- a/src/main/webapp/resources/lib/fims/biz/paintweb/lang/en.json
+++ /dev/null
@@ -1,268 +0,0 @@
-{
-  // $Date: 2009-11-16 18:13:48 +0200 $
-
-  "errorInitBufferCanvas": "Error: adding the new buffer canvas element failed.",
-  "errorInitContext": "Error while initializing the canvas context.",
-  "errorElementNotFound": "Error: the following element was not found: {id}.",
-  "noComputedStyle": "Error: window.getComputedStyle is not available.",
-  "noXMLHttpRequest": "Error: window.XMLHttpRequest is not available.",
-  "errorInitCanvas": "Error: Canvas initialization failed.",
-  "noCanvasSupport": "Error: Your browser does not support Canvas.",
-  "failedConfigLoad": "Error: Failed loading the configuration.",
-  "failedLangLoad": "Error: Failed loading the language file.",
-  "failedMarkupLoad": "Error: Failed loading the interface markup file.",
-  "errorInitCommands": "Error: failed to initialize the PaintWeb commands!",
-  "noToolConfigured": "Error: you have no drawing tool configured to load!",
-  "imageLoadDifferentHost": "Warning: the configured image cannot be loaded because it is from a different domain.",
-  "toolRegisterFailed": "Error: failed to register tool '{id}'!",
-  "extensionRegisterFailed": "Error: failed to register extension '{id}'!",
-  "errorToolActivate": "Error: the tool you want could not be properly activated!",
-  "errorInitGUI": "Error: the interface failed to initialize!",
-  "failedSelectionCopy": "Error: failed to copy the selected pixels into memory.",
-  "noMainTabPanel": "Error: the interface layout has no tabbed panel with ID = main.",
-  "guiMarkupImportFailed": "Error: the interface markup code could not be imported into the main document.",
-  "guiMarkupParseFailed": "Error: the interface markup code could not be properly parsed.",
-  "missingViewport": "Error: the interface markup does not have the image viewport element.",
-  "missingViewportResizer": "Error: the interface markup does not have the image viewport resize handle.",
-  "missingCanvasResizer": "Error: the interface markup does not have the Canvas resize handle.",
-  "missingCanvasContainer": "Error: the interface markup does not have the Canvas container.",
-  "errorCpickerUnsupported": "Error: your browser does not implement the get/putImageData methods! The color picker tool cannot be used.",
-  "errorCbucketUnsupported": "Error: your browser does not implement the get/putImageData methods! The color bucket tool cannot be used.",
-  "errorClipboardUnsupported": "Error: your browser does not support get/putImageData! Clipboard operations like cut/copy/paste cannot be used.",
-  "errorTextUnsupported": "Error: your browser does not implement the Canvas Text API! The text tool cannot be used.",
-  "errorInsertimg": "The image could not be inserted. Maybe the address does not point to an image.",
-  "errorInsertimgHost": "The URL you provided points to a different host. The image cannot be added for security reasons.",
-  "errorInsertimgNotLoaded": "The image did not load yet, or the URL you provided does not point to an image.",
-  "promptInsertimg": "Type the address of the image you want to insert:",
-  "promptImageDimensions": "Please input the new image dimensions you want.",
-  "promptTextFont": "Type the name of the font you want:",
-  "errorImageSave": "The image cannot be saved!",
-
-  "guiCanvasResizer": "Resize the image canvas.",
-  "guiViewportResizer": "Resize the image viewport.",
-  "imageZoomTitle": "Zoom image (Use Up/Down Arrow key)",
-  "imageZoomLabel": "Zoom:",
-
-  "tabs": {
-    "main": {
-      "bcurve": "Bézier curve",
-      "ellipse": "Ellipse",
-      "eraser": "Eraser",
-      "line": "Line",
-      "main": "Main",
-      "pencil": "Pencil",
-      "polygon": "Polygon",
-      "rectangle": "Rectangle",
-      "selection": "Selection",
-      "shadow": "Shadow",
-      "text": "Text",
-      "textBorder": "Border"
-    },
-    "colormixer_inputs": {
-      "rgb": "RGB",
-      "rgbTitle": "sRGB: Standard Red, Green and Blue",
-      "hsv": "HSV",
-      "hsvTitle": "Hue, Saturation and Value",
-      "lab": "Lab",
-      "labTitle": "CIE Lab: Standard observer 2° D65",
-      "cmyk": "CMYK",
-      "cmykTitle": "Cyan, Magenta, Yellow and Key (Black)"
-    },
-    "colormixer_selector": {
-      "mixer": "Mixer",
-      "mixerTitle": "Color space visualisation",
-      "cpalettes": "Palettes",
-      "cpalettesTitle": "Predefined color palettes"
-    }
-  },
-
-  "floatingPanelMinimize": "Minimize",
-  "floatingPanelRestore": "Restore",
-  "floatingPanelClose": "Close",
-  "floatingPanels": {
-    "about": "About PaintWeb",
-    "colormixer": "Color mixer"
-  },
-
-  "tools": {
-    "cbucket": "Color bucket",
-    "cpicker": "Color picker",
-    "bcurve": "Bézier curve",
-    "hand": "Viewport drag",
-    "ellipse": "Ellipse",
-    "eraser": "Eraser",
-    "insertimg": "Insert image",
-    "line": "Line",
-    "pencil": "Pencil",
-    "polygon": "Polygon",
-    "rectangle": "Rectangle",
-    "selection": "Rectangle selection",
-    "text": "Text",
-    "textUnsupported": "The text tool is not supported by your browser."
-  },
-
-  "commands": {
-    "about": "About PaintWeb",
-    "clipboardPaste": "Paste clipboard",
-    "historyRedo": "Redo",
-    "historyUndo": "Undo",
-    "imageClear": "Clear image",
-    "imageSave": "Save image",
-    "imageRotate": "Rotate image",
-    "imageBright": "brighten image",
-    "imageDark": "darken image",
-    "selectionCopy": "Copy selection",
-    "selectionCrop": "Crop selection",
-    "selectionCut": "Cut selection",
-    "selectionDelete": "Delete selection",
-    "selectionFill": "Fill the selection"
-  },
-
-  "inputs": {
-    "line": {
-      "lineCap": "Line cap",
-      "lineCap_butt": "Butt",
-      "lineCap_round": "Round",
-      "lineCap_square": "Square",
-      "lineJoin": "Line join",
-      "lineJoin_bevel": "Bevel",
-      "lineJoin_miter": "Miter",
-      "lineJoin_round": "Round",
-      "lineWidth": "Line width:",
-      "miterLimit": "Miter limit:"
-    },
-    "shadow": {
-      "enable": "Enable shadows",
-      "enableTitle": "If checked, a shadow will render after each drawing operation you do.",
-      "shadowBlur": "Blur:",
-      "shadowOffsetX": "Distance X:",
-      "shadowOffsetY": "Distance Y:",
-      "shadowColor": "Color: ",
-      "shadowColorTitle": "Shadow color"
-    },
-    "selection": {
-      "transform": "Image manipulation",
-      "transformTitle": "If checked, the selected pixels will also be dragged/resized when you make changes to the selection. If unchecked, only the selection marquee will be dragged/resized - pixels will remain unaffected by any such changes.",
-      "transparent": "Transparent selection",
-      "transparentTitle": "If checked, the background will remain transparent. If unchecked, the background will be filled with the current fill color."
-    },
-    "text": {
-      "bold": "Bold",
-      "italic": "Italic",
-      "fontFamily": "Font family:",
-      "fontFamily_add": "Another font...",
-      "fontSize": "Font size:",
-      "textAlign": "Text alignment",
-      "left": "Left",
-      "center": "Center",
-      "right": "Right",
-      "textString_value": "Hello world!"
-    },
-    "shapeType": "Shape type",
-    "shapeType_both": "Both",
-    "shapeType_fill": "Fill",
-    "shapeType_stroke": "Stroke",
-    "pencilSize": "Pencil size:",
-    "eraserSize": "Eraser size:",
-    "borderWidth": "Border width:",
-    "fillStyle": "Fill ",
-    "fillStyleTitle": "Fill color",
-    "strokeStyle": "Stroke ",
-    "strokeStyleTitle": "Stroke color",
-    "colorInputAnchorContent": "Click to pick color"
-  },
-
-  "colormixer": {
-    "failedColorPaletteLoad": "Error: failed to load the color palette.",
-    "colorPalettes": {
-      "_saved": "Saved colors",
-      "anpa": "ANPA",
-      "dic": "DIC Color Guide",
-      "macos": "Mac OS",
-      "pantone-solid-coated": "PANTONE solid coated",
-      "toyo94": "TOYO 94 color finder",
-      "trumatch": "TRUMATCH colors",
-      "web": "Web safe",
-      "windows": "Windows"
-    },
-    "inputs": {
-      "hex": "Hex",
-      "alpha": "Alpha",
-      "hsv_hue": "Hue",
-      "hsv_sat": "Saturation",
-      "hsv_val": "Value",
-      "rgb_red": "Red",
-      "rgb_green": "Green",
-      "rgb_blue": "Blue",
-      "lab_cie_l": "Lightness",
-      "lab_cie_a": "a*",
-      "lab_cie_b": "b*",
-      "cmyk_cyan": "Cyan",
-      "cmyk_magenta": "Magenta",
-      "cmyk_yellow": "Yellow",
-      "cmyk_black": "Key / Black"
-    },
-    "buttons": {
-      "accept": "Accept",
-      "cancel": "Cancel",
-      "saveColor": "Save color",
-      "pickColor": "Pick color"
-    }
-  },
-
-  "status": {
-    "cbucketActive": "Click to start flood filling with the current fill color. Right click to use the stroke color for filling.",
-    "cpickerNormal": "Click to change the fill color, or Shift+Click to change the stroke color.",
-    "cpicker_fillStyle": "Click to pick the fill color.",
-    "cpicker_strokeStyle": "Click to pick the stroke color.",
-    "cpicker_shadow_shadowColor": "Click to pick the shadow color.",
-    "bcurveActive": "Click to start drawing the curve. You need four points: start, end and two control points.",
-    "bcurveControlPoint1": "Click to draw the first control point.",
-    "bcurveControlPoint2": "Click to draw the second control point. This will also end the drawing operation.",
-    "bcurveSnapping": "Hold the Shift key down for vertical/horizontal snapping.",
-    "handActive": "Click and drag the image to scroll.",
-    "ellipseActive": "Click and drag to draw an ellipse.",
-    "ellipseMousedown": "Hold the Shift key down to draw a circle.",
-    "eraserActive": "Click and drag to erase.",
-    "insertimgActive": "Waiting for the image to load...",
-    "insertimgLoaded": "Pick where you want to place the image. Click and drag to resize the image.",
-    "insertimgResize": "Hold the Shift key down to preserve the aspect ratio.",
-    "lineActive": "Click anywhere to start drawing a line.",
-    "lineMousedown": "Hold the Shift key down for vertical/horizontal snapping.",
-    "pencilActive": "Click and drag to draw.",
-    "polygonActive": "Click anywhere to start drawing a polygon.",
-    "polygonAddPoint": "Click to add another point to the polygon.",
-    "polygonEnd": "To end drawing the polygon simply click in the same place as the last point.",
-    "polygonMousedown": "Hold the Shift key down for vertical/horizontal snapping.",
-    "rectangleActive": "Click and drag to draw a rectangle.", 
-    "rectangleMousedown": "Hold the Shift key down to draw a square.",
-    "selectionActive": "Click and drag to draw a selection.",
-    "selectionAvailable": "Drag or resize the selection. Hold the Control key down to toggle the transformation mode.",
-    "selectionDrag": "Hold the Shift key down for vertical/horizontal snapping.",
-    "selectionDraw": "Hold the Shift key down to draw a square selection.",
-    "selectionResize": "Hold the Shift key down to preserve the aspect ratio.",
-    "textActive": "Pick where you want to place the text. Make sure you adjust the properties as desired.",
-    "guiCanvasResizerActive": "Move the mouse to resize the image canvas."
-  },
-
-  // Moodle-related language strings
-  "moodle": {
-    "xhrRequestFailed": "The image save request failed.",
-    "jsonParseFailed": "Parsing the JSON result from the server failed!",
-    "imageSaveFailed": "The image save operation failed.",
-    "urlMismatch": "Image address mismatch!\nThe current image is {url}.\nThe server replied a successful save for {urlServer}.",
-    "errorSubmitUnsaved": "This image is not saved!"
-  },
-  "moodleServer": {
-    "permissionDenied": "Permission denied.",
-    "saveEmptyDataUrl": "Your request has no data URL.",
-    "proxyNotFound": "Could not find the PaintWeb image file proxy script.",
-    "malformedDataUrl": "The data URL is malformed.",
-    "failedMkdir": "Failed to create the PaintWeb images folder inside the Moodle data folder.",
-    "saveFailed": "Saving the image failed.",
-    "backingupImages": "Backing-up images saved with PaintWeb...",
-    "backupFailed": "An error occurred while copying images saved by PaintWeb."
-  }
-
-  // vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix ft=javascript:
-}
diff --git a/src/main/webapp/resources/lib/fims/biz/paintweb/lang/ko.json b/src/main/webapp/resources/lib/fims/biz/paintweb/lang/ko.js
similarity index 98%
rename from src/main/webapp/resources/lib/fims/biz/paintweb/lang/ko.json
rename to src/main/webapp/resources/lib/fims/biz/paintweb/lang/ko.js
index 64d91d5e..6509a375 100644
--- a/src/main/webapp/resources/lib/fims/biz/paintweb/lang/ko.json
+++ b/src/main/webapp/resources/lib/fims/biz/paintweb/lang/ko.js
@@ -1,4 +1,4 @@
-{
+let lang_ko = {
   // $Date: 2009-11-16 18:13:48 +0200 $
 
   "errorInitBufferCanvas": "Error: adding the new buffer canvas element failed.",
@@ -111,11 +111,12 @@
     "imageRotate": "이미지 회전",
     "imageBright": "밝게",
     "imageDark": "어둡게",
-    "selectionCopy": "선택영역 복사",
-    "selectionCrop": "선택영역만 자르기",
+    
+    "selectionCrop": "자르기",
+    "selectionFill": "가림막",
+    "selectionCopy": "번호판",
     "selectionCut": "선택영역 잘라내기",
-    "selectionDelete": "선택영역 삭제",
-    "selectionFill": "선택영역 채우기"
+    "selectionDelete": "선택영역 삭제"
   },
 
   "inputs": {
@@ -265,4 +266,4 @@
   }
 
   // vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix ft=javascript:
-}
+};
diff --git a/src/main/webapp/resources/lib/fims/biz/paintweb/paintweb-config.json b/src/main/webapp/resources/lib/fims/biz/paintweb/paintweb-config.js
similarity index 92%
rename from src/main/webapp/resources/lib/fims/biz/paintweb/paintweb-config.json
rename to src/main/webapp/resources/lib/fims/biz/paintweb/paintweb-config.js
index 334d5eeb..b2979447 100644
--- a/src/main/webapp/resources/lib/fims/biz/paintweb/paintweb-config.json
+++ b/src/main/webapp/resources/lib/fims/biz/paintweb/paintweb-config.js
@@ -1,4 +1,4 @@
-{
+let paintweb_config = {
   // $Date: 2009-11-08 19:54:46 +0200 $
 
   "languages": {
@@ -119,7 +119,7 @@
    * @type CSS3Color-rgba functional notation
    * @default "rgba(0,0,0,1)"
    */
-  "fillStyle": "rgba(0,0,255,1)",
+  "fillStyle": "rgba(255,255,255,1)",
 
   /**
    * Default stroke style.
@@ -214,7 +214,7 @@
    */
   /*FIXME: 항목수정*/
   /*"tools": ["bcurve", "cbucket", "cpicker", "ellipse", "eraser", "hand", "insertimg", "line", "pencil", "polygon", "rectangle", "selection", "text"],*/
-  "tools": ["rectangle", "selection"],
+  "tools": ["selection"],
 
 
   /**
@@ -611,34 +611,35 @@
     "Control Z": { "command": "historyUndo" },
     "Control Y": { "command": "historyRedo" },
 
-    "Control N": { "command": "imageClear" },
-    "Control S": { "command": "imageSave" },
+    // "Control N": { "command": "imageClear" },
+    
 
-    "Control A":    { "command": "selectAll" },
-    "Control X":    { "command": "selectionCut" },
-    "Shift Delete": { "command": "selectionCut" },
-    "Control C":    { "command": "selectionCopy" },
-    "Control V":    { "command": "clipboardPaste" },
+    //"Control A":    { "command": "selectAll" },
+    //"Control X":    { "command": "selectionCut" },
+    //"Shift Delete": { "command": "selectionCut" },
+    //"Control C":    { "command": "selectionCopy" },
+    //"Control V":    { "command": "clipboardPaste" },
+	"Control S": { "command": "imageSave" }
 
     // Use "toolActivate": "id" to activate the tool with the given ID.
-    "C": { "toolActivate": "cpicker" },
-    "E": { "toolActivate": "ellipse" },
-    "F": { "toolActivate": "cbucket" },
-    "G": { "toolActivate": "polygon" },
-    "H": { "toolActivate": "hand" },
-    "I": { "toolActivate": "insertimg" },
-    "L": { "toolActivate": "line" },
-    "O": { "toolActivate": "eraser" },
-    "P": { "toolActivate": "pencil" },
-    "R": { "toolActivate": "rectangle" },
-    "S": { "toolActivate": "selection" },
-    "T": { "toolActivate": "text" },
-    "V": { "toolActivate": "bcurve" },
+    //"C": { "toolActivate": "cpicker" },
+    //"E": { "toolActivate": "ellipse" },
+    //"F": { "toolActivate": "cbucket" },
+    //"G": { "toolActivate": "polygon" },
+    //"H": { "toolActivate": "hand" },
+    //"I": { "toolActivate": "insertimg" },
+    //"L": { "toolActivate": "line" },
+    //"O": { "toolActivate": "eraser" },
+    //"P": { "toolActivate": "pencil" },
+    //"R": { "toolActivate": "rectangle" },
+    //"S": { "toolActivate": "selection" },
+    //"T": { "toolActivate": "text" },
+    //"V": { "toolActivate": "bcurve" },
 
     // Miscellaneous commands.
-    "X":  { "command": "swapFillStroke" },
-    "F1": { "command": "about" }
+    // "X":  { "command": "swapFillStroke" },
+    //"F1": { "command": "about" }
   }
 
   // vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix ft=javascript:
-}
+};
diff --git a/src/main/webapp/resources/lib/fims/biz/paintweb/paintweb.js b/src/main/webapp/resources/lib/fims/biz/paintweb/paintweb.js
index a36d1ecb..3bcd4f37 100644
--- a/src/main/webapp/resources/lib/fims/biz/paintweb/paintweb.js
+++ b/src/main/webapp/resources/lib/fims/biz/paintweb/paintweb.js
@@ -527,11 +527,6 @@ function PaintWeb (win, doc) {
       return false;
     }
 
-    if (!this.config.configFile) {
-      this.initError(lang.noConfigFile);
-      return false;
-    }
-
     if (typeof this.config.guiPlaceholder !== 'object' || 
         this.config.guiPlaceholder.nodeType !== this.ELEMENT_NODE) {
       this.initError(lang.guiPlaceholderWrong);
@@ -638,8 +633,7 @@ function PaintWeb (win, doc) {
    * XMLHttpRequest object.
    */
   this.configLoad = function () {
-    pwlib.xhrLoad(PaintWeb.baseFolder + this.config.configFile, 
-        this.configReady);
+	this.configReady();
   };
 
   /**
@@ -662,16 +656,8 @@ function PaintWeb (win, doc) {
      *   3 INTERACTIVE Downloading, responseText holds the partial data.
      *   4 COMPLETED Finished with all operations.
      */
-    if (!xhr || xhr.readyState !== 4) {
-      return;
-    }
-
-    if ((xhr.status !== 304 && xhr.status !== 200) || !xhr.responseText) {
-      _self.initError(lang.failedConfigLoad);
-      return;
-    }
 
-    var config = pwlib.jsonParse(xhr.responseText);
+    var config = paintweb_config;
     pwlib.extend(_self.config, config);
 
     _self.langLoad();
@@ -689,21 +675,7 @@ function PaintWeb (win, doc) {
    * XMLHttpRequest object.
    */
   this.langLoad = function () {
-    var id   = this.config.lang,
-        file = PaintWeb.baseFolder;
-
-    // If the language is not available, always fallback to English.
-    if (!(id in this.config.languages)) {
-      id = this.config.lang = 'en';
-    }
-
-    if ('file' in this.config.languages[id]) {
-      file += this.config.languages[id].file;
-    } else {
-      file += this.config.langFolder + '/' + id + '.json';
-    }
-
-    pwlib.xhrLoad(file, this.langReady);
+    this.langReady();
   };
 
   /**
@@ -717,17 +689,9 @@ function PaintWeb (win, doc) {
    * @see PaintWeb#langLoad The method which issues the XMLHttpRequest request 
    * for loading the language file.
    */
-  this.langReady = function (xhr) {
-    if (!xhr || xhr.readyState !== 4) {
-      return;
-    }
-
-    if ((xhr.status !== 304 && xhr.status !== 200) || !xhr.responseText) {
-      _self.initError(lang.failedLangLoad);
-      return;
-    }
+  this.langReady = function () {
 
-    pwlib.extend(_self.lang, pwlib.jsonParse(xhr.responseText));
+    pwlib.extend(_self.lang, lang_ko);
 
     if (_self.initCanvas() && _self.initContext()) {
       // Start GUI load now.
@@ -751,13 +715,13 @@ function PaintWeb (win, doc) {
         this.commandRegister('selectionCrop',  this.selectionCrop) &&
         this.commandRegister('selectionFill',  this.selectionFill) &&
         //this.commandRegister('selectionCut',   this.selectionCut) &&
-        //this.commandRegister('selectionCopy',  this.selectionCopy) &&
+        this.commandRegister('selectionCopy',  this.selectionCopy) &&
         //this.commandRegister('clipboardPaste', this.clipboardPaste) &&
         this.commandRegister('imageSave',      this.imageSave) &&
         this.commandRegister('imageRotate',    this.imageRotate) &&
         this.commandRegister('imageBright',    this.imageBright) &&
         this.commandRegister('imageDark',      this.imageDark) &&
-        this.commandRegister('imageClear',     this.imageClear) &&
+        //this.commandRegister('imageClear',     this.imageClear) &&
         this.commandRegister('swapFillStroke', this.swapFillStroke) &&
         this.commandRegister('imageZoomIn',    this.imageZoomIn) &&
         this.commandRegister('imageZoomOut',   this.imageZoomOut) &&
@@ -2661,6 +2625,7 @@ function PaintWeb (win, doc) {
         imageLoad = _self.config.imageLoad,
         ext = 'png', idata = null, src = null, pos;
 
+
     if (!canvas.toDataURL) {
       return false;
     }
@@ -2714,35 +2679,21 @@ function PaintWeb (win, doc) {
     }
 
     canvas = null;
-//    alert('idata~~~'+idata)
+
     if (!idata || idata === 'data:,') {
       return false;
     }
 
-    //--------------------------------------------------------------------
-    // FIXME: 변경된 부분 : save image
-    //--------------------------------------------------------------------
-    if (!_self.config.imageSave) {
-      if (_self.config.afterImageSave) _self.config.afterImageSave();
-      return;
-    }
-
     let fileType = 'image/';
-    const regx = new RegExp('.(gif|jpg|jpeg|tiff|png|ico)$', 'i')
-    let name = (/[^(/|\\)]*$/).exec(idata)[0]
-    // 20220915_5df30439017240afbc7081ae9bfbfa2f_e 와 같은 형태인 경우 imageName으로
-    // 원본파일명 + '_e'
-    if(!regx.exec(name)){
-      const imgName = srcImg.name;
-      const idx = imgName.indexOf('.');
-
-      // 삭제가 아닌 경우 원본이미지명 + '_e' 추가
-      if(img.width !== 0){
-        name = imgName.substring(0, idx)+'_e'+ imgName.substring(idx);
-      }
-    }
-    fileType += regx.test(name) ? regx.exec(name)[0].replace('.', '') : 'jpg'
-    // mine type 'jpg' > jpeg로 변경
+    const regx = new RegExp('.(gif|jpg|jpeg|tiff|png|ico)$', 'i');
+    let name = originalInfomation.FILE_NM;;
+
+	if(regx.test(name)){
+		fileType += regx.exec(name)[0].replace('.', '');
+	} else {
+		fileType += 'jpg';
+	}
+	// mine type 'jpg' > jpeg로 변경
     fileType = fileType.replace('image/jpg', 'image/jpeg');
     const bstr = atob(idata.split(",")[1]);
     let n = bstr.length;
@@ -2755,7 +2706,7 @@ function PaintWeb (win, doc) {
 
     // 이미지 삭제인 경우 img.width, img.height 가 0
     _self.config.imageSave(file, img.width, img.height, doc, _self);
-
+	//_self.config.afterImageSave();
 
     return;
     //---------------------------------------------------------------------