Initial commit: YouTube Shorts maker application

Features:
- Video download from TikTok/Douyin using yt-dlp
- Audio transcription with OpenAI Whisper
- GPT-4 translation (direct/summarize/rewrite modes)
- Subtitle generation with ASS format
- Video trimming with frame-accurate preview
- BGM integration with volume control
- Intro text overlay support
- Thumbnail generation with text overlay

Tech stack:
- Backend: FastAPI, Python 3.11+
- Frontend: React, Vite, TailwindCSS
- Video processing: FFmpeg
- AI: OpenAI Whisper, GPT-4

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/App.jsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
+import { Video, List, Music, Settings } from 'lucide-react';
+import HomePage from './pages/HomePage';
+import JobsPage from './pages/JobsPage';
+import BGMPage from './pages/BGMPage';
+
+function NavLink({ to, icon: Icon, children }) {
+  const location = useLocation();
+  const isActive = location.pathname === to;
+
+  return (
+    <Link
+      to={to}
+      className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
+        isActive
+          ? 'bg-red-600 text-white'
+          : 'text-gray-400 hover:text-white hover:bg-gray-800'
+      }`}
+    >
+      <Icon size={20} />
+      <span>{children}</span>
+    </Link>
+  );
+}
+
+function Layout({ children }) {
+  return (
+    <div className="min-h-screen flex flex-col">
+      {/* Header */}
+      <header className="bg-gray-900 border-b border-gray-800 px-6 py-4">
+        <div className="max-w-7xl mx-auto flex items-center justify-between">
+          <Link to="/" className="flex items-center gap-3">
+            <Video className="text-red-500" size={32} />
+            <h1 className="text-xl font-bold">Shorts Maker</h1>
+          </Link>
+          <nav className="flex items-center gap-2">
+            <NavLink to="/" icon={Video}>새 작업</NavLink>
+            <NavLink to="/jobs" icon={List}>작업 목록</NavLink>
+            <NavLink to="/bgm" icon={Music}>BGM 관리</NavLink>
+          </nav>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-1 px-6 py-8">
+        <div className="max-w-7xl mx-auto">
+          {children}
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 border-t border-gray-800 px-6 py-4 text-center text-gray-500 text-sm">
+        Shorts Maker - 중국 쇼츠 영상 한글 자막 변환기
+      </footer>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <Router>
+      <Layout>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/jobs" element={<JobsPage />} />
+          <Route path="/bgm" element={<BGMPage />} />
+        </Routes>
+      </Layout>
+    </Router>
+  );
+}
+
+export default App;