# Admin Dashboard 코드 리팩토링 및 로딩 최적화

**날짜**: 2025-11-17  
**작성자**: admin  
**관련 파일**: 
- `admin-dashboard/frontend/index.html`
- `admin-dashboard/frontend/styles.css`
- `admin-dashboard/frontend/app.js`

---

## 문제 상황

Admin Dashboard의 `index.html` 파일이 1546줄로 과도하게 길어 유지보수가 어려웠고, 로딩 시간이 오래 걸려 사용자 경험이 저하됨.

## 해결 방안

### 1. CSS/JavaScript 분리

**문제**: 모든 코드가 `index.html`에 인라인으로 포함되어 있음

**해결**:
- `styles.css`: CSS 스타일 분리 (612줄)
- `app.js`: JavaScript 로직 분리 (686줄)
- `index.html`: HTML 구조만 유지 (300줄)

**파일 구조**:
- `index.html:10`: `<link rel="stylesheet" href="/admin/styles.css">`
- `index.html:20`: `<script src="/admin/app.js"></script>`

### 2. 로딩 바 추가

**문제**: 데이터 로딩 중 사용자에게 진행 상황을 알려주는 UI가 없음

**해결**:
- `styles.css:613-631`: 로딩 바 CSS 추가 (상단 고정, 그라데이션 효과)
- `index.html:13-16`: 로딩 바 HTML 추가
- `app.js:158-173`: 로딩 바 표시/숨김 함수 추가
- `app.js:254-271`: 로딩 진행률 업데이트 (10% → 100%)

### 3. API 호출 병렬 처리

**문제**: 6개 API가 순차적으로 호출되어 로딩 시간이 길어짐

**해결**:
- `app.js:254-271`: `Promise.all()`을 사용하여 API 병렬 호출
- 차트 초기화는 먼저 실행 (동기 작업)
- API 호출은 병렬 처리 (6개 동시 호출)
- 메트릭 히스토리는 마지막에 실행 (차트 준비 후)

**성능 개선**:
- 순차 처리: 약 3-5초
- 병렬 처리: 약 1-2초 (50-60% 개선)

### 4. DOMContentLoaded 구조 개선

**문제**: 스크립트가 DOM 로드 전에 실행되어 이벤트 리스너 등록 실패

**해결**:
- `app.js:1-12`: `document.readyState` 확인하여 이미 로드된 경우 즉시 실행
- `app.js:14-684`: `initApp()` 함수로 모든 초기화 로직 분리
- 로그인 폼 이벤트 리스너가 `initApp()` 안에서 등록되도록 수정

### 5. 디버깅 로그 추가

**문제**: 로그인 기능이 작동하지 않아 원인 파악이 어려움

**해결**:
- `app.js` 전역에 `console.log('[DEBUG] ...')` 추가
- 주요 단계별 로그: 스크립트 로드, DOMContentLoaded, JWT 확인, 로그인 폼 등록, API 호출, 응답 처리

### 6. API 응답 속도 문제

**문제**: 로그인 후 대시보드 로딩 시 24~30초 소요

**원인**:
- admin_routes.py:242: psutil.cpu_percent(interval=1) 1초 블로킹
- admin_routes.py:459: requests.get() 동기 블로킹
- services/status API에서 여러 서비스 순차 체크

**해결 완료**:
- admin_routes.py:242: interval=0으로 변경
- admin_routes.py:18: httpx 라이브러리 추가
- admin_routes.py:461: requests → httpx.AsyncClient 변경
- admin_routes.py:434-512: asyncio.gather()로 병렬 처리

**성능 개선**:
- System Overview: 24초 → 0.14초 (171배)
- Services Status: 26초 → 0.13초 (200배)

## 교훈

- 대용량 HTML 파일은 CSS/JS 분리로 유지보수성 향상
- API 병렬 처리로 로딩 시간 50% 이상 단축 가능
- DOMContentLoaded 체크로 스크립트 실행 시점 보장
- 디버깅 로그는 문제 해결에 필수적
- 로딩 바로 사용자 경험 개선
- psutil interval 파라미터 확인 필수 (interval=1은 1초 블로킹)
- 동기 requests 대신 httpx AsyncClient 사용
- asyncio.gather()로 병렬 처리 시 성능 200배 향상 가능

