guardia-itsm/.claude/skills/manager-design-overhaul/SKILL.md

name	description
manager-design-overhaul	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)

: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 개편

// 활성 메뉴 스타일 (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 카드 스타일)

// 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 개편

// 헤더 스타일
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 개편

// 화이트 헤더 (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 레이아웃

// 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,
}}>

배포 방법

cd manager/frontend && npm run build
# 빌드 결과를 /var/www/manager/에 복사 후 재시작