diff --git a/src/main/webapp/WEB-INF/jsp/fims/stng01030-main.jsp b/src/main/webapp/WEB-INF/jsp/fims/stng01030-main.jsp
index 451ded1b..e475a003 100644
--- a/src/main/webapp/WEB-INF/jsp/fims/stng01030-main.jsp
+++ b/src/main/webapp/WEB-INF/jsp/fims/stng01030-main.jsp
@@ -3,3 +3,377 @@
 
 <c:set var="pageKorName" scope="request">외주요청파일 서식 설정</c:set>
 
+<div class="d-flex flex-row justify-content-evenly">
+	<div class="card p-3">
+		<div class="row mb-3 justify-content-start">
+			<div class="col-md-12">
+				<div class="float-start">
+					<form id="frmSearch--${pageName}" name="frmSearch">
+						<input type="hidden" name="sggCd" />
+						업무
+						<select class="form-select" name="taskSeCd">
+							<c:forEach items="${TaskListForSgg}" var="item">
+								<option value="${item.code}">${item.value}</option>
+							</c:forEach>
+						</select>
+						출력물
+						<select class="form-select" name="sndngSeCd">
+							<option value="02">사전통지서</option>
+							<option value="03">부과고지서</option>
+						</select>
+						<button type="button" id="btnLoad--${pageName}" class="btn btn-primary">불러오기</button>
+					</form>
+				</div>
+				<div class="float-end">
+					<button type="button" id="btnSave--${pageName}" class="btn btn-primary">저장</button>
+				</div>
+			</div>
+		</div>
+		
+		<div class="d-flex justify-content-between">
+			<span id="currentOtpt--${pageName}" class="bg-lighter h3" style="min-height:30px;">
+			</span>
+			<form id="frmEdit--${pageName}">
+				<input type="hidden" name="sggCd" />
+				<input type="hidden" name="taskSeCd" />
+				<input type="hidden" name="sndngSeCd" />
+
+				<input type="text" name="dialogId" hidden />
+			
+				<span id="zipGlobalStng--${pageName}">
+				</span>
+			</form>
+		</div>
+		
+		<div class="row mb-3 justify-content-start">
+			<div class="col-md-12">
+				<div class="float-start">
+					<strong>항목</strong>
+					<button type="button" id="btnAdd--${pageName}" class="btn btn-info">+ 추가</button>
+					<button type="button" id="btnDel--${pageName}" class="btn btn-info">&#x2611; 삭제</button>
+				</div>
+			</div>
+		</div>
+		<div class="card-datatable text-nowrap mb-3">
+			<div class="dataTables_wrapper dt-bootstrap5 no-footer">
+				<div id="scroll--${pageName}" class="table-responsive"
+				style="overflow-x:scroll; height:300px; overflow-y:scroll;" >
+					<table 
+					class="table-layout-fixed compress-cell dataTable table table-bordered" 
+					id="table--${pageName}" aria-describedby="DataTables_Table_0_info">
+						<thead class="sticky-thead" id="thead--${pageName}">
+						</thead>
+						<tbody id="tbody--${pageName}">
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+		
+	</div>
+</div>
+
+<span id="tempArea--${pageName}" hidden></span>
+
+<template id="theadTr--${pageName}">
+	<tr>
+		<th style="width:130px">순서</th>
+		<th style="width:40px"></th>
+		<th style="width:200px">항목명</th>
+		<th style="width:110px">바이트수</th>
+		<th style="width:140px">공백문자방향</th>
+		<th class="dummy-th"></th>
+	</tr>
+</template>
+
+<template id="found--${pageName}">
+	<tr data-key="{OUTSOURCING_FORM_ID}">
+		<td data-col="artclOrdr" class="text-center">
+			<button type="button">▲</button>
+			<input type="text" readonly class="w-px-50 text-center" />
+			<button type="button">▼</button>
+		</td>
+		<td data-col="checkbox" class="text-center">
+			<input type="checkbox" name="del" class="form-check-input" />
+		</td>
+		<td data-col="artclNm" class="text-center">
+			<select class="form-select">
+			{COMPONENTS}
+			</select>
+		</td>
+		<td data-col="artclSz" class="text-center">
+			<input type="number" class="form-control w-px-80" min="0" max="300" />
+		</td>
+		<td data-col="paddingDirection" class="text-center">
+			<button type="button" class="btn btn-xs btn-outline-dark h-px-25 px-1">◀</button>
+			<select class="form-select no-bgi w-automin">
+				<option value="left" title="왼쪽">왼쪽</option>
+				<option value="right" title="오른쪽">오른쪽</option>
+			</select>
+			<button type="button" class="btn btn-xs btn-outline-dark h-px-25 px-1">▶</button>
+		</td>
+		<td class="dummy-td"></td>
+	</tr>
+</template>
+
+
+<script>
+var FIM054 = new CommonCodes(${FIM054});
+var FIM047 = new CommonCodes(${FIM047});
+var FIM078 = new CommonCodes(${FIM078});
+var FIM080 = new CommonCodes(${FIM080});
+
+pageObject["${pageName}"] = {};
+
+$(document).ready(function(){
+
+	var $P = pageObject["${pageName}"];
+	$P.zipGlobalStng = {};
+	$P.zipArtclStngMap = {};
+	
+	$("#btnSave--${pageName}").attr("disabled","disabled");
+
+	$("#btnAdd--${pageName}").attr("disabled","disabled");
+	$("#btnDel--${pageName}").attr("disabled","disabled");
+
+	$P.fnLoad = () => {
+		
+		var ff = new FimsFormFields("#frmSearch--${pageName}");
+		var query = ff.get();
+		ajax.post({
+			url : wctx.url("/stng/stng01/030/info.do"),
+			data : query,
+			success : (resp) => {
+				$("#btnSave--${pageName}").removeAttr("disabled");
+
+				$("#btnAdd--${pageName}").removeAttr("disabled");
+				$("#btnDel--${pageName}").removeAttr("disabled");
+				$("#currentOtpt--${pageName}").text("");
+				$("#zipGlobalStng--${pageName}").html("");
+
+				$("#tbody--${pageName}").html("");
+				
+				$("#frmEdit--${pageName}").find("[name='sggCd']").val(query.sggCd);
+				$("#frmEdit--${pageName}").find("[name='taskSeCd']").val(query.taskSeCd);
+				$("#frmEdit--${pageName}").find("[name='sndngSeCd']").val(query.sndngSeCd);
+
+				
+				$("#currentOtpt--${pageName}").text(resp.outsourcingStngTitle);
+				if(resp.zipGlobalStng != null){
+					$P.zipGlobalStng = resp.zipGlobalStng;
+				} else {
+					$P.zipGlobalStng = {
+						OUTSOURCING_BSC_ID : ""
+					};
+				}
+				$P.renderZipGlobalStng($P.zipGlobalStng);
+				
+				$P.zipArtclStngMap = resp.zipArtclStngMap;
+
+				$P.renderZipArtclStngGrid(
+						$P.zipArtclStngMap.prototypeList, 
+						$P.zipArtclStngMap.dataList);
+			}
+		});
+		
+	}
+	
+	//전역 설정 렌더링
+	$P.renderZipGlobalStng = (zipGlobalStng) => {
+
+		var editForm = $("#frmEdit--${pageName}");
+		
+		//설정ID
+		$("#zipGlobalStng--${pageName}").append("<input type='hidden' name='outsourcingBscId' />");
+		editForm.find("input[name='outsourcingBscId']").val(zipGlobalStng.OUTSOURCING_BSC_ID);
+
+	}
+	
+	//요소 그리드 렌더링
+	$P.renderZipArtclStngGrid = (prototypeList, dataList) => {
+		
+		var components = "<option value='' data-component-type=''>선택</option>";
+		
+		for(var i=0; i < prototypeList.length; i++){
+			var p = prototypeList[i];
+			components += "<option value='"+p.artclNm+"' >"+p.dscrp+"</option>";
+		}
+		
+		for(var i=0; i < dataList.length; i++){
+			var data = dataList[i];
+			var found = document.getElementById("found--${pageName}").innerHTML;
+					
+			found = found.replace(/{OUTSOURCING_FORM_ID}/gi, data.OUTSOURCING_FORM_ID);
+			found = found.replace(/{COMPONENTS}/gi, components);
+			$("#tbody--${pageName}").append(found);
+			
+			var lastTr = $("#tbody--${pageName}").find("tr").last()[0];
+			
+			$($P.fnGetElement(lastTr,"artclNm")).set(data.ARTCL_NM);
+
+			
+			$($P.fnGetElement(lastTr,"artclSz"))
+				.set(!isEmpty(data.ARTCL_SZ) ? data.ARTCL_SZ : 0);
+			
+			$($P.fnGetElement(lastTr,"paddingDirection"))
+				.set(!isEmpty(data.TEXT_SORT) ? data.TEXT_SORT : "left");
+			
+		}
+		
+		$("#tbody--${pageName}").find("tr").each(function(){
+			
+			var sel = $P.fnGetElement(this,"paddingDirection");
+			var toPrev = $(sel).siblings()[0];
+			var toNext = $(sel).siblings()[1];
+			fnMakeSpinnerSelect(sel, toPrev, toNext);
+			
+			var scrollDiv = "scroll--${pageName}";
+			
+			var rowSpinButtons = $(this).find("td[data-col='artclOrdr']").find("button");
+			
+			fnMakeRowSpinner(this,rowSpinButtons[0],rowSpinButtons[1],document.getElementById(scrollDiv), null);
+		});
+	}
+	
+	$P.fnGetElement = (tableRow, colName) => {
+		return $(tableRow).find("td[data-col='"+colName+"']").children("input, select").first()[0];
+	}
+	
+	
+	//행 추가
+	$P.addRow = () => {
+
+		var prototypeList = $P.zipArtclStngMap.prototypeList;
+
+		var components = "<option value='' data-component-type=''>선택</option>";
+		for(var i=0; i < prototypeList.length; i++){
+			var p = prototypeList[i];
+			components += "<option value='"+p.artclNm+"' >"+p.dscrp+"</option>";
+		}
+		var template = document.getElementById("found--${pageName}").innerHTML;
+		template = template.replace(/{OUTSOURCING_FORM_ID}/gi, "");
+		template = template.replace(/{COMPONENTS}/gi, components);
+		$("#tbody--${pageName}").append(template);
+		
+		var lastTr = $("#tbody--${pageName}").find("tr").last()[0];
+		
+		var rowSpinButtons = $(lastTr).find("td[data-col='artclOrdr']").find("button");
+		fnMakeRowSpinner(lastTr,rowSpinButtons[0],rowSpinButtons[1],document.getElementById("scroll--${pageName}"), null);
+
+		
+		//셀렉트 스피너
+		var sel = $P.fnGetElement(lastTr,"paddingDirection");
+		var toPrev = $(sel).siblings()[0];
+		var toNext = $(sel).siblings()[1];
+		fnMakeSpinnerSelect(sel, toPrev, toNext);
+		
+		$("#scroll--${pageName}").scrollTop($("#scroll--${pageName}")[0].scrollHeight);
+		
+	}
+	
+	//행 삭제
+	$P.delRow = () => {
+		
+		if($("#tbody--${pageName}").find("tr").length <= 0){
+			alert('삭제할 항목이 없습니다.');
+			return;
+		}
+		
+		if($("#tbody--${pageName}").find("input[name='del'][type='checkbox']:checked").length <= 0){
+			alert('체크된 항목이 없습니다.');
+			return;
+		}
+		
+		$("#tbody--${pageName}").find("tr").filter(function(index, selector){
+			if($(selector).find("input[name='del'][type='checkbox']").is(":checked")){
+				$(selector).remove();
+			}
+		});
+	}
+	
+	//요소 설정 값 추출
+	$P.getRowData = (formData) => {
+		var rowArr = [];
+		$("#tbody--${pageName} tr").each(function(){
+			var row = {};
+
+			row.outsourcingFormId = this.dataset.key;
+			row.artclNm = $($P.fnGetElement(this,"artclNm")).val();
+			row.artclOrdr = $($P.fnGetElement(this,"artclOrdr")).val();
+			row.artclSz = $($P.fnGetElement(this,"artclSz")).val();
+
+			row.paddingDirection = $($P.fnGetElement(this,"paddingDirection")).val();
+
+			row.sggCd = formData.get("sggCd");
+			row.taskSeCd = formData.get("taskSeCd");
+			row.sndngSeCd = formData.get("sndngSeCd");
+
+			
+			rowArr.push(row);
+		});
+		
+		return rowArr;
+	}
+	
+	//설정 저장
+	$P.fnSave = () => {
+		
+		//출력물 전역설정
+		var formData = new FormData(document.getElementById("frmEdit--${pageName}"));
+		
+		//요소 설정
+		var rowArr = $P.getRowData(formData);
+		for(var i=0; i<rowArr.length; i++){
+			if(rowArr[i].artclNm == ""){
+				alert("항목명을 선택하세요.");
+				return;
+			}
+		}
+		
+		var zipArtclStngList = fnJsonArrayToFormData(rowArr,"zipArtclStngList");
+		var keys = Object.keys(zipArtclStngList);
+		for(var i=0; i < keys.length; i++){
+			formData.append(keys[i], zipArtclStngList[keys[i]]);
+		}
+		
+		ajax.post({
+			url : wctx.url("/stng/stng01/030/save.do"),
+			data : formData,
+			contentType : false, processData : false,
+			success : (resp) => {
+				if(resp.saved){
+					
+					dialog.alert("저장되었습니다.");
+
+					var ff = new FimsFormFields("#frmEdit--${pageName}").get();
+					$("#frmSearch--${pageName}").find("[name='sggCd']").val(ff.sggCd);
+					$("#frmSearch--${pageName}").find("[name='taskSeCd']").val(ff.taskSeCd);
+					$("#frmSearch--${pageName}").find("[name='sndngSeCd']").val(ff.sndngSeCd);
+
+					
+					$("#btnLoad--${pageName}").click();
+					
+				}
+			}
+		});
+	}
+	
+	$("#thead--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
+	
+	$("#btnLoad--${pageName}").on("click", () => $P.fnLoad() );
+	$("#btnAdd--${pageName}").on("click", () => $P.addRow() );
+	$("#btnDel--${pageName}").on("click", () => $P.delRow() );
+	$("#btnSave--${pageName}").on("click", () => $P.fnSave() );
+
+	var markerFinder = function(tr){
+		return $P.fnGetElement(tr,"artclOrdr");
+	};
+	var markerSetter = function(marker, value){
+		marker.value = value;
+	};
+	
+	fnMakeRowNumberingTable(document.getElementById('tbody--${pageName}'), markerFinder, markerSetter);
+
+});
+
+</script>
\ No newline at end of file