docs: Admin Dashboard Frontend 모듈 분리 트러블슈팅 문서 추가

journey/troubleshooting/260116_admin_dashboard_frontend_module_separation.md

@@ -0,0 +1,63 @@
+# Admin Dashboard Frontend 모듈 분리 완료
+
+**날짜**: 2026-01-16
+**작성자**: admin
+**관련 파일**:
+- `admin-dashboard/frontend/modules/containers.js`
+- `admin-dashboard/frontend/modules/users.js`
+- `admin-dashboard/frontend/modules/robeings.js`
+- `admin-dashboard/frontend/app.js`
+- `admin-dashboard/frontend/modules/system.js`
+- `admin-dashboard/frontend/index.html`
+
+---
+
+## 문제 상황
+
+### Monolithic 코드 구조
+- `app.js`: 1132줄 (권장 300줄 초과)
+- `system.js`: 493줄 (권장 300줄 초과)
+- 사용자/로빙/컨테이너 관리 로직이 `app.js`와 `system.js`에 혼재
+
+### 유지보수성 저하
+- 기능별 코드 분산으로 수정 시 여러 파일 확인 필요
+- 모듈화 부재로 재사용성 낮음
+
+---
+
+## 해결 방안
+
+### 1. 모듈 분리
+- `modules/containers.js`: 컨테이너 목록/재시작 로직 분리 (58줄)
+- `modules/users.js`: 사용자 목록/통계 로직 분리 (58줄)
+- `modules/robeings.js`: 로빙 목록/통계 로직 분리 (58줄)
+
+### 2. 기존 코드 정리
+- `app.js:575-669`: `loadUsers()`, `loadRobeings()` 함수 제거
+- `system.js:291-351`: `loadContainers()`, `refreshContainers()`, `restartContainer()` 함수 제거
+- `index.html:24-26`: 새 모듈 스크립트 추가
+
+### 3. 파일 크기 개선
+- `app.js`: 1132줄 → 675줄 (457줄 감소)
+- `system.js`: 493줄 → 437줄 (56줄 감소)
+
+---
+
+## 구현 완료
+
+- 커밋: `1f2247f` - Frontend 모듈 분리 완료
+- 배포: Gitea Actions 자동 배포 완료
+
+---
+
+## 교훈
+
+### 모듈 분리 효과
+- **파일 크기 감소**: `app.js` 457줄 감소로 가독성 향상
+- **관심사 분리**: 기능별 모듈로 수정 범위 명확화
+- **재사용성 향상**: 독립 모듈로 다른 프로젝트에서도 활용 가능
+
+### 원칙 준수
+- 각 모듈 300줄 이하 달성 (58줄)
+- 기능별 모듈 분리로 유지보수성 향상
+- `diary.js`, `system.js` 패턴과 일관성 유지