);
}
});
flushList(); flushCheck();
return
{elements}
;
}
/* ── 상세 페이지 ── */
function NewsDetailPage({ item, onBack }) {
return (
{item.tag && {item.tag}}
{item.date && {item.date}}
{item.title}
{item.img && (
)}
{item.link && (
)}
);
}
/* ── 카드 컴포넌트 ── */
function NewsCard({ item, onClick, size }) {
const [hov, setHov] = React.useState(false);
const summary = extractSummary(item.content, 90);
const isFeatured = size === 'featured';
if (isFeatured) {
return (
setHov(true)} onMouseLeave={()=>setHov(false)}
className="rgrid-2" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', borderRadius:20, overflow:'hidden',
border:'1.5px solid #e8e8e8', cursor:'pointer', background:'#fff',
boxShadow: hov ? '0 16px 48px rgba(0,0,0,0.10)' : '0 2px 12px rgba(0,0,0,0.05)',
transform: hov ? 'translateY(-3px)' : 'none', transition:'all 280ms cubic-bezier(0.16,1,0.3,1)' }}>
{item.tag && {item.tag}}
{item.date}
{item.title}
{summary &&
{summary}…
}
읽기 →
);
}
return (
setHov(true)} onMouseLeave={()=>setHov(false)}
style={{ borderRadius:16, overflow:'hidden', border:'1.5px solid #e8e8e8', cursor:'pointer', background:'#fff',
boxShadow: hov ? '0 12px 36px rgba(0,0,0,0.10)' : '0 2px 8px rgba(0,0,0,0.04)',
transform: hov ? 'translateY(-3px)' : 'none', transition:'all 260ms cubic-bezier(0.16,1,0.3,1)' }}>
{item.img &&
}
{item.tag && {item.tag}}
{item.date}
{item.title}
{summary &&
{summary}
}
읽기 →
);
}
/* ── 상단 히어로 슬라이더 ── */
function NewsFeaturedHero({ items, onOpen }) {
const [current, setCurrent] = React.useState(0);
const [fading, setFading] = React.useState(false);
const topItems = items.slice(0, 4);
const goTo = React.useCallback((idx) => {
if (idx === current) return;
setFading(true);
setTimeout(() => { setCurrent(idx); setFading(false); }, 320);
}, [current]);
React.useEffect(() => {
if (topItems.length < 2) return;
const t = setInterval(() => goTo((current + 1) % topItems.length), 5000);
return () => clearInterval(t);
}, [current, topItems.length, goTo]);
if (!topItems.length) return null;
const featured = topItems[current];
const sideItems = [
topItems[(current + 1) % topItems.length],
topItems[(current + 2) % topItems.length],
].filter(Boolean).slice(0, 2);
return (
{/* 섹션 제목 */}
News & BLOG
{/* 메인 피처드 카드 */}
onOpen(featured)}
style={{
position: 'relative', borderRadius: 18, overflow: 'hidden',
cursor: 'pointer', minHeight: 440,
opacity: fading ? 0 : 1, transition: 'opacity 320ms ease'
}}
>
{featured.img
?
:
}
{/* 그라데이션 오버레이 */}
{/* 하단 레드 라인 */}
{/* 텍스트 */}
{featured.tag && (
{featured.tag}
)}
{featured.title}
{featured.content && (
{extractSummary(featured.content, 80)}…
)}
자세히 보기 →
{/* 사이드 썸네일 */}
{sideItems.map((item, i) => (
onOpen(item)}
style={{
flex: 1, position: 'relative', borderRadius: 14, overflow: 'hidden',
cursor: 'pointer', minHeight: 210,
transition: 'transform 220ms ease', willChange: 'transform'
}}
onMouseEnter={e => e.currentTarget.style.transform = 'scale(1.015)'}
onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
>
{item.img
?
:
}
{item.tag && (
{item.tag}
)}
{item.title}
))}
{/* 네비게이션 도트 */}
{topItems.map((_, i) => (
);
}
/* ── 목록 페이지 ── */
function NewsPage({ navigate }) {
const [detail, setDetail] = React.useState(null);
const [activeTag, setActiveTag] = React.useState('전체');
const [items, setItems] = React.useState(() => {
try {
const cached = localStorage.getItem(NEWS_CACHE_KEY);
return cached ? JSON.parse(cached) : FALLBACK_NEWS;
} catch(e) { return FALLBACK_NEWS; }
});
React.useEffect(() => {
localStorage.removeItem(NEWS_CACHE_KEY);
fetch(NEWS_SHEET_URL)
.then(r => r.text())
.then(text => {
try {
const parsed = parseNewsCSV(text);
if (parsed.length > 0) {
setItems(parsed);
localStorage.setItem(NEWS_CACHE_KEY, JSON.stringify(parsed));
}
} catch(e) { console.error('뉴스 파싱 오류:', e); }
})
.catch(e => console.error('뉴스 시트 로드 오류:', e));
}, []);
const openDetail = (item) => {
if (item.content && item.content.trim()) { setDetail(item); window.scrollTo({top:0,behavior:'instant'}); }
else if (item.link) { window.open(item.link, '_blank'); }
};
if (detail) return
{ setDetail(null); window.scrollTo({top:0,behavior:'instant'}); }} />;
const tags = ['전체', ...Array.from(new Set(items.map(n => n.tag).filter(Boolean)))];
const filtered = activeTag === '전체' ? items : items.filter(n => n.tag === activeTag);
const featured = filtered[0];
const rest = filtered.slice(1);
return (
{/* 상단 히어로 슬라이더 */}
{/* 카테고리 필터 헤더 */}
{/* 카테고리 필터 */}
{tags.map(tag => (
))}
{/* 피처드 카드 */}
{featured && (
openDetail(featured)} size="featured" />
)}
{/* 2열 그리드 */}
{rest.length > 0 && (
{rest.map((n, i) => (
openDetail(n)} size="normal" />
))}
)}
{filtered.length === 0 && (
아직 등록된 글이 없습니다.
)}