djb-eapim/eapim-admin
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

대시보드 UI 개선, 한글깨짐 처리.

Browse Source
This commit is contained in:
daekuk
2025-12-08 19:35:27 +09:00
parent 5b482904db
commit d0006eda86
11 changed files with 179 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebContent/jsp/dashboard-modern/components/dashboard-adapter.jsp
+1 -1
View File
@@ -105,7 +105,7 @@
/* 어댑터 섹션 스타일 조정 */
.adapters-container .card {
height: 100%;
min-height: 249px;
min-height: 293px;
}
.dashboard-adapter-summary {
WebContent/jsp/dashboard-modern/components/dashboard-servers.jsp
+68 -21
View File
@@ -481,10 +481,10 @@
border-top: 2px solid #fd7e14;
}
/* 서버 그리드 - 한 줄에 3개씩 표시 */
/* 서버 그리드 - 한 줄에 2개씩 표시 */
.server-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
@@ -521,83 +521,130 @@
/* 메트릭 스타일 조정 */
.server-metrics {
padding: 0.3rem 0;
padding: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 0.0rem;
border-top: 1px solid var(--color-gray-200);
border-bottom: 1px solid var(--color-gray-200);
}
.metrics-row {
.metrics-row,
.sparklines-row {
display: flex;
justify-content: space-between;
gap: 0.5rem;
justify-content: space-around;
gap: 0;
}
.sparklines-row {
display: flex;
justify-content: space-between;
gap: 0.5rem;
padding-top: 0.5rem;
}
.server-metric {
flex: 1;
min-width: 0; /* 오버플로우 방지 */
text-align: center;
padding: 0 0.5rem;
border-right: 1px solid var(--color-gray-200);
}
.server-metric:last-child {
border-right: none;
}
.metric-header {
margin-bottom: 0.2rem;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column; /* 아이콘과 값을 수직으로 정렬 */
justify-content: center; /* 수직 중앙 정렬 */
align-items: center; /* 수평 중앙 정렬 */
white-space: nowrap;
overflow: hidden;
}
.sparkline {
flex: 1;
min-width: 0; /* 오버플로우 방지 */
min-width: 0;
padding: 0.25rem 0.5rem;
border-right: 1px solid var(--color-gray-200);
}
.sparkline:last-child {
border-right: none;
}
.metric-name {
display: flex;
align-items: center;
margin-bottom: 0.2rem; /* 아이콘과 값 사이 간격 조정 */
}
.metric-value {
margin-left: 0.5rem;
margin-left: 0; /* 이전 margin-left 제거 */
font-size: 1.1rem; /* 값 폰트 크기 약간 키움 */
font-weight: 600; /* 값 폰트 굵기 */
}
/* 인스턴스 테이블 스타일 */
.server-instances {
padding: 0.3rem 0;
padding: 0.5rem 0.5rem 0.5rem 0.5rem; /* 패딩 조정 */
max-height: 120px;
}
.instance-table {
font-size: 0.8rem;
width: 100%; /* 테이블 전체 너비 */
font-size: 0.85rem; /* 폰트 크기 약간 키움 */
border-collapse: collapse;
table-layout: fixed;
}
.instance-table th {
background-color: var(--color-gray-100); /* 헤더 배경색 */
font-weight: 600; /* 헤더 폰트 굵기 */
padding: 0.4rem 0.5rem; /* 헤더 패딩 조정 */
border-bottom: 1px solid var(--color-gray-200); /* 헤더 아래 보더 */
text-align: center; /* 모든 헤더 가운데 정렬 */
width: 33.3333%; /* 인스턴스 th 각 영역 균등하게, 위쪽 요소와 맞춤 */
box-sizing: border-box;
}
.instance-table th,
.instance-table td {
padding: 0.2rem 0.3rem;
padding: 0.4rem 0.5rem; /* 셀 패딩 조정 */
white-space: nowrap;
border-bottom: 1px solid var(--color-gray-100); /* 셀 아래 보더 */
vertical-align: middle;
text-align: center; /* 모든 셀 내용 가운데 정렬 */
white-space: nowrap; /* 줄바꿈 방지 */
overflow: hidden; /* 칸을 넘어가는 글자 숨김 */
text-overflow: ellipsis; /* 넘어가는 글자를 ...으로 표시 */
}
.instance-table tbody tr:nth-child(odd) {
background-color: var(--color-gray-50); /* 홀수 행 배경색 */
}
.instance-table tbody tr:hover {
background-color: var(--color-gray-100); /* 호버 효과 */
}
/* 인스턴스 상태 점 스타일 */
.instance-status {
display: inline-block;
width: 8px;
height: 8px;
width: 10px; /* 크기 키움 */
height: 10px; /* 크기 키움 */
border-radius: 50%;
margin-right: 4px;
margin-right: 6px; /* 간격 조정 */
vertical-align: middle; /* 텍스트와 세로 정렬 */
}
/* 오류 상태일 때 인스턴스 ID 색상 변경 */
/* 오류 상태일 때 인스턴스 ID 색상 변경 - :has()는 구형 브라우저에서 문제를 일으킬 수 있어 주석 처리
tr:has(.status-error) .instance-id,
tr:has(.status-inactive) .instance-id {
color: #dc3545;
font-weight: 600;
}
*/
</style>
<script>
WebContent/jsp/dashboard-modern/components/dashboard-sms.jsp
+3
View File
@@ -33,6 +33,7 @@
.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 {
@@ -55,6 +56,8 @@
position: sticky;
top: 0;
z-index: 10;
/* 텍스트 정렬, 균등하게 */
}
.sms-table td {
WebContent/jsp/dashboard-modern/components/dashboard-transactions.jsp
+5 -5
View File
@@ -625,8 +625,8 @@
.dashboard-transactions .card {
border-radius: 0.35rem;
box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
overflow: hidden;
height: 242px;
/* overflow: hidden; */ /* 스크롤바 제거를 위해 제거 */
/* height: 242px; */ /* 스크롤바 제거를 위해 제거 */
}
.transaction-filters {
@@ -655,8 +655,8 @@
}
.transaction-table-container {
max-height: 300px;
overflow-y: auto;
/* max-height: 300px; */ /* 스크롤바 제거를 위해 제거 */
/* overflow-y: auto; */ /* 스크롤바 제거 */
position: relative;
}
@@ -817,7 +817,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
margin-bottom: 0.5rem;
}
/* 제목과 버튼을 한 줄에 나란히 표시하기 위한 컨테이너 */
WebContent/jsp/dashboard-modern/modern-dashboard.jsp
+31 -25
View File
@@ -126,19 +126,25 @@
</script>
<style>
/* 2025.12.08 광주은행
1. 모든 카드를 7:3 기준으로 변경함.
2. 자동으로 높이를 맞추지않고 왼쪽 요소 기준으로 오른쪽 높이를 강제로 설정함.
3. 중요도에 따라 각 카드 위치 변경.
*/
/* 1번 줄 (5:3 비율) - 서버 상태, 배치 처리 상태 */
.first-row {
grid-template-columns: 5fr 3fr;
grid-template-columns: 7fr 3fr;
}
/* 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 */
.second-row {
grid-template-columns: 1fr 1fr;
grid-template-columns: 7fr 3fr;
}
/* 3번 줄 (7:3 비율) - 어댑터 상태, 장애통보(SMS) */
.third-row {
grid-template-columns: 6fr 4fr;
grid-template-columns: 7fr 3fr;
}
/* 컴팩트한 대시보드를 위한 추가 스타일 */
@@ -186,9 +192,9 @@
</jsp:include>
</div>
<!-- 배치 처리 상태 섹션 (3/8 비율) -->
<div class="batch-container">
<jsp:include page="components/dashboard-batch.jsp" />
<!-- 장애통보(SMS) 섹션 (2/10 비율) -->
<div class="sms-container">
<jsp:include page="components/dashboard-sms.jsp" />
</div>
<!-- 피크 처리 성능 섹션 (1/8 비율) -->
@@ -199,31 +205,31 @@
<!-- 2번 줄 (1:1 비율) - 거래 처리 집계, 실시간 트랜잭션 현황 -->
<div class="dashboard-row second-row">
<!-- 거래 처리 집계 섹션 (좌측) -->
<div class="transaction-container" style="overflow-y:auto;">
<jsp:include page="components/dashboard-transactions.jsp">
<jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
</jsp:include>
</div>
<!-- 실시간 트랜잭션 현황 섹션 (우측) -->
<div class="transaction-overview-container">
<jsp:include page="components/dashboard-tran-chart.jsp" />
</div>
</div>
<!-- 3번 줄 (8:2 비율) - 어댑터 상태, 장애통보(SMS) -->
<div class="dashboard-row third-row">
<!-- 어댑터 섹션 (8/10 비율) -->
<!-- 어댑터 섹션 (8/10 비율) -->
<div class="adapters-container">
<jsp:include page="components/dashboard-adapter.jsp">
<jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
</jsp:include>
</div>
<!-- 장애통보(SMS) 섹션 (2/10 비율) -->
<div class="sms-container">
<jsp:include page="components/dashboard-sms.jsp" />
<!-- 거래 처리 집계 섹션 (우측) -->
<div class="transaction-container" style="overflow-y:auto;">
<jsp:include page="components/dashboard-transactions.jsp">
<jsp:param name="serverTypeMap" value="<%= serverTypeMap %>" />
</jsp:include>
</div>
</div>
<!-- 3번 줄 (8:2 비율) - 어댑터 상태, 장애통보(SMS) -->
<div class="dashboard-row third-row">
<!-- 실시간 트랜잭션 현황 섹션 (좌측) -->
<div class="transaction-overview-container">
<jsp:include page="components/dashboard-tran-chart.jsp" />
</div>
<!-- 배치 처리 상태 섹션 (3/8 비율) -->
<div class="batch-container">
<jsp:include page="components/dashboard-batch.jsp" />
</div>
</div>
<!-- 인터페이스 로그 조회 모달 -->