대시보드

36. KPI 카드 그리드 Design KPI metric cards for dashboard: **Card Layout**: - Grid: 4 columns desktop, 2 tablet, 1 mobile - Gap: 24px - Equal height cards **Card Structure**: - Padding: 24px - Background: white - Border-radius: 12px - Shadow: 0 1px 3px rgba(0,0,0,0.1) **Card Content**: - Top row: Icon (40px in colored circle) + overflow menu - Label: 14px gray-600, uppercase tracking-wide - Value: 32px bold - Trend: arrow icon + percentage + vs. previous period - Sparkline: mini chart at bottom (optional) **Trend Indicators**: - Up (positive): green-500, arrow-up icon - Down (negative): red-500, arrow-down icon - Neutral: gray-500, minus icon - With comparison text: "vs last month" **Icon Categories**: - Revenue: dollar sign - Users: user-group - Conversion: chart-bar - Custom per metric **Interactive Elements**: - Click card: expands or links to detail - Overflow menu: view details, export, share - Hover: subtle lift effect **Loading State**: - Skeleton with exact dimensions - Shimmer animation **Variants**: - Compact: smaller padding, no sparkline - With target: progress bar to goal - With mini chart: sparkline included Tech: React + Tailwind + Recharts (sparklines)