UI 조정

WebContent/jsp/common/screen/top_04.jsp

@@ -596,7 +596,7 @@
             <ul>
                 <li style="width:240px;">		
                     <a style="width:240px; cursor: default"
-                       href="#"><span><%=SessionManager.getUserName(request) %>(<%=SessionManager.getUserId(request) %></span>
+                       href="#"><span><%=SessionManager.getUserName(request) %>(<%=SessionManager.getUserId(request) %>)</span>
                         <span onClick="javascript:openColorPopup();"><%=localeMessage.getString("screen.customer") %></span>
                         <% if (!"".equals(LastLoginYms.trim())) { %>
                         <span style="display:block;font-size:10px;"><%=localeMessage.getString("screen.lastLogin") %> : <%=LastLoginYms%></span>

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>

WebContent/jsp/onl/kjb/statistics/apiStatsHourMan.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>
@@ -292,6 +304,25 @@
 			fetchChartData();
 		}
 
+		// 조회일자를 하루 이동 후 조회 (direction: -1 이전날, 1 이후날)
+		function shiftSearchDate(direction) {
+			var v = $("input[name=searchDate]").val().replace(/-/g, "");
+			if (!v || v.length !== 8) return;
+
+			var d = new Date(
+				parseInt(v.substring(0, 4)),
+				parseInt(v.substring(4, 6)) - 1,
+				parseInt(v.substring(6, 8))
+			);
+			d.setDate(d.getDate() + direction);
+
+			function pad(n) { return String(n).padStart(2, '0'); }
+			$("input[name=searchDate]").val(
+				d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()));
+
+			search();
+		}
+
 		function exportToExcel(isSummary) {
 			var cmdType = isSummary ? 'EXCEL_EXPORT_SUMMARY' : 'EXCEL_EXPORT';
 			console.log('[Excel Export] Starting... (type: ' + cmdType + ')');
@@ -460,8 +491,8 @@
 				datatype: "json",
 				mtype: 'POST',
 				postData: gridPostData,
-				colNames: [
+				colNames: [		
-					'통계시간', 'API명', '인스턴스', '업무구분', '클라이언트ID',
+					'통계시간', 'API ID', '인스턴스', '업무구분', '클라이언트ID',
 					'Inbound Adapter', 'Outbound Adapter',
 					'총건수', '성공', 'Timeout', '시스템오류',
 					'평균응답(ms)', '최소응답(ms)', '최대응답(ms)'
@@ -507,6 +538,8 @@
 			// 날짜 입력 마스크
 			$("input[name=searchDate]").inputmask("9999-99-99", { 'autoUnmask': true });
 
+			$("input[name=searchDate]").datepicker();
+
 			// 기본값 설정 (오늘)
 			var today = getToday();
 			if (!$("input[name=searchDate]").val()) {
@@ -525,6 +558,14 @@
 				search();
 			});
 
+			$("#btnPrevDate").click(function() {
+				shiftSearchDate(-1);
+			});
+
+			$("#btnNextDate").click(function() {
+				shiftSearchDate(1);
+			});
+
 			$("#btn_excel_export_summary").click(function() {
 				exportToExcel(true);
 			});
@@ -577,6 +618,8 @@
 					<th>조회일자</th>
 					<td colspan="5">
 						<input type="text" name="searchDate" value="${param.searchDate}" style="width:100px;">
+						<button type="button" id="btnPrevDate" class="cssbtn small">&lt;</button>
+						<button type="button" id="btnNextDate" class="cssbtn small">&gt;</button>
 						<span style="color:#888; font-size:12px; margin-left:10px;">(선택일 00시 ~ 23시 조회)</span>
 					</td>
 				</tr>
@@ -622,7 +665,7 @@
 		<!-- 요약 그리드 -->
 		<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>

WebContent/jsp/onl/kjb/statistics/apiStatsMinuteMan.jsp

@@ -26,6 +26,18 @@
 			border: 1px solid #ddd;
 			background: #fff;
 		}
+		.cssbtn.small {
+		    height: 24px;
+		    border-radius: 2px;
+		    min-width: 24px;
+		    box-shadow: none;
+		    border-color: #ebebec;
+		    font-size: 11px;
+		}
+		/* 달력 팝업이 파이차트 가운데 숫자(z-index:10) 위로 오도록 */
+		#ui-datepicker-div {
+		    z-index: 9999 !important;
+		}
 	</style>
 	<jsp:include page="/jsp/common/include/script.jsp"/>
 	<script src="<c:url value="/addon/echarts/echarts.min.js"/>"></script>
