diff --git a/WebContent/dashboard-modern/css/components.css b/WebContent/dashboard-modern/css/components.css
index 4bbc33f..90eb758 100644
--- a/WebContent/dashboard-modern/css/components.css
+++ b/WebContent/dashboard-modern/css/components.css
@@ -1,6 +1,6 @@
-/* components.css - 공통 컴포넌트 스타일 정의 */
+/* components.css - Ʈ Ÿ */
-/* 카드 컴포넌트 */
+/* ī Ʈ */
.card {
background-color: white;
border-radius: var(--rounded-md);
@@ -51,7 +51,7 @@
height: 100%;
}
-/* 버튼 컴포넌트 */
+/* ư Ʈ */
.btn {
display: inline-flex;
align-items: center;
@@ -129,7 +129,7 @@
color: white;
}
-/* 필터 및 탭 컴포넌트 */
+/* Ʈ */
.filter-group {
display: flex;
gap: 0.5rem;
@@ -223,7 +223,7 @@
display: block;
}
-/* 상태 표시 컴포넌트 */
+/* ǥ Ʈ */
.server-status-badge,
.status-badge {
display: inline-flex;
@@ -258,7 +258,7 @@
margin-right: 0.25rem;
}
-/* 상태 인디케이터 */
+/* ε */
.instance-status {
display: inline-block;
width: 0.625rem;
@@ -283,7 +283,7 @@
background-color: var(--color-gray-400);
}
-/* 테이블 컴포넌트 */
+/* ̺ Ʈ */
.instance-table,
.transaction-table,
.adapter-table {
@@ -335,14 +335,14 @@
color: var(--color-gray-800);
}
-/* 검색 컴포넌트 */
+/* ˻ Ʈ */
.search-container {
position: relative;
width: 100%;
max-width: 300px;
}
-/* 검색 컴포넌트 */
+/* ˻ Ʈ */
.search-container {
position: relative;
width: 250px;
@@ -371,7 +371,7 @@
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}
-/* 차트 컨테이너 */
+/* Ʈ ̳ */
.chart-container {
height: 184px;
width: 100%;
@@ -391,7 +391,7 @@
font-weight: 500;
}
-/* 로딩 애니메이션 */
+/* ε ִϸ̼ */
.loading {
position: relative;
}
@@ -427,7 +427,7 @@
z-index: 11;
}
-/* 메트릭 컴포넌트 */
+/* Ʈ Ʈ */
.metric-group {
display: flex;
align-items: center;
@@ -483,7 +483,7 @@
text-decoration: underline;
}
-/* 토글 버튼 */
+/* ư */
.toggle-details {
background: none;
border: none;
@@ -507,7 +507,7 @@
transform: rotate(180deg);
}
-/* 테이블 컴포넌트 */
+/* ̺ Ʈ */
.table-container {
overflow-x: auto;
margin-bottom: 0.75rem;
@@ -540,7 +540,7 @@ table tr:hover td {
background-color: var(--color-gray-50);
}
-/* 알림 컴포넌트 */
+/* ˸ Ʈ */
.alert {
padding: 0.75rem;
border-radius: var(--rounded);
@@ -589,7 +589,7 @@ table tr:hover td {
color: var(--color-danger-dark);
}
-/* 로딩 스피너 */
+/* ε dz */
.spinner {
display: inline-block;
width: 1.5rem;
@@ -606,7 +606,7 @@ table tr:hover td {
}
}
-/* 페이지네이션 */
+/* ̼ */
.pagination {
display: flex;
justify-content: center;
@@ -644,7 +644,7 @@ table tr:hover td {
pointer-events: none;
}
-/* 툴팁 */
+/* */
.tooltip {
position: relative;
display: inline-block;
@@ -685,7 +685,7 @@ table tr:hover td {
opacity: 1;
}
-/* 애니메이션 */
+/* ִϸ̼ */
@keyframes pulse {
0% {
opacity: 1;
@@ -698,12 +698,12 @@ table tr:hover td {
}
}
-/* 새로고침 버튼 애니메이션 */
+/* ΰħ ư ִϸ̼ */
.refresh-btn-spin {
animation: spin 1s linear infinite;
}
-/* 컴팩트 모드 추가 스타일 */
+/* Ʈ ߰ Ÿ */
.compact-mode .card {
padding: 0.5rem;
}
@@ -728,7 +728,7 @@ table tr:hover td {
padding-bottom: 0.4rem;
}
-/* peak 필터 스타일 */
+/* peak Ÿ */
.peak-filter-group {
display: flex;
gap: 0.5rem;
diff --git a/WebContent/dashboard-modern/css/layout.css b/WebContent/dashboard-modern/css/layout.css
index 7a4f9e0..7f92d7e 100644
--- a/WebContent/dashboard-modern/css/layout.css
+++ b/WebContent/dashboard-modern/css/layout.css
@@ -1,9 +1,9 @@
-/* layout.css - 레이아웃 및 구조 스타일 */
+/* layout.css - ̾ƿ Ÿ */
-/* 대시보드 메인 그리드 레이아웃 */
+/* ú ̾ƿ */
.dashboard-grid {
display: grid;
- grid-template-columns: 2fr 1fr; /* 메인 콘텐츠(2/3), 사이드바(1/3) 비율 */
+ grid-template-columns: 2fr 1fr; /* (2/3), ̵(1/3) */
gap: 1.5rem;
margin-bottom: 1rem;
}
@@ -19,7 +19,7 @@
gap: 1.5rem;
}
-/* 기본 그리드 레이아웃 */
+/* ⺻ ̾ƿ */
.dashboard-row {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -27,14 +27,14 @@
margin-bottom: 0.2rem;
}
-/* 특별한 그리드 레이아웃 - 배치/피크 섹션용 */
+/* Ư ̾ƿ - ġ/ũ ǿ */
.dashboard-row.batch-peak-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
-/* 특별한 그리드 레이아웃 - 배치/피크 섹션용에서 중첩 방지 */
+/* Ư ̾ƿ - ġ/ũ ǿ뿡 ø */
.dashboard-row.batch-peak-row > .dashboard-batch,
.dashboard-row.batch-peak-row > .dashboard-peak,
.dashboard-row.batch-peak-row > .batch-container,
@@ -43,23 +43,23 @@
margin-bottom: 0;
}
-/* 요약 섹션 (1:2 비율) */
+/* (1:2 ) */
.dashboard-transactions {
- margin-bottom: 0; /* 사이드바 내에서 하단 마진 제거 */
+ margin-bottom: 0; /* ̵ ϴ */
}
-/* 어댑터 섹션 */
+/* */
.dashboard-adapters {
- margin-bottom: 0; /* 사이드바 내에서 하단 마진 제거 */
+ margin-bottom: 0; /* ̵ ϴ */
}
-/* 트랜잭션 섹션 */
+/* Ʈ */
.dashboard-transactions {
- margin-bottom: 0; /* 사이드바 내에서 하단 마진 제거 */
+ margin-bottom: 0; /* ̵ ϴ */
}
-/* 헤더 */
+/* */
header {
background-color: white;
padding: 0.8rem 1.5rem;
@@ -104,7 +104,7 @@ header {
color: var(--color-gray-700);
}
-/* 자동 새로고침 컨트롤 */
+/* ڵ ΰħ Ʈ */
.refresh-controls {
display: flex;
align-items: center;
@@ -134,7 +134,7 @@ header {
background-color: var(--color-gray-400);
}
-/* 푸터 */
+/* Ǫ */
footer {
margin-top: 1.5rem;
padding: 1rem 1.5rem 0.5rem 1.5rem;
@@ -169,7 +169,7 @@ footer {
text-decoration: underline;
}
-/* 서버-트랜잭션 행 (한 줄에 나오도록) */
+/* -Ʈ ( ٿ ) */
.dashboard-row.server-transaction-row {
display: grid;
grid-template-columns: 1fr 1fr;
@@ -180,28 +180,28 @@ footer {
width: 100%;
}
-/* 어댑터 섹션 컨테이너 */
+/* ̳ */
.dashboard-adapters-container {
width: 100%;
margin-bottom: 1rem;
}
-/* 기존 대시보드 그리드 스타일은 비활성화 */
+/* ú Ÿ Ȱȭ */
.dashboard-grid {
display: none;
}
-/* 반응형 디자인 */
+/* */
@media (max-width: 1200px) {
.dashboard-row.server-transaction-row {
grid-template-columns: 1fr;
}
}
-/* 반응형 디자인 */
+/* */
@media (max-width: 1200px) {
.dashboard-grid {
- grid-template-columns: 1fr; /* 좁은 화면에서는 세로로 배치 */
+ grid-template-columns: 1fr; /* ȭ鿡 η ġ */
}
.dashboard-summary {
diff --git a/WebContent/dashboard-modern/css/main.css b/WebContent/dashboard-modern/css/main.css
index d9e9739..5fbbb89 100644
--- a/WebContent/dashboard-modern/css/main.css
+++ b/WebContent/dashboard-modern/css/main.css
@@ -1,16 +1,16 @@
-/* main.css - 메인 CSS 파일로 모든 모듈을 가져옵니다 */
+/* main.css - CSS Ϸ ɴϴ */
-/* 기본 변수 및 리셋 */
+/* ⺻ */
@import 'variables.css';
-/* 공통 컴포넌트 */
+/* Ʈ */
@import 'components.css';
-/* 레이아웃 및 구조 */
+/* ̾ƿ */
@import 'layout.css';
-/* 대시보드 섹션별 스타일 */
+/* ú Ǻ Ÿ */
@import 'sections.css';
-/* 유틸리티 및 반응형 */
+/* ƿƼ */
@import 'utils.css';
\ No newline at end of file
diff --git a/WebContent/dashboard-modern/css/sections.css b/WebContent/dashboard-modern/css/sections.css
index 97976b1..6fda2af 100644
--- a/WebContent/dashboard-modern/css/sections.css
+++ b/WebContent/dashboard-modern/css/sections.css
@@ -1,6 +1,6 @@
-/* sections.css - 대시보드 섹션별 스타일 */
+/* sections.css - ú Ǻ Ÿ */
-/* 공통 섹션 스타일 */
+/* Ÿ */
.dashboard-servers,
.dashboard-transactions,
.dashboard-adapters,
@@ -19,34 +19,34 @@
border-bottom: 1px solid var(--color-gray-200);
}
-/* 대시보드 헤더 스타일 - 서버 JSP로 이동됨 */
+/* ú Ÿ - JSP ̵ */
-/* 서버 상태 섹션 - 서버 JSP로 이동됨 */
+/* - JSP ̵ */
-/* 스파크라인 스타일 - 서버 JSP로 이동됨 */
+/* ũ Ÿ - JSP ̵ */
-/* 요약 섹션 - 서버 JSP로 이동됨 */
+/* - JSP ̵ */
-/* 카드 내부 여백 줄임 */
+/* ī */
.card {
padding: 0.6rem;
}
-/* 카드 헤더 여백 줄임 */
+/* ī */
.card-header {
margin-bottom: 0.5rem;
padding-bottom: 0.4rem;
}
-/* 테이블 여백 줄임 */
+/* ̺ */
table th,
table td {
padding: 0.3rem 0.4rem;
}
-/* 트랜잭션 현황 섹션 스타일 조정 */
+/* Ʈ Ȳ Ÿ */
.transaction-overview-container .card {
- height: 100%;
+ height: 285px; /* ī */
}
-/* SMS 섹션 스타일 - 개별 JSP 파일로 이동됨 */
+/* SMS Ÿ - JSP Ϸ ̵ */
\ No newline at end of file
diff --git a/WebContent/dashboard-modern/css/utils.css b/WebContent/dashboard-modern/css/utils.css
index 22fecd1..0b36d63 100644
--- a/WebContent/dashboard-modern/css/utils.css
+++ b/WebContent/dashboard-modern/css/utils.css
@@ -1,6 +1,6 @@
-/* utils.css - 유틸리티 클래스 및 반응형 디자인 */
+/* utils.css - ƿƼ Ŭ */
-/* 텍스트 정렬 */
+/* ؽƮ */
.text-left {
text-align: left;
}
@@ -13,7 +13,7 @@
text-align: right;
}
-/* 반응형 디자인 */
+/* */
@media (max-width: 1200px) {
.dashboard-row {
grid-template-columns: 1fr;
diff --git a/WebContent/dashboard-modern/css/variables.css b/WebContent/dashboard-modern/css/variables.css
index 0a89888..9321840 100644
--- a/WebContent/dashboard-modern/css/variables.css
+++ b/WebContent/dashboard-modern/css/variables.css
@@ -1,8 +1,8 @@
-/* variables.css - 모든 CSS 변수와 기본 리셋 스타일 정의 */
+/* variables.css - CSS ⺻ Ÿ */
-/* 변수 정의 */
+/* */
:root {
- /* 기본 색상 */
+ /* ⺻ */
--color-primary: #4f46e5;
--color-primary-light: #eef2ff;
--color-success: #22c55e;
@@ -12,7 +12,7 @@
--color-danger: #ef4444;
--color-danger-light: #fee2e2;
- /* 배경 및 텍스트 색상 */
+ /* ؽƮ */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
@@ -24,7 +24,7 @@
--color-gray-800: #1f2937;
--color-gray-900: #111827;
- /* 테두리 및 그림자 */
+ /* θ */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
@@ -35,7 +35,7 @@
--rounded-full: 9999px;
}
-/* 기본 리셋 및 공통 스타일 */
+/* ⺻ Ÿ */
* {
margin: 0;
padding: 0;
@@ -72,7 +72,7 @@ p {
margin: 0 auto;
}
-/* 애니메이션 */
+/* ִϸ̼ */
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.4; }
diff --git a/WebContent/jsp/dashboard-modern/components/dashboard-adapter.jsp b/WebContent/jsp/dashboard-modern/components/dashboard-adapter.jsp
index 7f7f86f..cea8669 100644
--- a/WebContent/jsp/dashboard-modern/components/dashboard-adapter.jsp
+++ b/WebContent/jsp/dashboard-modern/components/dashboard-adapter.jsp
@@ -105,7 +105,7 @@
/* 어댑터 섹션 스타일 조정 */
.adapters-container .card {
height: 100%;
- min-height: 249px;
+ min-height: 293px;
}
.dashboard-adapter-summary {
diff --git a/WebContent/jsp/dashboard-modern/components/dashboard-servers.jsp b/WebContent/jsp/dashboard-modern/components/dashboard-servers.jsp
index 7edb471..f7d704e 100644
--- a/WebContent/jsp/dashboard-modern/components/dashboard-servers.jsp
+++ b/WebContent/jsp/dashboard-modern/components/dashboard-servers.jsp
@@ -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;
}
+ */