Merge remote-tracking branch 'origin/main'

src/main/webapp/WEB-INF/jsp/include/tail.jsp

@@ -44,7 +44,7 @@
 <script src="<c:url value="/webjars/applib/js/initAfterPageLoad.js?${ver}"/>"></script>
 <!-- 커스텀UI -->
 <script src="<c:url value="/webjars/applib/js/componentization.js?${ver}"/>"></script>
-
+<script src="<c:url value="/resources/js/adds/cmmn/componentization.js?${ver}"/>"></script>
 
 <!-- endbuild -->
 <c:set var="functions" scope="request">

src/main/webapp/resources/js/adds/cmmn/componentization.js

@@ -0,0 +1,47 @@
+/**************************************************************************
+* 그리드 내부 이미지 첨부
+**************************************************************************/
+function fnMakeGridImageViewer(tdEls, fileInputElName){
+	
+	for(let tdEl of tdEls){
+		
+		let fileInputEl = document.createElement("input");
+		fileInputEl.name = fileInputElName;
+		fileInputEl.type = "file";
+		fileInputEl.setAttribute("hidden","hidden");
+		fileInputEl.setAttribute("accept","image/*")
+		tdEl.appendChild(fileInputEl);
+		
+		let uploadButtonEl = document.createElement("button");
+		uploadButtonEl.classList.add("btn","btn-primary","w-px-50", "mx-1");
+		uploadButtonEl.textContent = "등록";
+		tdEl.appendChild(uploadButtonEl);
+			
+		let viewButtonEl = document.createElement("button");
+		viewButtonEl.classList.add("btn","btn-primary","w-px-50", "mx-1");
+		viewButtonEl.setAttribute("hidden","hidden");
+		viewButtonEl.textContent = "보기";
+		tdEl.appendChild(viewButtonEl);
+		
+		$(fileInputEl).on("change", function(){
+			if(this.files != null && this.files.length > 0){
+				$(uploadButtonEl).text("수정");
+				$(viewButtonEl).removeAttr("hidden");			
+			} else {
+				$(uploadButtonEl).text("등록");
+				$(viewButtonEl).attr("hidden","hidden");
+			}
+		});
+		
+		$(uploadButtonEl).on("click", function(){
+			$(fileInputEl).click();
+		});
+
+		$(viewButtonEl).on("click", function(){
+			window.open((window.URL || window.webkitURL).createObjectURL(fileInputEl.files[0])
+			, "이미지"
+			, "width=500, height=500");
+		});
+	}
+
+}