# 🎨 FFmpeg GUI - Frontend

FFmpeg GUI의 웹 인터페이스입니다.

![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 프레임워크 |

---

## ✨ 주요 기능

- 📱 **반응형 디자인** - 모바일/데스크톱 최적화
- 🎯 **직관적인 UI** - 간단한 입력 폼
- ⏱️ **시간 설정** - 시작/종료 시간 입력
- 🔧 **고급 옵션** - User-Agent, Referer 설정

---

## 🚀 실행 방법

### 개발 모드

```bash
# 의존성 설치
npm install

# 개발 서버 실행
npm run dev
```

### 프로덕션 빌드

```bash
# 빌드
npm run build

# 빌드 결과물: dist/
```

---

## 📁 구조

```
frontend/
├── src/
│   ├── App.jsx        # 메인 앱 컴포넌트
│   ├── App.css        # 스타일
│   └── main.jsx       # 엔트리 포인트
├── public/
│   └── favicon.svg    # 파비콘
└── index.html         # HTML 템플릿
```

---

## ⚙️ 환경 설정

| 변수           | 기본값 | 설명           |
| -------------- | ------ | -------------- |
| `VITE_API_URL` | `/api` | API 엔드포인트 |