공지사항 관리 - 장애 점검 등록 UI 추가

WebContent/jsp/onl/apim/portalnotice/portalNoticeManDetail.jsp

@@ -19,10 +19,23 @@
 <script language="javascript" >
 	var url = '<c:url value="/onl/apim/portalnotice/portalNoticeMan.json" />';
 	var url_view = '<c:url value="/onl/apim/portalnotice/portalNoticeMan.view" />';
+	var apiPopupUrl = '<c:url value="/onl/apim/apigroup/apiGroupMan.view" />';
 	var file_download = '<c:url value="/file/download.do" />';
 	var isDetail = false;
 	var fileInfo = null;
 
+	// 코드 상수 — PortalNoticeUI 와 동기화
+	var NOTICE_TYPE_NORMAL = '1';
+	var NOTICE_TYPE_MAINTENANCE = '2';
+	var NOTICE_TYPE_INCIDENT = '3';
+
+	// 영향 API 목록 (UI 상태)
+	var affectedApis = [];
+
+	function isIncidentType(t) {
+		return t === NOTICE_TYPE_INCIDENT || t === NOTICE_TYPE_MAINTENANCE;
+	}
+
 	function init() {
 		var key = "${param.id}";
 		isDetail = key != "" && key != "null";
@@ -35,8 +48,7 @@
 			$("#btn_modify").html('<i class="material-icons">save</i> <%= localeMessage.getString("button.register") %>');
 			buttonControl(false);
 		}
-		
-		// 초기화 로직
+
 		$.ajax({
 			type : "POST",
 			url:url,
@@ -45,7 +57,8 @@
 			success:function(json){
 				combo = json;
 				new makeOptions("CODE","NAME").setObj($("select[name=noticeType]")).setNoValueInclude(false).setData(json.noticeTypeList).rendering();
-				
+				toggleIncidentFields();
+
 				if (key) {
 					detail(key);
 				}
@@ -56,6 +69,22 @@
 		});
 	}
 
