guardia-manager/.claude/skills/manager-ui/SKILL.md

name	description
manager-ui	GUARDiA 관리자 시스템 React UI를 구현하는 스킬. 네이버 클라우드 콘솔(NCloud Console) 디자인 패턴을 참조하여 대시보드, CMDB, 배포 관리, 사용자 관리 등 관리자 화면을 구축한다. 트리거: 관리자 UI 구현, 페이지/컴포넌트 작성, 화면 설계, 'M-0X 화면', 네이버 클라우드 스타일 적용 요청 시.

GUARDiA Manager UI 구현 스킬

기술 스택

{
  "framework": "React 18 + TypeScript + Vite",
  "styling": "CSS Modules (Tailwind 선택 가능)",
  "routing": "react-router-dom v6",
  "state": "useState/useContext (Redux 금지 — 과함)",
  "http": "axios 또는 fetch API",
  "charts": "recharts (경량)",
  "icons": "lucide-react"
}

네이버 클라우드 콘솔 디자인 패턴

자세한 컴포넌트 패턴은 references/ncloud-patterns.md 참조.

필수 레이아웃 구조

┌─────────────────────────────────────────────────────────┐
│  GNB (Global Navigation Bar) — 60px 고정                 │
│  [GUARDiA Manager] [서비스 검색] ─────── [알림] [계정]    │
├──────────────┬──────────────────────────────────────────┤
│              │                                          │
│  사이드바     │  콘텐츠 영역                              │
│  (220px)     │  ┌─ 브레드크럼 ──────────────────────┐   │
│              │  │ Home > 서버 > 서버 목록             │   │
│  ▸ 대시보드  │  └─────────────────────────────────────┘  │
│  ▾ 인프라    │  ┌─ 페이지 타이틀 + 액션 버튼 ─────────┐  │
│    서버 관리 │  │ 서버 목록          [+서버 추가]     │  │
│    CMDB     │  └─────────────────────────────────────┘  │
│  ▾ 배포     │  ┌─ 콘텐츠 ────────────────────────────┐  │
│    배포 이력 │  │ 테이블 / 카드 / 폼                   │  │
│  ▾ 보안     │  └─────────────────────────────────────┘  │
│    API Keys │                                           │
│    감사 로그 │                                           │
│  ▾ 시스템   │                                           │
│    설정     │                                           │
│    LLM 관리 │                                           │
└──────────────┴──────────────────────────────────────────┘

색상 시스템 (GUARDiA 브랜드 + NCloud 패턴)

:root {
  /* GUARDiA 브랜드 (NCloud의 #03C75A 대신 적용) */
  --brand-primary: #1a3a6b;
  --brand-accent:  #4f6ef7;
  --brand-light:   #e8ecff;

  /* NCloud 콘솔 참조 레이아웃 색상 */
  --gnb-bg:        #1a1d2e;       /* 상단 바 */
  --sidebar-bg:    #f5f7fa;       /* 사이드바 */
  --sidebar-hover: #eaeef5;
  --content-bg:    #f0f2f5;       /* 콘텐츠 배경 */
  --card-bg:       #ffffff;
  --border:        #e2e8f0;

  /* 상태 색상 (NCloud 리소스 상태 배지와 동일) */
  --status-running: #00c853;      /* 실행중 */
  --status-stopped: #9e9e9e;      /* 중지 */
  --status-error:   #f44336;      /* 오류 */
  --status-pending: #ff9800;      /* 진행중 */

  /* 텍스트 */
  --text-primary:   #1e293b;
  --text-secondary: #64748b;
  --text-muted:     #94a3b8;
}

리소스 상태 배지 (NCloud 스타일)

// StatusBadge.tsx — NCloud 콘솔의 상태 표시와 동일한 패턴
type Status = 'running' | 'stopped' | 'error' | 'pending' | 'creating';
const STATUS_MAP = {
  running:  { label: '실행중',  color: 'var(--status-running)', dot: true },
  stopped:  { label: '중지',    color: 'var(--status-stopped)', dot: true },
  error:    { label: '오류',    color: 'var(--status-error)',   dot: true },
  pending:  { label: '진행중',  color: 'var(--status-pending)', dot: true },
  creating: { label: '생성중',  color: 'var(--status-pending)', dot: true },
};

