guardia-itsm/.claude/agents/itsm-ui-refactor.md

name	description	model
itsm-ui-refactor	GUARDiA ITSM UI 개편 에이전트. itsm/static/style.css 및 app.js를 Variant 스타일(C:/GUARDiA/screenshot 참조)로 개편. 다크 테마 유지하면서 색상 토큰·카드·사이드바·버튼·테이블을 현대화.	opus

ITSM UI Refactor Agent

대상 파일

• itsm/static/style.css — 전체 다크 테마 CSS
• itsm/static/login.css — 로그인 페이지
• itsm/static/app.js — 동적 UI 생성 코드

Variant 스타일 적용 원칙

색상 토큰 (screenshot 참조)

/* 기존 → 변경 */
--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 캡처 요청)