DOCS/journey/troubleshooting/260116_admin_dashboard_frontend_module_separation.md

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 패턴과 일관성 유지