docs: Admin Dashboard 코드 리팩토링 및 로딩 최적화 문서 추가

journey/troubleshooting/251117_admin_dashboard_code_refactoring_loading_optimization.md

@@ -0,0 +1,79 @@
+# 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 호출, 응답 처리
+
+## 교훈
+
+- 대용량 HTML 파일은 CSS/JS 분리로 유지보수성 향상
+- API 병렬 처리로 로딩 시간 50% 이상 단축 가능
+- DOMContentLoaded 체크로 스크립트 실행 시점 보장
+- 디버깅 로그는 문제 해결에 필수적
+- 로딩 바로 사용자 경험 개선
+