Explorar o código

공지사항 사용여부 체크박스 css 수정

gagamel %!s(int64=5) %!d(string=hai) anos
pai
achega
e6adb6c8f3
Modificáronse 1 ficheiros con 526 adicións e 523 borrados
  1. 526 523
      style24.admin/src/main/webapp/WEB-INF/views/board/NoticeForm.html

+ 526 - 523
style24.admin/src/main/webapp/WEB-INF/views/board/NoticeForm.html

@@ -1,523 +1,526 @@
-<!DOCTYPE html>
-<html lang="ko"
-	xmlns:th="http://www.thymeleaf.org">
-<!--
- *******************************************************************************
- * @source  : NoticeForm.html
- * @desc    : 공지사항관리 Page
- *============================================================================
- * STYLE24
- * Copyright(C) 2020 TSIT, All rights reserved.
- *============================================================================
- * VER  DATE         AUTHOR      DESCRIPTION
- * ===  ===========  ==========  =============================================
- * 1.0  2020.10.30   gagamel     최초 작성
- *******************************************************************************
- -->
-	<div id="main">
-		<!-- 메인타이틀 영역 -->
-		<div class="main-title">
-		</div>
-		<!-- //메인타이틀 영역 -->
-		
-		<!-- 메뉴 설명 -->
-		<div class="infoBox menu-desc">
-		</div>
-		<!-- //메뉴 설명 -->
-		
-		<!-- 검색조건 영역 -->
-		<div class="panelStyle">
-			<form id="searchForm" name="searchForm" action="#" th:action="@{'/board/notice/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
-				<input type="hidden" name="noticeType" th:value="${noticeType}"/> <!-- 공지유형(10:사이트공지, 20:내부공지) -->
-				
-				<table class="frmStyle" aria-describedby="검색조건">
-					<colgroup>
-						<col width="10%"/>
-						<col width="23%"/>
-						<col width="10%"/>
-						<col width="23%"/>
-						<col width="10%"/>
-						<col width="24%"/>
-					</colgroup>
-					<tr>
-						<th>등록기간</th>
-						<td colspan="5" id="noticeTerms">
-						</td>
-					</tr>
-					<tr>
-						<th th:text="${noticeType == 'G047_10' ? '사이트' : '부서'}">수신자</th>
-						<td>
-							<select name="receiverId">
-								<option value="">[전체]</option>
-								<option th:if="${noticeReceiverList}" th:each="oneData, status : ${noticeReceiverList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
-							</select>
-						</td>
-						<th>공지제목</th>
-						<td>
-							<input name="noteicTitle" type="text" maxlength="200"/>
-						</td>
-						<th>사용여부</th>
-						<td>
-							<select name="useYn">
-								<option value="">[전체]</option>
-								<option value="Y">[Y] Yes</option>
-								<option value="N">[N] No</option>
-							</select>
-						</td>
-					</tr>
-				</table>
-				
-				<ul class="panelBar">
-					<li class="center">
-						<button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
-						<button type="button" class="btn btn-gray btn-lg" onclick="$('#searchForm')[0].reset();">초기화</button>
-					</li>
-				</ul>
-			</form>
-		</div>
-		<!-- 검색조건 영역 -->
-
-		<!-- 리스트 영역 -->
-		<div class="panelStyle">
-			<div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
-		</div>
-		<!-- //리스트 영역 -->
-		
-		<!-- 등록/수정 -->
-		<div class="panelStyle">
-			<form id="detailForm" name="detailForm" action="#" th:action="@{'/board/notice/save'}">
-				<input type="hidden" name="noticeType" th:value="${noticeType}"/> <!-- 공지유형(10:사이트공지, 20:내부공지) -->
-				<input type="hidden" name="noticeStdt"/> <!-- 공지시작일자 -->
-				<input type="hidden" name="noticeEddt"/> <!-- 공지종료일자 -->
-				
-				<table class="frmStyle" aria-describedby="등록/수정 폼">
-					<colgroup>
-						<col style="width:10%;"/>
-						<col style="width:15%;"/>
-						<col style="width:10%;"/>
-						<col style="width:15%;"/>
-						<col style="width:10%;"/>
-						<col style="width:15%;"/>
-						<col style="width:10%;"/>
-						<col style="width:15%;"/>
-					</colgroup>
-					<tr>
-						<th>공지번호</th>
-						<td>
-							<input type="text" class="w100" name="noticeSq" placeholder="자동부여" readonly="readonly"/>
-						</td>
-						<th>긴급공지여부</th>
-						<td>
-							<label class="rdoBtn"><input type="radio" name="urgentYn" value="N" checked="checked">일반</label>
-							<label class="rdoBtn"><input type="radio" name="urgentYn" value="Y">긴급</label>
-						</td>
-						<th>사용여부</th>
-						<td>
-							<input type="hidden" name="useYn"/>
-							<label class="chkBox"><input type="checkbox" name="chkUseYn" checked="checked" value="Y"/>사용</label>
-						</td>
-					</tr>
-					<tr id="trNew">
-						<th>공지기간<i class="required" title="필수"></i></th>
-						<td colspan="5">
-							<input type="text" class="schDate w100" name="noticeStdt1" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
-							~
-							<input type="text" class="schDate w100" name="noticeEddt1" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
-						</td>
-					</tr>
-					<tr id="trDetail" style="display: none;">
-						<th>공지기간<i class="required" title="필수"></i></th>
-						<td>
-							<input type="text" class="schDate w100" name="noticeStdt2" maxlength="10"/>
-							~
-							<input type="text" class="schDate w100" name="noticeEddt2" maxlength="10"/>
-						</td>
-						<th>조회수</th>
-						<td>
-							<input type="text" class="w100 aR" name="readCnt" readonly="readonly"/>
-						</td>
-						<th>등록자/등록일</th>
-						<td>
-							<input type="text" class="w100" name="regNm" readonly="readonly"/>
-							/
-							<input type="text" class="w100" name="regDt" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}" readonly="readonly"/>
-						</td>
-					</tr>
-					<tr>
-						<th><span th:text="${noticeType == 'G047_10' ? '사이트' : '부서'}">수신자</span><i class="required" title="필수"></i></th>
-						<td colspan="5">
-							<label class="chkBox" th:if="${noticeReceiverList}" th:each="oneData, status : ${noticeReceiverList}">
-								<input type="checkbox" name="receiverIds" th:value="${oneData.cd}" th:text="${oneData.cdNm}"/>
-							</label>
-						</td>
-					</tr>
-					<tr>
-						<th>제목<i class="required" title="필수"></i></th>
-						<td colspan="5">
-							<input type="text" name="noticeTitle" required="required" data-valid-name="제목"/>
-						</td>
-					</tr>
-					<tr>
-						<th>공지내용<i class="required" title="필수"></i></th>
-						<td colspan="5">
-							<textarea class="textareaR4" name="noticeContent" id="noticeContent"></textarea>
-						</td>
-					</tr>
-					<tr>
-						<th>파일첨부</th>
-						<td colspan="5">
-							<div id="registeredFile"></div>
-							<div style="display: block">
-								<select name="fileCnt" id="fileCnt">
-									<th:block th:each="num: ${#numbers.sequence(1,10)}">
-										<option th:value="${num}" th:text="${num}"></option>
-									</th:block>
-								</select>* 파일 개수 선택(10개까지 가능)
-							</div>
-							<th:block th:each="num: ${#numbers.sequence(1,10)}">
-								<div>
-									<div class="uFile w500">
-										<input type="file" th:id="${'file' + num}" th:name="${'file' + num}" class="uFileInput w500"/>
-										<label th:for="${'file' + num}" class="uFileLabel">파일선택</label>
-										<input type="hidden" name="orgFileNms" th:id="${'orgFileNm' + num}"/>
-										<input type="hidden" name="sysFileNms" th:id="${'sysFileNm' + num}"/>
-									</div>
-									<br/>
-								</div>
-							</th:block>
-						</td>
-					</tr>
-				</table>
-			</form>
-			
-			<!-- 버튼 배치 영역 -->
-			<ul class="panelBar">
-				<li class="right">
-					<button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
-					<button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
-				</li>
-			</ul>
-			<!-- //버튼 배치 영역 -->
-		</div>
-		<!-- 등록/수정 -->
-	</div>
-
-<script type="text/javascript" src="/ux/plugins/summernote/summernote.js?v=2020103001"></script>
-<script type="text/javascript" src="/ux/plugins/gaga/gaga.summernote.js?v=2020103001"></script>
-<script th:inline="javascript">
-/*<![CDATA[*/
-	// 공지사항유형(10:사이트공지, 20:내부공지)
-	let noticeType = [[${noticeType}]];
-
-	let columnDefs = [
-		{headerName: "공지번호", field: "noticeSq", width: 90, cellClass: 'text-center'},
-		{
-			headerName: "긴급공지", field: "urgentYn", width:90, cellClass: 'text-center',
-			cellRenderer: function(params) { return params.value == 'Y' ? '긴급' : '일반'; }
-		},
-// 		{headerName: "사이트", field: "siteNm", width: 200, cellClass: 'text-center'},
-		{
-			headerName: "공지제목", field: "noticeTitle", width: 500,
-			cellRenderer: function(params) { return '<a href="javascript:void(0);">' + params.value + '</a>'; }
-		},
-		{
-			headerName: "파일", field: "fileCnt", width: 50, cellClass: 'text-center',
-			cellRenderer: function(params) { return params.value > 0 ? '<i class="fa fa-folder fa-lg"></i>' : ''; }
-		},
-		{headerName: "공지내용", field: "noticeContent", width: 500, hide: true },
-		{
-			headerName: "공지시작일", field: "noticeStdt", width:120, cellClass: 'text-center',
-			cellRenderer: function(params) { return gagaAgGrid.toDateFormat(params.value); }
-		},
-		{
-			headerName: "공지종료일", field: "noticeEddt", width:120, cellClass: 'text-center',
-			cellRenderer: function(params) { return gagaAgGrid.toDateFormat(params.value); }
-		},
-		{headerName: "조회수", field: "readCnt", width:90, cellClass: 'text-center'},
-		{headerName: "사용여부", field: "useYn", width:90, cellClass: 'text-center'},
-		{headerName: "등록자", field: "regNm", width:90, cellClass: 'text-center'},
-		{
-			headerName: "등록일자", field: "regDt", width:120, cellClass: 'text-center',
-			cellRenderer: function(params) { return gagaAgGrid.toDateFormat(params.value); }
-		}
-	];
-
-	let gridOptions = gagaAgGrid.getGridOptions(columnDefs);
-
-	// Cell click
-	gridOptions.onCellClicked = function(event) {
-		if (event.colDef.field != 'noticeTitle')
-			return;
-		
-		$('#trNew').hide();
-		$('#trDetail').show();
-
-		$('#detailForm input[name=noticeSq]').val(event.data.noticeSq);
-		$('#detailForm input[name=noticeType]').val(event.data.noticeType);
-
-		if (event.data.urgentYn == 'Y') {
-			$('#detailForm input:radio[name=urgentYn]').eq(1).trigger('click');
-		} else {
-			$('#detailForm input:radio[name=urgentYn]').eq(0).trigger('click');
-		}
-
-		if (event.data.useYn == 'Y') {
-			$('#detailForm input:checkbox[name=chkUseYn]').prop('checked', true);
-		} else {
-			$('#detailForm input:checkbox[name=chkUseYn]').prop('checked', false);
-		}
-		
-		$('#detailForm input[name=noticeStdt2]').val(event.data.noticeStdt.toDate("YYYYMMDD").format("YYYY-MM-DD"));
-		$('#detailForm input[name=noticeEddt2]').val(event.data.noticeEddt.toDate("YYYYMMDD").format("YYYY-MM-DD"));
-		$('#detailForm input[name=readCnt]').val(event.data.readCnt);
-		$('#detailForm input[name=regNm]').val(event.data.regNm);
-		$('#detailForm input[name=regDt]').val(event.data.regDt.toDate("YYYYMMDD").format("YYYY-MM-DD"));
-		$('#detailForm input[name=noticeTitle]').val(event.data.noticeTitle);
-
-		// 공지내용. Summernote에 값 세팅
-		gagaSn.setContents('#noticeContent', event.data.noticeContent);
-
-		// 수신자 목록
-		fnGetNoticeReceiverList(event.data.noticeSq);
-
-		// 파일 목록
-		fnGetNoticeFileList(event.data.noticeSq);
-	}
-
-	// 검색
-	$('#btnSearch').on('click', function() {
-		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm');
-	});
-	
-	// 수신자 목록 조회
-	var fnGetNoticeReceiverList = function(noticeSq) {
-		let actionUrl = '/board/notice/receiver/list/' + noticeSq;
-		if (noticeType == 'G047_20') {
-			actionUrl = '/renderer/avail/commonCode/list/G048'; // 부서
-		}
-		
-		$.getJSON(actionUrl
-			, function(result) {
-				// 수신자 체크박스 체크 제거
-				$('#detailForm input:checkbox[name=receiverIds]').prop('checked', false);
-	
-				// 체크박스 개수
-				var chkboxCnt = $('#detailForm input:checkbox[name=receiverIds]').length;
-	
-				// 데이터 개수
-				var dataCnt = result.length;
-	
-				if (dataCnt > 0) {
-					for (var i = 0; i < chkboxCnt; i++) {
-						for (var j = 0; j < dataCnt; j++){
-							var data = result[j].receiverId;
-							if ($('#detailForm input:checkbox[name=receiverIds]').eq(i).val() == data) {
-								$('#detailForm input:checkbox[name=receiverIds]').eq(i).prop('checked', true);
-							}
-						}
-					}
-				}
-			});
-	}
-	
-	// 파일 조회
-	var fnGetNoticeFileList = function(noticeSq) {
-		$.getJSON('/board/notice/file/list/' + noticeSq
-			, function(result) {
-				if (result.length == 0) {
-					$('#registeredFile').html('');
-				} else {
-					$.each(result, function(idx, item) {
-						var tag = '';
-						tag += '<span class="memAdd">';
-						tag += '	<a id="dnFile' + (idx + 1) + '" href="#" onclick="fnDownloadFile(' + (idx + 1) + ', \'' + item.sysFileNm + '\');">' + item.orgFileNm + '</a>\n';
-						tag += '	<button type="button" onclick="fnDeleteFile(this, ' + item.noticeSq + ', ' + item.seq + ', \'' + item.sysFileNm + '\');">삭제</button>\n';
-						tag += '</span>';
-						$('#registeredFile').prepend(tag);
-					});
-				}
-			});
-	}
-	
-	// 파일다운로드
-	var fnDownloadFile = function(idx, fileNm) {
-		$('#dnFile' + idx).attr({
-			href : _uploadDefaultUrl + '/board/' + fileNm,
-			target: '_blank'
-		}).get(0).click();
-	}
-	
-	// 첨부파일 삭제
-	var fnDeleteFile = function(obj, noticeSq, seq, sysFileNm) {
-		mcxDialog.confirm('정말 삭제하시겠습니까?', {
-			cancelBtnText: "취소",
-			sureBtnText: "확인",
-			sureBtnClick: function(){
-				var params = new Object();
-				params.noticeSq = noticeSq;
-				params.seq = seq;
-				params.sysFileNm = sysFileNm;
-
-				var jsonData = JSON.stringify(params);
-				gagajf.ajaxJsonSubmit('/board/notice/file/delete', jsonData, function() {
-					$(obj).parent().remove();
-				});
-			}
-		});
-	}
-
-	// 첨부파일 개수 선택시
-	$("#fileCnt").on("change", function() {
-		for (var i = 1; i <= 10; i++) {
-			$('#file' + i).parent().parent().show();
-		}
-
-		var fileCnt = $(this).val();
-		for (var i = 10; i > fileCnt; i--) {
-			$('#file' + i).parent().parent().hide();
-		}
-	});
-
-	// 파일첨부 선택 시
-	$('#file1').on('change', function() { fnChooseFile(this, 1); });
-	$('#file2').on('change', function() { fnChooseFile(this, 2); });
-	$('#file3').on('change', function() { fnChooseFile(this, 3); });
-	$('#file4').on('change', function() { fnChooseFile(this, 4); });
-	$('#file5').on('change', function() { fnChooseFile(this, 5); });
-	$('#file6').on('change', function() { fnChooseFile(this, 6); });
-	$('#file7').on('change', function() { fnChooseFile(this, 7); });
-	$('#file8').on('change', function() { fnChooseFile(this, 8); });
-	$('#file9').on('change', function() { fnChooseFile(this, 9); });
-	$('#file10').on('change', function() { fnChooseFile(this, 10); });
-
-	var fnChooseFile = function(obj, fileNo) {
-		// multiple 속성이 있으면 files에는 다수의 객체가 할당됨
-		var file = obj.files[0];
-
-		// 파일 업로드
-		gagajf.ajaxFileUpload('/common/file/upload?subDir=/board'
-				, file
-				, function(result) {
-					// 업로드한 파일명 설정
-					$('#orgFileNm' + fileNo).val(result.oldFileName);
-					$('#sysFileNm' + fileNo).val(result.newFileName);
-				}
-		);
-	}
-	
-	// 신규 버튼 클릭
-	$("#btnNew").on("click", function(){
-		$('#detailForm')[0].reset();
-
-		$('#trNew').show();
-		$('#trDetail').hide();
-
-		$('#detailForm input[name=noticeSq]').val('');
-		$('#detailForm input[name=noticeStdt]').val(_today);
-		$('#detailForm input[name=noticeEddt]').val(_today);
-	});
-	
-	// 저장
-	$("#btnSave").on("click", function() {
-		// 날짜 체크
-		if (gagajf.isNull($('#detailForm input[name=noticeSq]').val())) {
-			if (gagajf.isNull($('#detailForm input[name=noticeStdt1]').val())) {
-				mcxDialog.alertC('공지시작일자를 입력해 주세요.', {
-					sureBtnText: "확인",
-					sureBtnClick: function() {
-						$('#detailForm input[name=noticeStdt1]').focus();
-					}
-				});
-				return;
-			}
-
-			if (gagajf.isNull($('#detailForm input[name=noticeEddt1]').val())) {
-				mcxDialog.alertC('공지종료일자를 입력해 주세요.', {
-					sureBtnText: "확인",
-					sureBtnClick: function() {
-						$('#detailForm input[name=noticeEddt1]').focus();
-					}
-				});
-				return;
-			}
-
-			$('#detailForm input[name=noticeStdt]').val($('#detailForm input[name=noticeStdt1]').val());
-			$('#detailForm input[name=noticeEddt]').val($('#detailForm input[name=noticeEddt1]').val());
-		} else {
-			if (gagajf.isNull($('#detailForm input[name=noticeStdt2]').val())) {
-				mcxDialog.alertC('공지시작일자를 입력해 주세요.', {
-					sureBtnText: "확인",
-					sureBtnClick: function() {
-						$('#detailForm input[name=noticeStdt2]').focus();
-					}
-				});
-				return;
-			}
-
-			if (gagajf.isNull($('#detailForm input[name=noticeEddt2]').val())) {
-				mcxDialog.alertC('공지종료일자를 입력해 주세요.', {
-					sureBtnText: "확인",
-					sureBtnClick: function() {
-						$('#detailForm input[name=noticeEddt2]').focus();
-					}
-				});
-				return;
-			}
-
-			$('#detailForm input[name=noticeStdt]').val($('#detailForm input[name=noticeStdt2]').val());
-			$('#detailForm input[name=noticeEddt]').val($('#detailForm input[name=noticeEddt2]').val());
-		}
-
-		var stDate = $('#detailForm input[name=noticeStdt]').val().toDate('YYYY-MM-DD');
-		var edDate = $('#detailForm input[name=noticeEddt]').val().toDate('YYYY-MM-DD');
-
-		if (stDate > edDate) {
-			mcxDialog.alert("공지기간 종료일자는 시작일자 보다 클 수 없습니다.");
-			return;
-		}
-
-		// 수신자 선택
-		if ($('#detailForm input:checkbox[name=receiverIds]').is(":checked") != true) {
-			if (noticeType == 'G047_10') { // 사이트공지
-				mcxDialog.alert("사이트를 선택해 주세요.");
-				return;
-			} else if (noticeType == 'G047_20') { // 내부공지
-				mcxDialog.alert("부서를 선택해 주세요.");
-				return;
-			}
-		}
-
-		// validation
-		if (!gagajf.validation('#detailForm'))
-			return false;
-
-		$('#detailForm input[name=useYn]').val($('#detailForm input:checkbox[name=chkUseYn]').is(":checked") ? 'Y' : 'N');
-
-		mcxDialog.confirm('저장하시겠습니까?', {
-			cancelBtnText: "취소",
-			sureBtnText: "확인",
-			sureBtnClick: function(){
-				var jsonData = JSON.stringify($('#detailForm').serializeObject());
-				gagajf.ajaxJsonSubmit($('#detailForm').prop('action'), jsonData, function() {
-					$('#btnSearch').trigger('click');
-				});
-			}
-		});
-	});
-	
-	$(document).ready(function() {
-		cfnCreateCalendar('#noticeTerms', 'startDt', 'endDt');
-		
-		// Create a agGrid
-		gagaAgGrid.createGrid('gridList', gridOptions);
-		
-		// Create a summernote
-		let snOptions = gagaSn.getToolbarOptions('media');
-		gagaSn.createSummernote(snOptions, '#noticeContent');
-		
-		$("#fileCnt").trigger('change');
-	});
-/*]]>*/
-</script>
-
-</html>
+<!DOCTYPE html>
+<html lang="ko"
+	xmlns:th="http://www.thymeleaf.org">
+<!--
+ *******************************************************************************
+ * @source  : NoticeForm.html
+ * @desc    : 공지사항관리 Page
+ *============================================================================
+ * STYLE24
+ * Copyright(C) 2020 TSIT, All rights reserved.
+ *============================================================================
+ * VER  DATE         AUTHOR      DESCRIPTION
+ * ===  ===========  ==========  =============================================
+ * 1.0  2020.10.30   gagamel     최초 작성
+ *******************************************************************************
+ -->
+	<div id="main">
+		<!-- 메인타이틀 영역 -->
+		<div class="main-title">
+		</div>
+		<!-- //메인타이틀 영역 -->
+		
+		<!-- 메뉴 설명 -->
+		<div class="infoBox menu-desc">
+		</div>
+		<!-- //메뉴 설명 -->
+		
+		<!-- 검색조건 영역 -->
+		<div class="panelStyle">
+			<form id="searchForm" name="searchForm" action="#" th:action="@{'/board/notice/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
+				<input type="hidden" name="noticeType" th:value="${noticeType}"/> <!-- 공지유형(10:사이트공지, 20:내부공지) -->
+				
+				<table class="frmStyle" aria-describedby="검색조건">
+					<colgroup>
+						<col width="10%"/>
+						<col width="23%"/>
+						<col width="10%"/>
+						<col width="23%"/>
+						<col width="10%"/>
+						<col width="24%"/>
+					</colgroup>
+					<tr>
+						<th>등록기간</th>
+						<td colspan="5" id="noticeTerms">
+						</td>
+					</tr>
+					<tr>
+						<th th:text="${noticeType == 'G047_10' ? '사이트' : '부서'}">수신자</th>
+						<td>
+							<select name="receiverId">
+								<option value="">[전체]</option>
+								<option th:if="${noticeReceiverList}" th:each="oneData, status : ${noticeReceiverList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
+							</select>
+						</td>
+						<th>공지제목</th>
+						<td>
+							<input name="noteicTitle" type="text" maxlength="200"/>
+						</td>
+						<th>사용여부</th>
+						<td>
+							<select name="useYn">
+								<option value="">[전체]</option>
+								<option value="Y">[Y] Yes</option>
+								<option value="N">[N] No</option>
+							</select>
+						</td>
+					</tr>
+				</table>
+				
+				<ul class="panelBar">
+					<li class="center">
+						<button type="button" class="btn btn-base btn-lg" id="btnSearch">조회</button>
+						<button type="button" class="btn btn-gray btn-lg" onclick="$('#searchForm')[0].reset();">초기화</button>
+					</li>
+				</ul>
+			</form>
+		</div>
+		<!-- 검색조건 영역 -->
+
+		<!-- 리스트 영역 -->
+		<div class="panelStyle">
+			<div id="gridList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
+		</div>
+		<!-- //리스트 영역 -->
+		
+		<!-- 등록/수정 -->
+		<div class="panelStyle">
+			<form id="detailForm" name="detailForm" action="#" th:action="@{'/board/notice/save'}">
+				<input type="hidden" name="noticeType" th:value="${noticeType}"/> <!-- 공지유형(10:사이트공지, 20:내부공지) -->
+				<input type="hidden" name="noticeStdt"/> <!-- 공지시작일자 -->
+				<input type="hidden" name="noticeEddt"/> <!-- 공지종료일자 -->
+				
+				<table class="frmStyle" aria-describedby="등록/수정 폼">
+					<colgroup>
+						<col style="width:10%;"/>
+						<col style="width:15%;"/>
+						<col style="width:10%;"/>
+						<col style="width:15%;"/>
+						<col style="width:10%;"/>
+						<col style="width:15%;"/>
+						<col style="width:10%;"/>
+						<col style="width:15%;"/>
+					</colgroup>
+					<tr>
+						<th>공지번호</th>
+						<td>
+							<input type="text" class="w100" name="noticeSq" placeholder="자동부여" readonly="readonly"/>
+						</td>
+						<th>긴급공지여부</th>
+						<td>
+							<label class="rdoBtn"><input type="radio" name="urgentYn" value="N" checked="checked">일반</label>
+							<label class="rdoBtn"><input type="radio" name="urgentYn" value="Y">긴급</label>
+						</td>
+						<th>사용여부</th>
+						<td>
+							<input type="hidden" name="useYn"/>
+							<label class="chkBox"><input type="checkbox" name="chkUseYn" checked="checked" value="Y"/>사용</label>
+						</td>
+					</tr>
+					<tr id="trNew">
+						<th>공지기간<i class="required" title="필수"></i></th>
+						<td colspan="5">
+							<input type="text" class="schDate w100" name="noticeStdt1" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
+							~
+							<input type="text" class="schDate w100" name="noticeEddt1" maxlength="10" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}"/>
+						</td>
+					</tr>
+					<tr id="trDetail" style="display: none;">
+						<th>공지기간<i class="required" title="필수"></i></th>
+						<td>
+							<input type="text" class="schDate w100" name="noticeStdt2" maxlength="10"/>
+							~
+							<input type="text" class="schDate w100" name="noticeEddt2" maxlength="10"/>
+						</td>
+						<th>조회수</th>
+						<td>
+							<input type="text" class="w100 aR" name="readCnt" readonly="readonly"/>
+						</td>
+						<th>등록자/등록일</th>
+						<td>
+							<input type="text" class="w100" name="regNm" readonly="readonly"/>
+							/
+							<input type="text" class="w100" name="regDt" th:value="${#calendars.format(#calendars.createNow(), 'yyyy-MM-dd')}" readonly="readonly"/>
+						</td>
+					</tr>
+					<tr>
+						<th><span th:text="${noticeType == 'G047_10' ? '사이트' : '부서'}">수신자</span><i class="required" title="필수"></i></th>
+						<td colspan="5">
+							<label class="chkBox" th:if="${noticeReceiverList}" th:each="oneData, status : ${noticeReceiverList}">
+								<input type="checkbox" name="receiverIds" th:value="${oneData.cd}" th:text="${oneData.cdNm}"/>
+							</label>
+						</td>
+					</tr>
+					<tr>
+						<th>제목<i class="required" title="필수"></i></th>
+						<td colspan="5">
+							<input type="text" name="noticeTitle" required="required" data-valid-name="제목"/>
+						</td>
+					</tr>
+					<tr>
+						<th>공지내용<i class="required" title="필수"></i></th>
+						<td colspan="5">
+							<textarea class="textareaR4" name="noticeContent" id="noticeContent"></textarea>
+						</td>
+					</tr>
+					<tr>
+						<th>파일첨부</th>
+						<td colspan="5">
+							<div id="registeredFile"></div>
+							<div style="display: block">
+								<select name="fileCnt" id="fileCnt">
+									<th:block th:each="num: ${#numbers.sequence(1,10)}">
+										<option th:value="${num}" th:text="${num}"></option>
+									</th:block>
+								</select>* 파일 개수 선택(10개까지 가능)
+							</div>
+							<th:block th:each="num: ${#numbers.sequence(1,10)}">
+								<div>
+									<div class="uFile w500">
+										<input type="file" th:id="${'file' + num}" th:name="${'file' + num}" class="uFileInput w500"/>
+										<label th:for="${'file' + num}" class="uFileLabel">파일선택</label>
+										<input type="hidden" name="orgFileNms" th:id="${'orgFileNm' + num}"/>
+										<input type="hidden" name="sysFileNms" th:id="${'sysFileNm' + num}"/>
+									</div>
+									<br/>
+								</div>
+							</th:block>
+						</td>
+					</tr>
+				</table>
+			</form>
+			
+			<!-- 버튼 배치 영역 -->
+			<ul class="panelBar">
+				<li class="right">
+					<button type="button" class="btn btn-info btn-lg" id="btnNew">신규</button>
+					<button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
+				</li>
+			</ul>
+			<!-- //버튼 배치 영역 -->
+		</div>
+		<!-- 등록/수정 -->
+	</div>
+
+<script type="text/javascript" src="/ux/plugins/summernote/summernote.js?v=2020103001"></script>
+<script type="text/javascript" src="/ux/plugins/gaga/gaga.summernote.js?v=2020103001"></script>
+<script th:inline="javascript">
+/*<![CDATA[*/
+	// 공지사항유형(10:사이트공지, 20:내부공지)
+	let noticeType = [[${noticeType}]];
+
+	let columnDefs = [
+		{headerName: "공지번호", field: "noticeSq", width: 90, cellClass: 'text-center'},
+		{
+			headerName: "긴급공지", field: "urgentYn", width:90, cellClass: 'text-center',
+			cellRenderer: function(params) { return params.value == 'Y' ? '긴급' : '일반'; }
+		},
+// 		{headerName: "사이트", field: "siteNm", width: 200, cellClass: 'text-center'},
+		{
+			headerName: "공지제목", field: "noticeTitle", width: 500,
+			cellRenderer: function(params) { return '<a href="javascript:void(0);">' + params.value + '</a>'; }
+		},
+		{
+			headerName: "파일", field: "fileCnt", width: 50, cellClass: 'text-center',
+			cellRenderer: function(params) { return params.value > 0 ? '<i class="fa fa-folder fa-lg"></i>' : ''; }
+		},
+		{headerName: "공지내용", field: "noticeContent", width: 500, hide: true },
+		{
+			headerName: "공지시작일", field: "noticeStdt", width:120, cellClass: 'text-center',
+			cellRenderer: function(params) { return gagaAgGrid.toDateFormat(params.value); }
+		},
+		{
+			headerName: "공지종료일", field: "noticeEddt", width:120, cellClass: 'text-center',
+			cellRenderer: function(params) { return gagaAgGrid.toDateFormat(params.value); }
+		},
+		{headerName: "조회수", field: "readCnt", width:90, cellClass: 'text-center'},
+		{headerName: "사용여부", field: "useYn", width:90, cellClass: 'text-center'},
+		{headerName: "등록자", field: "regNm", width:90, cellClass: 'text-center'},
+		{
+			headerName: "등록일자", field: "regDt", width:120, cellClass: 'text-center',
+			cellRenderer: function(params) { return gagaAgGrid.toDateFormat(params.value); }
+		}
+	];
+
+	let gridOptions = gagaAgGrid.getGridOptions(columnDefs);
+
+	// Cell click
+	gridOptions.onCellClicked = function(event) {
+		if (event.colDef.field != 'noticeTitle')
+			return;
+		
+		$('#trNew').hide();
+		$('#trDetail').show();
+
+		$('#detailForm input[name=noticeSq]').val(event.data.noticeSq);
+		$('#detailForm input[name=noticeType]').val(event.data.noticeType);
+
+		if (event.data.urgentYn == 'Y') {
+			$('#detailForm input:radio[name=urgentYn]').eq(1).trigger('click');
+		} else {
+			$('#detailForm input:radio[name=urgentYn]').eq(0).trigger('click');
+		}
+
+		if (event.data.useYn == 'Y') {
+			$('#detailForm input:checkbox[name=chkUseYn]').prop('checked', true);
+			$("#detailForm input:checkbox[name=chkUseYn]").parent().addClass('checked');
+		} else {
+			$('#detailForm input:checkbox[name=chkUseYn]').prop('checked', false);
+			$("#detailForm input:checkbox[name=chkUseYn]").parent().removeClass('checked');
+		}
+		
+		$('#detailForm input[name=noticeStdt2]').val(event.data.noticeStdt.toDate("YYYYMMDD").format("YYYY-MM-DD"));
+		$('#detailForm input[name=noticeEddt2]').val(event.data.noticeEddt.toDate("YYYYMMDD").format("YYYY-MM-DD"));
+		$('#detailForm input[name=readCnt]').val(event.data.readCnt);
+		$('#detailForm input[name=regNm]').val(event.data.regNm);
+		$('#detailForm input[name=regDt]').val(event.data.regDt.toDate("YYYYMMDD").format("YYYY-MM-DD"));
+		$('#detailForm input[name=noticeTitle]').val(event.data.noticeTitle);
+
+		// 공지내용. Summernote에 값 세팅
+		gagaSn.setContents('#noticeContent', event.data.noticeContent);
+
+		// 수신자 목록
+		fnGetNoticeReceiverList(event.data.noticeSq);
+
+		// 파일 목록
+		fnGetNoticeFileList(event.data.noticeSq);
+	}
+
+	// 검색
+	$('#btnSearch').on('click', function() {
+		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm');
+	});
+	
+	// 수신자 목록 조회
+	var fnGetNoticeReceiverList = function(noticeSq) {
+		let actionUrl = '/board/notice/receiver/list/' + noticeSq;
+		if (noticeType == 'G047_20') {
+			actionUrl = '/renderer/avail/commonCode/list/G048'; // 부서
+		}
+		
+		$.getJSON(actionUrl
+			, function(result) {
+				// 수신자 체크박스 체크 제거
+				$('#detailForm input:checkbox[name=receiverIds]').prop('checked', false);
+	
+				// 체크박스 개수
+				var chkboxCnt = $('#detailForm input:checkbox[name=receiverIds]').length;
+	
+				// 데이터 개수
+				var dataCnt = result.length;
+	
+				if (dataCnt > 0) {
+					for (var i = 0; i < chkboxCnt; i++) {
+						for (var j = 0; j < dataCnt; j++){
+							var data = result[j].receiverId;
+							if ($('#detailForm input:checkbox[name=receiverIds]').eq(i).val() == data) {
+								$('#detailForm input:checkbox[name=receiverIds]').eq(i).prop('checked', true);
+								$("#detailForm input:checkbox[name=receiverIds]").parent().addClass('checked');
+							}
+						}
+					}
+				}
+			});
+	}
+	
+	// 파일 조회
+	var fnGetNoticeFileList = function(noticeSq) {
+		$.getJSON('/board/notice/file/list/' + noticeSq
+			, function(result) {
+				if (result.length == 0) {
+					$('#registeredFile').html('');
+				} else {
+					$.each(result, function(idx, item) {
+						var tag = '';
+						tag += '<span class="memAdd">';
+						tag += '	<a id="dnFile' + (idx + 1) + '" href="#" onclick="fnDownloadFile(' + (idx + 1) + ', \'' + item.sysFileNm + '\');">' + item.orgFileNm + '</a>\n';
+						tag += '	<button type="button" onclick="fnDeleteFile(this, ' + item.noticeSq + ', ' + item.seq + ', \'' + item.sysFileNm + '\');">삭제</button>\n';
+						tag += '</span>';
+						$('#registeredFile').prepend(tag);
+					});
+				}
+			});
+	}
+	
+	// 파일다운로드
+	var fnDownloadFile = function(idx, fileNm) {
+		$('#dnFile' + idx).attr({
+			href : _uploadDefaultUrl + '/board/' + fileNm,
+			target: '_blank'
+		}).get(0).click();
+	}
+	
+	// 첨부파일 삭제
+	var fnDeleteFile = function(obj, noticeSq, seq, sysFileNm) {
+		mcxDialog.confirm('정말 삭제하시겠습니까?', {
+			cancelBtnText: "취소",
+			sureBtnText: "확인",
+			sureBtnClick: function(){
+				var params = new Object();
+				params.noticeSq = noticeSq;
+				params.seq = seq;
+				params.sysFileNm = sysFileNm;
+
+				var jsonData = JSON.stringify(params);
+				gagajf.ajaxJsonSubmit('/board/notice/file/delete', jsonData, function() {
+					$(obj).parent().remove();
+				});
+			}
+		});
+	}
+
+	// 첨부파일 개수 선택시
+	$("#fileCnt").on("change", function() {
+		for (var i = 1; i <= 10; i++) {
+			$('#file' + i).parent().parent().show();
+		}
+
+		var fileCnt = $(this).val();
+		for (var i = 10; i > fileCnt; i--) {
+			$('#file' + i).parent().parent().hide();
+		}
+	});
+
+	// 파일첨부 선택 시
+	$('#file1').on('change', function() { fnChooseFile(this, 1); });
+	$('#file2').on('change', function() { fnChooseFile(this, 2); });
+	$('#file3').on('change', function() { fnChooseFile(this, 3); });
+	$('#file4').on('change', function() { fnChooseFile(this, 4); });
+	$('#file5').on('change', function() { fnChooseFile(this, 5); });
+	$('#file6').on('change', function() { fnChooseFile(this, 6); });
+	$('#file7').on('change', function() { fnChooseFile(this, 7); });
+	$('#file8').on('change', function() { fnChooseFile(this, 8); });
+	$('#file9').on('change', function() { fnChooseFile(this, 9); });
+	$('#file10').on('change', function() { fnChooseFile(this, 10); });
+
+	var fnChooseFile = function(obj, fileNo) {
+		// multiple 속성이 있으면 files에는 다수의 객체가 할당됨
+		var file = obj.files[0];
+
+		// 파일 업로드
+		gagajf.ajaxFileUpload('/common/file/upload?subDir=/board'
+				, file
+				, function(result) {
+					// 업로드한 파일명 설정
+					$('#orgFileNm' + fileNo).val(result.oldFileName);
+					$('#sysFileNm' + fileNo).val(result.newFileName);
+				}
+		);
+	}
+	
+	// 신규 버튼 클릭
+	$("#btnNew").on("click", function(){
+		$('#detailForm')[0].reset();
+
+		$('#trNew').show();
+		$('#trDetail').hide();
+
+		$('#detailForm input[name=noticeSq]').val('');
+		$('#detailForm input[name=noticeStdt]').val(_today);
+		$('#detailForm input[name=noticeEddt]').val(_today);
+	});
+	
+	// 저장
+	$("#btnSave").on("click", function() {
+		// 날짜 체크
+		if (gagajf.isNull($('#detailForm input[name=noticeSq]').val())) {
+			if (gagajf.isNull($('#detailForm input[name=noticeStdt1]').val())) {
+				mcxDialog.alertC('공지시작일자를 입력해 주세요.', {
+					sureBtnText: "확인",
+					sureBtnClick: function() {
+						$('#detailForm input[name=noticeStdt1]').focus();
+					}
+				});
+				return;
+			}
+
+			if (gagajf.isNull($('#detailForm input[name=noticeEddt1]').val())) {
+				mcxDialog.alertC('공지종료일자를 입력해 주세요.', {
+					sureBtnText: "확인",
+					sureBtnClick: function() {
+						$('#detailForm input[name=noticeEddt1]').focus();
+					}
+				});
+				return;
+			}
+
+			$('#detailForm input[name=noticeStdt]').val($('#detailForm input[name=noticeStdt1]').val());
+			$('#detailForm input[name=noticeEddt]').val($('#detailForm input[name=noticeEddt1]').val());
+		} else {
+			if (gagajf.isNull($('#detailForm input[name=noticeStdt2]').val())) {
+				mcxDialog.alertC('공지시작일자를 입력해 주세요.', {
+					sureBtnText: "확인",
+					sureBtnClick: function() {
+						$('#detailForm input[name=noticeStdt2]').focus();
+					}
+				});
+				return;
+			}
+
+			if (gagajf.isNull($('#detailForm input[name=noticeEddt2]').val())) {
+				mcxDialog.alertC('공지종료일자를 입력해 주세요.', {
+					sureBtnText: "확인",
+					sureBtnClick: function() {
+						$('#detailForm input[name=noticeEddt2]').focus();
+					}
+				});
+				return;
+			}
+
+			$('#detailForm input[name=noticeStdt]').val($('#detailForm input[name=noticeStdt2]').val());
+			$('#detailForm input[name=noticeEddt]').val($('#detailForm input[name=noticeEddt2]').val());
+		}
+
+		var stDate = $('#detailForm input[name=noticeStdt]').val().toDate('YYYY-MM-DD');
+		var edDate = $('#detailForm input[name=noticeEddt]').val().toDate('YYYY-MM-DD');
+
+		if (stDate > edDate) {
+			mcxDialog.alert("공지기간 종료일자는 시작일자 보다 클 수 없습니다.");
+			return;
+		}
+
+		// 수신자 선택
+		if ($('#detailForm input:checkbox[name=receiverIds]').is(":checked") != true) {
+			if (noticeType == 'G047_10') { // 사이트공지
+				mcxDialog.alert("사이트를 선택해 주세요.");
+				return;
+			} else if (noticeType == 'G047_20') { // 내부공지
+				mcxDialog.alert("부서를 선택해 주세요.");
+				return;
+			}
+		}
+
+		// validation
+		if (!gagajf.validation('#detailForm'))
+			return false;
+
+		$('#detailForm input[name=useYn]').val($('#detailForm input:checkbox[name=chkUseYn]').is(":checked") ? 'Y' : 'N');
+
+		mcxDialog.confirm('저장하시겠습니까?', {
+			cancelBtnText: "취소",
+			sureBtnText: "확인",
+			sureBtnClick: function(){
+				var jsonData = JSON.stringify($('#detailForm').serializeObject());
+				gagajf.ajaxJsonSubmit($('#detailForm').prop('action'), jsonData, function() {
+					$('#btnSearch').trigger('click');
+				});
+			}
+		});
+	});
+	
+	$(document).ready(function() {
+		cfnCreateCalendar('#noticeTerms', 'startDt', 'endDt');
+		
+		// Create a agGrid
+		gagaAgGrid.createGrid('gridList', gridOptions);
+		
+		// Create a summernote
+		let snOptions = gagaSn.getToolbarOptions('media');
+		gagaSn.createSummernote(snOptions, '#noticeContent');
+		
+		$("#fileCnt").trigger('change');
+	});
+/*]]>*/
+</script>
+
+</html>