// ── Pipeline.jsx — n8n-style content automation pipeline ──────────────────
const STAGES = [
{ id:'write', label:'AI 글 생성', sub:'Claude가 스레드 본문 작성', icon:'✍️', color:'#a78bfa' },
{ id:'posted', label:'Threads 포스팅', sub:'실제 스레드에 업로드', icon:'📱', color:'#38bdf8' },
{ id:'cards', label:'카드 이미지', sub:'슬라이드 이미지 자동 생성', icon:'🖼️', color:'#34d399' },
{ id:'thumbnail', label:'썸네일 생성', sub:'저장 배경 + 후킹 문구 합성', icon:'🎨', color:'#fb923c' },
{ id:'render', label:'영상 렌더링', sub:'VPS에서 영상 합성', icon:'🎬', color:'#fbbf24' },
{ id:'publish', label:'SNS 업로드', sub:'YouTube · TikTok · Instagram', icon:'🚀', color:'#f87171' },
];
const PLATFORM_ICONS = { youtube:'▶️', tiktok:'🎵', instagram:'📸' };
const VIDEO_ACTION_STORAGE_KEY = 'saju_pipeline_video_actions_v1';
const POST_ACTION_STORAGE_KEY = 'saju_pipeline_post_actions_v1';
const VIDEO_ACTION_MAX_AGE_MS = 10 * 60 * 1000;
const VIDEO_ACTION_LABELS = {
approve: '승인 중...',
delete: '삭제 중...',
publish: '발행 중...',
retry: '렌더링 재시작 중...',
carousel: '캐러셀 발행 중...',
};
// ── 헬퍼 ──────────────────────────────────────────────────────────────────
function buildPipelineItems(posts, jobs, thumbCache, account) {
const jobById = {};
jobs.forEach(j => { jobById[j.id] = j; });
const jobByPostId = {};
jobs.forEach(j => { if (j.post_id && !jobByPostId[j.post_id]) jobByPostId[j.post_id] = j; });
return posts.map(post => {
const jobIds = Array.isArray(post.metadata?.auto_video_job_ids)
? post.metadata.auto_video_job_ids
: post.metadata?.auto_video_job_id ? [post.metadata.auto_video_job_id] : [];
const relatedJob = jobById[jobIds[0]] || jobByPostId[post.id] || null;
// 썸네일: 방금 생성한 캐시 OR 포스트 메타 OR 잡 메타
const thumbUrl =
thumbCache[post.id] ||
post.metadata?.auto_thumbnail_url ||
relatedJob?.metadata?.thumbnail_image_url || null;
const autoVideoStatus = post.metadata?.auto_video_status || null;
const stage = getStageIndex(post, relatedJob, thumbUrl, autoVideoStatus);
const status = getItemStatus(post, relatedJob, stage, autoVideoStatus);
return {
id: post.id,
title: post.title || post.content?.slice(0,60) || '(제목 없음)',
content: post.content || '',
createdAt: post.created_at,
stage, status,
job: relatedJob,
thumbUrl,
autoVideoStatus,
autoVideoError: post.metadata?.auto_video_error || null,
autoVideoRequestId: post.metadata?.auto_video_request_id || null,
post,
account,
};
});
}
function getStageIndex(post, job, thumbUrl, autoVideoStatus) {
if (job?.status === 'published') return 5;
if (job?.status === 'publishing') return 5;
if (['approved','scheduled','rendered','rendering','queued','failed'].includes(job?.status)) return 4;
if (autoVideoStatus === 'processing' || autoVideoStatus === 'failed') return 4;
if (thumbUrl) return 3; // 썸네일 완료
// ⚠️ 포스팅·카드 단계는 '실제 발행(external_post_id)' 후에만 인정.
// 미발행 draft는 threads_series_parts가 있어도 stage 0 (AI 글 생성만 됨) → 발행된 글과 구분됨.
if (post.external_post_id) {
const hasParts = Array.isArray(post.metadata?.threads_series_parts) && post.metadata.threads_series_parts.length > 0;
if (hasParts) return 2; // 발행됨 + 카드 준비됨
return 1; // 발행됨(Threads 포스팅 완료)
}
return 0; // 미발행
}
function getItemStatus(post, job, stage, autoVideoStatus) {
if (job?.status === 'failed') return 'failed';
if (job?.status === 'published') return 'done';
if (['publishing', 'rendering', 'queued'].includes(job?.status)) return 'active';
if (autoVideoStatus === 'failed') return 'failed';
if (autoVideoStatus === 'processing') return 'active';
if (stage >= 3) return 'done';
// "카드만 자동" 이후: 발행됨 + 카드 준비됨(영상 잡 없음) → 카드 단계를 '현재 진행 단계'로 표시
// → 발행 직후 다음 단계 진행 표시가 뜨고, 사용자가 영상/캐러셀을 진행하도록 안내.
if (post.external_post_id && stage === 2) return 'active';
return 'pending';
}
function stageStatusForItem(item, i) {
if (i < item.stage) return 'done';
if (i === item.stage) {
if (item.status === 'failed') return 'failed';
if (item.status === 'active') return 'active';
return 'done';
}
return 'pending';
}
function fmtDate(v) {
if (!v) return '';
return new Date(v).toLocaleDateString('ko-KR', { month:'short', day:'numeric', hour:'2-digit', minute:'2-digit' });
}
// ══════════════════════════════════════════════════════════════
// 단계별 상세 패널
// ══════════════════════════════════════════════════════════════
// ── 공통: 본문 파트 파싱 유틸 ─────────────────────────────────────────────
function parsePostParts(item) {
const metadataParts = item.post?.metadata?.threads_series_parts;
const generatedParts = item.post?.metadata?.generated_thread?.posts;
function clean(value) {
const isTitleLine = (line) => {
const normalized = line
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.trim()
.toLowerCase();
return /^#{1,6}\s+\S/.test(normalized) ||
/^(?:title|t\S*tulo|titulo|titre|titel|translated title|context title|heading|headline|\uc81c\ubaa9|\u6807\u9898|\u6a19\u984c)\s*[:\uff1a]/.test(normalized);
};
return String(value || '')
.replace(/\r\n/g, '\n')
.replace(/^\s*===+\s*/g, '')
.replace(/\s*===+\s*$/g, '')
.split('\n')
.filter(line => !isTitleLine(line))
.join('\n')
.replace(/^\s*\d+(?:\/\d+)?\.\s*/, '')
.replace(/\.(?!\.\.)([ \t]+)(?=\S)/g, '.\n')
.trim();
}
function splitLong(text, max = 500) {
const c = clean(text);
if (!c || c.length <= max) return c ? [c] : [];
const sentences = c.match(/[^.!?]+[.!?]*/g) || [c];
const res = []; let cur = '';
for (const s of sentences) {
const t = s.trim(); if (!t) continue;
const n = cur ? cur + ' ' + t : t;
if (n.length <= max) { cur = n; } else { if (cur) res.push(cur); cur = t; }
}
if (cur) res.push(cur);
return res;
}
function pack(src, max = 500, firstMax = 300) {
const res = [];
src.forEach((part, index) => {
const c = clean(part);
if (!c) return;
const limit = index === 0 ? firstMax : max;
res.push(...splitLong(c, limit));
});
return res;
}
if (Array.isArray(metadataParts) && metadataParts.length > 0)
return metadataParts.map(clean).filter(Boolean);
if (Array.isArray(generatedParts) && generatedParts.length > 0)
return generatedParts.map(clean).filter(Boolean);
const raw = String(item.content || '').replace(/\r\n/g, '\n').trim();
if (!raw) return [];
const blocks = raw.split(/\n+(?=\d+(?:\/\d+)?\.\s)/);
const src = blocks.length > 1 ? blocks.map(clean).filter(Boolean) : raw.split(/\n{2,}/).map(clean).filter(Boolean);
return pack(src);
}
// ── 공통: 숫자 박스 파트 목록 ─────────────────────────────────────────────
function PartList({ parts, emptyText = '아직 생성된 본문이 없습니다.' }) {
if (!parts.length) return {emptyText}
;
return (
{parts.map((p, i) => (
{i+1}/{parts.length}
Reply {i+1}
{p}
))}
생성된 스레드 본문 ({contentParts.length}파트)
생성일: {fmtDate(item.createdAt)}
상태: {item.post?.status || '-'}
{item.post?.metadata?.selected_topic?.category && (
카테고리: {item.post.metadata.selected_topic.category}
)}
{(item.post?.status === 'pending_approval' || item.post?.status === 'draft') && (
)}
{item.post?.status === 'approved' && !item.post?.external_post_id && (
)}
);
}
// 1 — Threads 포스팅
function StageDetail1({ item, onPublish }) {
const extId = item.post?.external_post_id;
const url = extId ? `https://www.threads.net/@korea.saju.oracle/post/${extId}` : null;
const parts = parsePostParts(item);
return (
Threads 발행 본문 미리보기 ({parts.length}파트)
{extId ? (
) : (
아직 Threads에 게시되지 않았습니다.
)}
발행일: {fmtDate(item.post?.published_at)}
{item.post?.id && (
)}
);
}
// 2 — 카드 이미지
function StageDetail2({ item, onCreateVideo, onCarousel }) {
const [carouselLoading, setCarouselLoading] = React.useState(false);
const [cacheKey, setCacheKey] = React.useState(() => Date.now());
const [resetting, setResetting] = React.useState(false);
const [resetMsg, setResetMsg] = React.useState('');
const [videoLoading, setVideoLoading] = React.useState(false);
const [videoMsg, setVideoMsg] = React.useState('');
const [previewCard, setPreviewCard] = React.useState(null);
const parts = item.post?.metadata?.threads_series_parts;
const count = Array.isArray(parts) ? parts.length : 0;
const hasPost = !!item.post?.external_post_id;
async function handleResetParts() {
if (!confirm('카드 내용을 현재 포스트 본문 기준으로 초기화합니다. 계속하시겠습니까?')) return;
setResetting(true);
setResetMsg('');
try {
const res = await fetch('/api/admin/social-posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ postId: item.post.id, action: 'reset_series_parts' }),
});
const data = await res.json().catch(() => null);
if (!res.ok || data?.error) throw new Error(data?.error || '초기화 실패');
setResetMsg(`✅ ${data.parts?.length || 0}개 파트로 재생성됨 — 이제 영상 생성 시작 버튼을 누르세요`);
setCacheKey(Date.now()); // 카드 이미지도 새로고침
} catch (e) {
setResetMsg('❌ ' + e.message);
} finally {
setResetting(false);
}
}
return (
카드 이미지 ({count}장)
{count > 0 && (
)}
{count > 0 ? (
{parts.map((_,i) => (
}/${i}?t=${cacheKey}`})
{
if (e.currentTarget.dataset.failed) return;
e.currentTarget.dataset.failed = '1';
e.currentTarget.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(
"
"
);
}}
/>
{i+1}/{count}
))}
) : (
카드 이미지가 아직 생성되지 않았습니다.
)}
{resetMsg && (
{resetMsg}
)}
{item.post?.id && (
{hasPost && (
)}
{hasPost && onCarousel && (
)}
)}
{videoMsg && (
{videoMsg}
)}
{hasPost && !videoLoading && !videoMsg && (
♻️ 재생성 → 카드 확인 → 🎬 영상 생성 순서로 진행하세요
)}
{previewCard && (
setPreviewCard(null)}>
e.stopPropagation()}>
)}
);
}
// 3 — 썸네일 생성 ← NEW
function StageDetail3({ item, onThumbnailGenerated, onCreateVideo }) {
const [generating, setGenerating] = React.useState(false);
const [result, setResult] = React.useState(null); // { url, prompt, model }
const [error, setError] = React.useState('');
const [videoLoading, setVideoLoading] = React.useState(false);
const [videoMsg, setVideoMsg] = React.useState('');
const existingThumb = item.thumbUrl;
const displayThumb = result?.url || existingThumb;
async function handleGenerate() {
const title = item.post?.title || item.title || '';
const caption = item.content || '';
if (!title && !caption) { setError('글 내용이 없습니다.'); return; }
setGenerating(true);
setError('');
try {
const res = await fetch('/api/admin/social-videos/generate-thumbnail', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
title,
caption,
locale: item.account?.locale || item.account?.metadata?.locale || null,
language: item.account?.language || item.account?.metadata?.language || null,
postId: item.post?.id || item.id || null,
zodiacAnimal: item.post?.metadata?.selected_topic?.zodiac_animal || null,
force: true,
}),
});
const data = await res.json().catch(() => null);
if (!res.ok || data?.error) throw new Error(data?.error || '썸네일 생성 실패');
const generated = { url: data.thumbnailImageUrl, storagePath: data.storagePath, prompt: data.prompt, model: data.model };
setResult(generated);
await onThumbnailGenerated(item, generated);
} catch (e) {
setError(e.message || '알 수 없는 오류');
} finally {
setGenerating(false);
}
}
return (
저장 배경 썸네일 생성
{/* 썸네일 미리보기 */}
{displayThumb ? (
) : (
{generating ? (
<>
썸네일 합성 중...
저장 배경에 글자를 합성합니다
) : (
<>
🎨
아직 썸네일이 없습니다
)}
)}
{/* 오른쪽 메타 + 버튼 */}
{result?.model &&
모델{result.model}
}
{displayThumb && (
)}
{displayThumb && item.post?.id && (
)}
{videoMsg && (
{videoMsg}
)}
글 내용을 분석해서 고CTR
문구를 저장 배경 위에 합성합니다.
{/* 프롬프트 */}
{result?.prompt && (
사용된 프롬프트 보기
{result.prompt}
)}
{error &&
{error}
}
);
}
// 4 — 영상 렌더링
function StageDetail4({ item, onAction, pendingAction }) {
const job = item.job;
if (!job) return ;
const meta = job.metadata || {};
const ALL_PLATFORMS = ['youtube', 'tiktok', 'instagram'];
const publishedUrls = meta.published_urls || {};
// 항상 세 플랫폼 전부 표시 — 미발행 플랫폼은 기본 선택, 이미 발행된 건 기본 미선택
const [selPlatforms, setSelPlatforms] = React.useState(() =>
ALL_PLATFORMS.filter(p => !publishedUrls[p])
);
function togglePlatform(p) {
setSelPlatforms(prev =>
prev.includes(p) ? prev.filter(x => x !== p) : [...prev, p]
);
}
const thumbUrl = meta.thumbnail_image_url || item.thumbUrl || job.thumbnail_url || null;
const statusColor = {
rendering:'#38bdf8', queued:'#38bdf8',
rendered:'#fbbf24', approved:'#a78bfa', scheduled:'#a78bfa',
published:'#34d399', failed:'#f87171',
}[job.status] || '#888';
const canPublish = ['approved','rendered','failed','published'].includes(job.status) && job.video_url;
const isBusy = !!pendingAction;
const busyLabel = pendingAction ? (VIDEO_ACTION_LABELS[pendingAction.action] || '처리 중...') : '';
const statusHint = job.status === 'approved'
? '승인 완료 · 아직 SNS 업로드 전입니다. 아래 🚀 SNS 업로드 시작을 눌러야 POST가 전송됩니다.'
: job.status === 'publishing'
? 'SNS 업로드 요청 전송됨 · 백그라운드에서 발행 중입니다.'
: '';
return (
영상 렌더링 상세
{job.video_url ? (
) : thumbUrl ? (
) : (
🎬
렌더링 대기 중
)}
상태{job.status}
{statusHint &&
{statusHint}
}
잡 ID{job.id?.slice(0,16)}…
{job.duration_seconds &&
길이{job.duration_seconds}초
}
{meta.image_count &&
이미지{meta.image_count}장
}
{job.title &&
제목{job.title}
}
{/* 플랫폼 선택 체크박스 — 항상 3개 전부 표시 */}
{job.status === 'rendered' && (
)}
{canPublish && (
)}
{job.status === 'failed' && !job.video_url && (
)}
{(job.image_urls?.length || 0) >= 2 && !['publishing','published'].includes(job.status) && (
)}
{!['publishing','published'].includes(job.status) && (
)}
{pendingAction && (
{busyLabel} 백그라운드 요청 확인 중입니다.
)}
{(meta.youtube_caption || meta.tiktok_caption || meta.instagram_caption) && (
{[
{ icon:'▶️', label:'YouTube', val: meta.youtube_caption },
{ icon:'🎵', label:'TikTok', val: meta.tiktok_caption },
{ icon:'📸', label:'Instagram', val: meta.instagram_caption },
].filter(c => c.val).map(c => (
{c.icon} {c.label}
{c.val}
))}
)}
{job.last_error &&
{job.last_error}
}
);
}
// 5 — SNS 업로드
function StageDetail5({ item }) {
const job = item.job;
const publishedUrls = job?.metadata?.published_urls || {};
const publishErrors = job?.metadata?.publish_errors || {};
const platforms = Object.keys(publishedUrls);
return (
SNS 업로드 결과
{job?.metadata?.youtube_title && (
YouTube 제목{job.metadata.youtube_title}
)}
{job?.metadata?.youtube_privacy_status && (
공개 상태{job.metadata.youtube_privacy_status}
)}
{job?.metadata?.youtube_thumbnail_mode && (
썸네일
영상 첫 2초에 삽입
)}
{platforms.length > 0 ? (
{platforms.map(p => (
))}
) : (
아직 업로드되지 않았습니다.
)}
{Object.entries(publishErrors).map(([p,err]) => (
{PLATFORM_ICONS[p]||p} 오류: {err}
))}
발행일: {fmtDate(job?.published_at)}
);
}
const STAGE_DETAIL_MAP = [StageDetail0, StageDetail1, StageDetail2, StageDetail3, StageDetail4, StageDetail5];
// ── 글로벌 파이프라인 노드 다이어그램 ─────────────────────────────────────
function PipelineDiagram({ items, focusedStage = null }) {
const stageCounts = STAGES.map((_,i) => ({
active: items.filter(it => it.stage === i && it.status === 'active').length,
done: items.filter(it => it.stage === i && it.status === 'done').length,
failed: items.filter(it => it.stage === i && it.status === 'failed').length,
}));
return (
{STAGES.map((stage, i) => {
const c = stageCounts[i];
const isActive = c.active > 0;
const hasFailed = c.failed > 0;
const isFocused = focusedStage === i;
return (
{stage.icon}
{stage.label}
{stage.sub}
{c.active > 0 && {c.active} 처리중}
{c.done > 0 && {c.done} 완료}
{c.failed > 0 && {c.failed} 오류}
{(isActive || isFocused) &&
}
{i < STAGES.length - 1 && (
)}
);
})}
{/* 클릭 가능한 스테이지 도트 */}
{STAGES.map((stage, i) => {
const s = stageStatusForItem(item, i);
const clickable = true;
const selected = activeStage === i;
return (
{i < STAGES.length-1 && (
)}
);
})}
{rowPendingAction && (
{VIDEO_ACTION_LABELS[rowPendingAction.action] || '처리 중...'}
)}
{item.status==='active' && 렌더링 중}
{item.status==='done' && item.stage===5 && 업로드 완료}
{item.status==='failed' && (
<>
오류
{item.job?.id && (
)}
)}
{item.status==='pending' && {STAGES[item.stage]?.label}}
{/* 단계 상세 패널 */}
{activeStage !== null && (
{STAGES.map((stage, i) => {
const s = stageStatusForItem(item, i);
return (
);
})}
)}
);
}
// ── 메인 PipelinePage ──────────────────────────────────────────────────────
function PipelinePage({ state, acc } = {}) {
const [posts, setPosts] = React.useState([]);
const [jobs, setJobs] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [message, setMessage] = React.useState('');
const [filter, setFilter] = React.useState('all');
const [focusedStage, setFocusedStage] = React.useState(null);
const [publishingId, setPublishingId] = React.useState(() => {
try {
const saved = JSON.parse(localStorage.getItem(POST_ACTION_STORAGE_KEY) || '{}');
return saved?.postId || null;
} catch {
return null;
}
});
const [checked, setChecked] = React.useState({});
const [videoActions, setVideoActions] = React.useState(() => {
try { return JSON.parse(localStorage.getItem(VIDEO_ACTION_STORAGE_KEY) || '{}'); } catch { return {}; }
});
const selectedAccountId = state?.selectedAccount || acc?.id || '';
const accountQuery = selectedAccountId ? `&account_id=${encodeURIComponent(selectedAccountId)}` : '';
function saveVideoActions(next) {
setVideoActions(next);
try { localStorage.setItem(VIDEO_ACTION_STORAGE_KEY, JSON.stringify(next)); } catch {}
}
function savePostAction(postId) {
setPublishingId(postId || null);
try {
if (postId) {
localStorage.setItem(POST_ACTION_STORAGE_KEY, JSON.stringify({ postId, startedAt: Date.now() }));
} else {
localStorage.removeItem(POST_ACTION_STORAGE_KEY);
}
} catch {}
}
function reconcilePostAction(nextPosts) {
let saved = null;
try { saved = JSON.parse(localStorage.getItem(POST_ACTION_STORAGE_KEY) || 'null'); } catch {}
if (!saved?.postId) {
if (publishingId) setPublishingId(null);
return;
}
const post = nextPosts.find(p => p.id === saved.postId);
const fresh = saved.startedAt && Date.now() - saved.startedAt < VIDEO_ACTION_MAX_AGE_MS;
const completed = !!post?.external_post_id || ['published', 'failed', 'rejected', 'canceled'].includes(post?.status);
if (!fresh || !post || completed) {
savePostAction(null);
return;
}
if (publishingId !== saved.postId) setPublishingId(saved.postId);
}
function readVideoActions() {
try { return JSON.parse(localStorage.getItem(VIDEO_ACTION_STORAGE_KEY) || '{}'); } catch { return {}; }
}
function setVideoAction(jobId, action) {
const current = readVideoActions();
saveVideoActions({
...current,
[jobId]: { action, startedAt: Date.now() },
});
}
function clearVideoAction(jobId) {
const next = readVideoActions();
if (!next[jobId]) return;
delete next[jobId];
saveVideoActions(next);
}
function reconcileVideoActions(nextJobs) {
const ids = new Set(nextJobs.map(j => j.id));
const now = Date.now();
let changed = false;
const next = {};
const current = readVideoActions();
for (const [jobId, value] of Object.entries(current)) {
const fresh = value?.startedAt && now - value.startedAt < VIDEO_ACTION_MAX_AGE_MS;
const job = nextJobs.find(candidate => candidate.id === jobId);
const age = value?.startedAt ? now - value.startedAt : VIDEO_ACTION_MAX_AGE_MS;
const waitingForServerStart = age < 8000;
const stillRunning =
value?.action === 'publish'
? job?.status === 'publishing'
: value?.action === 'retry'
? ['queued', 'rendering'].includes(job?.status)
: value?.action === 'approve'
? job?.status === 'rendered'
: value?.action === 'delete';
if (ids.has(jobId) && fresh && (waitingForServerStart || stillRunning)) next[jobId] = value;
else changed = true;
}
if (changed) saveVideoActions(next);
}
// 생성된 썸네일 URL 캐시 (postId → url), 페이지 새로고침 전까지 유지
const [thumbCache, setThumbCache] = React.useState(() => {
try { return JSON.parse(localStorage.getItem('pipeline_thumbs') || '{}'); } catch { return {}; }
});
async function handleThumbnailGenerated(item, generated) {
const postId = item?.id;
const url = generated?.url;
const jobId = item?.job?.id;
if (!postId || !url) return;
setThumbCache(prev => {
const next = { ...prev, [postId]: url };
try { localStorage.setItem('pipeline_thumbs', JSON.stringify(next)); } catch {}
return next;
});
const postRes = await fetch('/api/admin/social-posts', {
method:'POST',
headers:{'Content-Type':'application/json'},
body: JSON.stringify({
postId,
action: 'update_thumbnail',
thumbnail_image_url: url,
thumbnail_storage_path: generated.storagePath || null,
thumbnail_prompt: generated.prompt || null,
thumbnail_model: generated.model || null,
}),
});
const postData = await postRes.json().catch(() => null);
if (!postRes.ok || postData?.error) throw new Error(postData?.error || '썸네일 저장 실패');
if (jobId) {
const res = await fetch('/api/admin/social-videos', {
method:'POST',
headers:{'Content-Type':'application/json'},
body: JSON.stringify({
jobId,
action: 'update-thumbnail',
thumbnail_image_url: url,
thumbnail_storage_path: generated.storagePath || null,
thumbnail_prompt: generated.prompt || null,
thumbnail_model: generated.model || null,
}),
});
const data = await res.json().catch(() => null);
if (!res.ok || data?.error) throw new Error(data?.error || '썸네일 저장 실패');
}
load(true);
}
async function load(silent = false) {
if (!silent) setLoading(true);
try {
const [postsRes, jobsRes] = await Promise.all([
fetch(`/api/social/posts?limit=30${accountQuery}`, { cache:'no-store' }),
fetch(`/api/admin/social-videos?limit=50${accountQuery}`, { cache:'no-store' }),
]);
const pd = await postsRes.json().catch(() => null);
const jd = await jobsRes.json().catch(() => null);
const nextPosts = Array.isArray(pd?.posts) ? pd.posts : [];
const nextJobs = Array.isArray(jd?.jobs) ? jd.jobs : [];
setPosts(nextPosts);
setJobs(nextJobs);
reconcilePostAction(nextPosts);
reconcileVideoActions(nextJobs);
} catch (e) {
setMessage(e.message || '데이터를 불러오지 못했습니다.');
} finally {
if (!silent) setLoading(false);
}
}
React.useEffect(() => { setFocusedStage(null); load(); }, [selectedAccountId]);
React.useEffect(() => {
const hasActive = jobs.some(j => ['publishing', 'rendering', 'queued'].includes(j.status));
const hasSavedActions = Object.keys(videoActions).length > 0;
if (!hasActive && !publishingId && !hasSavedActions) return;
const interval = publishingId || hasSavedActions ? 3000 : 5000;
const t = setInterval(() => load(true), interval);
return () => clearInterval(t);
}, [jobs, selectedAccountId, publishingId, videoActions]);
async function handleCreateVideo(postId) {
const requestId = `${Date.now().toString(36)}-${postId.slice(0, 8)}`;
setMessage(`🎬 영상 생성 요청 전송 중... 요청ID ${requestId}`);
try {
const res = await fetch('/api/admin/social-posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ postId, action: 'create_video', requestId }),
});
const data = await res.json().catch(() => null);
if (!res.ok || data?.error) throw new Error(data?.error || '영상 생성 실패');
if (data?.automation?.skipped) {
setMessage(`⚠️ 스킵됨 (${data.automation.reason}) — ♻️ 카드 재생성 먼저 누르세요`);
return { ok: false, skipped: true, reason: data.automation.reason };
}
setMessage(`✅ 영상 생성 요청 완료! 요청ID ${requestId} — 렌더링 탭에서 진행 상황 확인하세요.`);
load(true);
return { ok: true, requestId };
} catch (e) {
setMessage('❌ ' + e.message);
return { ok: false, error: e.message };
}
}
// 영상 대신 카드들을 인스타 캐러셀로 바로 발행(영상 렌더 없이)
async function handleCreateCarousel(postId) {
if (!confirm('이 글의 카드들을 영상 없이 인스타그램 캐러셀로 바로 발행하시겠습니까?')) return { ok: false };
setMessage('🖼 인스타그램 캐러셀 발행 중... (최대 1분 소요)');
try {
const res = await fetch('/api/admin/social-posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ postId, action: 'carousel' }),
});
const data = await res.json().catch(() => null);
if (!res.ok || data?.error) throw new Error(data?.error || '캐러셀 발행 실패');
setMessage(`✅ 캐러셀 발행 완료!${data?.result?.url ? ' ' + data.result.url : ''}`);
load(true);
return { ok: true };
} catch (e) {
setMessage('❌ ' + e.message);
return { ok: false, error: e.message };
}
}
async function handleApprovePost(postId) {
if (!confirm('이 게시글을 승인하고 Threads에 즉시 발행하시겠습니까?')) return;
savePostAction(postId);
setMessage('🚀 Threads 발행 중...');
setFocusedStage(0);
try {
const res = await fetch('/api/admin/social-posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ postId, action: 'publish' }),
});
const data = await res.json().catch(() => null);
if (!res.ok || data?.error) throw new Error(data?.error || '발행 실패');
if (data?.status === 'publishing') {
setMessage('🚀 Threads 백그라운드 발행 중... 다른 화면에 다녀와도 계속 진행됩니다.');
} else {
setMessage('✅ Threads 발행 완료! 카드 이미지 준비됨 — 영상/캐러셀은 원하는 글만 버튼으로 진행하세요');
savePostAction(null);
setFocusedStage(1);
}
load(true);
} catch (e) {
setMessage('❌ ' + e.message);
savePostAction(null);
}
}
async function handlePublishPost(postId) {
if (!confirm('이 게시글을 Threads에 즉시 발행하시겠습니까?')) return;
savePostAction(postId);
setFocusedStage(0);
try {
const res = await fetch('/api/admin/social-posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ postId, action: 'publish' }),
});
const data = await res.json().catch(() => null);
if (!res.ok || data?.error) throw new Error(data?.error || '발행 실패');
if (data?.status === 'publishing') {
setMessage('🚀 Threads 백그라운드 발행 중... 다른 화면에 다녀와도 계속 진행됩니다.');
} else {
setMessage('🚀 Threads 발행 완료!');
savePostAction(null);
setFocusedStage(1);
}
load(true);
} catch (e) {
setMessage('❌ ' + e.message);
savePostAction(null);
}
}
async function handleVideoAction(jobId, action, options = {}) {
if (action === 'delete' && !confirm('이 영상 작업을 삭제하시겠습니까?')) return;
if (action === 'retry' && !confirm('렌더링을 다시 시작하시겠습니까?')) return;
if (action === 'carousel' && !confirm('이 카드들을 인스타그램 캐러셀로 발행하시겠습니까?')) return;
setVideoAction(jobId, action);
try {
if (action === 'publish') setMessage('🚀 발행 중... (최대 30초 소요)');
if (action === 'retry') setMessage('🔄 렌더링 재시작 중...');
if (action === 'delete') setMessage('🗑 삭제 중... 다른 화면에 갔다 와도 상태가 유지됩니다.');
if (action === 'carousel') setMessage('🖼 인스타그램 캐러셀 발행 중...');
const body = { jobId, action, ...(options.publishPlatforms ? { publishPlatforms: options.publishPlatforms } : {}) };
const res = await fetch('/api/admin/social-videos', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) });
const data = await res.json().catch(() => null);
if (!res.ok || data?.error) throw new Error(data?.error || '처리 실패');
if (action === 'publish') {
const results = data?.results || {};
const errors = data?.errors || {};
const skipped = data?.skipped || {};
const successes = Object.keys(results);
const failures = Object.keys(errors);
const skips = Object.keys(skipped);
if (successes.length > 0) {
const urls = successes.map(p => `${PLATFORM_ICONS[p]||p} 완료`).join(' ');
setMessage(`✅ 발행 완료: ${urls}${failures.length > 0 ? ' | ❌ 실패: ' + failures.map(p => `${PLATFORM_ICONS[p]||p} ${errors[p]}`).join(', ') : ''}`);
} else if (failures.length > 0) {
const errs = failures.map(p => `${PLATFORM_ICONS[p]||p}: ${errors[p]}`).join(' | ');
setMessage(`❌ 발행 실패: ${errs}`);
} else if (skips.length > 0) {
setMessage(`⚠️ 연동된 플랫폼 없음 — Vercel에 환경변수를 설정하세요 (${skips.join(', ')})`);
} else {
setMessage('✅ 발행 완료');
}
} else {
const labels = { approve:'승인', delete:'삭제', retry:'렌더링 재시작', carousel:'캐러셀 발행' };
setMessage(`✅ ${labels[action] || action} 완료`);
}
await load(true);
clearVideoAction(jobId);
} catch (e) {
setMessage('❌ ' + e.message);
clearVideoAction(jobId);
}
}
const items = buildPipelineItems(posts, jobs, thumbCache, acc);
const filtered = items.filter(it => {
if (filter === 'all') return true;
if (filter === 'active') return it.status === 'active';
if (filter === 'done') return it.stage === 5;
if (filter === 'failed') return it.status === 'failed';
if (filter === 'pending') return it.status === 'pending';
return true;
});
const counts = {
all: items.length,
active: items.filter(it => it.status === 'active').length,
done: items.filter(it => it.stage === 5).length,
failed: items.filter(it => it.status === 'failed').length,
pending: items.filter(it => it.status === 'pending').length,
};
return (
콘텐츠 파이프라인
AI 글 생성 → Threads → 카드 이미지 → 🎨 썸네일 → 영상 렌더 → SNS 업로드
· 도트 클릭 시 단계별 상세 정보 표시
{Object.values(checked).filter(Boolean).length > 0 && (
)}
{message &&
{message}
}
{[
{ key:'all', label:'전체' },
{ key:'active', label:'🔄 처리 중' },
{ key:'done', label:'✅ 완료' },
{ key:'pending', label:'⏳ 대기' },
{ key:'failed', label:'❌ 오류' },
].map(({ key, label }) => (
))}
{loading ? (
) : filtered.length === 0 ? (
🔮
파이프라인에 항목이 없습니다.
글쓰기 페이지에서 새 포스트를 생성하면 여기 표시됩니다.
) : (
{filtered.map(item => (
))}
)}
);
}
window.PipelinePage = PipelinePage;