commit af6077e2167486b94f39008d5cd1afe3244f7a21 Author: DESKTOP-TKLFCPRython Date: Sun May 31 09:44:52 2026 +0900 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 diff --git a/.claude/agents/roadmap-planner.md b/.claude/agents/roadmap-planner.md new file mode 100644 index 0000000..12a9167 --- /dev/null +++ b/.claude/agents/roadmap-planner.md @@ -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` diff --git a/.claude/skills/manager-orchestrator/SKILL.md b/.claude/skills/manager-orchestrator/SKILL.md new file mode 100644 index 0000000..aed8bb2 --- /dev/null +++ b/.claude/skills/manager-orchestrator/SKILL.md @@ -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 구현 완료, 연결 설정 안내 diff --git a/.claude/skills/manager-roadmap/SKILL.md b/.claude/skills/manager-roadmap/SKILL.md new file mode 100644 index 0000000..f391f58 --- /dev/null +++ b/.claude/skills/manager-roadmap/SKILL.md @@ -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(null) + const [loading, setLoading] = useState(true) + + useEffect(() => { + itsm.get('/api/dr/dashboard') + .then(r => setData(r.data)) + .finally(() => setLoading(false)) + }, []) + + return ( +
+
+

DR 재해복구 관제

+ +
+ {/* NCloud 스타일 상태 카드 + 테이블 */} +
+ ) +} +``` + +### 사이드바 메뉴 추가 (`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 문제가 있거나 토큰 변환이 필요할 때만 사용한다. diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..2b2e0d6 --- /dev/null +++ b/CLAUDE.md @@ -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 관제 연동) |