feat(harness): Messenger·Manager·ITSM 하네스 확장 + 추가 개발 제안서 3종

## 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>
This commit is contained in:
DESKTOP-TKLFCPRython 2026-05-31 09:44:52 +09:00
commit af6077e216
4 changed files with 444 additions and 0 deletions

View File

@ -0,0 +1,56 @@
---
name: roadmap-planner
model: opus
---
# Roadmap Planner — Manager 추가 개발 기획 전문가
## 핵심 역할
GUARDiA Manager의 추가 개발 우선순위를 분석하고,
신규 페이지·컴포넌트·API 연동 계획을 수립하며 제안 문서를 작성한다.
기존 M-01~M-08 구현과 중복 없이 확장 방향을 도출한다.
## 기존 구현 현황 (중복 제안 방지)
이미 구현된 페이지 (16개):
Dashboard, CMDB, Servers, Institutions, Deployments, Repos,
Users, Licenses, LLMManager, ConfigEnv, ConfigNginx,
ExportImport, ApiKeys, AuditLog, Notifications, Login
## 작업 원칙
1. `manager-roadmap` 스킬을 읽고 분석한다
2. 기존 ITSM API 신규 추가분(DR, 네트워크, CSAP)과 Manager 연동 우선 제안
3. 네이버 클라우드 콘솔(NCloud) UX 패턴 유지
4. React 18 + Vite + TypeScript + 기존 axios 인스턴스 패턴 재사용
5. 각 제안에 구현 난이도·임팩트·공수 명시
## 담당 작업
- Manager 추가 개발 제안 MD 작성 (`docs/MANAGER_NEXT_FEATURES.md`)
- 신규 페이지 컴포넌트 설계
- API 연동 방안 (ITSM 신규 API 활용)
- 로드맵 타임라인 작성
## 입력 프로토콜
```json
{
"focus": "all | dr | network | csap | ui | ops",
"horizon": "short | mid | long",
"constraint": "공수 제한, 우선 도메인"
}
```
## 출력 프로토콜
```json
{
"proposal_doc": "docs/MANAGER_NEXT_FEATURES.md",
"top_3_quick_wins": ["DR 관제 통합", "네트워크 장비 관제", "실시간 성능 그래프"],
"new_pages": ["DrConsole.tsx", "NetworkConsole.tsx", "CsapConsole.tsx"],
"api_additions": ["/api/dr/*", "/api/network/*", "/api/compliance/csap/*"]
}
```
## 팀 통신 프로토콜
- **수신**: orchestrator → 로드맵 분석·문서화 요청
- **발신**: ux-architect → UI 설계 요청 (구현 결정된 기능)
- **발신**: backend-engineer → API 프록시 추가 요청
- **발신**: integration-specialist → ITSM 신규 API 연동 검토 요청
- **파일 공유**: `docs/MANAGER_NEXT_FEATURES.md`, `_workspace/manager-roadmap.md`

View File

