034301d3f2
Agents: - itsm-ui-refactor: dark theme CSS token overhaul (navy+cyan) - manager-ui-refactor: light theme React component styling Skills: - guardia-design-orchestrator: parallel pipeline orchestrator - itsm-design-overhaul: style.css token/sidebar/card/button/table guide - manager-design-overhaul: Sidebar/GNB/StatCard/DataTable/Dashboard guide Reference: C:/GUARDiA/screenshot (Variant design, #003366/#005A8C/#00A0C8) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
133 lines
3.6 KiB
Markdown
133 lines
3.6 KiB
Markdown
---
|
||
name: manager-design-overhaul
|
||
description: "GUARDiA Manager UI(manager/frontend/src/) Variant 스타일 개편 스킬. C:/GUARDiA/screenshot 기준 라이트 테마 + 네이비/시안 Variant 색상 적용. 다음 상황에서 반드시 사용: (1) 'Manager 디자인 바꿔줘', 'Manager UI 개편'; (2) Sidebar·StatCard·DataTable 스타일 변경; (3) Dashboard 레이아웃 개선; (4) 다시 실행, 업데이트, 보완."
|
||
---
|
||
|
||
# GUARDiA Manager UI 개편 스킬
|
||
|
||
## 레퍼런스
|
||
- `C:\GUARDiA\screenshot\` — Variant 디자인 스크린샷
|
||
- 핵심: screenshot9(서비스카드 3×2), screenshot10(화이트헤더+히어로), screenshot11(파트너바+섹션)
|
||
- 적용 위치: `manager/frontend/src/`
|
||
|
||
## 글로벌 CSS 변수 (App.tsx 또는 global.css)
|
||
|
||
```css
|
||
:root {
|
||
--m-navy: #003366; /* 딥네이비 */
|
||
--m-blue: #005A8C; /* 미드블루 */
|
||
--m-cyan: #00A0C8; /* 시안 포인트 */
|
||
--m-cyan-lt: #E8F7FB; /* 연시안 배경 */
|
||
--m-blue-lt: #E8F0F8; /* 연파랑 배경 */
|
||
--m-bg: #F8FAFC; /* 페이지 배경 */
|
||
--m-card: #FFFFFF; /* 카드 배경 */
|
||
--m-border: #E2E8F0; /* 테두리 */
|
||
--m-text: #1E293B; /* 메인 텍스트 */
|
||
--m-muted: #64748B; /* 보조 텍스트 */
|
||
--m-shadow: 0 4px 12px rgba(0,51,102,.08);
|
||
--m-radius: 12px;
|
||
}
|
||
```
|
||
|
||
## Sidebar.tsx 개편
|
||
|
||
```tsx
|
||
// 활성 메뉴 스타일 (CSS-in-JS)
|
||
const activeStyle = {
|
||
background: 'var(--m-blue-lt)',
|
||
color: 'var(--m-navy)',
|
||
borderLeft: '3px solid var(--m-cyan)',
|
||
fontWeight: 700,
|
||
};
|
||
const hoverStyle = {
|
||
background: 'var(--m-blue-lt)',
|
||
color: 'var(--m-navy)',
|
||
};
|
||
// 섹션 헤더
|
||
const sectionHeader = {
|
||
fontSize: 10, fontWeight: 700,
|
||
letterSpacing: '.1em', textTransform: 'uppercase',
|
||
color: 'var(--m-cyan)', padding: '12px 16px 4px',
|
||
};
|
||
```
|
||
|
||
## StatCard.tsx 개편 (screenshot9 카드 스타일)
|
||
|
||
```tsx
|
||
// Variant 서비스 카드 패턴 적용
|
||
const cardStyle = {
|
||
background: '#fff',
|
||
borderRadius: 'var(--m-radius)',
|
||
border: '1px solid var(--m-border)',
|
||
boxShadow: 'var(--m-shadow)',
|
||
padding: '24px',
|
||
borderTop: '3px solid var(--m-cyan)', // 상단 시안 바
|
||
transition: 'all .25s',
|
||
};
|
||
// 아이콘 박스 (screenshot9 연파랑 박스)
|
||
const iconBoxStyle = {
|
||
width: 52, height: 52,
|
||
background: 'var(--m-blue-lt)',
|
||
borderRadius: 10,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
marginBottom: 16,
|
||
};
|
||
```
|
||
|
||
## DataTable.tsx 개편
|
||
|
||
```tsx
|
||
// 헤더 스타일
|
||
const thStyle = {
|
||
background: 'var(--m-navy)',
|
||
color: 'rgba(255,255,255,.85)',
|
||
fontSize: 11, fontWeight: 700,
|
||
letterSpacing: '.06em', textTransform: 'uppercase',
|
||
padding: '10px 14px',
|
||
};
|
||
// 행 호버
|
||
const trHoverStyle = { background: 'var(--m-blue-lt)' };
|
||
// 페이지네이션 활성
|
||
const pageActivStyle = {
|
||
background: 'var(--m-cyan)', color: '#fff',
|
||
borderRadius: 6, fontWeight: 700,
|
||
};
|
||
```
|
||
|
||
## GNB.tsx 개편
|
||
|
||
```tsx
|
||
// 화이트 헤더 (screenshot10 패턴)
|
||
const gnbStyle = {
|
||
background: '#fff',
|
||
borderBottom: '1px solid var(--m-border)',
|
||
boxShadow: '0 1px 8px rgba(0,51,102,.08)',
|
||
};
|
||
// 브랜드 텍스트
|
||
const brandStyle = {
|
||
color: 'var(--m-navy)', fontWeight: 800, fontSize: 16,
|
||
};
|
||
```
|
||
|
||
## Dashboard.tsx 레이아웃
|
||
|
||
```tsx
|
||
// 3열 StatCard 그리드
|
||
<div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginBottom:28 }}>
|
||
{/* StatCards */}
|
||
</div>
|
||
// 차트 카드
|
||
<div style={{
|
||
background:'#fff', borderRadius:'var(--m-radius)',
|
||
border:'1px solid var(--m-border)', boxShadow:'var(--m-shadow)',
|
||
padding:24,
|
||
}}>
|
||
```
|
||
|
||
## 배포 방법
|
||
|
||
```bash
|
||
cd manager/frontend && npm run build
|
||
# 빌드 결과를 /var/www/manager/에 복사 후 재시작
|
||
```
|