10cc76d6e6
- 37개 파일 IP → zioinfo.co.kr 치환 (소스/매뉴얼/설정/하네스) - Manager DrConsole/NetworkConsole/CsapConsole 빌드 + /var/www/manager/ 배포 - 테스트: Manager HTTP 200, ITSM 신규 API 7개 전체 200 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
190 lines
9.1 KiB
Markdown
190 lines
9.1 KiB
Markdown
---
|
|
name: manager-ui
|
|
description: >
|
|
GUARDiA 관리자 시스템 React UI를 구현하는 스킬.
|
|
네이버 클라우드 콘솔(NCloud Console) 디자인 패턴을 참조하여
|
|
대시보드, CMDB, 배포 관리, 사용자 관리 등 관리자 화면을 구축한다.
|
|
트리거: 관리자 UI 구현, 페이지/컴포넌트 작성, 화면 설계, 'M-0X 화면',
|
|
네이버 클라우드 스타일 적용 요청 시.
|
|
---
|
|
|
|
# GUARDiA Manager UI 구현 스킬
|
|
|
|
## 기술 스택
|
|
|
|
```json
|
|
{
|
|
"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 패턴)
|
|
|
|
```css
|
|
: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 스타일)
|
|
|
|
```tsx
|
|
// 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 │
|
|
└──────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
## 환경변수 설정
|
|
|
|
```env
|
|
# 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
|
|
```
|