@@ -203,7 +215,6 @@
 		function validateAndAdjustDateRange() {
 			var startDate = $("input[name=searchStartDate]").val().replace(/-/g, "");
 			var startTime = $("input[name=searchStartTime]").val().replace(/:/g, "");
-			var endDate = $("input[name=searchEndDate]").val().replace(/-/g, "");
 			var endTime = $("input[name=searchEndTime]").val().replace(/:/g, "");
 
 			if (!startDate || !startTime) return null;
@@ -219,35 +230,43 @@
 				);
 			}
 
-			// UI 업데이트 헬퍼
+			// 종료일시(yyyyMMddHHmm) 포맷 헬퍼
-			function updateEndDateTime(dt) {
+			function formatDateTime(dt) {
-				var d = dt.getFullYear() +
+				return dt.getFullYear() +
 					String(dt.getMonth() + 1).padStart(2, '0') +
-					String(dt.getDate()).padStart(2, '0');
+					String(dt.getDate()).padStart(2, '0') +
-				var t = String(dt.getHours()).padStart(2, '0') +
+					String(dt.getHours()).padStart(2, '0') +
 					String(dt.getMinutes()).padStart(2, '0');
-				$("input[name=searchEndDate]").val(d.substring(0, 4) + '-' + d.substring(4, 6) + '-' + d.substring(6, 8));
+			}
-				$("input[name=searchEndTime]").val(t.substring(0, 2) + ':' + t.substring(2, 4));
+
-				return d + t;
+			// 종료시각 UI 업데이트 헬퍼
+			function updateEndTime(dt) {
+				$("input[name=searchEndTime]").val(
+					String(dt.getHours()).padStart(2, '0') + ':' + String(dt.getMinutes()).padStart(2, '0'));
+				return formatDateTime(dt);
 			}
 
 			var start = parseDateTime(startDate, startTime);
 			var startDateTime = startDate + startTime;
 			var endDateTime;
 
-			if (endDate && endTime) {
+			if (endTime) {
-				var end = parseDateTime(endDate, endTime);
+				// 종료일은 시작일 기준. 종료시각이 시작시각보다 이르면 자정을 넘긴 것으로 보고 +1일
+				var end = parseDateTime(startDate, endTime);
+				if (end < start) {
+					end = new Date(end.getTime() + 24 * 60 * 60 * 1000);
+				}
 				var diffMinutes = (end - start) / (1000 * 60);
 
 				if (diffMinutes > 60) {
 					// 1시간 초과 시 시작 + 1시간으로 조정
-					endDateTime = updateEndDateTime(new Date(start.getTime() + 60 * 60 * 1000));
+					endDateTime = updateEndTime(new Date(start.getTime() + 60 * 60 * 1000));
 				} else {
-					endDateTime = endDate + endTime;
+					endDateTime = formatDateTime(end);
 				}
 			} else {
 				// 종료시간 미입력 시 시작 + 1시간으로 설정
-				endDateTime = updateEndDateTime(new Date(start.getTime() + 60 * 60 * 1000));
+				endDateTime = updateEndTime(new Date(start.getTime() + 60 * 60 * 1000));
 			}
 
 			return { start: startDateTime, end: endDateTime };
@@ -302,6 +321,44 @@
 			fetchChartData(range);
 		}
 
+		// 조회기간을 정시 단위 1시간 구간으로 이동 (direction: -1 이전, 1 이후)
+		// ex) 시작 08:35, 이전 클릭 -> 08:00~09:00, 다시 -> 07:00~08:00
+		// ex) 시작 08:35, 이후 클릭 -> 09:00~10:00, 다시 -> 10:00~11:00
+		function shiftTimeRange(direction) {
+			var startDate = $("input[name=searchStartDate]").val().replace(/-/g, "");
+			var startTime = $("input[name=searchStartTime]").val().replace(/:/g, "");
+			if (!startDate || !startTime) return;
+
+			var start = new Date(
+				parseInt(startDate.substring(0, 4)),
+				parseInt(startDate.substring(4, 6)) - 1,
+				parseInt(startDate.substring(6, 8)),
+				parseInt(startTime.substring(0, 2)),
+				parseInt(startTime.substring(2, 4))
+			);
+
+			if (direction < 0) {
+				// 분 단위가 있으면 정시로 내림, 이미 정시면 1시간 전
+				if (start.getMinutes() === 0) start.setHours(start.getHours() - 1);
+				else start.setMinutes(0);
+			} else {
+				// 분 단위가 있으면 다음 정시로 올림, 이미 정시면 1시간 후
+				start.setMinutes(0);
+				start.setHours(start.getHours() + 1);
+			}
+
+			var end = new Date(start.getTime() + 60 * 60 * 1000);
+
+			function pad(n) { return String(n).padStart(2, '0'); }
+
+			$("input[name=searchStartDate]").val(
+				start.getFullYear() + '-' + pad(start.getMonth() + 1) + '-' + pad(start.getDate()));
+			$("input[name=searchStartTime]").val(pad(start.getHours()) + ':' + pad(start.getMinutes()));
+			$("input[name=searchEndTime]").val(pad(end.getHours()) + ':' + pad(end.getMinutes()));
+
+			search();
+		}
+
 		function exportToExcel(isSummary) {
 			var cmdType = isSummary ? 'EXCEL_EXPORT_SUMMARY' : 'EXCEL_EXPORT';
 			console.log('[Excel Export] Starting... (type: ' + cmdType + ')');
@@ -317,13 +374,10 @@
 				serviceType: '${param.serviceType}'
 			};
 
-			var startDate = $("input[name=searchStartDate]").val().replace(/-/g, "");
+			var range = validateAndAdjustDateRange();
-			var startTime = $("input[name=searchStartTime]").val().replace(/:/g, "");
+			if (range) {
-			var endDate = $("input[name=searchEndDate]").val().replace(/-/g, "");
+				postData.searchStartDateTime = range.start;
-			var endTime = $("input[name=searchEndTime]").val().replace(/:/g, "");
+				postData.searchEndDateTime = range.end;
-			if (startDate && startTime) {
-				postData.searchStartDateTime = startDate + startTime;
-				postData.searchEndDateTime = endDate + endTime;
 			}
 
 			console.log('[Excel Export] Request data:', postData);
@@ -474,7 +528,7 @@
 				mtype: 'POST',
 				postData: gridPostData,
 				colNames: [
-					'통계시간', 'API명', '인스턴스', '업무구분', '클라이언트ID',
+					'통계시간', 'API ID', '인스턴스', '업무구분', '클라이언트ID',
 					'Inbound Adapter', 'Outbound Adapter',
 					'총건수', '성공', 'Timeout', '시스템오류',
 					'평균응답(ms)', '최소응답(ms)', '최대응답(ms)'
@@ -518,9 +572,11 @@
 
 		$(document).ready(function() {
 			// 날짜/시간 입력 마스크
-			$("input[name=searchStartDate], input[name=searchEndDate]").inputmask("9999-99-99", { 'autoUnmask': true });
+			$("input[name=searchStartDate]").inputmask("9999-99-99", { 'autoUnmask': true });
 			$("input[name=searchStartTime], input[name=searchEndTime]").inputmask("99:99", { 'autoUnmask': true });
 
+			$("input[name=searchStartDate]").datepicker();
+
 			// 기본값 설정 (현재 시간(분) 기준 1시간 전 ~ 현재 시간(분))
 			var now = new Date();
 			var oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);
@@ -538,8 +594,7 @@
 				$("input[name=searchStartDate]").val(formatDate(oneHourAgo));
 				$("input[name=searchStartTime]").val(formatTime(oneHourAgo));
 			}
-			if (!$("input[name=searchEndDate]").val()) {
+			if (!$("input[name=searchEndTime]").val()) {
-				$("input[name=searchEndDate]").val(formatDate(now));
 				$("input[name=searchEndTime]").val(formatTime(now));
 			}
 
@@ -555,6 +610,14 @@
 				search();
 			});
 
+			$("#btnPrevTime").click(function() {
+				shiftTimeRange(-1);
+			});
+
+			$("#btnNextTime").click(function() {
+				shiftTimeRange(1);
+			});
+
 			$("#btn_excel_export_summary").click(function() {
 				exportToExcel(true);
 			});
@@ -569,8 +632,8 @@
 				}
 			});
 