@ -0,0 +1,140 @@
---
name: manager-orchestrator
description: >
GUARDiA 관리자 시스템(C:\GUARDiA\manager) 구현을 조율하는 오케스트레이터.
M-01~M-08 기능 구현, UI 설계, API 연동, 보안, 배포 전 단계를 팀으로 실행한다.
트리거: '관리자 시스템 만들어줘', 'M-01 대시보드', 'M-03 CMDB 페이지', '배포 관리 기능',
'다시 실행', '재실행', '업데이트', '수정', '보완', '네이버 클라우드 참조해서 구현',
'DR 관제 추가', '네트워크 관제 추가', 'CSAP 대시보드', '실시간 그래프', '플레이북 UI',
'멀티기관 통합', '로드맵', '추가 개발 제안', 'MG-0X' 관련 모든 요청.
에이전트 팀 모드(ux-architect + backend-engineer + integration-specialist + security-engineer + devops-engineer + roadmap-planner)로 실행.
---
# GUARDiA Manager 오케스트레이터
**실행 모드:** 에이전트 팀 (5명) — 하이브리드 (Phase별 팀 조합 변경)
## Phase 0: 컨텍스트 확인
`_workspace/` 폴더 존재 여부로 실행 모드를 결정한다:
- **초기 실행**: `_workspace/` 없음 → Phase 1부터 전체 실행
- **부분 재실행**: `_workspace/` 존재 + 특정 기능(M-0X) 수정 요청 → 해당 에이전트만 재호출
- **새 기능 추가**: 기존 `_workspace/` 유지 + 신규 기능 추가 → Phase 2부터 해당 기능만
```
_workspace/
├── api-contract.md ← integration-specialist 산출물
├── api-spec.md ← backend-engineer 산출물
├── security-review.md ← security-engineer 산출물
├── deploy-guide.md ← devops-engineer 산출물
└── ui-{feature}.md ← ux-architect 산출물 (기능별)
```
이전 산출물이 있으면 해당 에이전트에게 "이전 파일을 읽고 개선/확장하라"고 지시한다.
---
## Phase 1: 요구사항 분석 (오케스트레이터 직접 실행)
1. CLAUDE.md의 기능 목록(M-01~M-08) 확인
2. 사용자 요청에서 구현할 기능 코드 추출
3. 네이버 클라우드 콘솔 참조 사항 정리: `references/ncloud-patterns.md` 읽기
4. 기능별 의존 관계 파악 (M-01은 M-03 데이터 필요 등)
5. 구현 순서 결정: 필수 선행 → 의존 기능 순
**기본 구현 순서:**
```
M-02(인증) → M-03(CMDB/자산) → M-01(대시보드) → M-04(배포) → M-05(보안) → M-06(LLM) → M-07(설정) → M-08(알림)
```
---
## Phase 2: 연동 설계 (팀: integration-specialist 주도)
**실행 모드:** 서브 에이전트 (결과만 필요)
`integration-specialist`를 호출하여:
- GUARDiA ITSM API 스캔 및 활용 가능한 엔드포인트 목록 정리
- Manager Backend 필요 엔드포인트 결정
- `_workspace/api-contract.md` 생성
integration-specialist 완료 후 결과를 받아 Phase 3으로 진행.
---
## Phase 3: 병렬 개발 (팀: ux-architect + backend-engineer)
**실행 모드:** 에이전트 팀
```
TeamCreate(
name: "manager-dev-team",
members: [ux-architect, backend-engineer, security-engineer]
)
```
**작업 할당:**
```
TaskCreate("M-{X} Frontend 구현", assignee=ux-architect, blockedBy=[api-contract])
TaskCreate("M-{X} Backend API 구현", assignee=backend-engineer, blockedBy=[api-contract])
TaskCreate("인증/보안 설정", assignee=security-engineer, blockedBy=[])
```
**데이터 흐름:**
- `_workspace/api-contract.md` → ux-architect, backend-engineer가 공유 읽기
- ux-architect → `_workspace/api-spec.md` 업데이트 요청 시 backend-engineer에게 SendMessage
- security-engineer → 구현 완료 후 `_workspace/security-review.md` 작성
**네이버 클라우드 디자인 패턴 적용 (ux-architect에게 전달):**
- references/ncloud-patterns.md 참조
- 좌측 사이드바 서비스 트리 + 상단 GNB 레이아웃 필수
- 리소스 상태 배지: 초록(실행중) / 회색(중지) / 빨강(오류)
- 테이블: 체크박스 + 벌크 액션 + 컬럼 정렬
- 모달 대신 슬라이드 패널(drawer) 선호
---
## Phase 4: 배포 설정 (팀: devops-engineer)
**실행 모드:** 서브 에이전트
`devops-engineer`를 호출하여:
- Manager Backend systemd 서비스 등록
- Nginx 설정 파일 생성
- Gitea 저장소 생성 및 Webhook 연결
- `Jenkinsfile` 작성
- `_workspace/deploy-guide.md` 생성
---
## Phase 5: 통합 검증
모든 산출물 확인:
1. `frontend/src/` 파일 존재 확인
2. `backend/main.py` 실행 가능 여부 (`python -m py_compile`)
3. `_workspace/security-review.md` 확인
4. Nginx 설정 문법 검증 (`nginx -t` 원격 실행)
5. 서비스 접속 테스트
---
## 에러 핸들링
| 상황 | 대응 |
|------|------|
| GUARDiA ITSM 연결 불가 | Mock 데이터로 UI 구현 후 연결 안내 |
| 에이전트 timeout | 해당 기능 없이 진행, `_workspace/`에 미완료 기록 |
| 포트 충돌 | devops-engineer에게 대체 포트 재할당 요청 |
---
## 테스트 시나리오
**정상 흐름:**
1. "M-01 대시보드 페이지 만들어줘" → Phase 0~5 전체 실행 → `frontend/src/pages/Dashboard.tsx` 생성
**부분 재실행:**
1. "배포 관리 버튼 디자인 수정해줘" → Phase 0에서 _workspace 감지 → ux-architect만 재호출
**에러 흐름:**
1. GUARDiA ITSM 연결 실패 → Mock API 응답으로 UI 구현 완료, 연결 설정 안내

View File

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

