feat(design-harness): GUARDiA ITSM+Manager UI overhaul harness

Agents: - itsm-ui-refactor: dark theme CSS token overhaul (navy+cyan) - manager-ui-refactor: light theme React component styling Skills: - guardia-design-orchestrator: parallel pipeline orchestrator - itsm-design-overhaul: style.css token/sidebar/card/button/table guide - manager-design-overhaul: Sidebar/GNB/StatCard/DataTable/Dashboard guide Reference: C:/GUARDiA/screenshot (Variant design, #003366/#005A8C/#00A0C8) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-31 19:50:58 +09:00 · 2026-05-31 19:50:58 +09:00 · 034301d3f2
commit 034301d3f2
parent f3857e1a2c
6 changed files with 489 additions and 0 deletions
--- a/.claude/agents/itsm-ui-refactor.md
+++ b/.claude/agents/itsm-ui-refactor.md
@ -0,0 +1,37 @@
+---
+name: itsm-ui-refactor
+description: "GUARDiA ITSM UI 개편 에이전트. itsm/static/style.css 및 app.js를 Variant 스타일(C:/GUARDiA/screenshot 참조)로 개편. 다크 테마 유지하면서 색상 토큰·카드·사이드바·버튼·테이블을 현대화."
+model: opus
+---
+
+# ITSM UI Refactor Agent
+
+## 대상 파일
+- `itsm/static/style.css` — 전체 다크 테마 CSS
+- `itsm/static/login.css` — 로그인 페이지
+- `itsm/static/app.js` — 동적 UI 생성 코드
+
+## Variant 스타일 적용 원칙
+
+### 색상 토큰 (screenshot 참조)
+```css
+/* 기존 → 변경 */
+--primary:     #4f8ef7 → #005A8C   /* 미드블루 */
+--accent:      #818cf8 → #00A0C8   /* 시안 */
+--main-bg:     #0f172a → #001a33   /* 딥네이비 배경 */
+--card-bg:     #1e293b → #0d2647   /* 카드 배경 */
+--sidebar-bg:  #1a1d3e → #002040   /* 사이드바 */
+--border:      #334155 → rgba(0,160,200,.15) /* 시안 계열 테두리 */
+```
+
+### 개편 우선순위
+1. **사이드바**: 배경 딥네이비, 활성 항목 시안 좌측 바, 아이콘 정렬
+2. **카드**: 그림자 개선 (`box-shadow: 0 4px 20px rgba(0,90,140,.2)`), 반경 12px
+3. **버튼**: Primary → 시안(#00A0C8), 둥근 radius
+4. **테이블**: 헤더 배경 딥네이비, 호버 시안 계열
+5. **대시보드 통계 카드**: 상단 색상 바 (시안)
+6. **로그인 페이지**: 다크 배경 + 중앙 카드 + 로고
+
+## 팀 통신
+- 수신: guardia-design-orchestrator
+- 발신: visual-qa-tester (before/after 캡처 요청)
--- a/.claude/agents/manager-ui-refactor.md
+++ b/.claude/agents/manager-ui-refactor.md
@ -0,0 +1,43 @@
+---
+name: manager-ui-refactor
+description: "GUARDiA Manager UI 개편 에이전트. manager/frontend/src/ React+TypeScript 컴포넌트를 Variant 스타일(C:/GUARDiA/screenshot 참조)로 개편. 라이트 테마 유지, NCloud 콘솔 패턴 강화."
+model: opus
+---
+
+# Manager UI Refactor Agent
+
+## 대상 파일
+- `manager/frontend/src/components/layout/Sidebar.tsx`
+- `manager/frontend/src/components/layout/GNB.tsx`
+- `manager/frontend/src/components/common/StatCard.tsx`
+- `manager/frontend/src/components/common/DataTable.tsx`
+- `manager/frontend/src/pages/Dashboard.tsx`
+- CSS-in-JS 스타일 전반
+
+## Variant 스타일 적용 원칙
+
+### 색상 (screenshot 기준)
+```
+Primary: #003366 (딥네이비)
+Accent:  #00A0C8 (시안)
+BG:      #F8FAFC (라이트 그레이)
+Card:    #FFFFFF + shadow
+Border:  #E2E8F0
+```
+
+### 개편 우선순위
+1. **Sidebar**: 활성 항목 시안 좌측 바 + 네이비 텍스트, 그룹 헤더 개선
+2. **GNB**: 화이트 배경 + 네이비 텍스트 + 시안 포인트
+3. **StatCard**: 상단 시안 바 + 변화율 표시, screenshot9 카드 스타일
+4. **Dashboard 레이아웃**: 3열 그리드, 카드 반경 12px, 그림자 개선
+5. **DataTable**: 헤더 딥네이비, 호버 연파랑, 페이지네이션 시안
+6. **Button**: 둥근 radius, 시안 primary / 네이비 secondary
+
+## screenshot 핵심 참조
+- screenshot9: 3×2 서비스 카드 (연파랑 아이콘 박스 + 딥네이비 텍스트)
+- screenshot10: 히어로 + 화이트 헤더 패턴
+- screenshot11: 파트너 로고 바 + 섹션 헤딩 스타일
+
+## 팀 통신
+- 수신: guardia-design-orchestrator
+- 발신: visual-qa-tester
--- a/.claude/skills/guardia-design-orchestrator/SKILL.md
+++ b/.claude/skills/guardia-design-orchestrator/SKILL.md
@ -0,0 +1,118 @@
+---
+name: guardia-design-orchestrator
+description: "GUARDiA ITSM + Manager UI 전면 디자인 개편 오케스트레이터. C:/GUARDiA/screenshot(Variant 스타일) 기준으로 ITSM 다크테마 + Manager 라이트테마를 동시에 개편하고 Playwright MCP로 Before/After 검증. 다음 상황에서 반드시 사용: (1) 'ITSM 디자인 바꿔줘', 'Manager UI 개편', 'GUARDiA 디자인 전면 개편'; (2) screenshot 스타일 적용; (3) Before/After 시각적 QA; (4) 다시 실행, 업데이트, 수정, 보완."
+---
+
+# GUARDiA 디자인 개편 오케스트레이터
+
+**실행 모드:** 병렬 서브에이전트 — itsm-ui-refactor + manager-ui-refactor 동시 실행
+
+---
+
+## 레퍼런스 스크린샷
+
+```
+C:\GUARDiA\screenshot\
+├── screenshot1.png   — 히어로 + 화이트헤더 + 로고
+├── screenshot2.png   — 서비스 섹션 3열 카드
+├── screenshot3.png   — 통계 + 다크CTA 카드
+├── screenshot5.png   — 포트폴리오 (다크네이비 배경)
+├── screenshot8.png   — 아이콘 색상 팔레트 (#003366 #005A8C #00A0C8)
+├── screenshot9.png   — 3×2 서비스 카드 (연파랑 아이콘박스)
+├── screenshot10.png  — 히어로 (라이트 배경 + 다크 텍스트)
+└── screenshot11.png  — 화이트 헤더 + 파트너 바
+```
+
+**핵심 색상 (screenshot8):**
+- `#003366` 딥네이비 (Primary)
+- `#005A8C` 미드블루 (Secondary)
+- `#00A0C8` 시안 (Accent/Point)
+
+---
+
+## Phase 0: 컨텍스트 확인
+
+- `itsm/static/style.css` 읽기 → 기존 CSS 변수 파악
+- `manager/frontend/src/components/layout/Sidebar.tsx` 읽기 → 현재 구조 파악
+- Before 스크린샷 캡처 (Playwright MCP):
+  - `https://zioinfo.co.kr:8443` — ITSM 로그인 + 대시보드
+  - `https://zioinfo.co.kr:8090` — Manager 대시보드
+
+---
+
+## Phase 1: ITSM 개편 (itsm-ui-refactor)
+
+`itsm-design-overhaul` 스킬 참조.
+
+**작업 순서:**
+```
+1. itsm/static/style.css — CSS 변수 전체 교체
+2. 사이드바 스타일 업데이트
+3. 카드·버튼·테이블 스타일
+4. itsm/static/login.css — 로그인 페이지
+5. 배포: rsync → systemctl restart guardia
+```
+
+---
+
+## Phase 2: Manager 개편 (manager-ui-refactor)
+
+`manager-design-overhaul` 스킬 참조.
+
+**작업 순서:**
+```
+1. manager/frontend/src/ CSS 변수 추가
+2. Sidebar.tsx 스타일 업데이트
+3. GNB.tsx 화이트 헤더
+4. StatCard.tsx 시안 바 + 아이콘박스
+5. DataTable.tsx 헤더 네이비
+6. Dashboard.tsx 레이아웃
+7. npm run build → /var/www/manager/ 배포
+```
+
+---
+
+## Phase 3: 시각적 QA (visual-qa-tester)
+
+Playwright MCP로 After 캡처 + Before 비교.
+
+```
+After 캡처:
+- ITSM: 로그인 / 대시보드 / SR 목록 / 인시던트
+- Manager: 대시보드 / 서버 목록 / 스크랩핑 관리
+
+검증:
+□ 색상 토큰 준수 (#003366 / #00A0C8)
+□ 카드 그림자·반경 일관성
+□ 테이블 헤더 스타일
+□ 반응형 768px
+□ 로그인 페이지
+```
+
+---
+
+## 배포 스크립트
+
+```python
+# C:\GUARDiA\deploy_itsm_design.py (ITSM)
+# C:\GUARDiA\deploy_manager_design.py (Manager)
+# SSH → 파일 업로드 → systemctl restart
+```
+
+---
+
+## 테스트 시나리오
+
+**정상:** style.css 변수 교체 → ITSM 재시작 → 시안 색상 적용 확인
+**에러:** CSS 변수 누락 → fallback 색상으로 표시 → 변수명 확인
+
+---
+
+## should-trigger
+
+- "ITSM 디자인 바꿔줘"
+- "Manager UI screenshot 스타일로"
+- "GUARDiA 전체 디자인 개편"
+- "ITSM 색상 변경"
+- "관리자 시스템 UI 개선"
+- "before/after 비교 스크린샷"
--- a/.claude/skills/itsm-design-overhaul/SKILL.md
+++ b/.claude/skills/itsm-design-overhaul/SKILL.md
@ -0,0 +1,140 @@
+---
+name: itsm-design-overhaul
+description: "GUARDiA ITSM UI(itsm/static/) Variant 스타일 개편 스킬. C:/GUARDiA/screenshot 기준 색상·카드·사이드바·버튼·테이블을 현대화. 다크 테마 유지. 다음 상황에서 반드시 사용: (1) 'ITSM 디자인 바꿔줘', 'ITSM UI 개편'; (2) style.css 색상 토큰 변경; (3) 사이드바·카드·버튼 스타일 개선; (4) 다시 실행, 업데이트, 보완."
+---
+
+# GUARDiA ITSM UI 개편 스킬
+
+## 레퍼런스
+- `C:\GUARDiA\screenshot\` — Variant 디자인 스크린샷 13장
+- 핵심: screenshot9(서비스카드), screenshot10(히어로), screenshot11(섹션)
+- 적용 파일: `itsm/static/style.css`, `login.css`
+
+## 색상 토큰 변환 (style.css :root)
+
+```css
+:root {
+  /* ── Variant 색상 적용 ── */
+  --primary:        #00A0C8;   /* 시안 — 버튼·링크·강조 */
+  --primary-dark:   #005A8C;   /* 미드블루 — hover */
+  --accent:         #29B8D8;   /* 밝은 시안 — 포인트 */
+  --brand-navy:     #003366;   /* 딥네이비 — 중요 UI */
+  --brand-blue:     #005A8C;   /* 미드블루 */
+
+  /* 배경 (다크 테마 유지) */
+  --main-bg:        #001020;   /* 더 깊은 네이비 배경 */
+  --card-bg:        #001e3c;   /* 카드 배경 */
+  --sidebar-bg:     #001530;   /* 사이드바 */
+  --header-bg:      #001020;   /* 헤더 */
+
+  /* 텍스트 */
+  --text-main:      #e8f0f8;   /* 메인 텍스트 */
+  --text-muted:     #7ba7c4;   /* 보조 텍스트 */
+
+  /* 테두리 */
+  --border:         rgba(0,160,200,.15);  /* 시안 계열 */
+  --border-strong:  rgba(0,160,200,.30);
+
+  /* 그림자 */
+  --shadow-card:    0 4px 20px rgba(0,30,60,.4), 0 1px 4px rgba(0,160,200,.1);
+
+  /* 반경 */
+  --radius-card:    12px;
+  --radius-btn:     8px;
+  --radius-sm:      6px;
+}
+```
+
+## 사이드바 개편
+
+```css
+#sidebar {
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--border);
+  box-shadow: 4px 0 20px rgba(0,0,0,.3);
+}
+#sidebar-logo { border-bottom: 1px solid var(--border); padding: 18px 20px; }
+.nav-item { border-radius: var(--radius-sm); margin: 2px 8px; }
+.nav-item:hover { background: rgba(0,160,200,.1); color: var(--primary); }
+.nav-item.active {
+  background: rgba(0,160,200,.15);
+  border-left: 3px solid var(--primary);
+  color: var(--primary);
+  font-weight: 600;
+}
+```
+
+## 카드 개편
+
+```css
+.card, .stat-card, .dashboard-card {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-card);
+  transition: box-shadow .25s, border-color .25s;
+}
+.card:hover { border-color: var(--border-strong); box-shadow: 0 8px 32px rgba(0,30,60,.5); }
+
+/* 통계 카드 상단 컬러 바 */
+.stat-card { border-top: 3px solid var(--primary); }
+```
+
+## 버튼 개편
+
+```css
+.btn-primary {
+  background: var(--primary);
+  border-radius: var(--radius-btn);
+  font-weight: 600;
+  transition: all .2s;
+}
+.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(0,160,200,.3); }
+.btn-secondary {
+  background: transparent;
+  border: 1.5px solid var(--primary);
+  color: var(--primary);
+  border-radius: var(--radius-btn);
+}
+```
+
+## 테이블 개편
+
+```css
+.table thead th {
+  background: rgba(0,30,60,.6);
+  color: var(--text-muted);
+  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+  border-bottom: 1px solid var(--border);
+}
+.table tbody tr:hover { background: rgba(0,160,200,.05); }
+.table td { border-bottom: 1px solid rgba(0,160,200,.08); }
+```
+
+## 로그인 페이지 개편
+
+```css
+/* login.css */
+.login-page {
+  background: linear-gradient(135deg, #001020 0%, #002040 60%, #003060 100%);
+  min-height: 100vh; display: flex; align-items: center; justify-content: center;
+}
+.login-card {
+  background: rgba(0,30,60,.8);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(0,160,200,.2);
+  border-radius: 16px;
+  box-shadow: 0 20px 60px rgba(0,0,0,.5);
+  padding: 48px 40px; width: 400px;
+}
+.login-title { color: #fff; font-size: 22px; font-weight: 800; margin-bottom: 8px; }
+.login-sub   { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
+```
+
+## 배포 방법
+
+```bash
+# ITSM 서버 적용
+python C:\GUARDiA\deploy_itsm_design.py
+systemctl restart guardia
+```
--- a/.claude/skills/manager-design-overhaul/SKILL.md
+++ b/.claude/skills/manager-design-overhaul/SKILL.md
@ -0,0 +1,132 @@
+---
+name: manager-design-overhaul
+description: "GUARDiA Manager UI(manager/frontend/src/) Variant 스타일 개편 스킬. C:/GUARDiA/screenshot 기준 라이트 테마 + 네이비/시안 Variant 색상 적용. 다음 상황에서 반드시 사용: (1) 'Manager 디자인 바꿔줘', 'Manager UI 개편'; (2) Sidebar·StatCard·DataTable 스타일 변경; (3) Dashboard 레이아웃 개선; (4) 다시 실행, 업데이트, 보완."
+---
+
+# GUARDiA Manager UI 개편 스킬
+
+## 레퍼런스
+- `C:\GUARDiA\screenshot\` — Variant 디자인 스크린샷
+- 핵심: screenshot9(서비스카드 3×2), screenshot10(화이트헤더+히어로), screenshot11(파트너바+섹션)
+- 적용 위치: `manager/frontend/src/`
+
+## 글로벌 CSS 변수 (App.tsx 또는 global.css)
+
+```css
+:root {
+  --m-navy:     #003366;   /* 딥네이비 */
+  --m-blue:     #005A8C;   /* 미드블루 */
+  --m-cyan:     #00A0C8;   /* 시안 포인트 */
+  --m-cyan-lt:  #E8F7FB;   /* 연시안 배경 */
+  --m-blue-lt:  #E8F0F8;   /* 연파랑 배경 */
+  --m-bg:       #F8FAFC;   /* 페이지 배경 */
+  --m-card:     #FFFFFF;   /* 카드 배경 */
+  --m-border:   #E2E8F0;   /* 테두리 */
+  --m-text:     #1E293B;   /* 메인 텍스트 */
+  --m-muted:    #64748B;   /* 보조 텍스트 */
+  --m-shadow:   0 4px 12px rgba(0,51,102,.08);
+  --m-radius:   12px;
+}
+```
+
+## Sidebar.tsx 개편
+
+```tsx
+// 활성 메뉴 스타일 (CSS-in-JS)
+const activeStyle = {
+  background: 'var(--m-blue-lt)',
+  color: 'var(--m-navy)',
+  borderLeft: '3px solid var(--m-cyan)',
+  fontWeight: 700,
+};
+const hoverStyle = {
+  background: 'var(--m-blue-lt)',
+  color: 'var(--m-navy)',
+};
+// 섹션 헤더
+const sectionHeader = {
+  fontSize: 10, fontWeight: 700,
+  letterSpacing: '.1em', textTransform: 'uppercase',
+  color: 'var(--m-cyan)', padding: '12px 16px 4px',
+};
+```
+
+## StatCard.tsx 개편 (screenshot9 카드 스타일)
+
+```tsx
+// Variant 서비스 카드 패턴 적용
+const cardStyle = {
+  background: '#fff',
+  borderRadius: 'var(--m-radius)',
+  border: '1px solid var(--m-border)',
+  boxShadow: 'var(--m-shadow)',
+  padding: '24px',
+  borderTop: '3px solid var(--m-cyan)',  // 상단 시안 바
+  transition: 'all .25s',
+};
+// 아이콘 박스 (screenshot9 연파랑 박스)
+const iconBoxStyle = {
+  width: 52, height: 52,
+  background: 'var(--m-blue-lt)',
+  borderRadius: 10,
+  display: 'flex', alignItems: 'center', justifyContent: 'center',
+  marginBottom: 16,
+};
+```
+
+## DataTable.tsx 개편
+
+```tsx
+// 헤더 스타일
+const thStyle = {
+  background: 'var(--m-navy)',
+  color: 'rgba(255,255,255,.85)',
+  fontSize: 11, fontWeight: 700,
+  letterSpacing: '.06em', textTransform: 'uppercase',
+  padding: '10px 14px',
+};
+// 행 호버
+const trHoverStyle = { background: 'var(--m-blue-lt)' };
+// 페이지네이션 활성
+const pageActivStyle = {
+  background: 'var(--m-cyan)', color: '#fff',
+  borderRadius: 6, fontWeight: 700,
+};
+```
+
+## GNB.tsx 개편
+
+```tsx
+// 화이트 헤더 (screenshot10 패턴)
+const gnbStyle = {
+  background: '#fff',
+  borderBottom: '1px solid var(--m-border)',
+  boxShadow: '0 1px 8px rgba(0,51,102,.08)',
+};
+// 브랜드 텍스트
+const brandStyle = {
+  color: 'var(--m-navy)', fontWeight: 800, fontSize: 16,
+};
+```
+
+## Dashboard.tsx 레이아웃
+
+```tsx
+// 3열 StatCard 그리드
+<div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginBottom:28 }}>
+  {/* StatCards */}
+</div>
+// 차트 카드
+<div style={{
+  background:'#fff', borderRadius:'var(--m-radius)',
+  border:'1px solid var(--m-border)', boxShadow:'var(--m-shadow)',
+  padding:24,
+}}>
+```
+
+## 배포 방법
+
+```bash
+cd manager/frontend && npm run build
+# 빌드 결과를 /var/www/manager/에 복사 후 재시작
+```
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -157,6 +157,25 @@ C:\GUARDiA\

 ---

+## 하네스: GUARDiA 디자인 개편
+
+**목표:** C:\GUARDiA\screenshot (Variant 스타일) 기준으로 ITSM + Manager UI 전면 개편.
+색상 토큰 통일(#003366·#005A8C·#00A0C8), Playwright MCP Before/After 검증.
+
+**트리거:** ITSM·Manager 디자인 개편, 색상 변경, UI 스타일 변경 요청 시 `guardia-design-orchestrator` 스킬을 사용하라.
+
+**에이전트:**
+- `itsm-ui-refactor`: ITSM style.css 다크테마 개편
+- `manager-ui-refactor`: Manager React 컴포넌트 라이트테마 개편
+- `visual-qa-tester`: Playwright MCP Before/After 캡처·비교
+
+**변경 이력:**
+| 날짜 | 변경 내용 | 대상 | 사유 |
+|------|----------|------|------|
+| 2026-05-31 | 디자인 개편 하네스 초기 구성 | ITSM + Manager | Variant 스타일 적용 |
+
+---
+
 ## 파일 작성 규칙

 - **CLAUDE.md 수정 시**: 반드시 Python `open(encoding='utf-8')` 또는 Write 도구 사용