feat: 숏폼 큐 복사 완료 흐름 간소화

This commit is contained in:
hehihoho3@gmail.com 2026-09-02 09:15:35 +09:00
parent 6151228248
commit b4a72115b5

View File

@ -158,16 +158,10 @@
} }
const detail = await api('/api/shortform/jobs/' + id); const detail = await api('/api/shortform/jobs/' + id);
const toolbar = `<div class="sf-clip-head" style="margin-bottom:0.6rem;"> const toolbar = `<div class="sf-clip-head" style="margin-bottom:0.6rem;">
<button class="btn btn-primary" data-copy="${encodeURIComponent(detail.rawOutput || '')}"
data-label="전체 Output 복사 (capcut2 오팔 JSON 탭용)"
${detail.rawOutput ? '' : 'disabled'}>전체 Output 복사 (capcut2 오팔 JSON 탭용)</button>
<button class="btn btn-secondary" data-copy="${encodeURIComponent(detail.step1Output || '')}"
data-label="Step 1 후보구간 복사"
${detail.step1Output ? '' : 'disabled'}>Step 1 후보구간 복사</button>
<button class="btn btn-secondary" data-copy="${encodeURIComponent(detail.youtubeUrl || '')}" <button class="btn btn-secondary" data-copy="${encodeURIComponent(detail.youtubeUrl || '')}"
data-label="영상 URL 복사">영상 URL 복사</button> data-complete-on-copy>영상 URL 복사</button>
<button class="btn btn-secondary" data-subtitle-copy <button class="btn btn-secondary" data-subtitle-copy
data-label="타임스탬프 자막 복사" ${detail.subtitleVtt ? '' : 'disabled'}>타임스탬프 자막 복사</button> data-complete-on-copy ${detail.subtitleVtt ? '' : 'disabled'}>타임스탬프 자막 복사</button>
${detail.subtitleStatus === 'READY' || detail.subtitleStatus === 'COLLECTING' ? '' : ` ${detail.subtitleStatus === 'READY' || detail.subtitleStatus === 'COLLECTING' ? '' : `
<button class="btn btn-secondary" onclick="retrySubtitles(${detail.id}, event)">자막 다시 수집</button>`} <button class="btn btn-secondary" onclick="retrySubtitles(${detail.id}, event)">자막 다시 수집</button>`}
</div>`; </div>`;
@ -184,20 +178,25 @@
openJobIds.add(id); openJobIds.add(id);
el.querySelectorAll('[data-copy]').forEach(btn => { el.querySelectorAll('[data-copy]').forEach(btn => {
const label = btn.dataset.label || 'capcut2 JSON 복사'; const label = btn.dataset.label || 'capcut2 JSON 복사';
btn.onclick = (e) => { btn.onclick = async (e) => {
e.stopPropagation(); e.stopPropagation();
navigator.clipboard.writeText(decodeURIComponent(btn.dataset.copy)); await navigator.clipboard.writeText(decodeURIComponent(btn.dataset.copy));
if (btn.hasAttribute('data-complete-on-copy')) {
btn.textContent = '완료';
btn.disabled = true;
} else {
btn.textContent = '복사됨!'; btn.textContent = '복사됨!';
setTimeout(() => btn.textContent = label, 1200); setTimeout(() => btn.textContent = label, 1200);
}
}; };
}); });
const subtitleButton = el.querySelector('[data-subtitle-copy]'); const subtitleButton = el.querySelector('[data-subtitle-copy]');
if (subtitleButton && detail.subtitleVtt) { if (subtitleButton && detail.subtitleVtt) {
subtitleButton.onclick = (e) => { subtitleButton.onclick = async (e) => {
e.stopPropagation(); e.stopPropagation();
navigator.clipboard.writeText(detail.subtitleVtt); await navigator.clipboard.writeText(detail.subtitleVtt);
subtitleButton.textContent = '복사됨!'; subtitleButton.textContent = '완료';
setTimeout(() => subtitleButton.textContent = '타임스탬프 자막 복사', 1200); subtitleButton.disabled = true;
}; };
} }
} }
@ -299,11 +298,11 @@
const button = card.querySelector('[data-subtitle-copy]'); const button = card.querySelector('[data-subtitle-copy]');
if (!button || !detail.subtitleVtt) return; if (!button || !detail.subtitleVtt) return;
button.disabled = false; button.disabled = false;
button.onclick = (e) => { button.onclick = async (e) => {
e.stopPropagation(); e.stopPropagation();
navigator.clipboard.writeText(detail.subtitleVtt); await navigator.clipboard.writeText(detail.subtitleVtt);
button.textContent = '복사됨!'; button.textContent = '완료';
setTimeout(() => button.textContent = '타임스탬프 자막 복사', 1200); button.disabled = true;
}; };
} }