832e73b5ee
토스 뉴스 카드 톤. 변경: - 감성 라벨을 chip 형식으로 (긍정=빨강, 부정=파랑, KR 관행 유지) - 출처를 작은 배지로 분리, 본문과 시각 구분 - published_at 을 'N분 전 / N시간 전 / N일 전' 상대시간으로 - 카드 hover 시 border-zinc-700 강조 썸네일은 백엔드가 og_image 미제공이라 텍스트 카드로 한정. 추후 백엔드에 컬럼 추가되면 SourceBadge 위에 16:9 썸네일 슬롯 추가. verify: tsc/next lint clean.
122 lines
3.7 KiB
TypeScript
122 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
// 토스증권 뉴스 카드 스타일을 흉내낸 리스트.
|
|
//
|
|
// 백엔드가 OG 썸네일은 아직 안 주므로 텍스트 카드 + 감성 칩 + 출처 배지만.
|
|
// 썸네일은 백엔드에 og_image 컬럼이 들어오면 추가.
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { api, type NewsItem, type NewsResponse } from "../lib/api";
|
|
|
|
export function NewsList({ code }: { code: string }) {
|
|
const [data, setData] = useState<NewsResponse | null>(null);
|
|
const [err, setErr] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
api
|
|
.news(code, 20)
|
|
.then((r) => {
|
|
if (alive) setData(r);
|
|
})
|
|
.catch((e) => {
|
|
if (alive) setErr(e instanceof Error ? e.message : String(e));
|
|
});
|
|
return () => {
|
|
alive = false;
|
|
};
|
|
}, [code]);
|
|
|
|
if (err) return <div className="text-xs text-red-400">뉴스 로딩 실패: {err}</div>;
|
|
if (!data) return <div className="text-xs text-zinc-500">뉴스 로딩 중…</div>;
|
|
if (!data.items.length)
|
|
return <div className="text-xs text-zinc-500">최근 뉴스 없음</div>;
|
|
|
|
return (
|
|
<div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
|
|
<div className="mb-3 flex items-baseline justify-between">
|
|
<div className="text-sm font-medium text-zinc-200">뉴스 · 공시</div>
|
|
<div className="text-[11px] text-zinc-500">최근 {data.items.length}건</div>
|
|
</div>
|
|
<ul className="space-y-2">
|
|
{data.items.map((n, i) => (
|
|
<NewsCard key={i} n={n} />
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NewsCard({ n }: { n: NewsItem }) {
|
|
return (
|
|
<li>
|
|
<a
|
|
href={n.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block rounded-md border border-transparent p-2 transition hover:border-zinc-700 hover:bg-zinc-800/40"
|
|
>
|
|
<div className="text-sm leading-snug text-zinc-100 line-clamp-2">{n.title}</div>
|
|
<div className="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px]">
|
|
<SourceBadge source={n.source} />
|
|
{n.published_at && (
|
|
<span className="text-zinc-500">{formatRelative(n.published_at)}</span>
|
|
)}
|
|
{n.sentiment_label && (
|
|
<SentimentChip label={n.sentiment_label} score={n.sentiment_score} />
|
|
)}
|
|
</div>
|
|
</a>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
function SourceBadge({ source }: { source: string }) {
|
|
return (
|
|
<span className="rounded-sm bg-zinc-800 px-1.5 py-0.5 text-zinc-300">{source}</span>
|
|
);
|
|
}
|
|
|
|
function SentimentChip({
|
|
label,
|
|
score,
|
|
}: {
|
|
label: string;
|
|
score: number | null;
|
|
}) {
|
|
// KR 관행: 긍정=빨강, 부정=파랑 (StockChart 와 톤 일치)
|
|
const tone =
|
|
label === "positive"
|
|
? "bg-rose-500/15 text-rose-300"
|
|
: label === "negative"
|
|
? "bg-sky-500/15 text-sky-300"
|
|
: "bg-zinc-700/40 text-zinc-400";
|
|
const text =
|
|
label === "positive" ? "긍정" : label === "negative" ? "부정" : "중립";
|
|
return (
|
|
<span className={`rounded-sm px-1.5 py-0.5 ${tone}`}>
|
|
{text}
|
|
{score != null && ` ${score >= 0 ? "+" : ""}${score.toFixed(2)}`}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function formatRelative(iso: string): string {
|
|
try {
|
|
const d = new Date(iso);
|
|
const now = Date.now();
|
|
const diffMin = Math.round((now - d.getTime()) / 60000);
|
|
if (diffMin < 1) return "방금";
|
|
if (diffMin < 60) return `${diffMin}분 전`;
|
|
if (diffMin < 60 * 24) return `${Math.round(diffMin / 60)}시간 전`;
|
|
if (diffMin < 60 * 24 * 7) return `${Math.round(diffMin / (60 * 24))}일 전`;
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
|
|
} catch {
|
|
return iso;
|
|
}
|
|
}
|
|
|
|
function pad(n: number): string {
|
|
return n < 10 ? `0${n}` : `${n}`;
|
|
}
|