크로스헤어 세로선 날짜표시

frontend/src/utils/ChartManager.ts

@@ -267,8 +267,12 @@ export class ChartManager {
       },
       crosshair: {
         mode: CrosshairMode.Normal,   /* 기본: 마우스 위치 자유 이동 (자석모드 OFF) */
-        vertLine: { color: t.crosshairColor, labelBackgroundColor: '#9598A1' },
-        horzLine: { color: t.crosshairColor, labelBackgroundColor: '#9598A1' },
+        vertLine: {
+          color: t.crosshairColor,
+          labelVisible: true,
+          labelBackgroundColor: '#50535E',
+        },
+        horzLine: { color: t.crosshairColor, labelBackgroundColor: '#50535E' },
       },
       timeScale: {
         borderColor:       t.borderColor,
@@ -522,7 +526,14 @@ export class ChartManager {
         panes: applyPaneSeparatorToChartOptions(this._paneSeparatorOptions).layout.panes,
       },
       grid:      { vertLines: { color: t.gridColor }, horzLines: { color: t.gridColor } },
-      crosshair: { vertLine: { color: t.crosshairColor, labelBackgroundColor: '#9598A1' }, horzLine: { color: t.crosshairColor, labelBackgroundColor: '#9598A1' } },
+      crosshair: {
+        vertLine: {
+          color: t.crosshairColor,
+          labelVisible: true,
+          labelBackgroundColor: '#50535E',
+        },
+        horzLine: { color: t.crosshairColor, labelBackgroundColor: '#50535E' },
+      },
       timeScale: { borderColor: t.borderColor },
       rightPriceScale: { borderColor: t.borderColor },
     });
@@ -2730,14 +2741,23 @@ export class ChartManager {
   }
 
   /**
-   * 캔들 pane 하단 시간축 오버레이 — 거래량·보조지표가 있을 때 캔들 영역 바로 아래에도 시각 표시.
+   * 캔들 pane 하단 시간축 밴드 위치 (보조지표·거래량이 아래에 있을 때).
    */
-  getCandlePaneTimeAxisOverlay(): {
-    topY: number;
-    height: number;
-    plotWidth: number;
-    labels: Array<{ x: number; text: string }>;
-  } | null {
+  getCandlePaneTimeAxisBand(): { topY: number; height: number; plotWidth: number } | null {
+    return this._getCandlePaneTimeAxisBand();
+  }
+
+  /** 크로스헤어 세로선 시간 — 설정된 차트 시간 포맷·시간대 적용 */
+  formatCrosshairAxisTime(time: Time): string {
+    return formatLwcTimeWithPattern(
+      time as number | { year: number; month: number; day: number },
+      this.displayTimeframe,
+      this.displayTimezone,
+      this.chartTimeFormat,
+    );
+  }
+
+  private _getCandlePaneTimeAxisBand(): { topY: number; height: number; plotWidth: number } | null {
     if (!this.mainSeries || this.rawBars.length < 2) return null;
 
     const layouts = this.getPaneLayouts();
@@ -2748,11 +2768,31 @@ export class ChartManager {
     if (!main || main.height < 48) return null;
 
     const AXIS_H = 22;
+    const plotWidth = Math.max(40, this.chart.timeScale().width());
+    return {
+      topY: main.topY + main.height - AXIS_H,
+      height: AXIS_H,
+      plotWidth,
+    };
+  }
+
+  /**
+   * 캔들 pane 하단 시간축 오버레이 — 거래량·보조지표가 있을 때 캔들 영역 바로 아래에도 시각 표시.
+   */
+  getCandlePaneTimeAxisOverlay(): {
+    topY: number;
+    height: number;
+    plotWidth: number;
+    labels: Array<{ x: number; text: string }>;
+  } | null {
+    const band = this._getCandlePaneTimeAxisBand();
+    if (!band) return null;
+
     const ts = this.chart.timeScale();
     const lr = ts.getVisibleLogicalRange();
     if (!lr) return null;
 
-    const plotWidth = Math.max(40, ts.width());
+    const { topY, height, plotWidth } = band;
     const lrSpan = lr.to - lr.from;
     if (!Number.isFinite(lrSpan) || lrSpan <= 0) return null;
 
@@ -2779,8 +2819,8 @@ export class ChartManager {
     if (labels.length === 0) return null;
 
     return {
-      topY: main.topY + main.height - AXIS_H,
-      height: AXIS_H,
+      topY,
+      height,
       plotWidth,
       labels,
     };