---
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 비교 스크린샷"