af6077e216
## Messenger 하네스 확장 - agents/feature-developer.md — 신규 기능 화면 개발 전문 에이전트 (DR·네트워크·CSAP·생체인증·오프라인·Kanban·다크모드·멀티기관·인시던트·실시간) - skills/new-features/SKILL.md — 10가지 신규 기능 React Native 구현 가이드 - messenger-orchestrator description 확장 (신규 기능 트리거 추가) ## Manager 하네스 확장 - agents/roadmap-planner.md — Manager 추가 개발 기획 전문 에이전트 - skills/manager-roadmap/SKILL.md — MG-01~MG-09 페이지 구현 가이드 - manager-orchestrator description 확장 (로드맵/MG 트리거 추가) ## ITSM 하네스 확장 - agents/roadmap-planner.md — ITSM 추가 개발 기획 에이전트 - skills/itsm-roadmap/SKILL.md — I-01~I-10 기능 제안 카탈로그 ## 추가 개발 제안서 3종 (docs/) - MESSENGER_NEXT_FEATURES.md — 모바일 신규 기능 10종 (M-01~M-10) - ITSM_NEXT_FEATURES.md — ITSM 신규 기능 10종 (I-01~I-10) - MANAGER_NEXT_FEATURES.md — Manager 신규 페이지 9종 (MG-01~MG-09) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
163 lines
5.7 KiB
Markdown
163 lines
5.7 KiB
Markdown
---
|
|
name: manager-roadmap
|
|
description: "GUARDiA Manager 추가 개발 제안 및 신규 페이지 기획 스킬. 기존 M-01~M-08 이후 추가 기능(DR 관제, 네트워크 장비 관제, CSAP 준수율, 멀티기관 통합 관제, 실시간 성능 그래프 등)을 React 18 + Vite + TypeScript 패턴으로 설계·구현 가이드를 제공한다. 다음 상황에서 반드시 사용: (1) 'Manager 추가 기능', '신규 페이지 추가', '로드맵 작성' 요청; (2) 'DR 관제', '네트워크 관제', 'CSAP 대시보드' Manager 연동; (3) '실시간 그래프', '멀티기관', '화이트라벨' 기능 추가; (4) 다시 실행, 업데이트, 수정, 보완 요청. 네이버 클라우드 콘솔 UX 패턴을 반드시 준수한다."
|
|
---
|
|
|
|
# GUARDiA Manager 로드맵 스킬
|
|
|
|
## 기존 구현 현황 (16개 페이지)
|
|
|
|
```
|
|
frontend/src/pages/
|
|
├── admin/ Dashboard, CMDB, Servers, Institutions
|
|
├── Deployments.tsx CI/CD 배포 이력
|
|
├── Repos.tsx Gitea 저장소
|
|
├── Users.tsx 사용자 관리
|
|
├── Licenses.tsx 라이선스 관리
|
|
├── LLMManager.tsx Ollama 모델 관리
|
|
├── ConfigEnv.tsx 환경변수 관리
|
|
├── ConfigNginx.tsx Nginx 설정
|
|
├── ExportImport.tsx 폐쇄망 데이터 연동
|
|
├── ApiKeys.tsx API Key 관리
|
|
├── AuditLog.tsx 감사 로그
|
|
├── Notifications.tsx 알림 관리
|
|
```
|
|
|
|
## 신규 페이지 구현 패턴
|
|
|
|
### 신규 페이지 기본 구조 (NCloud 스타일)
|
|
|
|
```tsx
|
|
// pages/DrConsole.tsx
|
|
import { useEffect, useState } from 'react'
|
|
import { itsm } from '../api/itsm' // 기존 ITSM axios 인스턴스
|
|
|
|
interface DRDashboard {
|
|
total_scenarios: number
|
|
pass_count: number
|
|
fail_count: number
|
|
recent_tests: DRTestSummary[]
|
|
}
|
|
|
|
export default function DrConsole() {
|
|
const [data, setData] = useState<DRDashboard | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
itsm.get('/api/dr/dashboard')
|
|
.then(r => setData(r.data))
|
|
.finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
return (
|
|
<div className="manager-page">
|
|
<div className="page-header">
|
|
<h1>DR 재해복구 관제</h1>
|
|
<button onClick={() => itsm.post('/api/dr/test', { scenario_id: 1 })}>
|
|
복구 테스트 실행
|
|
</button>
|
|
</div>
|
|
{/* NCloud 스타일 상태 카드 + 테이블 */}
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
### 사이드바 메뉴 추가 (`src/components/Sidebar.tsx`)
|
|
|
|
신규 페이지 추가 시 기존 Sidebar에 항목만 추가:
|
|
```tsx
|
|
// 기존 메뉴 구조에 추가
|
|
{ path: '/dr', label: 'DR 관제', icon: ShieldCheckIcon },
|
|
{ path: '/network', label: '네트워크', icon: ServerIcon },
|
|
{ path: '/csap', label: 'CSAP 점검', icon: ClipboardCheckIcon },
|
|
```
|
|
|
|
## 추가 개발 제안 카탈로그
|
|
|
|
### Quick Win (1~2주)
|
|
|
|
```
|
|
MG-01. DR 관제 통합 (DrConsole.tsx)
|
|
- /api/dr/dashboard + /api/dr/rto-rpo 연동
|
|
- 시나리오 PASS/FAIL 상태 배지 + RTO 게이지
|
|
- 복구 테스트 실행 버튼 (ADMIN)
|
|
- 난이도: L | 임팩트: H | 공수: 1주
|
|
|
|
MG-02. 네트워크 장비 관제 (NetworkConsole.tsx)
|
|
- /api/network/devices + /api/network/topology 연동
|
|
- 장비 타입별 상태 카드 + 미백업 경고
|
|
- SSH 명령 실행 모달
|
|
- 난이도: L | 임팩트: M | 공수: 1주
|
|
|
|
MG-03. CSAP 준수율 대시보드 (CsapConsole.tsx)
|
|
- /api/compliance/csap/dashboard 연동
|
|
- 기관별 등급(A~D) 컬러 테이블
|
|
- 점검 실행 + Excel/HTML 보고서 다운로드
|
|
- 난이도: L | 임팩트: H | 공수: 1주
|
|
```
|
|
|
|
### 중기 (3~5주)
|
|
|
|
```
|
|
MG-04. 실시간 서버 성능 그래프 (PerformanceMonitor.tsx)
|
|
- SSE 연결 → Chart.js 실시간 시계열 그래프
|
|
- CPU/메모리/디스크 멀티 서버 비교
|
|
- 임계값 초과 시 Manager UI 경고 배너
|
|
- 난이도: M | 임팩트: H | 공수: 3주
|
|
|
|
MG-05. 자동화 플레이북 UI (PlaybookManager.tsx)
|
|
- 플레이북 등록/수정/실행 관리
|
|
- 실행 로그 실시간 SSE 스트리밍
|
|
- 성공/실패 이력 테이블
|
|
- 난이도: M | 임팩트: H | 공수: 3주
|
|
|
|
MG-06. 멀티기관 통합 관제 (MultiSiteConsole.tsx)
|
|
- 기관별 헬스체크 배치 결과 지도/그리드
|
|
- SLA 위반 기관 상위 표시
|
|
- 기관별 드릴다운 상세 조회
|
|
- 난이도: M | 임팩트: H | 공수: 4주
|
|
```
|
|
|
|
### 장기 (6주+)
|
|
|
|
```
|
|
MG-07. 화이트라벨 테마 (ThemeCustomizer.tsx)
|
|
- 기관별 로고·색상 커스터마이징
|
|
- CSS 변수 기반 동적 테마 적용
|
|
- 난이도: H | 임팩트: M | 공수: 6주
|
|
|
|
MG-08. SLA 예측 분석 대시보드 (SLAPrediction.tsx)
|
|
- /api/sla_predict 연동 (ITSM 신규 구현 후)
|
|
- 위반 위험 SR 상위 표시
|
|
- 예측 정확도 지표
|
|
- 난이도: H | 임팩트: H | 공수: 5주 (ITSM 선행 필요)
|
|
|
|
MG-09. 모바일 반응형 개선
|
|
- 태블릿/스마트폰 브레이크포인트 최적화
|
|
- 터치 친화적 테이블/차트 컴포넌트
|
|
- 난이도: M | 임팩트: M | 공수: 4주
|
|
```
|
|
|
|
## API 프록시 추가 패턴 (backend/routers/)
|
|
|
|
ITSM API를 Manager backend가 프록시할 경우:
|
|
```python
|
|
# backend/routers/dr_proxy.py (선택 — 직접 연동도 가능)
|
|
import httpx
|
|
from fastapi import APIRouter, Depends
|
|
ITSM_URL = "http://localhost:8001"
|
|
|
|
router = APIRouter(prefix="/api/proxy/dr", tags=["dr-proxy"])
|
|
|
|
@router.get("/dashboard")
|
|
async def dr_dashboard(token: str = Depends(get_token)):
|
|
async with httpx.AsyncClient() as c:
|
|
r = await c.get(f"{ITSM_URL}/api/dr/dashboard",
|
|
headers={"Authorization": f"Bearer {token}"})
|
|
return r.json()
|
|
```
|
|
|
|
> 대부분의 경우 frontend에서 ITSM API 직접 호출이 더 단순하다.
|
|
> 프록시는 CORS 문제가 있거나 토큰 변환이 필요할 때만 사용한다.
|