-
- );
-}
-
-/* ══════════════════════ Trends 탭 패널 1: AccountFocusPanel ══════════════ */
-function AccountFocusPanel() {
- const [prefs, setPrefs] = useState([]);
- const [draft, setDraft] = useState({});
- const [saving, setSaving] = useState(false);
- const [newCat, setNewCat] = useState('');
-
- const load = useCallback(async () => {
- const data = await getInstaPreferences();
- setPrefs(data.categories || []);
- const m = {};
- (data.categories || []).forEach(p => { m[p.category] = Math.round(p.weight * 100); });
- setDraft(m);
- }, []);
-
- useEffect(() => { load(); }, [load]);
-
- const save = async () => {
- setSaving(true);
- try {
- const payload = {};
- Object.entries(draft).forEach(([k, v]) => { payload[k] = (Number(v) || 0) / 100; });
- await putInstaPreferences(payload);
- await load();
- } finally { setSaving(false); }
- };
-
- const addCat = () => {
- const name = newCat.trim().toLowerCase();
- if (!name || draft[name] !== undefined) return;
- setDraft({ ...draft, [name]: 0 });
- setNewCat('');
- };
-
- return (
-
- {task.status === 'succeeded' ? '완료' : task.status === 'failed' ? '실패' : '진행 중'}
-
- {task.message || task.error || ''}
-
-
-
- 🎯 이 계정의 주제 (카테고리 가중치)
-슬라이더는 각 카테고리에 자동 추출 키워드 비율을 결정합니다. 합계는 자동 정규화됩니다.
-
- {Object.entries(draft).map(([cat, val]) => (
-
-
-
- setDraft({ ...draft, [cat]: Number(e.target.value) })}
- className="ic-focus__slider"
- />
- {val}%
-
- ))}
-
- setNewCat(e.target.value)}
- />
-
-
-
-
- 💡 신규 카테고리를 추가했다면 Cards 탭의 Prompt Templates Editor에서
-
- category_seeds에 시드 키워드도 함께 정의해야 자동 추출에 반영됩니다.
-
-
- {t.keyword}
- {(t.score || 0).toFixed(2)}
-
-
- );
-
- const naverGrouped = groupByCat(naver);
- return (
-
-
- {task && 📈 외부 트렌드
-
-
- {lastFetched ? `마지막 수집: ${fmtDate(lastFetched)}` : '아직 수집 없음'}
-
-
-
-
-
-
-
- 🔥 NAVER 인기
- {Object.keys(naverGrouped).length === 0 &&없음
} - {Object.entries(naverGrouped).map(([cat, items]) => ( -
-
- ))}
- {cat}
- {items.map(renderRow)}
-
-
- 📺 YouTube 인기
- {google.length === 0 &&없음
} - {google.map(renderRow)} -📊 다음 자동 추출 미리보기
-
- {breakdown.map(b => (
-
-
- {b.category}
- {b.count}개
-
- ))}
-
-
- );
-}
-
-/* ══════════════════════ 키워드 목록 ══════════════════════════════════════ */
-const CATEGORIES = ['전체', 'economy', 'psychology', 'celebrity'];
-const KEYWORDS_PER_PAGE = 10;
-
-function KeywordsPanel({ onCreateSlate }) {
- const [category, setCategory] = useState('전체');
- const [keywords, setKeywords] = useState([]);
- const [creating, setCreating] = useState(null); // keyword_id being created
- const [page, setPage] = useState(0);
-
- const load = useCallback(() => {
- const cat = category === '전체' ? undefined : category;
- getInstaKeywords({ category: cat }).then((r) => setKeywords(r.items || [])).catch(() => {});
- }, [category]);
-
- useEffect(() => { load(); }, [load]);
- useEffect(() => { setPage(0); }, [category]); // 카테고리 변경 시 첫 페이지로
-
- // 동일 keyword 중복 제거(최고 score 1개만 유지) + score 내림차순
- const deduped = useMemo(() => {
- const best = new Map();
- for (const kw of keywords) {
- const name = (kw.keyword || '').trim();
- if (!name) continue;
- const prev = best.get(name);
- if (!prev || (kw.score ?? 0) > (prev.score ?? 0)) best.set(name, kw);
- }
- return [...best.values()].sort((a, b) => (b.score ?? 0) - (a.score ?? 0));
- }, [keywords]);
-
- const totalPages = Math.max(1, Math.ceil(deduped.length / KEYWORDS_PER_PAGE));
- const safePage = Math.min(page, totalPages - 1);
- const pageItems = deduped.slice(safePage * KEYWORDS_PER_PAGE, safePage * KEYWORDS_PER_PAGE + KEYWORDS_PER_PAGE);
-
- // 부모(InstaCards)의 handleCreateSlate에 위임 — progress 배너 + 스크롤 + 자동 미리보기 공통화
- async function handleCreate(kw) {
- if (creating) return;
- setCreating(kw.id);
- try {
- await onCreateSlate?.({
- keyword: kw.keyword,
- category: kw.category,
- keyword_id: kw.id,
- });
- } finally {
- setCreating(null);
- }
- }
-
- return (
- 트리거
-
-
-
-
-
- );
-}
-
-/* ══════════════════════ 슬레이트 목록 ══════════════════════════════════ */
-function SlatesPanel({ selectedId, onSelect }) {
- const [slates, setSlates] = useState([]);
- const [detail, setDetail] = useState(null);
-
- const loadSlates = useCallback(() => {
- getInstaSlates(50).then((r) => setSlates(r.items || [])).catch(() => {});
- }, []);
-
- useEffect(() => { loadSlates(); }, [loadSlates]);
-
- useEffect(() => {
- if (!selectedId) { setDetail(null); return; }
- getInstaSlate(selectedId).then(setDetail).catch(() => setDetail(null));
- }, [selectedId]);
-
- function handleSelect(id) {
- onSelect(id === selectedId ? null : id);
- }
-
- async function handleDelete(id) {
- if (!confirm('슬레이트를 삭제하시겠습니까?')) return;
- try {
- await deleteInstaSlate(id);
- if (selectedId === id) onSelect(null);
- loadSlates();
- } catch (e) {
- alert('삭제 실패: ' + e.message);
- }
- }
-
- async function handleRender(id) {
- try {
- const res = await renderInstaSlate(id);
- // Re-render is fire-and-forget from the panel; user can refresh detail
- alert('재렌더 요청 완료 (task: ' + res.task_id + ')');
- setTimeout(loadSlates, 3000);
- } catch (e) {
- alert('재렌더 실패: ' + e.message);
- }
- }
-
- return (
- 트렌딩 키워드
- - {/* 카테고리 필터 */} -
- {CATEGORIES.map((c) => (
-
- ))}
-
-
- {/* progress 표시는 상단 ic-slate-progress 배너에서 일괄 처리 */}
-
- {deduped.length === 0 ? (
- 키워드가 없습니다. 키워드 추출을 실행하세요.
- ) : (
- <>
-
- {pageItems.map((kw) => (
-
-
- {totalPages > 1 && (
-
- {kw.keyword}
-
- {kw.category} · {kw.articles_count ?? 0}건
-
- {kw.score?.toFixed(1) ?? '-'}
-
-
- ))}
-
-
- {safePage + 1} / {totalPages}
-
-
- )}
-
- )}
-
- handleDelete(detail.id)}
- onRender={() => handleRender(detail.id)}
- />
- )}
-
- );
-}
-
-/* ══════════════════════ 페이지 스트립 (chevron + indicator) ═══════════ */
-function PagesStrip({ slateId, pageCount }) {
- const stripRef = useRef(null);
- const [activePage, setActivePage] = useState(1);
-
- const scrollToPage = useCallback((pageNo) => {
- const strip = stripRef.current;
- if (!strip) return;
- const next = Math.max(1, Math.min(pageCount, pageNo));
- const child = strip.children[next - 1];
- if (child) {
- child.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
- setActivePage(next);
- }
- }, [pageCount]);
-
- // 스크롤/드래그 시 가운데 카드 감지
- const onScroll = useCallback(() => {
- const strip = stripRef.current;
- if (!strip) return;
- const rect = strip.getBoundingClientRect();
- const centerX = rect.left + rect.width / 2;
- let best = 1, bestDist = Infinity;
- Array.from(strip.children).forEach((child, i) => {
- const cRect = child.getBoundingClientRect();
- const cCenter = cRect.left + cRect.width / 2;
- const dist = Math.abs(cCenter - centerX);
- if (dist < bestDist) { bestDist = dist; best = i + 1; }
- });
- if (best !== activePage) setActivePage(best);
- }, [activePage]);
-
- // 키보드 ←/→
- useEffect(() => {
- const onKey = (e) => {
- if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
- if (e.key === 'ArrowLeft') { scrollToPage(activePage - 1); e.preventDefault(); }
- else if (e.key === 'ArrowRight') { scrollToPage(activePage + 1); e.preventDefault(); }
- };
- window.addEventListener('keydown', onKey);
- return () => window.removeEventListener('keydown', onKey);
- }, [activePage, scrollToPage]);
-
- return (
-
-
-
- {/* 슬레이트 상세 */}
- {detail && (
-
-
-
- {slates.length === 0 ? (
- 슬레이트 목록
- -슬레이트가 없습니다. 카드를 생성해 보세요.
- ) : (
-
- {slates.map((s) => (
-
- )}
- handleSelect(s.id)}
- >
- {s.status === 'rendered' || s.status === 'sent' ? (
- 
- ) : (
-
- ))}
- 🎴
- )}
-
-
- {s.keyword}
-
- {fmtDate(s.created_at)}
-
-
-
-
-
- );
-}
-
-/* ══════════════════════ 슬레이트 상세 ══════════════════════════════════ */
-function SlateDetail({ slate, onDelete, onRender }) {
- const pages = slate.assets || [];
- const pageCount = pages.length > 0 ? pages.length : 10;
-
- function copyCaption() {
- const text = [slate.suggested_caption, slate.hashtags?.join(' ')].filter(Boolean).join('\n\n');
- navigator.clipboard.writeText(text).then(() => alert('클립보드에 복사되었습니다!'));
- }
-
- return (
-
- {Array.from({ length: pageCount }, (_, i) => i + 1).map((page) => (
- 
scrollToPage(page)}
- />
- ))}
-
-
-
-
-
-
- {activePage}
- /
- {pageCount}
-
-
-
-
- );
-}
-
-/* ══════════════════════ 프롬프트 템플릿 에디터 ══════════════════════════ */
-const PROMPT_NAMES = ['slate_writer', 'category_seeds'];
-
-function PromptTemplatesEditor() {
- const [prompts, setPrompts] = useState({});
- const [drafts, setDrafts] = useState({});
- const [saving, setSaving] = useState({});
-
- useEffect(() => {
- PROMPT_NAMES.forEach((name) => {
- getInstaPrompt(name)
- .then((p) => {
- setPrompts((prev) => ({ ...prev, [name]: p }));
- setDrafts((prev) => ({ ...prev, [name]: p.template }));
- })
- .catch(() => {
- setPrompts((prev) => ({ ...prev, [name]: null }));
- setDrafts((prev) => ({ ...prev, [name]: '' }));
- });
- });
- }, []);
-
- async function handleSave(name) {
- setSaving((prev) => ({ ...prev, [name]: true }));
- try {
- const updated = await putInstaPrompt(name, drafts[name] || '', prompts[name]?.description || '');
- setPrompts((prev) => ({ ...prev, [name]: updated }));
- alert(`${name} 저장 완료`);
- } catch (e) {
- alert('저장 실패: ' + e.message);
- } finally {
- setSaving((prev) => ({ ...prev, [name]: false }));
- }
- }
-
- return (
-
-
-
- {/* 페이지 이미지 스트립 (캐러셀: chevron + indicator + ←/→ 키보드) */}
- {(slate.status === 'rendered' || slate.status === 'sent') ? (
-
- {slate.keyword}
-
-
-
-
- 📦 패키지 다운로드 (10장 + 캡션)
-
-
-
-
- {slate.status === 'failed' ? '렌더 실패 — 재렌더를 시도하세요.' : '렌더링 전입니다.'}
-
- )}
-
- {/* 캡션 */}
- {slate.suggested_caption && (
-
-
- )}
-
- {/* 커버 카피 (1/10) */}
- {slate.cover_copy && typeof slate.cover_copy === 'object' && (
-
- 캡션
-
-
- {slate.suggested_caption}
- {slate.hashtags?.length > 0 && (
-
- {slate.hashtags.join(' ')}
-
- )}
-
-
- )}
-
- {/* 본문 카피 8장 (2~9/10) */}
- {Array.isArray(slate.body_copies) && slate.body_copies.length > 0 && (
- 🎯 커버 (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}
-
-
- )}
-
- {/* CTA 카피 (10/10) */}
- {slate.cta_copy && typeof slate.cta_copy === 'object' && (
- 📝 본문 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}
-
- )}
-
-
- )}
- 📣 마무리 (10/10)
-
- {slate.cta_copy.headline}
- {slate.cta_copy.body && (
-
-
- {slate.cta_copy.body}
-
- )}
- {slate.cta_copy.cta && (
-
- CTA: {slate.cta_copy.cta}
-
- )}
-
-
프롬프트 템플릿
- {PROMPT_NAMES.map((name) => ( -
-
- {name}
- {prompts[name]?.updated_at && (
-
- 최종 수정: {fmtDate(prompts[name].updated_at)}
-
- )}
-
- {prompts[name]?.description && (
-
- {prompts[name].description}
-
- )}
-