38 lines
1.5 KiB
Markdown
38 lines
1.5 KiB
Markdown
---
|
|
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 캡처 요청)
|