docs: Admin Dashboard 네비게이션 구조 리팩토링 구현 완료 문서 작성
This commit is contained in:
parent
216c1cf361
commit
6773d33f94
@ -1,78 +0,0 @@
|
||||
# Admin Dashboard 네비게이션 구조 리팩토링 계획
|
||||
|
||||
**날짜**: 2025-12-25
|
||||
**목표**: 시스템 메뉴 하위 구조 도입으로 정보 계층 명확화 및 서버별 관리 구조 개선
|
||||
|
||||
---
|
||||
|
||||
## 현재 상태
|
||||
|
||||
### 메뉴 구조 (7개 평면 메뉴)
|
||||
- 시스템: CPU/메모리/디스크, 서비스 상태, Nginx 상태, 메트릭 그래프
|
||||
- 컨테이너: Docker 컨테이너 목록
|
||||
- 로그: 시스템 로그, Git 활동
|
||||
- 사용자/팀: 사용자/팀 관리
|
||||
- 로빙: 로빙 관리
|
||||
- 51124 모니터: 51124 서버 서비스 상태
|
||||
- 로빙 일기: 일기 목록/상세
|
||||
|
||||
### 문제점
|
||||
- 시스템과 컨테이너가 분리되어 혼란 (둘 다 서버 모니터링 관련)
|
||||
- 시스템 섹션에 모든 정보가 한 화면에 집중되어 복잡함
|
||||
- 서버별(51123/51124) 구분이 명확하지 않음
|
||||
|
||||
---
|
||||
|
||||
## 개선 계획
|
||||
|
||||
### 1. 시스템 메뉴 하위 구조 도입
|
||||
|
||||
**시스템 메뉴 (전체 대시보드)**: 요약 정보만 표시
|
||||
- CPU/메모리/디스크/업타임 요약 카드
|
||||
- 서비스 상태 요약 (51123/51124 통합)
|
||||
- 메트릭 그래프
|
||||
|
||||
**하위 메뉴 4개**:
|
||||
- **51123 서버**: 컨테이너 목록(admin-dashboard-backend/goosefarm-app/robeing-gateway/auth-server/auth-redis/opensearch), 시스템 서비스(nginx/Gitea/PostgreSQL), 포트 사용 현황
|
||||
- **51124 서버**: 서비스 목록(rb8001/rb10508/skill-email/robeing-monitor/ChromaDB), 포트 사용 현황
|
||||
- **통합 컨테이너**: 전체 컨테이너 목록, 재시작 기능
|
||||
- **통합 서비스**: 전체 서비스 상태, Nginx 설정
|
||||
|
||||
### 2. 네비게이션 구조 변경
|
||||
|
||||
**구현 방식**: 드롭다운 (호버 또는 클릭)
|
||||
- 시스템 메뉴 호버/클릭 시 하위 메뉴 표시
|
||||
- 서버별 역할 명시 (51123: 인프라/게이트웨이, 51124: 로빙/스킬)
|
||||
|
||||
### 3. 섹션 전환 로직 확장
|
||||
|
||||
**data-section 확장**:
|
||||
- `system`: 전체 대시보드
|
||||
- `system-51123`: 51123 서버 상세
|
||||
- `system-51124`: 51124 서버 상세
|
||||
- `system-containers`: 통합 컨테이너
|
||||
- `system-services`: 통합 서비스
|
||||
|
||||
### 4. 기존 섹션 통합
|
||||
|
||||
- 컨테이너 메뉴 → `system-containers` 하위로 이동
|
||||
- 51124 모니터 → `system-51124` 하위로 이동
|
||||
- 메인 네비게이션에서 제거하여 서버별 관리 구조 명확화
|
||||
|
||||
---
|
||||
|
||||
## 구현 단계
|
||||
|
||||
1. 네비게이션 HTML 구조 변경 (하위 메뉴 추가)
|
||||
2. CSS 스타일 추가 (드롭다운/아코디언)
|
||||
3. JavaScript 섹션 전환 로직 확장
|
||||
4. 기존 컨테이너/51124 모니터 섹션 통합
|
||||
5. 백엔드 API 엔드포인트 정리 (서버별 분리)
|
||||
|
||||
---
|
||||
|
||||
## 참고
|
||||
|
||||
- `251204_admin_dashboard_business_integration.md`: 비즈니스 통합 계획
|
||||
- `310_전체_시스템_구조_컨테이너와_마이크로서비스.md`: 서버 구성 정보
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
# Admin Dashboard 네비게이션 구조 리팩토링 계획 (구현 완료)
|
||||
|
||||
**날짜**: 2025-12-25
|
||||
**상태**: 구현 완료
|
||||
|
||||
---
|
||||
|
||||
## 계획 요약
|
||||
|
||||
시스템 메뉴 하위 구조 도입으로 정보 계층 명확화 및 서버별 관리 구조 개선
|
||||
|
||||
### 주요 변경사항
|
||||
- 시스템 메뉴 하위 4개 메뉴 추가 (51123 서버, 51124 서버, 전체 컨테이너, 전체 서비스)
|
||||
- 기존 컨테이너/51124 모니터 메뉴 제거 및 통합
|
||||
- 포트 사용 현황, 컨테이너 재시작 기능 추가
|
||||
|
||||
---
|
||||
|
||||
## 구현 완료
|
||||
|
||||
→ 상세: `troubleshooting/251225_admin_dashboard_navigation_structure_refactoring.md`
|
||||
|
||||
---
|
||||
|
||||
## 참고
|
||||
|
||||
- `251204_admin_dashboard_business_integration.md`: 비즈니스 통합 계획
|
||||
- `310_전체_시스템_구조_컨테이너와_마이크로서비스.md`: 서버 구성 정보
|
||||
|
||||
@ -0,0 +1,73 @@
|
||||
# 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`
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user