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

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);
 }
 
-/* 로딩 스피너 */
+/* 로딩 스피너 */
 .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;

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 {

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';

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 파일로 이동됨 */

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;

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; }