+	function toggleIncidentFields() {
+		var t = $('#noticeType').val();
+		if (isIncidentType(t)) {
+			$('.incident-row').show();
+			// INCIDENT 만 상태 영역 표시
+			if (t === NOTICE_TYPE_INCIDENT) {
+				$('.incident-state-row').show();
+			} else {
+				$('.incident-state-row').hide();
+			}
+		} else {
+			$('.incident-row').hide();
+			$('.incident-state-row').hide();
+		}
+	}
+
 	function decodeHTMLEntities(text) {
 		var textArea = document.createElement('textarea');
 		textArea.innerHTML = text;
@@ -73,57 +102,100 @@
 	function displayAttachFile(file) {
 		var $attachFiles = $('#attachFiles');
 		$attachFiles.empty();
-
 		if (file) {
 			var iconPath = '${pageContext.request.contextPath}/images/icon_file.png';
 			var fileItem = $('<div>').addClass('file-item');
-
 			$('<img>').attr('src', iconPath).css({'marginLeft': '15px','marginRight': '5px' ,'height': '1.2em'}).appendTo(fileItem);
-
-			var fileNameSpan = $('<span>')
-					.addClass('fileName')
-					.text(file.originalFileName + '.' + file.fileExtension + ' (' + formatFileSize(file.size) + ')')
-					.css('cursor', 'pointer')
-					.on('click', function() {
-						if (file.fileId) {
-							downloadFile(file.fileId);
-						}
-					});
-
+			var fileNameSpan = $('<span>').addClass('fileName')
+				.text(file.originalFileName + '.' + file.fileExtension + ' (' + formatFileSize(file.size) + ')')
+				.css('cursor', 'pointer')
+				.on('click', function() { if (file.fileId) downloadFile(file.fileId); });
 			fileNameSpan.appendTo(fileItem);
 			$('<button>').text('X').addClass('delete-file').css('marginLeft', '15px')
-					.on('click', function() {
-						fileInfo = null;
-						displayAttachFile(null);
-						// 폼에 삭제 플래그 추가
-						$('<input>').attr({
-							type: 'hidden',
-							name: 'fileDeleted',
-							value: 'true'
-						}).appendTo('#ajaxForm');
-					})
-					.appendTo(fileItem);
-
+				.on('click', function() {
+					fileInfo = null;
+					displayAttachFile(null);
+					$('<input>').attr({type: 'hidden', name: 'fileDeleted', value: 'true'}).appendTo('#ajaxForm');
+				}).appendTo(fileItem);
 			fileItem.appendTo($attachFiles);
 		}
 	}
 
 	function downloadFile(fileId) {
 		if (fileId) {
-			var fileSn = 1;  // 단일 파일이므로 시리얼 넘버를 1로 고정
-			window.location.href = file_download + '?fileId=' + fileId + '&fileSn=' + fileSn;
-		} else {
-			console.log("File not yet uploaded or doesn't have an ID");
+			window.location.href = file_download + '?fileId=' + fileId + '&fileSn=1';
 		}
 	}
 
+	function renderAffectedApis() {
+		var $tb = $('#affectedApiTbody');
+		$tb.empty();
+		if (!affectedApis.length) {
+			$tb.append('<tr><td colspan="3" style="text-align:center;color:#999;">선택된 영향 API가 없습니다.</td></tr>');
+			return;
+		}
+		$.each(affectedApis, function(idx, api) {
+			var $tr = $('<tr>');
+			$tr.append('<td style="text-align:center;width:40px;"><input type="checkbox" class="affected-api-check" data-idx="' + idx + '"></td>');
+			$tr.append('<td>' + (api.apiId || '') + '</td>');
+			$tr.append('<td>' + (api.apiName || '') + '</td>');
+			$tb.append($tr);
+		});
+	}
+
+	function openApiPopup() {
+		// showModal 헬퍼는 urlAddServiceType + &menuId=getMenuId() + &pop=true 를 자동 부여 →
+		// AuthorizeInterceptor 가 정상적으로 권한 인식. window.open 직접 호출 시 권한 부족 발생.
+		// 본 페이지는 summernote 본문 에디터 등 다른 iframe 이 함께 존재할 수 있어
+		// frames[0] 가정은 위험 → DOM 에서 .ui-dialog 내 iframe 중 src=apiGroupMan 인 것을 식별.
+		var selectedIds = affectedApis.map(function(a) { return a.apiId; }).join(',');
+		var url2 = apiPopupUrl + '?cmd=POPUP&selectedApiIds=' + encodeURIComponent(selectedIds);
+		var args = {};
+		showModal(url2, args, 1280, 860, function () {
+			var doc = args.self && args.self.document;
+			if (!doc) return;
+			var popupFrame = null;
+			var iframes = doc.querySelectorAll('iframe');
+			for (var i = 0; i < iframes.length; i++) {
+				var src = iframes[i].getAttribute('src') || '';
+				if (src.indexOf('apiGroupMan') >= 0) {
+					popupFrame = iframes[i].contentWindow;
+					break;
+				}
+			}
+			if (!popupFrame) return;
+			var rv = popupFrame.returnValue;
+			if (!rv) return;
+			var rows = Array.isArray(rv) ? rv : [rv];
+			$.each(rows, function(_, item) {
+				if (!item || !item.apiId) return;
+				var exists = affectedApis.some(function(a){ return a.apiId === item.apiId; });
+				if (!exists) {
+					affectedApis.push({apiId: item.apiId, apiName: item.apiDesc || item.apiName || ''});
+				}
+			});
+			renderAffectedApis();
+		});
+	}
+
+	function removeSelectedAffectedApis() {
+		var idxes = [];
+		$('.affected-api-check:checked').each(function() {
+			idxes.push(parseInt($(this).data('idx'), 10));
+		});
+		if (!idxes.length) {
+			alert('삭제할 항목을 선택해주세요.');
+			return;
+		}
+		// 역순 삭제
+		idxes.sort(function(a,b){return b-a;}).forEach(function(i){ affectedApis.splice(i, 1); });
+		renderAffectedApis();
+	}
 
 	function detail(key) {
 		if (!isDetail) return;
 		$.ajax({
-			type: "POST",
-			url: url,
-			dataType: "json",
+			type: "POST", url: url, dataType: "json",
 			data: {cmd: 'DETAIL', id: key},
 			success: function (data) {
 				$("#id").val(key);
@@ -135,7 +207,18 @@
 				var decodedContent = decodeHTMLEntities(data.noticeDetail);
 				$('#contents').summernote('code', decodedContent);
 
-				// 파일 정보 표시
+				// 장애/점검 필드
+				$('#summary').val(data.summary || '');
+				$('#startedAt').val(data.startedAt || '');
+				$('#endAt').val(data.endAt || '');
+				$('#state').val(data.state || 'INVESTIGATING');
+				$('#previousState').text(data.previousState || '없음');
+				affectedApis = (data.affectedApis || []).map(function(a){
+					return {apiId: a.apiId, apiName: a.apiName || ''};
+				});
+				renderAffectedApis();
+				toggleIncidentFields();
+
 				if (data.fileInfo) {
 					fileInfo = {
 						originalFileName: data.fileInfo.fileDetails[0].originalFileName,
@@ -146,24 +229,21 @@
 					displayAttachFile(fileInfo);
 				}
 			},
-			error: function (e) {
-				alert(e.responseText);
-			}
+			error: function (e) { alert(e.responseText); }
 		});
 	}
 
 	$(document).ready(function () {
 		var returnUrl = getReturnUrlForReturn();
-		
+
 		init();
-		
 
-		// Summernote 에디터 초기화 (이미지 붙여넣기 data-uri 방식, 리사이징 지원)
-		initSummernote('#contents', {
-			placeholder: '여기에 내용을 입력하세요.',
-			height: 300
-		});
+		initSummernote('#contents', { placeholder: '여기에 내용을 입력하세요.', height: 300 });
 
+		$('#noticeType').on('change', toggleIncidentFields);
+
+		$('#btn_addAffectedApi').click(openApiPopup);
+		$('#btn_removeAffectedApi').click(removeSelectedAffectedApis);
 
 		$('#fileInput').change(function(e) {
 			var file = e.target.files[0];
@@ -171,52 +251,66 @@
 				fileInfo = {
 					originalFileName: file.name.split('.').slice(0, -1).join('.'),
 					fileExtension: file.name.split('.').pop(),
-					file: file,
-					size: file.size
+					file: file, size: file.size
 				};
 				displayAttachFile(fileInfo);
 			}
-			this.value = '';  // 입력 필드 초기화
-		});
-
-		$('#addFile').click(function() {
-			$('#fileInput').click();
+			this.value = '';
 		});
 
+		$('#addFile').click(function() { $('#fileInput').click(); });
 
 		$("#btn_modify").click(function () {
 			if (!checkRequired("ajaxForm")) return;
 
-			if (confirm("<%= localeMessage.getString("common.checkSave")%>") != true)
-				return;
+			var noticeType = $('#noticeType').val();
+			if (isIncidentType(noticeType)) {
+				if (!$('#startedAt').val()) {
+					alert('시작 시각을 입력해 주십시오.');
+					return;
+				}
+				if (noticeType === NOTICE_TYPE_MAINTENANCE && !$('#endAt').val()) {
+					alert('점검 종료 시각을 입력해 주십시오.');
+					return;
+				}
+				if (affectedApis.length === 0) {
+					alert('영향 API를 1건 이상 선택해 주십시오.');
+					return;
+				}
+			}
+
+			if (confirm("<%= localeMessage.getString("common.checkSave")%>") != true) return;
 
 			var formData = new FormData($("#ajaxForm")[0]);
-
 			formData.set("useYn", $("#useYn").is(":checked") ? "Y" : "N");
 			formData.set("fixYn", $("#fixYn").is(":checked") ? "Y" : "N");
 			formData.set("noticeDetail", $('#contents').summernote('code'));
 
+			// 시작/종료 시각이 비어 있으면 전송하지 않음 (서버 파싱 오류 방지)
+			if (!$('#startedAt').val()) formData.delete('startedAt');
+			if (!$('#endAt').val()) formData.delete('endAt');
+
+			// 영향 API → affectedApis[i].apiId/apiName 으로 전송
+			$.each(affectedApis, function(i, api) {
+				formData.set('affectedApis[' + i + '].apiId', api.apiId);
+				formData.set('affectedApis[' + i + '].apiName', api.apiName || '');
+			});
+
 			formData.append("cmd", isDetail ? "UPDATE" : "INSERT");
 
-			// 파일 처리
 			if (fileInfo && fileInfo.file) {
 				formData.set("files", fileInfo.file);
 				formData.set("fileName", fileInfo.originalFileName + '.' + fileInfo.fileExtension);
 			}
 
 			$.ajax({
-				type: "POST",
-				url: url,
-				data: formData,
-				processData: false,
-				contentType: false,
-				success: function (json) {
+				type: "POST", url: url, data: formData,
+				processData: false, contentType: false,
+				success: function () {
 					alert("<%= localeMessage.getString("common.saveMsg") %>");
 					goNav(returnUrl);
 				},
-				error: function (e) {
-					alert(e.responseText);
-				}
+				error: function (e) { alert(e.responseText); }
 			});
 		});
 
@@ -224,25 +318,18 @@
 			if (confirm("<%= localeMessage.getString("common.confirmMsg")%>")) {
 				var postData = $('#ajaxForm').serializeArray();
 				postData.push({name: "cmd", value: "DELETE"});
-
 				$.ajax({
-					type: "POST",
-					url: url,
-					data: postData,
-					success: function (args) {
+					type: "POST", url: url, data: postData,
+					success: function () {
 						alert("<%= localeMessage.getString("common.deleteMsg") %>");
 						goNav(returnUrl);
 					},
-					error: function (e) {
-						alert(e.responseText);
-					}
+					error: function (e) { alert(e.responseText); }
 				});
 			}
 		});
 
-		$("#btn_previous").click(function () {
-			goNav(returnUrl);
-		});
+		$("#btn_previous").click(function () { goNav(returnUrl); });
 	});
 </script>
 </head>
@@ -252,7 +339,7 @@
 		<ul class="path">
 			<li><a href="#">${rmsMenuPath}</a></li>
 		</ul>
-	</div><!-- end content_top -->
+	</div>
 	<div class="content_middle">
 		<div class="search_wrap">
 			<button type="button" class="cssbtn" id="btn_modify" level="W" status="DETAIL,NEW"><i class="material-icons">save</i> <%= localeMessage.getString("button.modify") %></button>
@@ -270,9 +357,9 @@
 					<col style="width: 40%"/>
 				</colgroup>
 				<tr>
-					<th>게시유형</th>
-					<td colspan="3">		
-						<div class="select-style" >
+					<th>게시유형 <font color="red">*</font></th>
+					<td colspan="3">
+						<div class="select-style">
 							<select name="noticeType" id="noticeType"></select>
 						</div>
 					</td>
@@ -286,7 +373,7 @@
 					<td>
 						<input type="checkbox" name="useYn" id="useYn" value="Y" ${portalNoticeUI.useYn eq 'Y' ? 'checked' : ''}> 사용
 					</td>
-					<th>고정여부</th>
+					<th>상단고정</th>
 					<td>
 						<input type="checkbox" name="fixYn" id="fixYn" value="Y" ${portalNoticeUI.fixYn eq 'Y' ? 'checked' : ''}> 고정
 					</td>
@@ -297,19 +384,58 @@
 						<textarea id="contents" name="noticeDetail" style="width:100%;height:300px" data-required data-warning="본문을 입력하여 주십시오."></textarea>
 					</td>
 				</tr>
-				<!-- <tr>
-					<th>첨부파일</th>
-					<td colspan="3">
-						<div style="margin: 5px 0px;  display: inline-block;">
-							<input type="file" id="fileInput" name="files" style="display:none;" />
-							<button type="button" id="addFile" class="cssbtn smallBtn">파일 선택</button>
-						</div>
-						<div id="attachFiles" style="margin: 5px 0px; display: inline-block;"></div>
+
+				<!-- ───── 장애/점검 전용 영역 ───── -->
+				<tr class="incident-row" style="display:none;">
+					<th>시작 <font color="red">*</font></th>
+					<td>
+						<input type="datetime-local" id="startedAt" name="startedAt" style="width:90%">
 					</td>
-				</tr> -->
+					<th>종료</th>
+					<td>
+						<input type="datetime-local" id="endAt" name="endAt" style="width:90%" placeholder="해소시 자동 채움">
+					</td>
+				</tr>
+				<tr class="incident-row incident-state-row" style="display:none;">
+					<th>상태</th>
+					<td>
+						<div class="select-style">
+							<select id="state" name="state">
+								<option value="INVESTIGATING">INVESTIGATING - 조사중</option>
+								<option value="IDENTIFIED">IDENTIFIED - 원인 파악</option>
+								<option value="MONITORING">MONITORING - 모니터링</option>
+								<option value="RESOLVED">RESOLVED - 해소</option>
+								<option value="CANCELED">CANCELED - 취소</option>
+							</select>
+						</div>
+					</td>
+					<th>이전 상태</th>
+					<td><span id="previousState">없음</span></td>
+				</tr>
+				<tr class="incident-row" style="display:none;">
+					<th>영향 API 선택</th>
+					<td colspan="3">
+						<div style="margin-bottom:5px;">
+							<button type="button" class="cssbtn smallBtn" id="btn_removeAffectedApi"><i class="material-icons">delete</i> 삭제</button>
+							<button type="button" class="cssbtn smallBtn" id="btn_addAffectedApi"><i class="material-icons">add</i> 추가</button>
+						</div>
+						<table class="table_row" cellspacing="0" style="width:100%;">
+							<thead>
+								<tr>
+									<th style="width:40px;text-align:center;"><input type="checkbox" id="affectedApiAll" onclick="$('.affected-api-check').prop('checked', this.checked);"></th>
+									<th>API ID</th>
+									<th>API 명</th>
+								</tr>
+							</thead>
+							<tbody id="affectedApiTbody">
+								<tr><td colspan="3" style="text-align:center;color:#999;">선택된 영향 API가 없습니다.</td></tr>
+							</tbody>
+						</table>
+					</td>
+				</tr>
 			</table>
 		</form>
 	</div>
 </div>
 </body>
-</html>
+</html>