UI 조정

WebContent/jsp/onl/kjb/statistics/apiStatsDayMan.jsp

@@ -33,6 +33,18 @@
 			width: 100%;
 			height: 250px;
 		}
+		/* 달력 팝업이 파이차트 가운데 숫자(z-index:10) 위로 오도록 */
+		#ui-datepicker-div {
+		    z-index: 9999 !important;
+		}
+		.cssbtn.small {
+		    height: 24px;
+		    border-radius: 2px;
+		    min-width: 24px;
+		    box-shadow: none;
+		    border-color: #ebebec;
+		    font-size: 11px;
+		}
 	</style>
 	<jsp:include page="/jsp/common/include/script.jsp"/>
 	<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
@@ -286,6 +298,28 @@
 			fetchChartData();
 		}
 
+		// 조회기간을 시작일 기준 이전/다음 달의 1일~말일로 변경 후 조회 (direction: -1 이전달, 1 다음달)
+		function shiftMonthRange(direction) {
+			var v = $("input[name=searchStartDateTime]").val().replace(/-/g, "");
+			if (!v || v.length < 6) return;
+
+			var year = parseInt(v.substring(0, 4));
+			var month = parseInt(v.substring(4, 6)) - 1; // 0-based
+
+			var first = new Date(year, month + direction, 1);
+			var last = new Date(year, month + direction + 1, 0); // 해당 달의 말일
+
+			function pad(n) { return String(n).padStart(2, '0'); }
+			function fmt(d) {
+				return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
+			}
+
+			$("input[name=searchStartDateTime]").val(fmt(first));
+			$("input[name=searchEndDateTime]").val(fmt(last));
+
+			search();
+		}
+
 		function exportToExcel(isSummary) {
 			var cmdType = isSummary ? 'EXCEL_EXPORT_SUMMARY' : 'EXCEL_EXPORT';
 			console.log('[Excel Export] Starting... (type: ' + cmdType + ')');
@@ -416,7 +450,7 @@
 				mtype: 'POST',
 				postData: gridPostData,
 				colNames: [
-					'API ID', 'API 명',
+					'API ID', 'API명',
 					'총건수', '성공', 'Timeout', '시스템오류',
 					'평균응답(ms)', '최소응답(ms)', '최대응답(ms)'
 				],
@@ -506,6 +540,8 @@
 			$("input[name=searchStartDateTime]").inputmask("9999-99-99", { 'autoUnmask': true });
 			$("input[name=searchEndDateTime]").inputmask("9999-99-99", { 'autoUnmask': true });
 
+			$("input[name=searchStartDateTime], input[name=searchEndDateTime]").datepicker();
+
 			// 기본값 설정 (어제 기준 해당 월 1일 ~ 어제)
 			var today = getToday();
 			var todayStr = today.replace(/-/g, '');
@@ -545,6 +581,14 @@
 				search();
 			});
 
+			$("#btnPrevMonth").click(function() {
+				shiftMonthRange(-1);
+			});
+
+			$("#btnNextMonth").click(function() {
+				shiftMonthRange(1);
+			});
+
 			$("#btn_excel_export_summary").click(function() {
 				exportToExcel(true);
 			});
@@ -599,6 +643,8 @@
 						<input type="text" name="searchStartDateTime" value="${param.searchStartDateTime}" style="width:100px;">
 						~
 						<input type="text" name="searchEndDateTime" value="${param.searchEndDateTime}" style="width:100px;">
+						<button type="button" id="btnPrevMonth" class="cssbtn small">&lt;</button>
+						<button type="button" id="btnNextMonth" class="cssbtn small">&gt;</button>
 						<span style="color:#888; font-size:12px; margin-left:10px;">(최대 31일)</span>
 					</td>
 				</tr>
@@ -640,11 +686,11 @@
 			</div>
 			<div id="callChart" class="chart"></div>
 		</div>
-
+		
 		<!-- 요약 그리드 -->
 		<div style="margin-top: 20px;">
 			<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-				<div class="title" style="margin: 0;">API명별 요약 통계</div>
+				<div class="title" style="margin: 0;">API별 요약 통계</div>
 				<button type="button" class="cssbtn" id="btn_excel_export_summary" level="R">
 					<i class="material-icons">file_download</i> Excel 다운로드 (요약)
 				</button>