2a3feca45b
- 시스템 관리자 전용 웹페이지 구현 (system.html) - 깔끔한 흰색 배경의 올드스쿨 스타일 적용 - 반응형 그리드 레이아웃으로 카드 배치 개선 - ES6 모듈 방식으로 JavaScript 구조 개선 - 이벤트 리스너 방식으로 버튼 클릭 처리 변경 - 시스템 상태, 사용자 통계, 계정 관리 기능 구현 - 시스템 로그 조회 기능 추가 - 나머지 관리 기능들 스켈레톤 구현 (개발 중 상태) - 인코딩 문제 해결을 위한 영어 로그 메시지 적용 - hyungi 계정을 system 권한으로 설정 - JWT 토큰에 role 필드 추가 - 시스템 전용 API 엔드포인트 구현 주요 변경사항: - web-ui/pages/dashboard/system.html: 시스템 관리자 전용 페이지 - web-ui/css/system-dashboard.css: 시스템 대시보드 전용 스타일 - web-ui/js/system-dashboard.js: 시스템 대시보드 로직 - api.hyungi.net/controllers/systemController.js: 시스템 API 컨트롤러 - api.hyungi.net/routes/systemRoutes.js: 시스템 API 라우트 - api.hyungi.net/controllers/authController.js: 시스템 권한 로그인 처리 - api.hyungi.net/services/auth.service.js: JWT 토큰에 role 필드 추가
220 lines
9.2 KiB
HTML
220 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>시스템 관리자 대시보드 - TK Portal</title>
|
|
<link rel="stylesheet" href="/css/main-layout.css">
|
|
<link rel="stylesheet" href="/css/admin.css">
|
|
<link rel="stylesheet" href="/css/system-dashboard.css">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link rel="icon" type="image/png" href="/img/favicon.png">
|
|
<script type="module" src="/js/auth-check.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="main-layout">
|
|
<!-- 기존 네비게이션 바 사용 -->
|
|
<div id="navbar-container"></div>
|
|
|
|
<div class="content-wrapper">
|
|
<!-- 시스템 관리자 페이지 헤더 -->
|
|
<div class="page-header">
|
|
<h1><i class="fas fa-cogs"></i> 시스템 관리자</h1>
|
|
<span class="system-badge">SYSTEM</span>
|
|
</div>
|
|
|
|
<!-- 메인 컨텐츠 -->
|
|
<main class="main-content">
|
|
<!-- 시스템 상태 개요 -->
|
|
<section class="system-overview">
|
|
<h2><i class="fas fa-tachometer-alt"></i> 시스템 상태</h2>
|
|
<div class="status-grid">
|
|
<div class="status-card">
|
|
<div class="status-info">
|
|
<h3>서버 상태</h3>
|
|
<p class="status-value online">온라인</p>
|
|
<small>마지막 확인: <span id="server-check-time">--</span></small>
|
|
</div>
|
|
</div>
|
|
<div class="status-card">
|
|
<div class="status-info">
|
|
<h3>데이터베이스</h3>
|
|
<p class="status-value online">정상</p>
|
|
<small>연결 수: <span id="db-connections">--</span></small>
|
|
</div>
|
|
</div>
|
|
<div class="status-card">
|
|
<div class="status-info">
|
|
<h3>활성 사용자</h3>
|
|
<p class="status-value" id="active-users">--</p>
|
|
<small>총 사용자: <span id="total-users">--</span></small>
|
|
</div>
|
|
</div>
|
|
<div class="status-card">
|
|
<div class="status-info">
|
|
<h3>시스템 알림</h3>
|
|
<p class="status-value warning" id="system-alerts">--</p>
|
|
<small>미처리 알림</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 주요 관리 기능 -->
|
|
<section class="management-section">
|
|
<h2><i class="fas fa-tools"></i> 시스템 관리</h2>
|
|
<div class="management-grid">
|
|
<!-- 계정 관리 -->
|
|
<div class="management-card primary">
|
|
<div class="card-header">
|
|
<i class="fas fa-user-cog"></i>
|
|
<h3>계정 관리</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>사용자 계정 생성, 수정, 삭제 및 권한 관리</p>
|
|
<div class="card-actions">
|
|
<button class="btn btn-primary" data-action="account-management">
|
|
<i class="fas fa-users"></i> 계정 관리
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 시스템 로그 -->
|
|
<div class="management-card">
|
|
<div class="card-header">
|
|
<i class="fas fa-file-alt"></i>
|
|
<h3>시스템 로그</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>로그인 이력, 시스템 활동 및 오류 로그 조회</p>
|
|
<div class="card-actions">
|
|
<button class="btn btn-secondary" data-action="system-logs">
|
|
<i class="fas fa-search"></i> 로그 조회
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 데이터베이스 관리 -->
|
|
<div class="management-card">
|
|
<div class="card-header">
|
|
<i class="fas fa-database"></i>
|
|
<h3>데이터베이스</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>데이터베이스 백업, 복원 및 최적화</p>
|
|
<div class="card-actions">
|
|
<button class="btn btn-secondary" data-action="database-management">
|
|
<i class="fas fa-cog"></i> DB 관리
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 시스템 설정 -->
|
|
<div class="management-card">
|
|
<div class="card-header">
|
|
<i class="fas fa-sliders-h"></i>
|
|
<h3>시스템 설정</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>전역 설정, 보안 정책 및 시스템 매개변수</p>
|
|
<div class="card-actions">
|
|
<button class="btn btn-secondary" data-action="system-settings">
|
|
<i class="fas fa-wrench"></i> 설정
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 백업 관리 -->
|
|
<div class="management-card">
|
|
<div class="card-header">
|
|
<i class="fas fa-shield-alt"></i>
|
|
<h3>백업 관리</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>자동 백업 설정 및 복원 관리</p>
|
|
<div class="card-actions">
|
|
<button class="btn btn-secondary" data-action="backup-management">
|
|
<i class="fas fa-download"></i> 백업
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 모니터링 -->
|
|
<div class="management-card">
|
|
<div class="card-header">
|
|
<i class="fas fa-chart-line"></i>
|
|
<h3>시스템 모니터링</h3>
|
|
</div>
|
|
<div class="card-content">
|
|
<p>성능 지표, 리소스 사용량 및 트래픽 분석</p>
|
|
<div class="card-actions">
|
|
<button class="btn btn-secondary" data-action="monitoring">
|
|
<i class="fas fa-eye"></i> 모니터링
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 최근 활동 -->
|
|
<section class="recent-activity">
|
|
<h2><i class="fas fa-history"></i> 최근 시스템 활동</h2>
|
|
<div class="activity-container">
|
|
<div class="activity-list" id="recent-activities">
|
|
<!-- 동적으로 로드됨 -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 계정 관리 모달 -->
|
|
<div id="account-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3><i class="fas fa-user-cog"></i> 계정 관리</h3>
|
|
<button class="close-btn" data-action="close-modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="account-management-content">
|
|
<!-- 계정 관리 내용이 여기에 로드됩니다 -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 테스트용 인라인 스크립트 -->
|
|
<script>
|
|
console.log('🧪 인라인 스크립트 실행됨');
|
|
|
|
// 간단한 테스트 함수
|
|
function testClick() {
|
|
console.log('🎯 버튼 클릭 테스트 성공!');
|
|
alert('버튼이 정상적으로 작동합니다!');
|
|
}
|
|
|
|
// DOM 로드 후 이벤트 리스너 설정
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('📄 DOM 로드 완료');
|
|
|
|
const accountBtn = document.querySelector('[data-action="account-management"]');
|
|
if (accountBtn) {
|
|
accountBtn.addEventListener('click', testClick);
|
|
console.log('✅ 계정 관리 버튼에 테스트 이벤트 리스너 추가됨');
|
|
} else {
|
|
console.log('❌ 계정 관리 버튼을 찾을 수 없음');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script type="module" src="/js/load-navbar.js"></script>
|
|
<script type="module" src="/js/system-dashboard.js"></script>
|
|
</body>
|
|
</html>
|