fix(chart): "오늘" 표시를 차트 본체 마커 → 시간축 아래 캡션으로 이동

lightweight-charts 의 timeScale tick 라벨에 직접 텍스트를 끼우는 공식 API 가
없어서, 차트 컨테이너 바로 아래에 작은 캡션 (• 오늘 · YYYY-MM-DD (요일)) 으로
표시. 사용자 요청 ("차트에 표시 말고 아래 날짜 표시하는 곳에").
This commit is contained in:
claude-owner
2026-05-23 02:49:36 +09:00
parent e610599879
commit 44873ddb39

View File

@@ -7,8 +7,6 @@ import {
type IChartApi,
type ISeriesApi,
type LineData,
type SeriesMarker,
type Time,
type UTCTimestamp,
} from "lightweight-charts";
import type { ChartPayload, LatestPredictionResponse } from "../lib/api";
@@ -104,28 +102,9 @@ export function StockChart({ chart, prediction }: Props) {
close: p.close as number,
}));
candleRef.current.setData(data);
// 오늘 날짜 마커: 일/주/월봉에서만 표시 (10분봉은 데이터 자체가 오늘 하루라 무의미).
// markers 는 데이터 포인트의 time 과 일치해야 표시되므로, 오늘 또는 가장 가까운 과거
// 거래일을 찾는다.
if (!isIntraday && chart.today) {
const todayTs = isoToUtcTs(chart.today);
// 차트의 마지막 데이터가 오늘이면 그 위에, 아니면 마지막 데이터 위에 "오늘" 표시.
const lastTs = data.length > 0 ? (data[data.length - 1].time as UTCTimestamp) : null;
const markerTime = (lastTs && lastTs <= todayTs ? lastTs : todayTs) as UTCTimestamp;
const markers: SeriesMarker<Time>[] = [
{
time: markerTime,
position: "aboveBar",
color: "#fbbf24",
shape: "arrowDown",
text: "오늘",
},
];
candleRef.current.setMarkers(markers);
} else {
candleRef.current.setMarkers([]);
}
// 오늘 표시는 차트 본체 위가 아니라 컨테이너 아래 캡션 (return JSX) 으로 옮김.
// lightweight-charts 의 timeScale tick 자체에 라벨을 끼울 공식 API 가 없어서,
// 시각적으로 동일한 위치 (시간축 바로 아래) 에 별도 div 로 렌더.
chartRef.current?.timeScale().fitContent();
}, [chart, isIntraday]);
@@ -203,9 +182,29 @@ export function StockChart({ chart, prediction }: Props) {
chartRef.current.timeScale().fitContent();
}, [prediction, isIntraday]);
// 오늘 라벨 — 차트 본체에 마커 대신 시간축 바로 아래에 작은 캡션으로.
// 10분봉은 데이터 자체가 오늘 하루라 굳이 라벨 불필요.
const todayLabel =
!isIntraday && chart.today
? new Date(chart.today + "T00:00:00").toLocaleDateString("ko-KR", {
year: "numeric",
month: "2-digit",
day: "2-digit",
weekday: "short",
})
: null;
return (
<div className="h-[460px] w-full rounded-md border border-zinc-800 bg-zinc-900/30 p-2">
<div className="w-full rounded-md border border-zinc-800 bg-zinc-900/30 p-2">
<div className="h-[460px] w-full">
<div ref={containerRef} className="h-full w-full" />
</div>
{todayLabel && (
<div className="mt-1 flex items-center justify-end gap-2 px-2 text-xs text-zinc-400">
<span className="inline-block h-2 w-2 rounded-full bg-amber-400" />
<span> · {todayLabel}</span>
</div>
)}
</div>
);
}