서버 인스턴스 늘어나면 sms가 서버카드 높이 따라가도록 수정, adapter 쪽 카드 꽉 채우도록 수정.

This commit is contained in:
daekuk
2025-12-09 09:45:46 +09:00
parent d0006eda86
commit 928e245899
3 changed files with 56 additions and 23 deletions
@@ -115,10 +115,15 @@
.adapter-summary-card {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.adapter-summary-container {
padding: 0.5rem 1rem;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.adapter-summary-header {
@@ -130,8 +135,10 @@
}
.adapter-summary-body {
max-height: 300px;
overflow-y: auto;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-around; /* 내용을 수직으로 균등 배분 */
}
.adapter-summary-row {
@@ -33,11 +33,9 @@
.dashboard-sms-summary .card {
border-radius: 0.35rem;
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
height: 337px; /* servers 카드와 강제로 높이 맞춤 */
}
.sms-table-container {
max-height: 220px;
overflow-y: auto;
}
@@ -56,8 +54,6 @@
position: sticky;
top: 0;
z-index: 10;
/* 텍스트 정렬, 균등하게 */
}
.sms-table td {
@@ -126,12 +126,8 @@
</script>
<style>
/* 2025.12.08 광주은행
1. 모든 카드를 7:3 기준으로 변경함.
2. 자동으로 높이를 맞추지않고 왼쪽 요소 기준으로 오른쪽 높이를 강제로 설정함.
3. 중요도에 따라 각 카드 위치 변경.
*/
/* 모든 카드는 7:3 기준으로 수정, 광주은행 요청사항 */
/* 1번 줄 (5:3 비율) - 서버 상태, 배치 처리 상태 */
.first-row {
grid-template-columns: 7fr 3fr;
@@ -182,7 +178,7 @@
<div class="container">
<!-- 헤더 영역 -->
<jsp:include page="components/dashboard-header.jsp" />
<!-- 1번 줄 (5:3 비율) - 서버 상태, 배치 처리 상태 -->
<div class="dashboard-row first-row">
<!-- 서버 상태 섹션 (5/8 비율) -->
@@ -205,7 +201,7 @@
<!-- 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 -->
<div class="dashboard-row second-row">
<!-- 어댑터 섹션 (8/10 비율) -->
<!-- 어댑터 섹션 (8/10 비율) -->
<div class="adapters-container">
<jsp:include page="components/dashboard-adapter.jsp">
<jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
@@ -222,6 +218,7 @@
<!-- 3번 줄 (8:2 비율) - 어댑터 상태, 장애통보(SMS) -->
<div class="dashboard-row third-row">
<!-- 실시간 트랜잭션 현황 섹션 (좌측) -->
<div class="transaction-overview-container">
<jsp:include page="components/dashboard-tran-chart.jsp" />
@@ -239,19 +236,33 @@
</div>
<script type="text/javascript">
// 서버 데이터 초기화
<%= serverDataJS.toString() %>
// 행의 높이를 맞추는 함수 (카드를 직접 타겟)
function matchRowHeights() {
$('.dashboard-row').each(function() {
var maxHeight = 0;
// 각 행에 있는 .card 요소를 직접 찾음
var $cards = $(this).find('.card');
// 자동 새로고침 타이머 변수 (window 객체에 할당)
window.refreshTimer = null;
window.refreshInterval = 5; // 기본값 10초
if ($cards.length > 1) {
// 자식 요소의 자연 높이를 얻기 위해 min-height 초기화
$cards.css('min-height', '0');
// 숫자 포맷 유틸리티 함수
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
// 자식 카드들의 최대 높이를 찾음
$cards.each(function() {
var currentHeight = $(this).outerHeight();
if (currentHeight > maxHeight) {
maxHeight = currentHeight;
}
});
// 모든 자식 카드에 최대 높이를 min-height로 적용
if (maxHeight > 0) {
$cards.css('min-height', maxHeight + 'px');
}
}
});
}
// 서버 데이터 설정 및 대시보드 초기화
$(document).ready(function() {
// 대시보드 초기화
initDashboard('<%=request.getContextPath()%>');
@@ -275,6 +286,25 @@
// modern-dashboard.js의 함수 호출
window.startRefreshTimer();
window.updateRefreshStatus();
// --- 높이 맞춤 로직 ---
// 초기 렌더링 후 높이 맞춤 (약간의 지연 후)
setTimeout(function() { matchRowHeights(); }, 300);
// 데이터 로딩이 끝날 때마다 높이 다시 맞춤
if (window.DashboardEventManager) {
window.DashboardEventManager.on('loading-end', function() {
// 데이터 렌더링을 위한 약간의 지연 후 높이 맞춤
setTimeout(function() { matchRowHeights(); }, 100);
});
}
// 창 크기 조절 시 높이 다시 맞춤 (디바운싱 적용)
var resizeTimeout;
$(window).on('resize', function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() { matchRowHeights(); }, 200);
});
});
</script>
</body>