대시보드 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; }

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 {

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;
+        justify-content: space-around;
-        gap: 0.5rem;
+        gap: 0;
     }
 
     .sparklines-row {
-        display: flex;
+        padding-top: 0.5rem;
-        justify-content: space-between;
-        gap: 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;
+        flex-direction: column; /* 아이콘과 값을 수직으로 정렬 */
-        align-items: center;
+        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;
+        width: 10px; /* 크기 키움 */
-        height: 8px;
+        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

@@ -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

@@ -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;
+        /* overflow: hidden; */ /* 스크롤바 제거를 위해 제거 */
-        height: 242px;
+        /* height: 242px; */ /* 스크롤바 제거를 위해 제거 */
     }
 
     .transaction-filters {
@@ -655,8 +655,8 @@
     }
 
     .transaction-table-container {
-        max-height: 300px;
+        /* max-height: 300px; */ /* 스크롤바 제거를 위해 제거 */
-        overflow-y: auto;
+        /* 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

@@ -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 비율) -->
+        <!-- 장애통보(SMS) 섹션 (2/10 비율) -->
-        <div class="batch-container">
+        <div class="sms-container">
-            <jsp:include page="components/dashboard-batch.jsp" />
+            <jsp:include page="components/dashboard-sms.jsp" />
         </div>
 
         <!-- 피크 처리 성능 섹션 (1/8 비율) -->
@@ -199,21 +205,6 @@
 
     <!-- 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 비율) -->
         <div class="adapters-container">
             <jsp:include page="components/dashboard-adapter.jsp">
@@ -221,9 +212,24 @@
             </jsp:include>
         </div>
 
-        <!-- 장애통보(SMS) 섹션 (2/10 비율) -->
+        <!-- 거래 처리 집계 섹션 (우측) -->
-        <div class="sms-container">
+        <div class="transaction-container" style="overflow-y:auto;">
-            <jsp:include page="components/dashboard-sms.jsp" />
+            <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>
     <!-- 인터페이스 로그 조회 모달 -->