From 44873ddb39f9644d41f286461f99c143f63c33a5 Mon Sep 17 00:00:00 2001
From: claude-owner <claude-owner@stock_chart_site>
Date: Sat, 23 May 2026 02:49:36 +0900
Subject: [PATCH] =?UTF-8?q?fix(chart):=20"=EC=98=A4=EB=8A=98"=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=EB=A5=BC=20=EC=B0=A8=ED=8A=B8=20=EB=B3=B8=EC=B2=B4=20?=
 =?UTF-8?q?=EB=A7=88=EC=BB=A4=20=E2=86=92=20=EC=8B=9C=EA=B0=84=EC=B6=95=20?=
 =?UTF-8?q?=EC=95=84=EB=9E=98=20=EC=BA=A1=EC=85=98=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

lightweight-charts 의 timeScale tick 라벨에 직접 텍스트를 끼우는 공식 API 가
없어서, 차트 컨테이너 바로 아래에 작은 캡션 (• 오늘 · YYYY-MM-DD (요일)) 으로
표시. 사용자 요청 ("차트에 표시 말고 아래 날짜 표시하는 곳에").
---
 web/components/StockChart.tsx | 51 +++++++++++++++++------------------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/web/components/StockChart.tsx b/web/components/StockChart.tsx
index d1c62c2..e57c456 100644
--- a/web/components/StockChart.tsx
+++ b/web/components/StockChart.tsx
@@ -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 ref={containerRef} className="h-full w-full" />
+    <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>
   );
 }