959e9afa80
상세 페이지 본문 카드 8개가 character-by-character 로 동일한 헤더 markup 을 중복 정의하고 있었음 — ReturnBucket 분리와 같은 future drift 리스크. 단일 source of truth 로 묶음. 신규 web/components/CardHeader.tsx: - 표준 패턴 캡슐화: mb-3 flex items-baseline justify-between 컨테이너 + text-sm font-medium text-zinc-200 title + 옵셔널 text-[11px] text-zinc-500 subtitle. - subtitle 은 옵셔널 — MetricsPanel 처럼 제목만 있는 카드도 같은 컨테이너로 정렬돼 본문 카드 라인 높이 통일. 적용한 카드 8개: - IntradayReturns / PeriodReturns / CompositeScoreCard / PeerComparePanel / TradingValuePanel / DisclosuresPanel / NewsList — 기존 markup 과 시각 결과 완전 동일. - MetricsPanel — 기존 mb-2 standalone div → CardHeader 로 흡수, 마진이 mb-2 → mb-3 으로 정렬됨. 다른 본문 카드들과 헤더 아래 공간 통일. 적용 제외: - PredictionPanel: 우측 슬롯이 button (예측 실행), 좌측이 title+ subtitle 두 줄 중첩. 단순 text subtitle 모델에 안 맞음. - InvestorCumulative: 우측 슬롯이 window 선택 button 그룹 (1M/3M/...) + aria-pressed. 위와 같은 이유. 검증: - npx tsc --noEmit clean - npx next lint "✔ No ESLint warnings or errors"
92 lines
3.0 KiB
TypeScript
92 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
// 공시(DART) 패널 — news 테이블의 source='dart' 만 골라서 카드 리스트로.
|
|
// 별도 백엔드 엔드포인트는 안 만들고 기존 /api/news/{code}?source=dart 재사용.
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { api, type NewsResponse } from "../lib/api";
|
|
import { CardHeader } from "./CardHeader";
|
|
|
|
export function DisclosuresPanel({ code }: { code: string }) {
|
|
const [data, setData] = useState<NewsResponse | null>(null);
|
|
const [err, setErr] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
api
|
|
.news(code, 10, "dart")
|
|
.then((r) => {
|
|
if (alive) setData(r);
|
|
})
|
|
.catch((e) => {
|
|
if (alive) setErr(e instanceof Error ? e.message : String(e));
|
|
});
|
|
return () => {
|
|
alive = false;
|
|
};
|
|
}, [code]);
|
|
|
|
return (
|
|
<div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
|
|
<CardHeader
|
|
title="공시 (DART)"
|
|
subtitle={data ? `최근 ${data.items.length}건` : ""}
|
|
/>
|
|
|
|
{err && <div className="text-xs text-red-400">공시 로딩 실패: {err}</div>}
|
|
{!err && !data && <div className="text-xs text-zinc-500">공시 로딩 중…</div>}
|
|
{data && data.items.length === 0 && (
|
|
<div className="text-xs text-zinc-500">최근 공시 없음</div>
|
|
)}
|
|
|
|
{data && data.items.length > 0 && (
|
|
<ul className="space-y-2">
|
|
{data.items.map((n, i) => (
|
|
<li key={i}>
|
|
<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]">
|
|
<span className="rounded-sm bg-emerald-900/50 px-1.5 py-0.5 font-semibold text-emerald-300">
|
|
DART
|
|
</span>
|
|
{n.published_at && (
|
|
<span className="text-zinc-500">
|
|
{formatRelative(n.published_at)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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}`;
|
|
}
|