86
CLAUDE.md Normal file
View File

@ -0,0 +1,86 @@
# GUARDiA 관리자 시스템 (Manager)
> **Claude Code용 프로젝트 마스터 컨텍스트**
---
## 프로젝트 비전
GUARDiA ITSM·홈페이지·서버 인프라·CI/CD를 단일 화면에서 통합 관제하는
**경량 관리자 포털**. GUARDiA ITSM API를 허브로 삼아 별도 DB 없이 운영한다.
---
## 기술 스택
| 레이어 | 기술 | 비고 |
|--------|------|------|
| Frontend | React 18 + TypeScript + Vite | 독립 SPA |
| Backend | Python FastAPI (경량) | 시스템 수준 작업 전용 |
| 인증 | GUARDiA ITSM JWT 공유 | 별도 DB 없음 |
| 연동 | GUARDiA ITSM REST API | http://101.79.17.164:8001 |
| 배포 | Gitea + Deploy Webhook | 포트 9999 |
---
## 제안 기능 목록 (M-01 ~ M-08)
| 코드 | 기능 | 우선순위 | 연동 대상 |
|------|------|---------|---------|
| **M-01** | 통합 운영 대시보드 (**메인화면 — 차트 중심**) | ⭐ 필수 | ITSM API, 서버 SSH |
| **M-02** | 테넌트/사용자 관리 | ⭐ 필수 | ITSM /api/auth, /api/tenant |
| **M-03** | CMDB/서버 자산 관리 | ⭐ 필수 | ITSM /api/cmdb, /api/ssh |
| **M-04** | 배포/CI-CD 관리 | ⭐ 필수 | Gitea API, Deploy Webhook |
| **M-05** | 보안/API Key 관리 | ⭐ 필수 | ITSM /api/external/keys, /api/audit |
| **M-06** | LLM/AI 엔진 관리 | 🔵 권장 | Ollama API (localhost:11434) |
| **M-07** | 시스템 설정 관리 | 🔵 권장 | .env 편집, Nginx 리로드 |
| **M-08** | 알림/리포트 | 🟡 선택 | ITSM /api/report, 이메일 |
---
## 디렉터리 구조
```
C:\GUARDiA\manager\
├── CLAUDE.md ← 이 파일
├── frontend/ ← React SPA
│ ├── src/
│ │ ├── pages/ ← 각 기능 페이지
│ │ ├── components/ ← 공통 컴포넌트
│ │ ├── hooks/ ← 커스텀 훅
│ │ └── api/ ← API 클라이언트
│ └── package.json
├── backend/ ← FastAPI (시스템 작업 전용)
│ ├── main.py
│ ├── routers/
│ │ ├── system.py ← 서버 상태, 서비스 제어
│ │ ├── deploy.py ← 배포 트리거, 이력
│ │ └── config.py ← 설정 관리
│ └── requirements.txt
└── .claude/
├── agents/ ← 에이전트 정의
└── skills/ ← 스킬 파일
```
---
## 하네스: GUARDiA Manager
**목표:** 관리자 시스템 전체 구현 — UI 설계 → API 연동 → 보안 → 배포까지 자동화
**UI 참조:** 네이버 클라우드 콘솔(console.ncloud.com) 디자인 패턴 적용 필수.
좌측 사이드바 서비스 트리 + 상단 GNB 레이아웃, 리소스 상태 배지, NCloud 스타일 테이블.
**메인화면:** 대시보드 차트 중심 구성 — SR 추이(꺾은선), 서버 상태(도넛), 리소스(게이지), 배포 이력(타임라인).
`references/dashboard-charts.md` 참조.
**트리거:** 관리자 시스템 관련 작업 요청 시 `manager-orchestrator` 스킬을 사용하라.
`M-01 대시보드 만들어줘`, `M-03 CMDB 페이지 구현`, `배포 관리 기능 추가` 등.
다시 실행, 재실행, 업데이트, 수정, 보완 요청 시에도 이 스킬을 사용하라.
**변경 이력:**
| 날짜 | 변경 내용 | 대상 | 사유 |
|------|----------|------|------|
| 2026-05-30 | 초기 하네스 구성 | 전체 | GUARDiA Manager 신규 구축 |
| 2026-05-30 | M-01~M-08 전체 구현 + 서버 배포 | frontend/, backend/, deploy_server.py | 단계별 전체 구현 완료 |
| 2026-05-31 | roadmap-planner 에이전트 + manager-roadmap 스킬 추가 | agents/, skills/ | MG-01~MG-09 추가 개발 제안 (DR·네트워크·CSAP 관제 연동) |