From ad14c4ea8c891dc51568990fc9212085f3f5036a Mon Sep 17 00:00:00 2001
From: "kihong.kim" <kihong.kim@yanolja.com>
Date: Sun, 4 Jan 2026 22:10:23 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=B8=ED=8A=B8=EB=A1=9C=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=2020=EC=9E=90=20=EC=A0=9C=ED=95=9C=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=B9=84=EB=94=94=EC=98=A4=20=EC=BA=90=EC=8B=B1=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 인트로(썸네일) 텍스트 제한을 10자에서 20자로 증가
- 비디오 URL에 updated_at 타임스탬프 추가하여 캐싱 문제 해결
- 재편집 후 영상이 이전 버전으로 보이는 문제 수정

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 backend/app/models/schemas.py            |  2 +-
 frontend/src/components/VideoPreview.jsx |  4 ++++
 frontend/src/pages/HomePage.jsx          | 14 +++++++-------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/backend/app/models/schemas.py b/backend/app/models/schemas.py
index da5f9aa..46597b7 100644
--- a/backend/app/models/schemas.py
+++ b/backend/app/models/schemas.py
@@ -88,7 +88,7 @@ class RenderRequest(BaseModel):
     subtitle_style: Optional[SubtitleStyle] = None
     keep_original_audio: bool = False
     # Intro text overlay (shown at beginning of video for YouTube Shorts thumbnail)
-    intro_text: Optional[str] = None  # Max 10 characters recommended
+    intro_text: Optional[str] = None  # Max 20 characters recommended
     intro_duration: float = 0.7  # Duration of frozen frame with intro text (seconds)
     intro_font_size: int = 100  # Font size
 
diff --git a/frontend/src/components/VideoPreview.jsx b/frontend/src/components/VideoPreview.jsx
index d4601f6..8377cd4 100644
--- a/frontend/src/components/VideoPreview.jsx
+++ b/frontend/src/components/VideoPreview.jsx
@@ -3,6 +3,9 @@ import { Download, FileText, Film } from 'lucide-react';
 import { jobsApi } from '../api/client';
 
 export default function VideoPreview({ videoUrl, jobId }) {
+  // Generate cache-busting timestamp
+  const cacheBuster = `?t=${Date.now()}`;
+
   return (
     <div className="space-y-4">
       <h3 className="font-medium flex items-center gap-2">
@@ -17,6 +20,7 @@ export default function VideoPreview({ videoUrl, jobId }) {
           controls
           className="w-full h-full object-contain"
           poster=""
+          key={videoUrl}
         >
           브라우저가 비디오를 지원하지 않습니다.
         </video>
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 9bdbfb3..32377c1 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -498,8 +498,8 @@ export default function HomePage() {
     try {
       const res = await thumbnailApi.generateCatchphrase(currentJob.job_id, 'homeshopping');
       if (res.data.catchphrase) {
-        // 최대 10자 제한
-        const text = res.data.catchphrase.slice(0, 10);
+        // 최대 20자 제한
+        const text = res.data.catchphrase.slice(0, 20);
         setIntroText(text);
       }
     } catch (err) {
@@ -575,7 +575,7 @@ export default function HomePage() {
                   완성된 영상
                 </h3>
                 <VideoPreview
-                  videoUrl={jobsApi.downloadOutput(currentJob.job_id)}
+                  videoUrl={`${jobsApi.downloadOutput(currentJob.job_id)}?t=${new Date(currentJob.updated_at).getTime()}`}
                   jobId={currentJob.job_id}
                 />
               </div>
@@ -905,13 +905,13 @@ export default function HomePage() {
                       <input
                         type="text"
                         value={introText}
-                        onChange={(e) => setIntroText(e.target.value.slice(0, 10))}
-                        placeholder="최대 10자 입력..."
-                        maxLength={10}
+                        onChange={(e) => setIntroText(e.target.value.slice(0, 20))}
+                        placeholder="최대 20자 입력..."
+                        maxLength={20}
                         className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white text-lg focus:outline-none focus:border-pink-500"
                       />
                       <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-500">
-                        {introText.length}/10
+                        {introText.length}/20
                       </span>
                     </div>