3c8f7c9f66
- TutorialVideoController에 detail/{id} 엔드포인트 추가 (analysis_data 반환)
- HistoryTable에 새로고침 버튼 추가 (스피너 애니메이션)
- 행 클릭 시 스크립트 상세정보 (화면별 단계, 나레이션, 소요시간) 펼침 표시
- 상세 데이터는 캐시하여 재클릭 시 재요청 없음
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1004 lines
48 KiB
PHP
1004 lines
48 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'SAM 매뉴얼 영상 생성기')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.step-badge {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
width: 2rem; height: 2rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 700;
|
|
}
|
|
.step-active { background: #4f46e5; color: #fff; }
|
|
.step-done { background: #22c55e; color: #fff; }
|
|
.step-pending { background: #e5e7eb; color: #6b7280; }
|
|
.progress-bar { height: 0.75rem; border-radius: 9999px; transition: all 0.5s ease-out; }
|
|
.fade-in { animation: fadeIn 0.3s ease-in; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
.upload-zone {
|
|
border: 2px dashed #d1d5db; border-radius: 0.75rem; padding: 2rem;
|
|
text-align: center; cursor: pointer; transition: all 0.2s ease;
|
|
}
|
|
.upload-zone:hover, .upload-zone.dragover { border-color: #818cf8; background: #eef2ff; }
|
|
.upload-zone.paste-flash { border-color: #22c55e; background: #f0fdf4; transition: all 0.15s ease; }
|
|
.upload-zone:focus { outline: 2px solid #818cf8; outline-offset: 2px; }
|
|
.screenshot-list {
|
|
display: flex; flex-wrap: wrap; gap: 0.75rem; min-height: 100px;
|
|
padding: 0.5rem; border: 2px dashed transparent; border-radius: 0.75rem; transition: all 0.2s;
|
|
}
|
|
.screenshot-list.reorder-active { border-color: #818cf8; background: #f5f3ff; }
|
|
.screenshot-thumb {
|
|
position: relative; width: 140px; height: 105px; border-radius: 0.5rem;
|
|
overflow: hidden; border: 2px solid #e5e7eb; cursor: grab; transition: all 0.2s;
|
|
user-select: none; flex-shrink: 0;
|
|
}
|
|
.screenshot-thumb:hover { border-color: #818cf8; box-shadow: 0 2px 8px rgba(79,70,229,0.15); }
|
|
.screenshot-thumb.dragging { opacity: 0.4; transform: scale(0.95); }
|
|
.screenshot-thumb.drag-over { border-color: #4f46e5; border-style: dashed; }
|
|
.screenshot-thumb img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
|
|
.screenshot-thumb .remove-btn {
|
|
position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
|
|
background: rgba(239,68,68,0.9); color: #fff; border: none; border-radius: 9999px;
|
|
font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
|
|
opacity: 0; transition: opacity 0.15s;
|
|
}
|
|
.screenshot-thumb:hover .remove-btn { opacity: 1; }
|
|
.screenshot-thumb .order-badge {
|
|
position: absolute; bottom: 4px; left: 4px; min-width: 22px; height: 22px; padding: 0 4px;
|
|
background: rgba(79,70,229,0.9); color: #fff; border-radius: 9999px;
|
|
font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.screenshot-thumb .drag-handle {
|
|
position: absolute; top: 4px; left: 4px; width: 22px; height: 22px;
|
|
background: rgba(0,0,0,0.4); color: #fff; border-radius: 4px;
|
|
font-size: 10px; display: flex; align-items: center; justify-content: center;
|
|
opacity: 0; transition: opacity 0.15s; cursor: grab;
|
|
}
|
|
.screenshot-thumb:hover .drag-handle { opacity: 1; }
|
|
.screenshot-add-btn {
|
|
width: 140px; height: 105px; border: 2px dashed #d1d5db; border-radius: 0.5rem;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
cursor: pointer; transition: all 0.2s; color: #9ca3af; flex-shrink: 0;
|
|
}
|
|
.screenshot-add-btn:hover { border-color: #818cf8; color: #6366f1; background: #f5f3ff; }
|
|
.progress-btn {
|
|
position: relative; overflow: hidden; min-width: 280px;
|
|
background: #4338ca !important; color: #fff !important;
|
|
border: none !important; opacity: 1 !important;
|
|
}
|
|
.progress-btn .progress-fill {
|
|
position: absolute; left: 0; top: 0; bottom: 0;
|
|
background: rgba(255,255,255,0.2); transition: width 0.3s ease-out;
|
|
pointer-events: none;
|
|
}
|
|
.progress-btn .btn-content {
|
|
position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
|
|
}
|
|
.progress-btn.is-loading {
|
|
background: #312e81 !important; cursor: wait !important;
|
|
}
|
|
.analysis-card {
|
|
background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
|
|
padding: 1rem; margin-bottom: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);
|
|
}
|
|
.ui-element-tag {
|
|
display: inline-flex; align-items: center; gap: 0.25rem;
|
|
padding: 0.125rem 0.5rem; background: #f3f4f6; border-radius: 9999px;
|
|
font-size: 0.75rem; color: #4b5563;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<div id="tutorial-root"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
@include('partials.react-cdn')
|
|
@verbatim
|
|
<script type="text/babel">
|
|
const { useState, useEffect, useCallback, useRef } = React;
|
|
|
|
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content;
|
|
|
|
const api = (url, options = {}) => {
|
|
const headers = { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json', ...options.headers };
|
|
if (!(options.body instanceof FormData)) {
|
|
headers['Content-Type'] = 'application/json';
|
|
}
|
|
return fetch(url, { headers, ...options }).then(async (res) => {
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.message || `HTTP ${res.status}`);
|
|
return data;
|
|
});
|
|
};
|
|
|
|
// ============================================================
|
|
// Step Indicator
|
|
// ============================================================
|
|
const StepIndicator = ({ currentStep }) => {
|
|
const steps = [
|
|
{ num: 1, label: '업로드' },
|
|
{ num: 2, label: 'AI 분석' },
|
|
{ num: 3, label: '영상 생성' },
|
|
];
|
|
return (
|
|
<div className="flex items-center justify-center gap-2 mb-8">
|
|
{steps.map((step, i) => (
|
|
<React.Fragment key={step.num}>
|
|
<div className="flex flex-col items-center">
|
|
<div className={`step-badge ${currentStep > step.num ? 'step-done' : currentStep === step.num ? 'step-active' : 'step-pending'}`}>
|
|
{currentStep > step.num ? '\u2713' : step.num}
|
|
</div>
|
|
<span className={`text-xs mt-1 ${currentStep >= step.num ? 'text-indigo-600 font-medium' : 'text-gray-400'}`}>
|
|
{step.label}
|
|
</span>
|
|
</div>
|
|
{i < steps.length - 1 && (
|
|
<div className={`w-12 h-0.5 mt-[-12px] ${currentStep > step.num ? 'bg-green-500' : 'bg-gray-200'}`} />
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// Step 1: Screenshot Upload
|
|
// ============================================================
|
|
const ScreenshotUpload = ({ onUploadComplete, onAnalysisComplete, loading, setLoading }) => {
|
|
const [files, setFiles] = useState([]);
|
|
const [previews, setPreviews] = useState([]);
|
|
const [pasteFlash, setPasteFlash] = useState(false);
|
|
const [dragIdx, setDragIdx] = useState(null);
|
|
const [dragOverIdx, setDragOverIdx] = useState(null);
|
|
const [uploadProgress, setUploadProgress] = useState(0); // 0~100
|
|
const [uploadPhase, setUploadPhase] = useState(''); // '', 'uploading', 'analyzing'
|
|
const fileInputRef = useRef(null);
|
|
const filesRef = useRef(files);
|
|
const previewsRef = useRef(previews);
|
|
|
|
// ref를 항상 최신 state와 동기화 (stale closure 방지)
|
|
useEffect(() => { filesRef.current = files; }, [files]);
|
|
useEffect(() => { previewsRef.current = previews; }, [previews]);
|
|
|
|
// 파일 추가 (stale closure 없음 - ref 사용)
|
|
const addFiles = useCallback((newFiles) => {
|
|
const imageFiles = Array.from(newFiles).filter(f => f.type.startsWith('image/'));
|
|
if (imageFiles.length === 0) return;
|
|
|
|
const prev = filesRef.current;
|
|
const remaining = 10 - prev.length;
|
|
if (remaining <= 0) return;
|
|
|
|
const toAdd = imageFiles.slice(0, remaining);
|
|
const total = [...prev, ...toAdd];
|
|
setFiles(total);
|
|
|
|
// 새 파일들만 preview URL 생성하고 기존 것에 append
|
|
const newUrls = toAdd.map(f => URL.createObjectURL(f));
|
|
setPreviews([...previewsRef.current, ...newUrls]);
|
|
}, []);
|
|
|
|
// Ctrl+V 클립보드 붙여넣기
|
|
useEffect(() => {
|
|
const handlePaste = (e) => {
|
|
const items = e.clipboardData?.items;
|
|
if (!items) return;
|
|
|
|
const imageFiles = [];
|
|
for (const item of items) {
|
|
if (item.type.startsWith('image/')) {
|
|
const file = item.getAsFile();
|
|
if (file) {
|
|
const ext = item.type.split('/')[1] || 'png';
|
|
const named = new File([file], `clipboard_${Date.now()}_${imageFiles.length + 1}.${ext}`, { type: item.type });
|
|
imageFiles.push(named);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (imageFiles.length > 0) {
|
|
e.preventDefault();
|
|
addFiles(imageFiles);
|
|
setPasteFlash(true);
|
|
setTimeout(() => setPasteFlash(false), 600);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('paste', handlePaste);
|
|
return () => document.removeEventListener('paste', handlePaste);
|
|
}, [addFiles]);
|
|
|
|
const removeFile = (index) => {
|
|
URL.revokeObjectURL(previews[index]);
|
|
setFiles(prev => prev.filter((_, i) => i !== index));
|
|
setPreviews(prev => prev.filter((_, i) => i !== index));
|
|
};
|
|
|
|
// 드래그 재정렬
|
|
const handleThumbDragStart = (e, idx) => {
|
|
setDragIdx(idx);
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
};
|
|
|
|
const handleThumbDragOver = (e, idx) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = 'move';
|
|
if (idx !== dragOverIdx) setDragOverIdx(idx);
|
|
};
|
|
|
|
const handleThumbDrop = (e, toIdx) => {
|
|
e.preventDefault();
|
|
if (dragIdx === null || dragIdx === toIdx) { setDragIdx(null); setDragOverIdx(null); return; }
|
|
|
|
setFiles(prev => {
|
|
const arr = [...prev];
|
|
const [moved] = arr.splice(dragIdx, 1);
|
|
arr.splice(toIdx, 0, moved);
|
|
return arr;
|
|
});
|
|
setPreviews(prev => {
|
|
const arr = [...prev];
|
|
const [moved] = arr.splice(dragIdx, 1);
|
|
arr.splice(toIdx, 0, moved);
|
|
return arr;
|
|
});
|
|
setDragIdx(null);
|
|
setDragOverIdx(null);
|
|
};
|
|
|
|
// XHR 업로드 (진행률 지원) + AI 분석까지 한번에
|
|
const handleUpload = async () => {
|
|
if (files.length === 0) return;
|
|
setLoading(true);
|
|
setUploadPhase('uploading');
|
|
setUploadProgress(0);
|
|
|
|
try {
|
|
// Phase 1: 파일 업로드 (0~50%)
|
|
const formData = new FormData();
|
|
files.forEach(f => formData.append('screenshots[]', f));
|
|
|
|
const uploadResult = await new Promise((resolve, reject) => {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/video/tutorial/upload');
|
|
xhr.setRequestHeader('X-CSRF-TOKEN', CSRF);
|
|
xhr.setRequestHeader('Accept', 'application/json');
|
|
|
|
xhr.upload.onprogress = (e) => {
|
|
if (e.lengthComputable) {
|
|
const pct = Math.round((e.loaded / e.total) * 50);
|
|
setUploadProgress(pct);
|
|
}
|
|
};
|
|
|
|
xhr.onload = () => {
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
resolve(JSON.parse(xhr.responseText));
|
|
} else {
|
|
try {
|
|
const err = JSON.parse(xhr.responseText);
|
|
reject(new Error(err.message || `HTTP ${xhr.status}`));
|
|
} catch {
|
|
reject(new Error(`HTTP ${xhr.status}`));
|
|
}
|
|
}
|
|
};
|
|
xhr.onerror = () => reject(new Error('네트워크 오류'));
|
|
xhr.send(formData);
|
|
});
|
|
|
|
// Phase 2: AI 분석 (50~100%)
|
|
setUploadPhase('analyzing');
|
|
setUploadProgress(55);
|
|
|
|
// 분석은 시간이 걸리므로 진행률 시뮬레이션
|
|
const analyzeTimer = setInterval(() => {
|
|
setUploadProgress(prev => prev < 90 ? prev + 3 : prev);
|
|
}, 800);
|
|
|
|
const analyzeResult = await api('/video/tutorial/analyze', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ paths: uploadResult.paths }),
|
|
});
|
|
|
|
clearInterval(analyzeTimer);
|
|
setUploadProgress(100);
|
|
|
|
// 완료 후 잠시 대기 (100% 표시)
|
|
await new Promise(r => setTimeout(r, 400));
|
|
|
|
onAnalysisComplete(uploadResult.paths, analyzeResult.analysis);
|
|
} catch (err) {
|
|
alert(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
setUploadPhase('');
|
|
setUploadProgress(0);
|
|
}
|
|
};
|
|
|
|
const isEmpty = files.length === 0;
|
|
|
|
return (
|
|
<div className="fade-in max-w-3xl mx-auto">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-800">SAM 화면 스크린샷 업로드</h2>
|
|
<p className="text-gray-500 mt-2">시나리오 순서대로 스크린샷을 추가하세요. 드래그로 순서 변경 가능합니다.</p>
|
|
</div>
|
|
|
|
{isEmpty ? (
|
|
<div
|
|
className={`upload-zone ${pasteFlash ? 'paste-flash' : ''}`}
|
|
onClick={() => fileInputRef.current?.click()}
|
|
onDragOver={(e) => e.preventDefault()}
|
|
onDrop={(e) => { e.preventDefault(); addFiles(e.dataTransfer.files); }}
|
|
tabIndex={0}
|
|
>
|
|
<input ref={fileInputRef} type="file" multiple accept="image/*" className="hidden"
|
|
onChange={(e) => { addFiles(e.target.files); e.target.value = ''; }} />
|
|
<svg className="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
|
|
</svg>
|
|
<p className="mt-2 text-sm text-gray-600">
|
|
클릭, 드래그 또는 <kbd className="px-1.5 py-0.5 bg-gray-100 border border-gray-300 rounded text-xs font-mono">Ctrl+V</kbd> 붙여넣기
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-1">PNG, JPG, GIF (최대 10장, 각 10MB) | 화면 캡처 후 바로 붙여넣기 가능</p>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<div className="text-sm font-medium text-gray-700">
|
|
스크린샷 순서 ({files.length}/10)
|
|
{files.length >= 2 && <span className="text-xs text-gray-400 ml-2">드래그로 순서 변경</span>}
|
|
</div>
|
|
<div className={`text-xs px-2 py-1 rounded-full transition-all ${pasteFlash ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>
|
|
<kbd className="font-mono">Ctrl+V</kbd> 로 추가
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`screenshot-list ${dragIdx !== null ? 'reorder-active' : ''}`}
|
|
onDragOver={(e) => e.preventDefault()}
|
|
onDrop={(e) => { e.preventDefault(); addFiles(e.dataTransfer.files); }}
|
|
>
|
|
{previews.map((src, i) => (
|
|
<div
|
|
key={`${i}-${files[i]?.name}`}
|
|
className={`screenshot-thumb ${dragIdx === i ? 'dragging' : ''} ${dragOverIdx === i ? 'drag-over' : ''}`}
|
|
draggable
|
|
onDragStart={(e) => handleThumbDragStart(e, i)}
|
|
onDragOver={(e) => handleThumbDragOver(e, i)}
|
|
onDrop={(e) => { e.stopPropagation(); handleThumbDrop(e, i); }}
|
|
onDragEnd={() => { setDragIdx(null); setDragOverIdx(null); }}
|
|
>
|
|
<img src={src} alt={`Screenshot ${i+1}`} />
|
|
<div className="drag-handle" title="드래그로 순서 변경">☰</div>
|
|
<button className="remove-btn" onClick={(e) => { e.stopPropagation(); removeFile(i); }} title="삭제">
|
|
×
|
|
</button>
|
|
<div className="order-badge">{i + 1}</div>
|
|
</div>
|
|
))}
|
|
|
|
{files.length < 10 && (
|
|
<div className="screenshot-add-btn" onClick={() => fileInputRef.current?.click()} title="스크린샷 추가">
|
|
<svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
<span className="text-xs mt-1">추가</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<input ref={fileInputRef} type="file" multiple accept="image/*" className="hidden"
|
|
onChange={(e) => { addFiles(e.target.files); e.target.value = ''; }} />
|
|
</div>
|
|
)}
|
|
|
|
{files.length > 0 && (
|
|
<div className="mt-6 text-center">
|
|
<button
|
|
onClick={() => { if (!loading) handleUpload(); }}
|
|
className={`progress-btn px-6 py-3 rounded-lg font-medium ${loading ? 'is-loading' : 'hover:opacity-90'}`}
|
|
>
|
|
{loading && <div className="progress-fill" style={{ width: `${uploadProgress}%` }} />}
|
|
<span className="btn-content">
|
|
{loading ? (
|
|
<>
|
|
<svg className="animate-spin h-4 w-4 flex-shrink-0" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/></svg>
|
|
<span>
|
|
{uploadPhase === 'uploading' && `업로드 중... ${uploadProgress}%`}
|
|
{uploadPhase === 'analyzing' && `AI 분석 중... ${uploadProgress}%`}
|
|
</span>
|
|
</>
|
|
) : (
|
|
`${files.length}장 업로드 & AI 분석 시작`
|
|
)}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// Step 2: Analysis Review
|
|
// ============================================================
|
|
const AnalysisReview = ({ analysis, paths, onConfirm, onBack, loading, setLoading }) => {
|
|
const [editedAnalysis, setEditedAnalysis] = useState(analysis);
|
|
const [title, setTitle] = useState('SAM 사용자 매뉴얼');
|
|
|
|
const updateStepNarration = (screenIndex, stepIndex, newNarration) => {
|
|
const updated = [...editedAnalysis];
|
|
const steps = [...(updated[screenIndex].steps || [])];
|
|
steps[stepIndex] = { ...steps[stepIndex], narration: newNarration };
|
|
updated[screenIndex] = { ...updated[screenIndex], steps };
|
|
setEditedAnalysis(updated);
|
|
};
|
|
|
|
const handleGenerate = () => {
|
|
onConfirm(editedAnalysis, title);
|
|
};
|
|
|
|
// 전체 예상 시간 계산
|
|
const totalDuration = editedAnalysis.reduce((sum, screen) => {
|
|
const screenDur = (screen.steps || []).reduce((s, step) => s + (step.duration || 6), 0);
|
|
return sum + screenDur;
|
|
}, 6); // +6 for intro+outro
|
|
|
|
const totalSteps = editedAnalysis.reduce((sum, screen) => sum + (screen.steps || []).length, 0);
|
|
|
|
return (
|
|
<div className="fade-in max-w-3xl mx-auto">
|
|
<div className="text-center mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-800">AI 분석 결과 확인</h2>
|
|
<p className="text-gray-500 mt-2">단계별 나레이션을 편집하고 영상을 생성하세요</p>
|
|
<div className="mt-2 inline-flex items-center gap-3 px-4 py-1.5 bg-indigo-50 rounded-full text-sm">
|
|
<span className="text-indigo-700 font-medium">총 {totalSteps}단계</span>
|
|
<span className="text-gray-300">|</span>
|
|
<span className="text-indigo-600">예상 {totalDuration}초 ({Math.floor(totalDuration/60)}분 {totalDuration%60}초)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">영상 제목</label>
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
|
|
placeholder="영상 제목을 입력하세요"
|
|
/>
|
|
</div>
|
|
|
|
{editedAnalysis.map((screen, i) => {
|
|
const steps = screen.steps || [];
|
|
const screenDuration = steps.reduce((s, step) => s + (step.duration || 6), 0);
|
|
|
|
return (
|
|
<div key={i} className="analysis-card">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<span className="step-badge step-active">{screen.screen_number || i + 1}</span>
|
|
<div>
|
|
<div className="font-medium text-gray-800">{screen.title}</div>
|
|
<div className="text-xs text-gray-400">
|
|
{steps.length}단계 · 예상 {screenDuration}초
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-3 ml-2 border-l-2 border-indigo-100 pl-4">
|
|
{steps.map((step, j) => (
|
|
<div key={j} className="relative">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-indigo-100 text-indigo-700 text-xs font-bold">
|
|
{step.step_number || j + 1}
|
|
</span>
|
|
<span className="text-xs text-gray-500 font-medium">
|
|
{step.focused_element?.label || `단계 ${j + 1}`}
|
|
</span>
|
|
<span className="text-xs text-gray-300 ml-auto">{step.duration || 6}초</span>
|
|
</div>
|
|
<textarea
|
|
value={step.narration || ''}
|
|
onChange={(e) => updateStepNarration(i, j, e.target.value)}
|
|
rows={2}
|
|
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"
|
|
/>
|
|
<div className="text-xs text-gray-400 mt-0.5 text-right">{(step.narration || '').length}자</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
<div className="flex gap-3 mt-6 justify-center">
|
|
<button
|
|
onClick={onBack}
|
|
className="px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors"
|
|
>
|
|
이전
|
|
</button>
|
|
<button
|
|
onClick={handleGenerate}
|
|
disabled={loading}
|
|
className="px-6 py-2.5 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 disabled:opacity-50 transition-colors"
|
|
>
|
|
{loading ? '생성 시작 중...' : `영상 생성 시작 (${totalSteps}단계, ~${totalDuration}초)`}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// Step 3: Generation Progress
|
|
// ============================================================
|
|
const GenerationProgress = ({ tutorialId, onComplete, onReset }) => {
|
|
const [status, setStatus] = useState(null);
|
|
const [polling, setPolling] = useState(true);
|
|
const [videoSrc, setVideoSrc] = useState(null);
|
|
const intervalRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (!tutorialId || !polling) return;
|
|
|
|
const poll = async () => {
|
|
try {
|
|
const data = await api(`/video/tutorial/status/${tutorialId}`);
|
|
setStatus(data);
|
|
if (data.status === 'completed' || data.status === 'failed') {
|
|
setPolling(false);
|
|
if (data.status === 'completed') {
|
|
// GCS 서명URL 가져오기 (CORS 회피), 실패 시 로컬 스트리밍 fallback
|
|
try {
|
|
const urlData = await api(`/video/tutorial/preview/${tutorialId}?url=1`);
|
|
setVideoSrc(urlData.url);
|
|
} catch {
|
|
setVideoSrc(`/video/tutorial/preview/${tutorialId}`);
|
|
}
|
|
onComplete?.();
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('Polling error:', err);
|
|
}
|
|
};
|
|
|
|
poll();
|
|
intervalRef.current = setInterval(poll, 2000);
|
|
return () => clearInterval(intervalRef.current);
|
|
}, [tutorialId, polling]);
|
|
|
|
const isCompleted = status?.status === 'completed';
|
|
const isFailed = status?.status === 'failed';
|
|
const progress = status?.progress || 0;
|
|
|
|
return (
|
|
<div className="fade-in max-w-lg mx-auto text-center">
|
|
{!isCompleted && !isFailed && (
|
|
<>
|
|
<div className="mb-4">
|
|
<svg className="animate-spin h-8 w-8 text-indigo-600 mx-auto" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-gray-800 mb-2">영상 생성 중...</h3>
|
|
<p className="text-sm text-gray-500 mb-4">{status?.current_step || '대기 중...'}</p>
|
|
</>
|
|
)}
|
|
|
|
<div className="w-full bg-gray-200 rounded-full mb-2">
|
|
<div
|
|
className={`progress-bar ${isCompleted ? 'bg-green-500' : isFailed ? 'bg-red-500' : 'bg-indigo-600'}`}
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
<div className="text-sm text-gray-500 mb-6">{progress}%</div>
|
|
|
|
{isCompleted && videoSrc && (
|
|
<div className="fade-in">
|
|
<div className="text-green-600 text-lg font-bold mb-4">영상 생성 완료!</div>
|
|
|
|
<div className="mb-6 rounded-xl overflow-hidden border border-gray-200 shadow-sm">
|
|
<video
|
|
controls
|
|
className="w-full"
|
|
src={videoSrc}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-3 justify-center">
|
|
<a
|
|
href={`/video/tutorial/download/${tutorialId}`}
|
|
className="px-5 py-2.5 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors inline-flex items-center gap-2"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
|
|
다운로드
|
|
</a>
|
|
<button
|
|
onClick={onReset}
|
|
className="px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors"
|
|
>
|
|
새로 만들기
|
|
</button>
|
|
</div>
|
|
|
|
{status?.cost_usd > 0 && (
|
|
<div className="mt-3 text-xs text-gray-400">예상 비용: ${Number(status.cost_usd).toFixed(4)}</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{isFailed && (
|
|
<div className="fade-in">
|
|
<div className="text-red-600 text-lg font-bold mb-2">생성 실패</div>
|
|
<p className="text-sm text-red-500 mb-4">{status?.error_message || '알 수 없는 오류'}</p>
|
|
<button
|
|
onClick={onReset}
|
|
className="px-5 py-2.5 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 transition-colors"
|
|
>
|
|
다시 시도
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// History Detail Panel (행 클릭 시 표시)
|
|
// ============================================================
|
|
const HistoryDetail = ({ detail, onClose }) => {
|
|
if (!detail) return null;
|
|
|
|
const analysis = detail.analysis_data || [];
|
|
const totalSteps = analysis.reduce((sum, s) => sum + (s.steps || []).length, 0);
|
|
const totalDuration = analysis.reduce((sum, s) =>
|
|
sum + (s.steps || []).reduce((d, step) => d + (step.duration || 6), 0), 6
|
|
);
|
|
|
|
return (
|
|
<tr>
|
|
<td colSpan="7" className="px-0 py-0">
|
|
<div className="bg-indigo-50 border-t border-b border-indigo-200 px-4 py-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-3">
|
|
<h4 className="font-bold text-gray-800">{detail.title || '제목 없음'}</h4>
|
|
<span className="text-xs px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-full">
|
|
{totalSteps}단계 / 예상 {totalDuration}초
|
|
</span>
|
|
</div>
|
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-lg leading-none">×</button>
|
|
</div>
|
|
|
|
{analysis.length === 0 ? (
|
|
<p className="text-sm text-gray-500">분석 데이터가 없습니다.</p>
|
|
) : (
|
|
<div className="space-y-3 max-h-96 overflow-y-auto">
|
|
{analysis.map((screen, i) => {
|
|
const steps = screen.steps || [];
|
|
return (
|
|
<div key={i} className="bg-white rounded-lg border border-gray-200 p-3">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-indigo-600 text-white text-xs font-bold">
|
|
{screen.screen_number || i + 1}
|
|
</span>
|
|
<span className="font-medium text-gray-800 text-sm">{screen.title || `화면 ${i + 1}`}</span>
|
|
<span className="text-xs text-gray-400">{steps.length}단계</span>
|
|
</div>
|
|
<div className="space-y-1.5 ml-3 border-l-2 border-indigo-100 pl-3">
|
|
{steps.map((step, j) => (
|
|
<div key={j} className="flex items-start gap-2">
|
|
<span className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-indigo-100 text-indigo-700 text-[10px] font-bold mt-0.5 flex-shrink-0">
|
|
{step.step_number || j + 1}
|
|
</span>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-medium text-gray-600">
|
|
{step.focused_element?.label || `단계 ${j + 1}`}
|
|
</span>
|
|
<span className="text-[10px] text-gray-400">{step.duration || 6}초</span>
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-0.5 leading-relaxed">{step.narration || '-'}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// History Table
|
|
// ============================================================
|
|
const HistoryTable = ({ refreshKey }) => {
|
|
const [items, setItems] = useState([]);
|
|
const [selected, setSelected] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [expandedId, setExpandedId] = useState(null);
|
|
const [detailData, setDetailData] = useState({});
|
|
const [detailLoading, setDetailLoading] = useState(null);
|
|
|
|
const fetchHistory = async (showSpinner) => {
|
|
if (showSpinner) setRefreshing(true);
|
|
try {
|
|
const data = await api('/video/tutorial/history');
|
|
setItems(data.data || []);
|
|
} catch (err) {
|
|
console.error(err);
|
|
} finally {
|
|
if (showSpinner) setRefreshing(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { fetchHistory(false); }, [refreshKey]);
|
|
|
|
const handleRefresh = () => { fetchHistory(true); };
|
|
|
|
const toggleSelect = (id) => {
|
|
setSelected(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
|
|
};
|
|
|
|
const toggleAll = () => {
|
|
setSelected(selected.length === items.length ? [] : items.map(i => i.id));
|
|
};
|
|
|
|
const deleteSelected = async () => {
|
|
if (selected.length === 0 || !confirm(`${selected.length}개 항목을 삭제하시겠습니까?`)) return;
|
|
setLoading(true);
|
|
try {
|
|
await api('/video/tutorial/history', {
|
|
method: 'DELETE',
|
|
body: JSON.stringify({ ids: selected }),
|
|
});
|
|
setSelected([]);
|
|
fetchHistory(false);
|
|
} catch (err) {
|
|
alert(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const toggleDetail = async (id) => {
|
|
if (expandedId === id) {
|
|
setExpandedId(null);
|
|
return;
|
|
}
|
|
|
|
setExpandedId(id);
|
|
|
|
if (!detailData[id]) {
|
|
setDetailLoading(id);
|
|
try {
|
|
const data = await api(`/video/tutorial/detail/${id}`);
|
|
setDetailData(prev => ({ ...prev, [id]: data.data }));
|
|
} catch (err) {
|
|
console.error('상세 조회 실패:', err);
|
|
} finally {
|
|
setDetailLoading(null);
|
|
}
|
|
}
|
|
};
|
|
|
|
const statusLabel = (status) => {
|
|
const map = {
|
|
pending: { label: '대기', cls: 'bg-gray-100 text-gray-600' },
|
|
analyzing: { label: '분석중', cls: 'bg-blue-100 text-blue-700' },
|
|
generating_slides: { label: '슬라이드', cls: 'bg-blue-100 text-blue-700' },
|
|
generating_tts: { label: 'TTS', cls: 'bg-blue-100 text-blue-700' },
|
|
generating_bgm: { label: 'BGM', cls: 'bg-blue-100 text-blue-700' },
|
|
assembling: { label: '합성중', cls: 'bg-yellow-100 text-yellow-700' },
|
|
completed: { label: '완료', cls: 'bg-green-100 text-green-700' },
|
|
failed: { label: '실패', cls: 'bg-red-100 text-red-700' },
|
|
};
|
|
const s = map[status] || { label: status, cls: 'bg-gray-100 text-gray-600' };
|
|
return <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${s.cls}`}>{s.label}</span>;
|
|
};
|
|
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
<div className="mt-10 max-w-4xl mx-auto">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-lg font-bold text-gray-800">생성 이력</h3>
|
|
<button
|
|
onClick={handleRefresh}
|
|
disabled={refreshing}
|
|
className="p-1.5 text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors disabled:opacity-50"
|
|
title="새로고침"
|
|
>
|
|
<svg className={`w-4 h-4 ${refreshing ? 'animate-spin' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{selected.length > 0 && (
|
|
<button
|
|
onClick={deleteSelected}
|
|
disabled={loading}
|
|
className="px-3 py-1.5 bg-red-600 text-white text-sm rounded-lg hover:bg-red-700 disabled:opacity-50"
|
|
>
|
|
{selected.length}개 삭제
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm">
|
|
<table className="w-full text-sm">
|
|
<thead className="bg-gray-50 text-gray-600">
|
|
<tr>
|
|
<th className="px-3 py-2.5 text-left w-8">
|
|
<input type="checkbox" checked={selected.length === items.length && items.length > 0} onChange={toggleAll} className="rounded" />
|
|
</th>
|
|
<th className="px-3 py-2.5 text-left">제목</th>
|
|
<th className="px-3 py-2.5 text-center">상태</th>
|
|
<th className="px-3 py-2.5 text-center">진행</th>
|
|
<th className="px-3 py-2.5 text-center">비용</th>
|
|
<th className="px-3 py-2.5 text-center">생성일</th>
|
|
<th className="px-3 py-2.5 text-center">액션</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100">
|
|
{items.map(item => (
|
|
<React.Fragment key={item.id}>
|
|
<tr
|
|
className={`hover:bg-gray-50 cursor-pointer transition-colors ${expandedId === item.id ? 'bg-indigo-50' : ''}`}
|
|
onClick={(e) => {
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'A' || e.target.closest('a')) return;
|
|
toggleDetail(item.id);
|
|
}}
|
|
>
|
|
<td className="px-3 py-2">
|
|
<input type="checkbox" checked={selected.includes(item.id)} onChange={() => toggleSelect(item.id)} className="rounded" />
|
|
</td>
|
|
<td className="px-3 py-2 text-gray-800 font-medium">
|
|
<div className="flex items-center gap-1.5">
|
|
<svg className={`w-3.5 h-3.5 text-gray-400 transition-transform flex-shrink-0 ${expandedId === item.id ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
{item.title || `#${item.id}`}
|
|
</div>
|
|
</td>
|
|
<td className="px-3 py-2 text-center">{statusLabel(item.status)}</td>
|
|
<td className="px-3 py-2 text-center text-gray-500">{item.progress}%</td>
|
|
<td className="px-3 py-2 text-center text-gray-500">${Number(item.cost_usd || 0).toFixed(3)}</td>
|
|
<td className="px-3 py-2 text-center text-gray-400 text-xs">
|
|
{item.created_at ? new Date(item.created_at).toLocaleDateString('ko-KR', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '-'}
|
|
</td>
|
|
<td className="px-3 py-2 text-center">
|
|
{item.status === 'completed' && (
|
|
<div className="flex gap-1 justify-center">
|
|
<a href={`/video/tutorial/preview/${item.id}`} target="_blank" className="text-indigo-600 hover:text-indigo-800 text-xs font-medium">보기</a>
|
|
<span className="text-gray-300">|</span>
|
|
<a href={`/video/tutorial/download/${item.id}`} className="text-indigo-600 hover:text-indigo-800 text-xs font-medium">저장</a>
|
|
</div>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
{expandedId === item.id && (
|
|
detailLoading === item.id ? (
|
|
<tr><td colSpan="7" className="px-4 py-6 text-center text-gray-500 text-sm">
|
|
<svg className="animate-spin h-5 w-5 text-indigo-600 mx-auto mb-2" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/></svg>
|
|
스크립트 불러오는 중...
|
|
</td></tr>
|
|
) : (
|
|
<HistoryDetail
|
|
detail={detailData[item.id]}
|
|
onClose={() => setExpandedId(null)}
|
|
/>
|
|
)
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// ============================================================
|
|
// Main App
|
|
// ============================================================
|
|
const TutorialApp = () => {
|
|
const [step, setStep] = useState(1);
|
|
const [loading, setLoading] = useState(false);
|
|
const [paths, setPaths] = useState([]);
|
|
const [analysis, setAnalysis] = useState(null);
|
|
const [tutorialId, setTutorialId] = useState(null);
|
|
const [refreshKey, setRefreshKey] = useState(0);
|
|
|
|
const handleAnalysisComplete = (uploadedPaths, analysisData) => {
|
|
setPaths(uploadedPaths);
|
|
setAnalysis(analysisData);
|
|
setStep(2);
|
|
};
|
|
|
|
const handleGenerate = async (editedAnalysis, title) => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await api('/video/tutorial/generate', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ paths, analysis: editedAnalysis, title }),
|
|
});
|
|
setTutorialId(data.id);
|
|
setStep(3);
|
|
} catch (err) {
|
|
alert('생성 시작 실패: ' + err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setStep(1);
|
|
setPaths([]);
|
|
setAnalysis(null);
|
|
setTutorialId(null);
|
|
setRefreshKey(k => k + 1);
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto py-6 px-4">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">SAM 매뉴얼 영상 생성기</h1>
|
|
<p className="text-gray-500 mt-1">스크린샷을 업로드하면 AI가 자동으로 튜토리얼 영상을 만들어 드립니다</p>
|
|
</div>
|
|
|
|
<StepIndicator currentStep={step} />
|
|
|
|
<div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 mb-8">
|
|
{step === 1 && (
|
|
<ScreenshotUpload
|
|
onAnalysisComplete={handleAnalysisComplete}
|
|
loading={loading}
|
|
setLoading={setLoading}
|
|
/>
|
|
)}
|
|
{step === 2 && analysis && (
|
|
<AnalysisReview
|
|
analysis={analysis}
|
|
paths={paths}
|
|
onConfirm={handleGenerate}
|
|
onBack={() => setStep(1)}
|
|
loading={loading}
|
|
setLoading={setLoading}
|
|
/>
|
|
)}
|
|
{step === 3 && tutorialId && (
|
|
<GenerationProgress
|
|
tutorialId={tutorialId}
|
|
onComplete={() => setRefreshKey(k => k + 1)}
|
|
onReset={handleReset}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<HistoryTable refreshKey={refreshKey} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById('tutorial-root'));
|
|
root.render(<TutorialApp />);
|
|
</script>
|
|
@endverbatim
|
|
@endpush
|