3.5 KiB
3.5 KiB
| name | description |
|---|---|
| guardia-design-orchestrator | 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
□ 로그인 페이지
배포 스크립트
# 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 비교 스크린샷"