DOCS/journey/troubleshooting/251225_admin_dashboard_navigation_structure_refactoring.md

Admin Dashboard 네비게이션 구조 리팩토링 구현 완료

날짜: 2025-12-25 작성자: Auto 관련 파일: admin-dashboard/frontend/index.html, admin-dashboard/frontend/app.js, admin-dashboard/frontend/styles.css

---

구현 내용

1. 네비게이션 구조 변경

• 파일: index.html:65-96
• 시스템 메뉴 하위 구조 도입 (드롭다운)
• 하위 메뉴 4개: 51123 서버, 51124 서버, 전체 컨테이너, 전체 서비스
• 기존 컨테이너/51124 모니터 메뉴 제거

2. 섹션 추가

• 파일: index.html:297-352
• system-51123Section: 컨테이너 목록, 시스템 서비스, 포트 사용 현황
• system-51124Section: 서비스 상태, 포트 사용 현황
• system-containersSection: 전체 컨테이너 목록, 재시작 기능
• system-servicesSection: 전체 서비스 상태, Nginx 설정

3. JavaScript 로직 구현

• 파일: app.js:37-125
• 하위 메뉴 토글 로직 (클릭 시 서브메뉴 유지)
• 섹션 전환 로직 확장 (system-51123, system-51124, system-containers, system-services)
• 데이터 로딩 함수: loadSystem51123(), loadSystem51124(), loadContainers(), loadServices()

4. 포트 사용 현황 기능

• 파일: app.js:1080-1150
• loadSystem51123Ports(): 51123 서버 포트 수집 및 표시
• loadSystem51124Ports(): 51124 서버 포트 표시

5. 컨테이너 재시작 기능

• 파일: app.js:1040-1055
• restartContainer(): 컨테이너 재시작 API 호출
• refreshContainers(): 컨테이너 목록 새로고침

6. 기존 섹션 제거

• 파일: index.html:354-363, index.html:432-441
• containersSection, monitorSection HTML 제거

---

구현 완료

• 커밋: 9cd44a0 (2025-12-25)
• TDD 방식으로 진행 (Red → Green → Refactor)
• 브라우저 테스트 완료

---

교훈

서브메뉴 유지 로직

• 하위 메뉴 항목 클릭 시 서브메뉴가 닫히지 않도록 section.startsWith('system-') 조건 추가
• 사용자 경험 개선: 서버별 정보 탐색 시 메뉴 구조 유지

HTML 섹션 누락 문제

• JavaScript에서 섹션을 찾지 못해 에러 발생 (Cannot set properties of null)
• 원인: HTML에 섹션 추가 후 배포되지 않음
• 교훈: 코드 변경 후 실제 배포 파일 확인 및 브라우저 직접 테스트 필수

메뉴 이름 명확화

• "통합 컨테이너" → "전체 컨테이너" (의미 명확화)
• 서버 역할 표시: "51123 서버 (인프라/게이트웨이)", "51124 서버 (로빙/스킬)"
• 사용자 혼란 방지: 메뉴 이름이 기능을 명확히 표현해야 함

---

참고

• 계획 문서: journey/plans/archive/251225_admin_dashboard_navigation_structure_refactoring.md