From 5855a6f08a1b1d9de17beafbd0786c34157bb2b3 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Mon, 15 Dec 2025 23:59:24 +0900
Subject: [PATCH] Add README files for root, backend, and frontend

---
 README.md          | 63 ++++++++++++++++++++++++++++++++++++
 backend/README.md  | 79 ++++++++++++++++++++++++++++++++++++++++++++++
 frontend/README.md | 74 +++++++++++++++++++++++++++++++++++++------
 3 files changed, 207 insertions(+), 9 deletions(-)
 create mode 100644 README.md
 create mode 100644 backend/README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6293734
--- /dev/null
+++ b/README.md
@@ -0,0 +1,63 @@
+# 🎬 FFmpeg GUI
+
+온라인 영상 URL을 입력하여 다운로드할 수 있는 웹 기반 FFmpeg GUI 애플리케이션입니다.
+
+![Tech Stack](https://img.shields.io/badge/React-18-61DAFB?logo=react)
+![Tech Stack](https://img.shields.io/badge/Node.js-Express-339933?logo=node.js)
+![Tech Stack](https://img.shields.io/badge/FFmpeg-007808?logo=ffmpeg)
+![Tech Stack](https://img.shields.io/badge/Docker-2496ED?logo=docker)
+
+---
+
+## ✨ 주요 기능
+
+- 🔗 **URL 기반 다운로드** - 온라인 영상 URL 입력으로 간편하게 다운로드
+- ✂️ **구간 설정** - 시작/종료 시간 지정으로 원하는 부분만 추출
+- 📝 **파일명 지정** - 다운로드 시 원하는 파일명으로 저장
+- 🛡️ **헤더 옵션** - User-Agent, Referer 설정으로 403 에러 우회
+- ⚡ **실시간 스트리밍** - FFmpeg 직접 스트리밍으로 빠른 다운로드
+
+---
+
+## 📁 프로젝트 구조
+
+```
+ffmpeg-gui/
+├── frontend/          # React + Vite 프론트엔드
+├── backend/           # Node.js + Express 백엔드
+├── docker-compose.yml # Docker Compose 설정
+└── Dockerfile         # Docker 빌드 파일
+```
+
+---
+
+## 🚀 실행 방법
+
+### Docker (권장)
+
+```bash
+docker compose up -d
+```
+
+### 개발 모드
+
+```bash
+# 백엔드
+cd backend && npm install && npm start
+
+# 프론트엔드
+cd frontend && npm install && npm run dev
+```
+
+---
+
+## 🌐 접속
+
+- **URL**: https://ffmpeg.caadiq.co.kr
+- **포트**: 3000 (내부)
+
+---
+
+## 📄 라이선스
+
+MIT License
diff --git a/backend/README.md b/backend/README.md
new file mode 100644
index 0000000..1fa49a3
--- /dev/null
+++ b/backend/README.md
@@ -0,0 +1,79 @@
+# 🖥️ FFmpeg GUI - Backend
+
+FFmpeg를 활용한 영상 다운로드/변환 API 서버입니다.
+
+![Node.js](https://img.shields.io/badge/Node.js-18+-339933?logo=node.js)
+![Express](https://img.shields.io/badge/Express-4.x-000000?logo=express)
+![FFmpeg](https://img.shields.io/badge/FFmpeg-Required-007808?logo=ffmpeg)
+
+---
+
+## 🛠️ 기술 스택
+
+| 기술        | 설명          |
+| ----------- | ------------- |
+| **Node.js** | 런타임 환경   |
+| **Express** | 웹 프레임워크 |
+| **FFmpeg**  | 영상 처리     |
+| **UUID**    | 고유 ID 생성  |
+
+---
+
+## 📡 API 엔드포인트
+
+### `POST /api/download-request`
+
+다운로드 요청을 생성합니다.
+
+**Request Body:**
+
+```json
+{
+  "url": "영상 URL",
+  "title": "파일명 (선택)",
+  "options": {
+    "startTime": "00:00:00",
+    "endTime": "00:01:00",
+    "userAgent": "브라우저 UA",
+    "referer": "리퍼러 URL"
+  }
+}
+```
+
+**Response:**
+
+```json
+{
+  "id": "uuid-v4-format"
+}
+```
+
+---
+
+### `GET /api/download/:id`
+
+생성된 요청 ID로 영상을 다운로드합니다.
+
+- 요청은 **5분 후 자동 만료**됩니다.
+- `Content-Type: video/mp4`로 스트리밍됩니다.
+
+---
+
+## 🚀 실행 방법
+
+```bash
+# 의존성 설치
+npm install
+
+# 서버 실행
+npm start
+```
+
+서버는 **포트 3000**에서 실행됩니다.
+
+---
+
+## ⚠️ 요구사항
+
+- Node.js 18+
+- FFmpeg 설치 필요 (`ffmpeg`, `ffprobe`)
diff --git a/frontend/README.md b/frontend/README.md
index 18bc70e..c5bd923 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,16 +1,72 @@
-# React + Vite
+# 🎨 FFmpeg GUI - Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+FFmpeg GUI의 웹 인터페이스입니다.
 
-Currently, two official plugins are available:
+![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)
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+---
 
-## React Compiler
+## 🛠️ 기술 스택
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+| 기술            | 설명           |
+| --------------- | -------------- |
+| **React 18**    | UI 라이브러리  |
+| **Vite**        | 빌드 도구      |
+| **TailwindCSS** | CSS 프레임워크 |
 
-## Expanding the ESLint configuration
+---
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+## ✨ 주요 기능
+
+- 📱 **반응형 디자인** - 모바일/데스크톱 최적화
+- 🎯 **직관적인 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 엔드포인트 |