034301d3f2
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>
119 lines
3.5 KiB
Markdown
119 lines
3.5 KiB
Markdown
---
|
||
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 비교 스크린샷"
|