fix: 숏폼 자막 갱신 중 카드 펼침 유지

src/main/resources/templates/shortform.html

@@ -78,6 +78,7 @@
             let currentCategory = new URLSearchParams(location.search).get('category') === 'POLITICS'
                 ? 'POLITICS' : 'ENTERTAINMENT';
             let subtitlePollTimer = null;
+            const openJobIds = new Set();
 
             async function api(path, opts) {
                 const res = await fetch(path, Object.assign({ headers: { 'Content-Type': 'application/json' } }, opts));
@@ -132,6 +133,7 @@
                 e.stopPropagation();
                 if (!confirm('이 작업을 삭제할까요?')) return;
                 await api('/api/shortform/jobs/' + id, { method: 'DELETE' });
+                openJobIds.delete(id);
                 loadJobs();
             }
 
@@ -146,8 +148,14 @@
                 } catch (err) { alert('되돌리기 실패: ' + err.message); }
             }
 
-            async function toggleJob(id, el) {
-                if (el.classList.contains('open')) { el.classList.remove('open'); return; }
+            async function toggleJob(id, el, restoreOpen = false) {
+                if (el.classList.contains('open')) {
+                    if (!restoreOpen) {
+                        el.classList.remove('open');
+                        openJobIds.delete(id);
+                    }
+                    return;
+                }
                 const detail = await api('/api/shortform/jobs/' + id);
                 const toolbar = `<div class="sf-clip-head" style="margin-bottom:0.6rem;">
                     <button class="btn btn-primary" data-copy="${encodeURIComponent(detail.rawOutput || '')}"
@@ -173,6 +181,7 @@
                     ? detail.clips.map(clipHtml).join('')
                     : '<p style="color:var(--text-3);">저장된 클립이 없습니다. 결과 붙여넣기 또는 "숏폼 큐 돌려줘"로 채우세요.</p>');
                 el.classList.add('open');
+                openJobIds.add(id);
                 el.querySelectorAll('[data-copy]').forEach(btn => {
                     const label = btn.dataset.label || 'capcut2 JSON 복사';
                     btn.onclick = (e) => {
@@ -247,6 +256,9 @@
                         <div class="sf-clips"></div>`;
                     el.querySelector('.sf-job-head').onclick = () => toggleJob(j.id, el);
                     list.appendChild(el);
+                    if (openJobIds.has(j.id)) {
+                        toggleJob(j.id, el, true).catch(() => openJobIds.delete(j.id));
+                    }
                 });
                 if (window.lucide) lucide.createIcons();
                 clearTimeout(subtitlePollTimer);