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..bc3761d 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 { @@ -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 { 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; } + */