# Task-521: 대시보드 상단 메뉴바에 서버 CPU/RAM 모니터링 추가

## 목표
조직 대시보드 최상단 메뉴바 우측 빈 공간에 서버 CPU, RAM 사용량 실시간 표시.

## 위치
- 파일: `/home/jay/workspace/dashboard/index.html` (React 프론트)
- 헤더 우측 영역 (1159-1202행 부근)
- LIVE/OFF 버튼 **왼쪽**에 CPU/RAM 게이지 추가
- `<div className="flex items-center gap-3">` 컨테이너 안

## 백엔드 (server.py)

### 신규 API: GET /api/server-stats
- `psutil` 라이브러리 사용 (없으면 `pip install psutil`)
- 반환 JSON:
```json
{
  "cpu_percent": 23.5,
  "ram_total_gb": 32.0,
  "ram_used_gb": 18.2,
  "ram_percent": 56.9,
  "disk_percent": 45.2
}
```

### SSE 스트림 확장 (선택적)
- 기존 `GET /api/stream` SSE에 10초 간격으로 server-stats 이벤트 추가
- 또는 프론트에서 30초 폴링도 OK

## 프론트엔드 (index.html)

### UI 디자인
- 헤더 우측, LIVE 버튼 왼쪽에 compact하게 배치
- PC: `CPU 23% | RAM 57%` 형태, 색상으로 상태 표시
  - 0~60%: 초록
  - 60~80%: 노랑
  - 80%+: 빨강
- 모바일: 아이콘 + 숫자만 (`🖥 23% 💾 57%`) 또는 hidden

### React 구현
```jsx
// 헤더 우측, 기존 flex 컨테이너 안에 추가
<div className="hidden sm:flex items-center gap-2 text-xs">
  <span className={`px-2 py-0.5 rounded ${cpuColor}`}>
    CPU {cpuPercent}%
  </span>
  <span className={`px-2 py-0.5 rounded ${ramColor}`}>
    RAM {ramPercent}%
  </span>
</div>
```

### 데이터 페칭
- `useEffect`로 30초 간격 폴링 또는 SSE 구독
- 에러 시 `--` 표시 (서버 응답 없음)

## 수정 파일
1. `/home/jay/workspace/dashboard/server.py` — `/api/server-stats` 엔드포인트 추가
2. `/home/jay/workspace/dashboard/index.html` — 헤더 우측에 CPU/RAM 컴포넌트 추가

## 테스트
1. `curl http://100.76.130.39:8000/api/server-stats` → JSON 반환 확인
2. 대시보드 접속 → 상단 우측에 CPU/RAM 표시 확인
3. 색상 변화: 부하 높을 때 노랑/빨강으로 변경
4. 모바일 반응형: 작은 화면에서 적절히 표시/숨김

## 프로젝트 경로
`/home/jay/workspace/dashboard/`

## 작업 레벨: Lv.1