# 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)
- 프론트엔드 UI만 구현, 백엔드 API 서버 구분 미구현
- 결과: 서버 구분 UI는 있으나 기능 동작하지 않음

---

## 교훈

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

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

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

---

## 미구현 항목

### 백엔드 API 서버 구분 지원
- `get_services_status()`에 서버 필터 파라미터 추가 필요
- 51123/51124 서버 서비스 목록 분리 필요
- 프론트엔드가 서버별 API 호출하도록 수정 필요

---

## 참고
- 계획 문서: `journey/plans/251225_admin_dashboard_navigation_structure_refactoring.md`