zioinfo-mail/manager/.claude/skills/manager-roadmap/SKILL.md

name	description
manager-roadmap	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 스타일)

// 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에 항목만 추가:

// 기존 메뉴 구조에 추가
{ 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가 프록시할 경우:

# 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 문제가 있거나 토큰 변환이 필요할 때만 사용한다.