+
+ {isLoading ? (
+ /* Loading State */
+
-
{statusMessage}
-
- ) : videoStatus === 'error' ? (
- /* Error State */
-
-
-
{errorMessage}
-
-
- ) : videoUrl ? (
- /* Video Player */
-
- ) : (
-
- )}
-
- {/* Video Player Controls - only show when video is ready */}
- {videoStatus === 'complete' && videoUrl && (
-
-
-
- {/* Tags - only show when complete */}
+ {/* AI Optimization Tags - only show when complete */}
{videoStatus === 'complete' && (
-
- {['AI 최적화', '색상 보정', '다이나믹 자막', '비트 싱크', 'SEO 메타 태그'].map(tag => (
-
- {tag}
-
- ))}
+
+
AI 최적화
+
+ {['색상 보정', '다이나믹 자막', '비트 싱크', 'SEO 메타 태그'].map(tag => (
+
+ ))}
+
)}
{/* Right: Sharing */}
-
-
공유
+
+
+
공유
-
- {socials.map(social => {
- const isSelected = selectedSocials.includes(social.id);
- return (
-
videoStatus === 'complete' && toggleSocial(social.id)}
- className={`social-card ${isSelected ? 'selected' : ''} ${videoStatus !== 'complete' ? 'disabled' : ''}`}
- >
+
+ {socials.map(social => {
+ const isSelected = selectedSocials.includes(social.id);
+ return (
videoStatus === 'complete' && toggleSocial(social.id)}
+ className={`completion-social-card ${videoStatus !== 'complete' ? 'disabled' : ''}`}
>
-
{social.icon}
- {isSelected && (
-
- )}
+
+

+
{social.id}
+
+
{social.email}
-
- {social.id}
-
-
{social.email}
-
- );
- })}
+ );
+ })}
+
-
- 소셜 채널에 배포
-
+
+
+ 소셜 채널에 배포
+
-
- MP4 파일 다운로드
-
+
+ MP4 파일 다운로드
+
+
diff --git a/src/pages/Dashboard/GenerationFlow.tsx b/src/pages/Dashboard/GenerationFlow.tsx
index 4e2e56e..605a65d 100755
--- a/src/pages/Dashboard/GenerationFlow.tsx
+++ b/src/pages/Dashboard/GenerationFlow.tsx
@@ -52,6 +52,8 @@ const GenerationFlow: React.FC
= ({ onHome, initialActiveIt
const [maxWizardIndex, setMaxWizardIndex] = useState(savedWizardStep ? parseInt(savedWizardStep, 10) : 0);
const [songTaskId, setSongTaskId] = useState(savedSongTaskId);
const [imageTaskId, setImageTaskId] = useState(savedImageTaskId);
+ const [videoGenerationStatus, setVideoGenerationStatus] = useState<'idle' | 'generating' | 'complete' | 'error'>('idle');
+ const [videoGenerationProgress, setVideoGenerationProgress] = useState(0);
// URL 이미지를 ImageItem 형태로 변환하여 초기화
const [imageList, setImageList] = useState(
@@ -75,7 +77,8 @@ const GenerationFlow: React.FC = ({ onHome, initialActiveIt
file,
preview: URL.createObjectURL(file),
}));
- setImageList(prev => [...prev, ...newImages]);
+ // 새로 업로드된 이미지를 배열 앞에 추가 (최신 이미지가 상단에 표시)
+ setImageList(prev => [...newImages, ...prev]);
};
// 홈 버튼(로고) 클릭 시 모든 상태 초기화 후 홈으로 이동
@@ -177,6 +180,11 @@ const GenerationFlow: React.FC = ({ onHome, initialActiveIt
setActiveItem('대시보드')}
onNext={(taskId: string) => {
+ // Clear video generation state to start fresh
+ localStorage.removeItem(VIDEO_GENERATION_KEY);
+ setVideoGenerationStatus('idle');
+ setVideoGenerationProgress(0);
+
setImageTaskId(taskId);
localStorage.setItem(IMAGE_TASK_ID_KEY, taskId);
scrollToWizardSection(1);
@@ -197,6 +205,8 @@ const GenerationFlow: React.FC = ({ onHome, initialActiveIt
}}
businessInfo={businessInfo}
imageTaskId={imageTaskId}
+ videoGenerationStatus={videoGenerationStatus}
+ videoGenerationProgress={videoGenerationProgress}
/>
{/* Step 2: Completion */}
@@ -204,6 +214,8 @@ const GenerationFlow: React.FC
= ({ onHome, initialActiveIt
scrollToWizardSection(1)}
songTaskId={songTaskId}
+ onVideoStatusChange={setVideoGenerationStatus}
+ onVideoProgressChange={setVideoGenerationProgress}
/>