# React Gauge Component 사용 가이드

## 📦 설치된 패키지

```bash
npm install react-gauge-component
```

## 🎯 구현된 컴포넌트

### 1. RealtimeWebSocketGauges
**경로**: `/frontend/src/components/dashboard/RealtimeWebSocketGauges.tsx`

실시간 WebSocket 데이터 수신 현황을 3개의 게이지로 표시하는 컴포넌트입니다.

#### 주요 기능
- ✅ Frontend, Backend, Data Service 3개의 실시간 게이지
- ✅ 초당 메시지 수(msg/s) 표시
- ✅ 자동 색상 구간 (0-100)
- ✅ Elastic 포인터 애니메이션
- ✅ 연결 수 및 메시지 통계 표시

#### Props
```typescript
interface RealtimeWebSocketGaugesProps {
  websocketStats: {
    totalConnections: number;
    activeConnections: number;
    serviceStats: Record<string, {
      serviceName: string;
      connections: number;
      messagesReceived: number;
      messagesSent: number;
      messagesPerSecond: number;
      lastActivity: string | null;
    }>;
  };
}
```

#### 사용 예시
```tsx
import RealtimeWebSocketGauges from './components/dashboard/RealtimeWebSocketGauges';

<RealtimeWebSocketGauges websocketStats={data.websocketStats} />
```

### 2. GaugeCardMUI
**경로**: `/frontend/src/components/dashboard/GaugeCardMUI.tsx`

SVG를 사용한 커스텀 게이지 카드 컴포넌트입니다.

#### 주요 기능
- ✅ 270도 호 게이지
- ✅ 그라데이션 색상
- ✅ 네온 글로우 효과
- ✅ 애니메이션 바늘
- ✅ 중앙 값 표시

## 🎨 게이지 스타일 커스터마이징

### react-gauge-component 주요 옵션

```typescript
<GaugeComponent
  type="semicircle"  // 'semicircle' | 'radial' | 'grafana'
  arc={{
    width: 0.2,           // 게이지 바 두께 (0-1)
    padding: 0.005,       // 서브 아크 간 간격
    cornerRadius: 7,      // 모서리 둥글기
    subArcs: [            // 색상 구간 정의
      {
        limit: 20,
        color: '#4ade80',
        showTick: true,   // 틱 마크 표시
      },
      // ... 추가 구간
    ],
  }}
  pointer={{
    color: '#fff',        // 바늘 색상
    length: 0.80,         // 바늘 길이 (0-1)
    width: 15,            // 바늘 두께
    elastic: true,        // 탄성 애니메이션
  }}
  labels={{
    valueLabel: {
      formatTextValue: (value) => `${value.toFixed(1)} msg/s`,
      style: {
        fontSize: '28px',
        fill: '#fff',
        textShadow: '0 0 10px rgba(74, 222, 128, 0.8)',
      },
    },
    tickLabels: {
      type: 'outer',      // 'inner' | 'outer'
      ticks: [
        { value: 0 },
        { value: 50 },
        { value: 100 },
      ],
    },
  }}
  value={75}              // 현재 값
  minValue={0}            // 최소값
  maxValue={100}          // 최대값
/>
```

## 🔧 실시간 데이터 업데이트

### 1. useEffect를 사용한 자동 업데이트

```typescript
const [animatedValues, setAnimatedValues] = useState({
  frontend: 0,
  backend: 0,
});

useEffect(() => {
  const stats = websocketStats.serviceStats;
  setAnimatedValues({
    frontend: stats['frontend']?.messagesPerSecond || 0,
    backend: stats['backend']?.messagesPerSecond || 0,
  });
}, [websocketStats]);
```

### 2. 게이지 값 스케일링

```typescript
// 0-10 msg/s를 0-100 범위로 변환
value={Math.min(animatedValues.frontend * 10, 100)}
```

## 🎭 테스트 페이지

**경로**: `/frontend/src/pages/RealtimeGaugeTestPage.tsx`

랜덤 데이터로 실시간 게이지를 테스트할 수 있는 독립 페이지입니다.

### 실행 방법
1. App.tsx에 라우트 추가:
```tsx
import RealtimeGaugeTestPage from './pages/RealtimeGaugeTestPage';

<Route path="/gauge-test" element={<RealtimeGaugeTestPage />} />
```

2. 브라우저에서 `/gauge-test` 접속

## 📊 SystemMonitorTab 통합

실시간 WebSocket 게이지가 시스템 모니터 탭에 자동으로 추가되었습니다.

**경로**: 대시보드 → 시스템 탭

### 업데이트 주기
- 기본: 5초마다 자동 갱신
- 게이지 애니메이션: 실시간 (elastic 효과)

## 🎨 색상 스킴

### Frontend (녹색 계열)
- `#4ade80` → `#a3e635` → `#fbbf24` → `#fb923c` → `#f87171`

### Backend (주황 계열)
- `#fbbf24` → `#fb923c` → `#f87171` → `#ef4444` → `#dc2626`

### Data Service (파란 계열)
- `#6495ed` → `#60a5fa` → `#93c5fd` → `#dbeafe` → `#fff`

## 🚀 성능 최적화

1. **메모이제이션**: Props가 변경될 때만 리렌더링
2. **애니메이션**: CSS transform 사용 (GPU 가속)
3. **SVG 최적화**: 필터 재사용

## 📚 참고 자료

- [react-gauge-component 공식 문서](https://antoniolago.github.io/react-gauge-component/)
- [Material-UI 문서](https://mui.com/)
- [React Hooks 가이드](https://react.dev/reference/react)

## 🐛 트러블슈팅

### 게이지가 표시되지 않는 경우
1. `react-gauge-component` 패키지 설치 확인
2. Props 데이터 구조 확인
3. 브라우저 콘솔에서 에러 확인

### 애니메이션이 부드럽지 않은 경우
1. `elastic: true` 설정 확인
2. 값 변경 주기 조정 (1초 권장)
3. 브라우저 성능 확인

### 색상이 표시되지 않는 경우
1. `subArcs` 설정 확인
2. `limit` 값이 올바른 순서인지 확인
3. CSS 충돌 확인
