diff --git a/src/pages/insta/InstaCards.jsx b/src/pages/insta/InstaCards.jsx index 15b0e68..eb1425b 100644 --- a/src/pages/insta/InstaCards.jsx +++ b/src/pages/insta/InstaCards.jsx @@ -337,6 +337,10 @@ export default function InstaCards() { return; } setSlateProgress({ keyword, status: 'starting', message: '카드 생성 시작...' }); + // 상단 progress 배너가 보이도록 스크롤 (Trends/Cards 어느 탭의 어느 위치에서 눌렀든) + if (typeof window !== 'undefined') { + window.scrollTo({ top: 0, behavior: 'smooth' }); + } try { const { task_id } = await createInstaSlate({ keyword, category, keyword_id }); let st = null; @@ -432,7 +436,7 @@ export default function InstaCards() {
- setSelectedSlateId(null)} /> +
{/* 오른쪽: 슬레이트 목록 + 상세 */} @@ -522,10 +526,6 @@ function KeywordsPanel({ onCreateSlate }) { const [category, setCategory] = useState('전체'); const [keywords, setKeywords] = useState([]); const [creating, setCreating] = useState(null); // keyword_id being created - const slatePoll = usePollTask((t) => { - if (t.status === 'succeeded') onCreateSlate?.(); - setCreating(null); - }); const load = useCallback(() => { const cat = category === '전체' ? undefined : category; @@ -534,18 +534,17 @@ function KeywordsPanel({ onCreateSlate }) { useEffect(() => { load(); }, [load]); + // 부모(InstaCards)의 handleCreateSlate에 위임 — progress 배너 + 스크롤 + 자동 미리보기 공통화 async function handleCreate(kw) { if (creating) return; setCreating(kw.id); try { - const res = await createInstaSlate({ + await onCreateSlate?.({ keyword: kw.keyword, category: kw.category, keyword_id: kw.id, }); - slatePoll.start(res.task_id); - } catch (e) { - alert('카드 생성 실패: ' + e.message); + } finally { setCreating(null); } } @@ -567,7 +566,7 @@ function KeywordsPanel({ onCreateSlate }) { ))}
- {slatePoll.task && } + {/* progress 표시는 상단 ic-slate-progress 배너에서 일괄 처리 */} {keywords.length === 0 ? (
키워드가 없습니다. 키워드 추출을 실행하세요.
@@ -754,11 +753,66 @@ function SlateDetail({ slate, onDelete, onRender }) { )} - {/* 커버 카피 / 바디 카피 */} - {slate.cover_copy && ( + {/* 커버 카피 (1/10) */} + {slate.cover_copy && typeof slate.cover_copy === 'object' && (
-
커버 카피
-
{slate.cover_copy}
+
🎯 커버 (1/10)
+
+ {slate.cover_copy.headline} + {slate.cover_copy.body && ( +
+ {slate.cover_copy.body} +
+ )} + {slate.cover_copy.accent_color && ( +
+ accent: {slate.cover_copy.accent_color} +
+ )} +
+
+ )} + + {/* 본문 카피 8장 (2~9/10) */} + {Array.isArray(slate.body_copies) && slate.body_copies.length > 0 && ( +
+
📝 본문 8장 (2~9/10)
+ {slate.body_copies.map((b, i) => ( +
0 ? '1px solid rgba(255,255,255,0.06)' : 'none', + padding: '10px 0', + }} + > + {i + 2}. {b?.headline || ''} + {b?.body && ( +
+ {b.body} +
+ )} +
+ ))} +
+ )} + + {/* CTA 카피 (10/10) */} + {slate.cta_copy && typeof slate.cta_copy === 'object' && ( +
+
📣 마무리 (10/10)
+
+ {slate.cta_copy.headline} + {slate.cta_copy.body && ( +
+ {slate.cta_copy.body} +
+ )} + {slate.cta_copy.cta && ( +
+ CTA: {slate.cta_copy.cta} +
+ )} +
)}