zio/guardia-itsm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
031882732e
guardia-itsm/.claude/agents/manager-ui-refactor.md
DESKTOP-TKLFCPRython 034301d3f2 feat(design-harness): GUARDiA ITSM+Manager UI overhaul harness 
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>
2026-05-31 19:50:58 +09:00

1.6 KiB
Raw Blame History

name description model
manager-ui-refactor GUARDiA Manager UI 개편 에이전트. manager/frontend/src/ React+TypeScript 컴포넌트를 Variant 스타일(C:/GUARDiA/screenshot 참조)로 개편. 라이트 테마 유지, NCloud 콘솔 패턴 강화. 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