2025-12-15 23:59:24 +09:00
|
|
|
# 🎨 FFmpeg GUI - Frontend
|
2025-12-15 23:53:29 +09:00
|
|
|
|
2025-12-15 23:59:24 +09:00
|
|
|
FFmpeg GUI의 웹 인터페이스입니다.
|
2025-12-15 23:53:29 +09:00
|
|
|
|
2025-12-15 23:59:24 +09:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2025-12-15 23:53:29 +09:00
|
|
|
|
2025-12-15 23:59:24 +09:00
|
|
|
---
|
2025-12-15 23:53:29 +09:00
|
|
|
|
2025-12-15 23:59:24 +09:00
|
|
|
## 🛠️ 기술 스택
|
2025-12-15 23:53:29 +09:00
|
|
|
|
2025-12-15 23:59:24 +09:00
|
|
|
| 기술 | 설명 |
|
|
|
|
|
| --------------- | -------------- |
|
|
|
|
|
| **React 18** | UI 라이브러리 |
|
|
|
|
|
| **Vite** | 빌드 도구 |
|
|
|
|
|
| **TailwindCSS** | CSS 프레임워크 |
|
2025-12-15 23:53:29 +09:00
|
|
|
|
2025-12-15 23:59:24 +09:00
|
|
|
---
|
2025-12-15 23:53:29 +09:00
|
|
|
|
2025-12-15 23:59:24 +09:00
|
|
|
## ✨ 주요 기능
|
|
|
|
|
|
|
|
|
|
- 📱 **반응형 디자인** - 모바일/데스크톱 최적화
|
|
|
|
|
- 🎯 **직관적인 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 엔드포인트 |
|
