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

frontend/src/components/Toolbar.tsx

@@ -143,6 +143,9 @@ export interface ToolbarProps {
   chartLiveQuote?: ChartLiveQuote | null;
   chartQuoteLoading?: boolean;
   chartQuoteError?: string | null;
+  /** 9·20일 신고가·신저가 차트 표시 (실시간 차트 상단 툴바) */
+  priceExtremeLabelsVisible?: boolean;
+  onTogglePriceExtremeLabels?: () => void;
 }
 
 // ─── SVG 아이콘 ────────────────────────────────────────────────────────────
@@ -240,6 +243,12 @@ const IcTradeSignal = () => (
     <path d="M8.5 1.5 L4 8.5 H7.5 L6 13.5 L11 6 H7.5 Z" fill="currentColor" stroke="none" opacity="0.85"/>
   </svg>
 );
+const IcPriceExtreme = () => (
+  <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 IcGridIcon = () => (
   <svg width="15" height="15" viewBox="0 0 15 15" fill="none" stroke="currentColor" strokeWidth="1.3">
     <rect x="1" y="1" width="13" height="13" rx="1"/>
@@ -826,6 +835,8 @@ const Toolbar: React.FC<ToolbarProps> = ({
   chartLiveQuote = null,
   chartQuoteLoading = false,
   chartQuoteError = null,
+  priceExtremeLabelsVisible = false,
+  onTogglePriceExtremeLabels,
 }) => {
   const [showMarket, setShowMarket] = React.useState(false);
   const [showTfMenu, setShowTfMenu] = React.useState(false);
@@ -1097,6 +1108,17 @@ const Toolbar: React.FC<ToolbarProps> = ({
           <IcFibAuto />
         </button>
 
+        {/* 9·20일 신고가·신저가 표시 */}
+        {onTogglePriceExtremeLabels && (
+          <button
+            className={`tv-icon-btn${priceExtremeLabelsVisible ? ' active' : ''}`}
+            onClick={onTogglePriceExtremeLabels}
+            title={priceExtremeLabelsVisible ? '9·20일 신고가·신저가 숨기기' : '9·20일 신고가·신저가 표시'}
+          >
+            <IcPriceExtreme />
+          </button>
+        )}
+
         {/* 그리드 토글 */}
         <button
           className={`tv-icon-btn${showGrid ? ' active' : ''}`}