# 🎨 Dashboard - Frontend

서버 대시보드의 웹 인터페이스입니다.

![React](https://img.shields.io/badge/React-18-61DAFB?logo=react)
![Vite](https://img.shields.io/badge/Vite-5-646CFF?logo=vite)
![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3-06B6D4?logo=tailwindcss)

---

## 🛠️ 기술 스택

| 기술             | 설명           |
| ---------------- | -------------- |
| **React 18**     | UI 라이브러리  |
| **Vite**         | 빌드 도구      |
| **TailwindCSS**  | CSS 프레임워크 |
| **Recharts**     | 차트 시각화    |
| **Lucide React** | 아이콘         |

---

## ✨ 주요 기능

- 📊 **실시간 차트** - CPU, 메모리, 네트워크 시각화
- 🎴 **서비스 카드** - 연결된 서비스 상태 표시
- 📱 **반응형 디자인** - 모바일/데스크톱 최적화
- 🌙 **다크 테마** - 세련된 UI 디자인

---

## 🚀 실행 방법

### 개발 모드

```bash
npm install
npm run dev
```

### 프로덕션 빌드

```bash
npm run build
```

---

## 📁 구조

```
frontend/
├── src/
│   ├── components/    # UI 컴포넌트
│   ├── data/          # 서비스 설정
│   ├── hooks/         # 커스텀 훅
│   ├── pages/         # 페이지 컴포넌트
│   └── utils/         # 유틸리티 함수
└── public/            # 정적 파일
```