// Reusable components for 경제 요약 const { useState, useEffect, useMemo, useRef, useCallback } = React; // ============ Helpers ============ function timeAgo(iso) { const now = new Date(); const d = new Date(iso); const min = Math.floor((now - d) / 60000); if (min < 1) return '방금 전'; if (min < 60) return `${min}분 전`; const hr = Math.floor(min / 60); if (hr < 24) return `${hr}시간 전`; const day = Math.floor(hr / 24); return `${day}일 전`; } function highlightKeywords(text, keywords, enabled) { if (!enabled || !keywords || !keywords.length) return text; const escaped = keywords.map(k => k.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')); const re = new RegExp(`(${escaped.join('|')})`, 'g'); const parts = text.split(re); return parts.map((p, i) => { if (keywords.some(k => k === p)) { return {p}; } return p; }); } // ============ Stars Display ============ function StarRating({ stars, size = 14 }) { const filled = Math.min(5, Math.max(0, stars || 0)); return ( {[1, 2, 3, 4, 5].map(i => ( ★ ))} ); } // ============ Star Filter Chips ============ function StarFilter({ starFilter, setStarFilter }) { const options = [ { value: 0, label: '전체' }, { value: 5, label: '★★★★★' }, { value: 4, label: '★★★★↑' }, { value: 3, label: '★★★↑' }, { value: 2, label: '★★↑' }, ]; return (
{options.map(o => ( ))}
); } // ============ Importance Badge ============ function ImportanceBadge({ stars }) { if (stars >= 5) return 긴급; if (stars >= 4) return 중요; if (stars >= 3) return 주목; return null; } // ============ Source Flag ============ function SourceFlag({ type }) { return ( {type === 'global' ? 'GLOBAL' : 'KOREA'} ); } // ============ Ticker Bar ============ function TickerBar({ tickers, speed }) { const doubled = [...tickers, ...tickers]; return (
{doubled.map((t, i) => ( {t.name} {t.value} {t.positive ? '▲' : '▼'} {t.change.replace(/^[+-]/, '')} ))}
); } // ============ Masthead ============ function Masthead({ theme, onToggleTheme, savedCount, onOpenSaved }) { const dateStr = new Date().toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }); return (
LIVE · {dateStr}

경제.요약

); } // ============ Sub-nav (categories + search + star filter) ============ function SubNav({ categories, activeCat, setActiveCat, query, setQuery, sourceFilter, setSourceFilter, starFilter, setStarFilter }) { return (
{categories.map(c => ( ))}
setQuery(e.target.value)} />
); } // ============ Hero Article ============ function Hero({ article, onOpen, highlightOn, showEnglish }) { if (!article) return null; return (
onOpen(article)}>
TOP STORY {article.categoryKo}

{highlightKeywords(article.headline_ko, article.keywords, highlightOn)}

{showEnglish && (

{article.headline_en}

)}

{article.summary_ko}

{article.source} · {timeAgo(article.publishedAt)} · {article.readTime}분 읽기
AI 한 줄 요약

{article.aiSummary}

); } // ============ News Card ============ function NewsCard({ article, onOpen, isSaved, onToggleSave, highlightOn, showEnglish }) { return (
onOpen(article)}>
· {article.categoryKo}

{highlightKeywords(article.headline_ko, article.keywords, highlightOn)}

{showEnglish && (

{article.headline_en}

)}

{article.summary_ko}

{article.source}
{timeAgo(article.publishedAt)}
); } // ============ Article Modal ============ function ArticleModal({ article, onClose, isSaved, onToggleSave }) { const [lang, setLang] = useState('ko'); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [onClose]); if (!article) return null; return (
e.stopPropagation()}>
{article.categoryKo} · {article.source}

{article.headline_ko}

{article.headline_en}

{article.source} · {timeAgo(article.publishedAt)} · {article.readTime}분 읽기 ·
AI 한 줄 요약

{article.aiSummary}

언어
{lang === 'ko' && (

{article.body_ko}

)} {lang === 'en' && (

{article.body_en}

)} {lang === 'both' && (
한국어 (AI 번역)

{article.body_ko}

English (Original)

{article.body_en}

)}
{article.keywords.map(k => ( # {k} ))}
{typeof ArticleComments !== 'undefined' && ( )}
); } // ============ Bookmarks Drawer ============ function BookmarksDrawer({ saved, articles, onOpen, onClose, onToggleSave }) { const items = articles.filter(a => saved.includes(a.id)); return (
); } // ============ Footer ============ function Footer() { return ( ); } Object.assign(window, { TickerBar, Masthead, SubNav, Hero, NewsCard, ArticleModal, BookmarksDrawer, Footer, StarRating, StarFilter, ImportanceBadge, timeAgo, highlightKeywords });