Admin Dashboard

간단한 JavaScript 기반 관리자 모니터링 대시보드입니다.

기능

• ✅ 로그인/로그아웃 (세션 관리)
• ✅ 실시간 시스템 메트릭 모니터링
• ✅ 사용자 활동 로그
• ✅ 트래픽 차트 (Canvas)
• ✅ 다크모드 지원
• ✅ 반응형 디자인

시작하기

1. 로그인

index.html 파일을 브라우저에서 열고 다음 계정으로 로그인하세요:

Username: admin
Password: admin123

2. 대시보드 사용

로그인에 성공하면 대시보드가 표시됩니다:

• 통계 카드: 실시간 접속자 수, 요청 수, 오류 수, 평균 응답시간
• 시스템 메트릭: CPU, 메모리, 디스크 사용률 (진행바)
• 트래픽 차트: 최근 24시간 트래픽 추이
• 활동 로그: 최근 사용자 활동 기록

3. 다크모드

오른쪽 상단의 🌙/☀️ 버튼을 클릭하여 다크모드를 전환할 수 있습니다.

파일 구조

MODULE_1/
├── index.html           # 로그인 페이지
├── dashboard.html       # 대시보드
├── css/
│   └── styles.css      # 스타일 (라이트/다크 테마)
├── js/
│   ├── auth.js         # 인증 로직
│   ├── dashboard.js    # 대시보드 로직
│   └── data.js         # 하드코딩된 데이터
└── README.md           # 프로젝트 문서

기술 스택

• Vanilla JavaScript (ES6+)
• HTML5 + CSS3
• Canvas API (차트)
• localStorage (세션 관리)
• No frameworks, no build tools

주요 특징

1. 인증 시스템 (auth.js)

• 하드코딩된 계정으로 로그인 검증
• localStorage 기반 세션 관리
• 로그인 상태 체크 및 리다이렉션

2. 데이터 시뮬레이션 (data.js)

• 랜덤 시스템 메트릭 생성
• 샘플 활동 로그 데이터
• 차트 데이터 생성
• 실시간 업데이트 시뮬레이션

3. 대시보드 (dashboard.js)

• 실시간 데이터 업데이트
• Canvas로 라인 차트 그리기
• 다크모드 토글
• 반응형 레이아웃

4. 스타일링 (styles.css)

• CSS 변수로 테마 관리
• 모던한 카드 기반 디자인
• 부드러운 애니메이션
• 모바일 반응형

실시간 업데이트

대시보드는 자동으로 데이터를 업데이트합니다:

• 통계 & 메트릭: 3초마다
• 활동 로그: 10초마다
• 차트: 30초마다

브라우저 호환성

모던 브라우저에서 작동합니다:

• Chrome/Edge (최신)
• Firefox (최신)
• Safari (최신)

라이선스

MIT License