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

frontend/src/components/ChartRightToolbar.tsx

@@ -45,6 +45,9 @@ export interface ChartRightToolbarProps {
   onOpenCustom1OverlaySettings?: () => void;
   /** true — 캔들 pane 상단 오버레이 토글만 (미니 차트 등) */
   overlayControlsOnly?: boolean;
+  /** 9·20일 신고가·신저가 라벨 표시 (실시간 차트) */
+  priceExtremeLabelsVisible?: boolean;
+  onTogglePriceExtremeLabels?: () => void;
 }
 
 const BTN_SIZE = 32;
@@ -150,6 +153,14 @@ const IconIchimoku = () => (
   </svg>
 );
 
+/** 신고가(상향)·신저가(하향) */
+const IconPriceExtreme = () => (
+  <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden>
+    <path d="M7 1.5 L10.5 6 H3.5 Z" fill="#4dabf7"/>
+    <path d="M7 12.5 L3.5 8 H10.5 Z" fill="#ef5350"/>
+  </svg>
+);
+
 const OVERLAY_ICONS: Record<ChartOverlayToggleKey, React.ReactNode> = {
   ma: <IconMa />,
   bollinger: <IconBollinger />,
@@ -360,6 +371,8 @@ const ChartRightToolbar: React.FC<ChartRightToolbarProps> = ({
   onExpand, onRestore, focusedId,
   onDragStart, onToggleHidden, onSettings,
   overlayControlsOnly = false,
+  priceExtremeLabelsVisible = false,
+  onTogglePriceExtremeLabels,
 }) => {
   const [paneLayouts, setPaneLayouts] = useState<Array<{ paneIndex: number; topY: number; height: number }>>([]);
   const [paneItems, setPaneItems] = useState<ReturnType<typeof buildPaneItems>>([]);
@@ -418,9 +431,11 @@ const ChartRightToolbar: React.FC<ChartRightToolbarProps> = ({
 
   const candlePane = paneLayouts.find(l => l.paneIndex === 0);
   const showOverlayIcons = !!(candleOverlayToggles?.length && candlePane && onToggleCandleOverlay);
+  const showPriceExtremeBtn = !!(candlePane && onTogglePriceExtremeLabels);
+  const showOverlayCluster = showOverlayIcons || showPriceExtremeBtn;
 
   if (paused || chartHeight <= 0) return null;
-  if (overlayControlsOnly && !showOverlayIcons) return null;
+  if (overlayControlsOnly && !showOverlayCluster) return null;
 
   const innerHeight = paneLayouts.reduce(
     (max, l) => Math.max(max, l.topY + l.height),
@@ -475,12 +490,12 @@ const ChartRightToolbar: React.FC<ChartRightToolbarProps> = ({
           </div>
         )}
 
-        {showOverlayIcons && (
+        {showOverlayCluster && (
           <div
             className="chart-right-toolbar-cluster chart-right-toolbar-cluster--overlay-icons"
             style={{ top: candlePane!.topY + 4 }}
           >
-            {candleOverlayToggles!.map((item, idx) => (
+            {candleOverlayToggles?.map((item, idx) => (
               <button
                 key={item.key}
                 type="button"
@@ -495,6 +510,20 @@ const ChartRightToolbar: React.FC<ChartRightToolbarProps> = ({
                 {OVERLAY_ICONS[item.key]}
               </button>
             ))}
+            {showPriceExtremeBtn && (
+              <button
+                type="button"
+                className={`tv-side-btn chart-right-toolbar-btn chart-right-toolbar-btn--overlay chart-right-toolbar-btn--price-extreme${priceExtremeLabelsVisible ? '' : ' chart-right-toolbar-btn--overlay-off'}`}
+                title={priceExtremeLabelsVisible ? '9·20일 신고가·신저가 숨기기' : '9·20일 신고가·신저가 표시'}
+                style={{ marginTop: (candleOverlayToggles?.length ?? 0) > 0 ? BTN_GAP : 0 }}
+                onClick={e => {
+                  e.stopPropagation();
+                  onTogglePriceExtremeLabels?.();
+                }}
+              >
+                <IconPriceExtreme />
+              </button>
+            )}
             {showCustomBtn && (
               <button
                 type="button"