119 lines
4.3 KiB
JavaScript
119 lines
4.3 KiB
JavaScript
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
|
import { getInstaKeywords } from '../../../api';
|
|
|
|
/* ══════════════════════ 키워드 목록 ══════════════════════════════════════ */
|
|
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 (
|
|
<div className="ic-section">
|
|
<p className="ic-section__title">트렌딩 키워드</p>
|
|
|
|
{/* 카테고리 필터 */}
|
|
<div className="ic-filter">
|
|
{CATEGORIES.map((c) => (
|
|
<button
|
|
key={c}
|
|
className={`ic-filter-btn ${category === c ? 'ic-filter-btn--active' : ''}`}
|
|
onClick={() => setCategory(c)}
|
|
>
|
|
{c}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* progress 표시는 상단 ic-slate-progress 배너에서 일괄 처리 */}
|
|
|
|
{deduped.length === 0 ? (
|
|
<div className="ic-empty">키워드가 없습니다. 키워드 추출을 실행하세요.</div>
|
|
) : (
|
|
<>
|
|
<div className="ic-keywords">
|
|
{pageItems.map((kw) => (
|
|
<div key={kw.id} className="ic-keyword-row">
|
|
<span className="ic-keyword-row__kw">{kw.keyword}</span>
|
|
<span className="ic-keyword-row__meta">
|
|
{kw.category} · {kw.articles_count ?? 0}건
|
|
</span>
|
|
<span className="ic-keyword-row__score">{kw.score?.toFixed(1) ?? '-'}</span>
|
|
<button
|
|
className="ic-btn ic-btn--primary ic-btn--sm"
|
|
onClick={() => handleCreate(kw)}
|
|
disabled={!!creating}
|
|
>
|
|
{creating === kw.id ? <span className="ic-spinner" /> : '🎴'}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{totalPages > 1 && (
|
|
<div className="ic-keywords__pager">
|
|
<button
|
|
className="ic-pager-btn"
|
|
onClick={() => setPage((p) => Math.max(0, p - 1))}
|
|
disabled={safePage === 0}
|
|
aria-label="이전 키워드"
|
|
>←</button>
|
|
<span className="ic-pager-info">{safePage + 1} / {totalPages}</span>
|
|
<button
|
|
className="ic-pager-btn"
|
|
onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
|
|
disabled={safePage >= totalPages - 1}
|
|
aria-label="다음 키워드"
|
|
>→</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default KeywordsPanel;
|