---
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