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"
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { api, type MetricsResponse } from "../lib/api";
|
|
import { CardHeader } from "./CardHeader";
|
|
|
|
export function MetricsPanel({ code }: { code: string }) {
|
|
const [m, setM] = useState<MetricsResponse | null>(null);
|
|
const [err, setErr] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
let alive = true;
|
|
api
|
|
.metrics(code, 30)
|
|
.then((r) => {
|
|
if (alive) setM(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 (!m) return <div className="text-xs text-zinc-500">메트릭 로딩 중…</div>;
|
|
|
|
const rows = m.by_model_horizon ?? [];
|
|
if (!rows.length) {
|
|
return (
|
|
<div className="text-xs text-zinc-500">
|
|
최근 30일 매칭된 예측 결과가 아직 없습니다. (매칭 배치는 평일 16:30 KST 에 실행)
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
|
|
<CardHeader title="최근 30일 모델 성능" />
|
|
<table className="w-full text-left text-sm">
|
|
<thead className="text-xs text-zinc-500">
|
|
<tr>
|
|
<th className="py-1">모델</th>
|
|
<th>+거래일</th>
|
|
<th>표본 수</th>
|
|
<th>방향 적중률</th>
|
|
<th>평균 절대오차 (MAE)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-zinc-800">
|
|
{rows.map((r, i) => (
|
|
<tr key={i}>
|
|
<td className="py-1">{r.model}</td>
|
|
<td>+{r.horizon}</td>
|
|
<td>{r.n}</td>
|
|
<td>{r.hit_rate != null ? `${(r.hit_rate * 100).toFixed(1)}%` : "-"}</td>
|
|
<td>{r.mae != null ? r.mae.toLocaleString(undefined, { maximumFractionDigits: 1 }) : "-"}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|