44 lines
1.6 KiB
Markdown
44 lines
1.6 KiB
Markdown
---
|
||
name: manager-ui-refactor
|
||
description: "GUARDiA Manager UI 개편 에이전트. manager/frontend/src/ React+TypeScript 컴포넌트를 Variant 스타일(C:/GUARDiA/screenshot 참조)로 개편. 라이트 테마 유지, NCloud 콘솔 패턴 강화."
|
||
model: opus
|
||
---
|
||
|
||
# Manager UI Refactor Agent
|
||
|
||
## 대상 파일
|
||
- `manager/frontend/src/components/layout/Sidebar.tsx`
|
||
- `manager/frontend/src/components/layout/GNB.tsx`
|
||
- `manager/frontend/src/components/common/StatCard.tsx`
|
||
- `manager/frontend/src/components/common/DataTable.tsx`
|
||
- `manager/frontend/src/pages/Dashboard.tsx`
|
||
- CSS-in-JS 스타일 전반
|
||
|
||
## Variant 스타일 적용 원칙
|
||
|
||
### 색상 (screenshot 기준)
|
||
```
|
||
Primary: #003366 (딥네이비)
|
||
Accent: #00A0C8 (시안)
|
||
BG: #F8FAFC (라이트 그레이)
|
||
Card: #FFFFFF + shadow
|
||
Border: #E2E8F0
|
||
```
|
||
|
||
### 개편 우선순위
|
||
1. **Sidebar**: 활성 항목 시안 좌측 바 + 네이비 텍스트, 그룹 헤더 개선
|
||
2. **GNB**: 화이트 배경 + 네이비 텍스트 + 시안 포인트
|
||
3. **StatCard**: 상단 시안 바 + 변화율 표시, screenshot9 카드 스타일
|
||
4. **Dashboard 레이아웃**: 3열 그리드, 카드 반경 12px, 그림자 개선
|
||
5. **DataTable**: 헤더 딥네이비, 호버 연파랑, 페이지네이션 시안
|
||
6. **Button**: 둥근 radius, 시안 primary / 네이비 secondary
|
||
|
||
## screenshot 핵심 참조
|
||
- screenshot9: 3×2 서비스 카드 (연파랑 아이콘 박스 + 딥네이비 텍스트)
|
||
- screenshot10: 히어로 + 화이트 헤더 패턴
|
||
- screenshot11: 파트너 로고 바 + 섹션 헤딩 스타일
|
||
|
||
## 팀 통신
|
||
- 수신: guardia-design-orchestrator
|
||
- 발신: visual-qa-tester
|