-			// 종료일/시간 변경 시 1시간 초과 검증
+			// 종료시각 변경 시 1시간 초과 검증
-			$("input[name=searchEndDate], input[name=searchEndTime]").on('change blur', function() {
+			$("input[name=searchEndTime]").on('change blur', function() {
 				validateAndAdjustDateRange();
 			});
 
@@ -603,11 +666,12 @@
 				<tr>
 					<th style="width:100px;">조회기간</th>
 					<td style="width:400px">
-						<input type="text" name="searchStartDate" value="${param.searchStartDate}" style="width:100px;">
+						<input type="text" name="searchStartDate" value="${param.searchStartDate}" style="width:80px;">
-						<input type="text" name="searchStartTime" value="${param.searchStartTime}" style="width:60px;">
+						<input type="text" name="searchStartTime" value="${param.searchStartTime}" style="width:40px;">
 						~
-						<input type="text" name="searchEndDate" value="${param.searchEndDate}" style="width:100px;">
+						<input type="text" name="searchEndTime" value="${param.searchEndTime}" style="width:40px;">
-						<input type="text" name="searchEndTime" value="${param.searchEndTime}" style="width:60px;">
+						<button type="button" id="btnPrevTime" class="cssbtn small">&lt;</button>
+						<button type="button" id="btnNextTime" class="cssbtn small">&gt;</button>
 						<span style="color:#888; font-size:12px; margin-left:10px;">(최대 1시간, 초과시 자동 조정)</span>
 					</td>
 					<th style="width:100px;">API ID</th>

WebContent/jsp/onl/kjb/statistics/apiStatsMonthMan.jsp

@@ -643,10 +643,10 @@
 		</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>

WebContent/jsp/onl/kjb/statistics/apiStatsYearMan.jsp

@@ -605,7 +605,7 @@
 		<!-- 요약 그리드 -->
 		<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>

WebContent/jsp/onl/transaction/tracking/trackingManDetail.jsp

@@ -23,6 +23,9 @@
     white-space: normal;
 }
 
+.table_row td { padding: 0 5px; }
+.table_row input { box-sizing: border-box; }
+
 </style>
 <script language="javascript" >
     // var eaiBzwkDstcd   = window.dialogArguments["eaiBzwkDstcd"];
@@ -985,7 +988,9 @@ html,hbody {
 					</colgroup>
 					<tr>
 						<th><%=localeMessage.getString("trackingDetail.eaiSvcSerno")%></th>
-						<td colspan="3"><input type="text" name="eaiSvcSerno" readonly="readonly"/> </td>
+						<td><input type="text" name="eaiSvcSerno" readonly="readonly"/> </td>
+						<th><%=localeMessage.getString("trackingDetail.rspnsErrcdName")%></th>
+						<td><input type="text" name="rspnsErrcdName" readonly="readonly"/> </td>
 					</tr>
 					<tr>
 						<th><%=localeMessage.getString("trackingDetail.eaiBzwkDstcd")%></th>