feat(insta): Trends tab — account focus + external trends + impact preview
- api.js: add getInstaTrends, instaCollectTrends, getInstaPreferences, putInstaPreferences helpers - InstaCards.jsx: add Cards/Trends tab bar with URL sync (?tab=trends); add AccountFocusPanel (category weight sliders + save), ExternalTrendsPanel (Naver+Google trend rows + manual collect), PreferenceImpactPanel (next extract preview); existing 5-panel Cards tab preserved intact - InstaCards.css: add ic-tabbar, ic-tab, ic-trends-grid, ic-panel base, ic-focus/ic-trend/ic-impact component styles Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,10 @@ import {
|
||||
getInstaTask,
|
||||
getInstaPrompt,
|
||||
putInstaPrompt,
|
||||
getInstaTrends,
|
||||
instaCollectTrends,
|
||||
getInstaPreferences,
|
||||
putInstaPreferences,
|
||||
} from '../../api';
|
||||
import './InstaCards.css';
|
||||
|
||||
@@ -92,11 +96,225 @@ function TaskStatusBox({ task }) {
|
||||
);
|
||||
}
|
||||
|
||||
/* ══════════════════════ 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 (
|
||||
<section className="ic-panel ic-panel--focus">
|
||||
<h3 className="ic-panel__title">🎯 이 계정의 주제 (카테고리 가중치)</h3>
|
||||
<p className="ic-panel__hint">슬라이더는 각 카테고리에 자동 추출 키워드 비율을 결정합니다. 합계는 자동 정규화됩니다.</p>
|
||||
<div className="ic-focus__list">
|
||||
{Object.entries(draft).map(([cat, val]) => (
|
||||
<div key={cat} className="ic-focus__row">
|
||||
<label className="ic-focus__label">{cat}</label>
|
||||
<input
|
||||
type="range" min="0" max="100" value={val}
|
||||
onChange={e => setDraft({ ...draft, [cat]: Number(e.target.value) })}
|
||||
className="ic-focus__slider"
|
||||
/>
|
||||
<span className="ic-focus__num">{val}%</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="ic-focus__add">
|
||||
<input
|
||||
type="text" placeholder="신규 카테고리 (영문 소문자)"
|
||||
value={newCat} onChange={e => setNewCat(e.target.value)}
|
||||
/>
|
||||
<button onClick={addCat}>+ 추가</button>
|
||||
</div>
|
||||
<button className="ic-focus__save" onClick={save} disabled={saving}>
|
||||
{saving ? '저장 중...' : '저장'}
|
||||
</button>
|
||||
<div className="ic-focus__hint">
|
||||
💡 신규 카테고리를 추가했다면 Cards 탭의 Prompt Templates Editor에서
|
||||
<code>category_seeds</code>에 시드 키워드도 함께 정의해야 자동 추출에 반영됩니다.
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ══════════════════════ 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: 'google_trends', 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>🌐 Google Trends</h4>
|
||||
{google.length === 0 && <p className="ic-empty">없음</p>}
|
||||
{google.map(renderRow)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ══════════════════════ Trends 탭 패널 3: PreferenceImpactPanel ══════ */
|
||||
function PreferenceImpactPanel() {
|
||||
const [prefs, setPrefs] = useState([]);
|
||||
const TOTAL = 15;
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const data = await getInstaPreferences();
|
||||
setPrefs(data.categories || []);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const totalWeight = prefs.reduce((s, p) => s + (p.weight || 0), 0) || 1;
|
||||
const breakdown = prefs.map(p => ({
|
||||
category: p.category,
|
||||
count: Math.round(TOTAL * (p.weight || 0) / totalWeight),
|
||||
}));
|
||||
|
||||
return (
|
||||
<section className="ic-panel ic-panel--impact">
|
||||
<h3 className="ic-panel__title">📊 다음 자동 추출 미리보기</h3>
|
||||
<div className="ic-impact__row">
|
||||
{breakdown.map(b => (
|
||||
<div key={b.category} className="ic-impact__chip">
|
||||
<span className="ic-impact__cat">{b.category}</span>
|
||||
<span className="ic-impact__count">{b.count}개</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════════════ */
|
||||
export default function InstaCards() {
|
||||
const [status, setStatus] = useState(null);
|
||||
const [selectedSlateId, setSelectedSlateId] = useState(null);
|
||||
|
||||
/* ── 탭 상태 (URL 동기화) ── */
|
||||
const [activeTab, setActiveTab] = useState(() => {
|
||||
const u = new URL(window.location.href);
|
||||
return u.searchParams.get('tab') === 'trends' ? 'trends' : 'cards';
|
||||
});
|
||||
|
||||
const switchTab = (next) => {
|
||||
setActiveTab(next);
|
||||
const u = new URL(window.location.href);
|
||||
if (next === 'cards') u.searchParams.delete('tab');
|
||||
else u.searchParams.set('tab', next);
|
||||
window.history.replaceState({}, '', u.toString());
|
||||
};
|
||||
|
||||
const loadStatus = useCallback(() => {
|
||||
return getInstaStatus().then(setStatus).catch(() => {});
|
||||
}, []);
|
||||
@@ -105,44 +323,82 @@ export default function InstaCards() {
|
||||
loadStatus();
|
||||
}, [loadStatus]);
|
||||
|
||||
/* ── handleCreateSlate: 키워드 → 슬레이트 생성 (Trends 탭에서도 공유) ── */
|
||||
const handleCreateSlate = useCallback(async ({ keyword, category, keyword_id } = {}) => {
|
||||
try {
|
||||
await createInstaSlate({ keyword, category, keyword_id });
|
||||
setSelectedSlateId(null);
|
||||
} catch (e) {
|
||||
alert('카드 생성 실패: ' + e.message);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<PullToRefresh onRefresh={loadStatus}>
|
||||
<div className="ic">
|
||||
{/* 헤더 + 상태 배너 */}
|
||||
<header className="ic-header">
|
||||
<h1>Insta Cards</h1>
|
||||
{status && (
|
||||
<div className="ic-status-badges">
|
||||
<span className={`ic-badge ${status.naver_api ? 'ic-badge--on' : 'ic-badge--off'}`}>
|
||||
Naver {status.naver_api ? 'ON' : 'OFF'}
|
||||
</span>
|
||||
<span className={`ic-badge ${status.anthropic_api ? 'ic-badge--on' : 'ic-badge--off'}`}>
|
||||
AI {status.anthropic_api ? 'ON' : 'OFF'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div className="ic-layout">
|
||||
{/* 왼쪽: 트리거 + 키워드 */}
|
||||
<div>
|
||||
<TriggerPanel />
|
||||
<div style={{ height: 16 }} />
|
||||
<KeywordsPanel onCreateSlate={() => setSelectedSlateId(null)} />
|
||||
</div>
|
||||
|
||||
{/* 오른쪽: 슬레이트 목록 + 상세 */}
|
||||
<div>
|
||||
<SlatesPanel
|
||||
selectedId={selectedSlateId}
|
||||
onSelect={setSelectedSlateId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PromptTemplatesEditor />
|
||||
<div className="ic">
|
||||
{/* ── 탭 바 ── */}
|
||||
<div className="ic-tabbar">
|
||||
<button
|
||||
className={`ic-tab ${activeTab === 'cards' ? 'is-active' : ''}`}
|
||||
onClick={() => switchTab('cards')}
|
||||
>🎴 Cards</button>
|
||||
<button
|
||||
className={`ic-tab ${activeTab === 'trends' ? 'is-active' : ''}`}
|
||||
onClick={() => switchTab('trends')}
|
||||
>📈 Trends</button>
|
||||
</div>
|
||||
</PullToRefresh>
|
||||
|
||||
{/* ── Cards 탭 (기존 5-패널) ── */}
|
||||
{activeTab === 'cards' && (
|
||||
<>
|
||||
<PullToRefresh onRefresh={loadStatus}>
|
||||
<div>
|
||||
{/* 헤더 + 상태 배너 */}
|
||||
<header className="ic-header">
|
||||
<h1>Insta Cards</h1>
|
||||
{status && (
|
||||
<div className="ic-status-badges">
|
||||
<span className={`ic-badge ${status.naver_api ? 'ic-badge--on' : 'ic-badge--off'}`}>
|
||||
Naver {status.naver_api ? 'ON' : 'OFF'}
|
||||
</span>
|
||||
<span className={`ic-badge ${status.anthropic_api ? 'ic-badge--on' : 'ic-badge--off'}`}>
|
||||
AI {status.anthropic_api ? 'ON' : 'OFF'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<div className="ic-layout">
|
||||
{/* 왼쪽: 트리거 + 키워드 */}
|
||||
<div>
|
||||
<TriggerPanel />
|
||||
<div style={{ height: 16 }} />
|
||||
<KeywordsPanel onCreateSlate={() => setSelectedSlateId(null)} />
|
||||
</div>
|
||||
|
||||
{/* 오른쪽: 슬레이트 목록 + 상세 */}
|
||||
<div>
|
||||
<SlatesPanel
|
||||
selectedId={selectedSlateId}
|
||||
onSelect={setSelectedSlateId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PromptTemplatesEditor />
|
||||
</div>
|
||||
</PullToRefresh>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ── Trends 탭 (3 new panels) ── */}
|
||||
{activeTab === 'trends' && (
|
||||
<div className="ic-trends-grid">
|
||||
<AccountFocusPanel />
|
||||
<ExternalTrendsPanel onCreateSlate={handleCreateSlate} />
|
||||
<PreferenceImpactPanel />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user