45. 실시간 모니터링 대시보드 Design a real-time monitoring dashboard: **Layout**: - Full-width, minimal padding - Dark theme (better for monitoring) - Grid of widgets **Status Overview Bar** (top): - System status: operational / degraded / down - Colored indicator (green/yellow/red) - Uptime percentage - Last updated timestamp **Real-time Line Chart**: - Auto-scrolling X-axis (time) - Y-axis: metric value - Multiple series overlay - Threshold lines (warning, critical) - Area above threshold: red fill **Metric Gauges**: - Circular progress gauges - CPU, Memory, Disk usage - Color zones: green → yellow → red - Numeric value in center **Server/Service List**: - List with status dots - Quick metrics per service - Click to expand details - Sorting by status (issues first) **Log Stream**: - Real-time scrolling logs - Color-coded by level - Timestamp + service + message - Filter by level/service - Pause auto-scroll on hover **Alert Panel**: - Active alerts list - Severity: critical, warning, info - Acknowledge action - Link to incident details **Time Controls**: - Live mode toggle - Historical time range - Auto-refresh interval **Data Refresh**: - WebSocket for real-time - Connection status indicator - Reconnection handling Tech: React + Recharts + WebSocket + Tailwind (dark theme)