105 lines
3.7 KiB
JavaScript
105 lines
3.7 KiB
JavaScript
import React, { useState, useCallback, useEffect } from 'react';
|
|
import TaskStatusBox from './TaskStatusBox';
|
|
import { fmtDate } from '../instaUtils';
|
|
import { getInstaTrends, instaCollectTrends, getInstaTask } from '../../../api';
|
|
|
|
/* ══════════════════════ Trends 탭 패널 2: ExternalTrendsPanel ══════════ */
|
|
const CATEGORY_COLORS = {
|
|
economy: '#0F62FE', psychology: '#A66CFF',
|
|
celebrity: '#FF5C8A', uncategorized: '#6B7280',
|
|
};
|
|
|
|
function ExternalTrendsPanel({ onCreateSlate }) {
|
|
const [naver, setNaver] = useState([]);
|
|
const [google, setGoogle] = useState([]);
|
|
const [lastFetched, setLastFetched] = useState(null);
|
|
const [collecting, setCollecting] = useState(false);
|
|
const [task, setTask] = useState(null);
|
|
|
|
const load = useCallback(async () => {
|
|
const [n, g] = await Promise.all([
|
|
getInstaTrends({ source: 'naver_popular', days: 2 }),
|
|
getInstaTrends({ source: 'youtube_trending', days: 2 }),
|
|
]);
|
|
setNaver(n.items || []);
|
|
setGoogle(g.items || []);
|
|
const all = [...(n.items || []), ...(g.items || [])];
|
|
if (all.length) {
|
|
const latest = all.map(t => t.suggested_at).sort().reverse()[0];
|
|
setLastFetched(latest);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
const trigger = async () => {
|
|
setCollecting(true);
|
|
try {
|
|
const { task_id } = await instaCollectTrends();
|
|
let st = null;
|
|
for (let i = 0; i < 60; i++) {
|
|
st = await getInstaTask(task_id);
|
|
setTask(st);
|
|
if (st.status === 'succeeded' || st.status === 'failed') break;
|
|
await new Promise(r => setTimeout(r, 3000));
|
|
}
|
|
await load();
|
|
} finally { setCollecting(false); }
|
|
};
|
|
|
|
const groupByCat = (items) => {
|
|
const g = {};
|
|
items.forEach(it => { (g[it.category] = g[it.category] || []).push(it); });
|
|
return g;
|
|
};
|
|
|
|
const renderRow = (t) => (
|
|
<div className="ic-trend__row" key={`${t.source}-${t.id}`}>
|
|
<span className="ic-trend__cat-dot" style={{ background: CATEGORY_COLORS[t.category] || '#6B7280' }} />
|
|
<span className="ic-trend__kw">{t.keyword}</span>
|
|
<span className="ic-trend__score">{(t.score || 0).toFixed(2)}</span>
|
|
<button
|
|
className="ic-trend__make"
|
|
onClick={() => onCreateSlate?.({ keyword: t.keyword, category: t.category })}
|
|
>🎴</button>
|
|
</div>
|
|
);
|
|
|
|
const naverGrouped = groupByCat(naver);
|
|
return (
|
|
<section className="ic-panel ic-panel--trends">
|
|
<div className="ic-panel__head">
|
|
<h3 className="ic-panel__title">📈 외부 트렌드</h3>
|
|
<div className="ic-panel__actions">
|
|
<span className="ic-panel__hint">
|
|
{lastFetched ? `마지막 수집: ${fmtDate(lastFetched)}` : '아직 수집 없음'}
|
|
</span>
|
|
<button onClick={trigger} disabled={collecting}>
|
|
{collecting ? '수집 중...' : '🔄 수동 수집'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{task && <TaskStatusBox task={task} />}
|
|
<div className="ic-trends__cols">
|
|
<div className="ic-trends__col">
|
|
<h4>🔥 NAVER 인기</h4>
|
|
{Object.keys(naverGrouped).length === 0 && <p className="ic-empty">없음</p>}
|
|
{Object.entries(naverGrouped).map(([cat, items]) => (
|
|
<div key={cat} className="ic-trend__group">
|
|
<div className="ic-trend__group-head" style={{ color: CATEGORY_COLORS[cat] || '#6B7280' }}>{cat}</div>
|
|
{items.map(renderRow)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="ic-trends__col">
|
|
<h4>📺 YouTube 인기</h4>
|
|
{google.length === 0 && <p className="ic-empty">없음</p>}
|
|
{google.map(renderRow)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default ExternalTrendsPanel;
|