데이터 테이블 (NCloud 리소스 목록 스타일)

NCloud 콘솔의 리소스 목록과 동일한 패턴:

• 체크박스 선택 (벌크 액션)
• 상단 검색 + 필터
• 컬럼 헤더 정렬
• 페이지네이션 또는 무한 스크롤
• 행 클릭 → 상세 슬라이드 패널 (모달 아님)

자세한 컴포넌트 코드: references/ncloud-patterns.md 참조

프로젝트 구조

frontend/
├── src/
│   ├── App.tsx
│   ├── main.tsx
│   ├── layouts/
│   │   ├── AppLayout.tsx        ← GNB + 사이드바 + 콘텐츠
│   │   └── AuthLayout.tsx       ← 로그인 페이지 레이아웃
│   ├── pages/
│   │   ├── Dashboard.tsx        ← M-01 통합 대시보드
│   │   ├── Users.tsx            ← M-02 사용자 관리
│   │   ├── Servers.tsx          ← M-03 서버 자산 목록
│   │   ├── ServerDetail.tsx     ← M-03 서버 상세
│   │   ├── Deployments.tsx      ← M-04 배포 이력
│   │   ├── ApiKeys.tsx          ← M-05 API Key 관리
│   │   ├── AuditLog.tsx         ← M-05 감사 로그
│   │   ├── LLMManager.tsx       ← M-06 LLM 관리
│   │   └── SystemConfig.tsx     ← M-07 시스템 설정
│   ├── components/
│   │   ├── layout/
│   │   │   ├── GNB.tsx
│   │   │   ├── Sidebar.tsx
│   │   │   └── Breadcrumb.tsx
│   │   ├── common/
│   │   │   ├── DataTable.tsx    ← NCloud 스타일 테이블
│   │   │   ├── StatusBadge.tsx  ← 상태 배지
│   │   │   ├── ResourceCard.tsx ← 서버/서비스 카드
│   │   │   ├── SlidePanel.tsx   ← 우측 슬라이드 패널
│   │   │   ├── StatCard.tsx     ← 통계 카드
│   │   │   └── EmptyState.tsx
│   │   └── dashboard/
│   │       ├── SRStatusChart.tsx
│   │       ├── ServerStatusGrid.tsx
│   │       └── DeployTimeline.tsx
│   ├── hooks/
│   │   ├── useAuth.ts           ← JWT 인증 훅
│   │   ├── useGuardiaApi.ts     ← GUARDiA ITSM API 훅
│   │   └── useManagerApi.ts     ← Manager Backend API 훅
│   └── api/
│       ├── guardiaClient.ts     ← GUARDiA ITSM axios 인스턴스
│       ├── managerClient.ts     ← Manager Backend axios 인스턴스
│       └── types.ts             ← TypeScript 타입 정의
├── index.html
├── vite.config.ts
└── package.json

M-01 대시보드 구현 가이드

NCloud 콘솔의 "서비스 요약" 화면을 참조한 통합 대시보드:

┌── 상태 카드 행 ──────────────────────────────────────────────┐
│  [SR 현황]     [인시던트]    [서버 수]     [SLA 달성률]         │
│  총 24건       긴급 2건      12대          98.7%               │
│  진행중 8 ↗    중   1건      실행중 10     ▲ 0.3%              │
└──────────────────────────────────────────────────────────────┘
┌── SR 추이 차트 ────────┐  ┌── 서버 상태 그리드 ───────────────┐
│  7일 SR 생성/완료 추이  │  │  web-01 ● web-02 ● db-01 ●       │
│  [꺾은선 그래프]        │  │  was-01 ● was-02 ● ksb-01 ●      │
└────────────────────────┘  └──────────────────────────────────┘
┌── 최근 배포 이력 ──────────────────────────────────────────────┐
│  [시간]  [저장소]         [커밋]      [상태]    [담당자]         │
│  5분 전  zio/zioinfo-web  abc1234     ✅ 성공    CI Bot         │
└──────────────────────────────────────────────────────────────┘

환경변수 설정

# frontend/.env
VITE_GUARDIA_API=http://zioinfo.co.kr:8001
VITE_MANAGER_API=http://localhost:8002
VITE_GITEA_API=http://zioinfo.co.kr:3000/api/v1
VITE_APP_TITLE=GUARDiA Manager