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"
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
// 거래주체 패널 — chart.trading_value (외국인/기관/개인 순매수) 를 최근 5일 표로.
|
|
// 별도 백엔드 호출 없음. ChartPayload 에 이미 들어있는 시리즈를 재사용.
|
|
// 단위: 백엔드는 원(KRW) 단위. UI 는 억원(억원=1e8)으로 환산.
|
|
// 색: KR 관행 — 매수 우위(+) 빨강, 매도 우위(-) 파랑.
|
|
|
|
import type { TradingValuePoint } from "../lib/api";
|
|
import { CardHeader } from "./CardHeader";
|
|
|
|
export function TradingValuePanel({
|
|
data,
|
|
}: {
|
|
data: TradingValuePoint[];
|
|
}) {
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
|
|
거래주체 데이터 없음
|
|
</div>
|
|
);
|
|
}
|
|
// 최근 5일만 (입력은 오래된→최신 순), 표시는 최신이 위.
|
|
const recent = data.slice(-5).reverse();
|
|
|
|
return (
|
|
<div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
|
|
<CardHeader
|
|
title="거래주체 순매수"
|
|
subtitle={`최근 ${recent.length}일 · 단위: 억원`}
|
|
/>
|
|
<div className="overflow-hidden rounded-md border border-zinc-800">
|
|
<table className="w-full text-xs tabular-nums">
|
|
<thead className="bg-zinc-900/60 text-[11px] text-zinc-500">
|
|
<tr>
|
|
<th className="px-2 py-1.5 text-left font-normal">일자</th>
|
|
<th className="px-2 py-1.5 text-right font-normal">외국인</th>
|
|
<th className="px-2 py-1.5 text-right font-normal">기관</th>
|
|
<th className="px-2 py-1.5 text-right font-normal">개인</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-zinc-800">
|
|
{recent.map((row) => (
|
|
<tr key={row.date}>
|
|
<td className="px-2 py-1.5 text-left text-zinc-400">
|
|
{shortDate(row.date)}
|
|
</td>
|
|
<NetCell value={row.foreign_net} />
|
|
<NetCell value={row.institution_net} />
|
|
<NetCell value={row.individual_net} />
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NetCell({ value }: { value: number | null }) {
|
|
if (value == null) {
|
|
return <td className="px-2 py-1.5 text-right text-zinc-600">—</td>;
|
|
}
|
|
const eok = value / 1e8;
|
|
const tone =
|
|
eok === 0
|
|
? "text-zinc-400"
|
|
: eok > 0
|
|
? "text-rose-400"
|
|
: "text-sky-400";
|
|
const sign = eok > 0 ? "+" : "";
|
|
return (
|
|
<td className={`px-2 py-1.5 text-right ${tone}`}>
|
|
{sign}
|
|
{eok.toLocaleString(undefined, { maximumFractionDigits: 0 })}
|
|
</td>
|
|
);
|
|
}
|
|
|
|
function shortDate(iso: string): string {
|
|
// 'YYYY-MM-DD' → 'MM-DD'
|
|
const m = /^\d{4}-(\d{2})-(\d{2})/.exec(iso);
|
|
return m ? `${m[1]}-${m[2]}` : iso;
|
|
}
|