실시간 차트 신고가,신저가 표시

frontend/src/components/ChartSlot.tsx

@@ -139,6 +139,8 @@ export interface ChartSlotHandle {
   setIndicatorAreaPriceLabelsEnabled: (enabled: boolean) => void;
   /** 거래량 pane on/off */
   setVolumeVisible: (visible: boolean) => void;
+  /** 9·20일 신고가·신저가 표시 */
+  setPriceExtremeLabelsVisible: (visible: boolean) => void;
   setPaneSeparatorOptions: (opts: ChartPaneSeparatorOptions) => void;
   /** 차트 시간축·크로스헤어 날짜 형식 */
   setChartTimeFormat: (format: string, timeframe?: Timeframe) => void;
@@ -210,6 +212,9 @@ export interface ChartSlotProps {
   chartCrosshairInfoVisible?: boolean;
   /** 차트 마우스오버 줌·이동 플로팅 툴바 */
   chartHoverToolbarVisible?: boolean;
+  /** 9·20일 신고가·신저가 차트 표시 */
+  chartPriceExtremeLabelsVisible?: boolean;
+  onTogglePriceExtremeLabels?: () => void;
   /** 업비트 실시간 티커 맵 (슬롯 심볼별 현재가·등락) */
   marketTickers?: Map<string, TickerData>;
 }
@@ -239,6 +244,8 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
   chartPaneSeparator,
   chartCrosshairInfoVisible = true,
   chartHoverToolbarVisible = true,
+  chartPriceExtremeLabelsVisible = false,
+  onTogglePriceExtremeLabels,
   marketTickers,
 }, ref) {
   // ── 전역 지표 파라미터 + 시각 설정 (DB 동기화) ────────────────────────
@@ -364,6 +371,9 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
     setVolumeVisible: (visible: boolean) => {
       managerRef.current?.setVolumeVisible(visible);
     },
+    setPriceExtremeLabelsVisible: (visible: boolean) => {
+      managerRef.current?.setPriceExtremeLabelsVisible(visible);
+    },
     setPaneSeparatorOptions: (opts: ChartPaneSeparatorOptions) => {
       managerRef.current?.setPaneSeparatorOptions(opts);
       managerRef.current?.refreshPaneSeparatorOverlay();
@@ -391,6 +401,10 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
     managerRef.current?.setVolumeVisible(chartVolumeVisible);
   }, [chartVolumeVisible]);
 
+  useEffect(() => {
+    managerRef.current?.setPriceExtremeLabelsVisible(chartPriceExtremeLabelsVisible);
+  }, [chartPriceExtremeLabelsVisible]);
+
   useEffect(() => {
     if (!chartPaneSeparator) return;
     managerRef.current?.setPaneSeparatorOptions(chartPaneSeparator);
@@ -1010,6 +1024,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
             mgr.setCandleAreaPriceLabelsEnabled(chartCandleAreaPriceLabels);
             mgr.setIndicatorAreaPriceLabelsEnabled(chartSeriesPriceLabels);
             mgr.setVolumeVisible(chartVolumeVisible);
+            mgr.setPriceExtremeLabelsVisible(chartPriceExtremeLabelsVisible ?? false);
             if (chartPaneSeparator) mgr.setPaneSeparatorOptions(chartPaneSeparator);
             mgr.setChartOverlayVisibility(overlayVisibilityRef.current);
             syncCustomOverlaysToManager(mgr);
@@ -1099,6 +1114,8 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
           custom1OverlayActive={compactMode ? undefined : custom1OverlayActive}
           onCustom1OverlayActiveChange={compactMode ? undefined : handleCustom1OverlayActiveChange}
           onOpenCustom1OverlaySettings={compactMode ? undefined : () => setCustomOverlaySettingsSlot('custom1')}
+          priceExtremeLabelsVisible={chartPriceExtremeLabelsVisible}
+          onTogglePriceExtremeLabels={onTogglePriceExtremeLabels}
         />
 
         {customOverlaySettingsSlot === 'custom' && !compactMode && (