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

frontend/src/chart/ChartWorkspaceView.tsx

@@ -138,6 +138,7 @@ export interface ChartWorkspaceViewProps {
   chartCandleAreaPriceLabels: boolean;
   chartSeriesPriceLabels: boolean;
   chartVolumeVisible: boolean;
+  chartPriceExtremeLabelsVisible: boolean;
   chartPaneSeparator: ChartPaneSeparatorOptions;
   chartCrosshairInfoVisible: boolean;
   chartHoverToolbarVisible: boolean;
@@ -291,6 +292,7 @@ export interface ChartWorkspaceViewProps {
   handleExpandIndicator: (id: string) => void;
   handleRestoreIndicators: () => void;
   handleToggleCandleOverlay: (key: ChartOverlayToggleKey) => void;
+  handleTogglePriceExtremeLabels: () => void;
   handleCustomOverlayActiveChange: (active: boolean) => void;
   handleCustom1OverlayActiveChange: (active: boolean) => void;
   handleSaveCustomOverlaySelection: (slot: ChartCustomOverlaySlotId, selection: ChartCustomOverlaySelection) => void;
@@ -325,7 +327,7 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
     overlayVisibilityRef, candleOverlayToggles, customOverlaySelection,
     custom1OverlaySelection, customOverlaySettingsSlot, customOverlayActive,
     custom1OverlayActive, chartCandleAreaPriceLabels, chartSeriesPriceLabels,
-    chartVolumeVisible, chartPaneSeparator, chartCrosshairInfoVisible,
+    chartVolumeVisible, chartPriceExtremeLabelsVisible, chartPaneSeparator, chartCrosshairInfoVisible,
     chartHoverToolbarVisible, chartLiveReceiveHighlight, chartRealtimeSource,
     displayTimezone, chartTimeFormat, chartLegendOptions, useUpbit, wsStatus, bars, barsMarket,
     barsMarketRef, chartMountKey, chartLiveReadyRef, pendingRealtimeBarRef,
@@ -363,6 +365,7 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
     handleDuplicateIndicator, handleRemoveIndicatorById, handleScreenshot,
     handleReorderIndicators, handleMergeIndicators, handleSplitIndicatorPane,
     handleExpandIndicator, handleRestoreIndicators, handleToggleCandleOverlay,
+    handleTogglePriceExtremeLabels,
     handleCustomOverlayActiveChange, handleCustom1OverlayActiveChange,
     handleSaveCustomOverlaySelection, syncCustomOverlaysToManager,
     handleCandlesReady, applyBacktestMarkersWhenReady, btRun, refreshPaperAccount,
@@ -505,6 +508,8 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
         chartLiveQuote={liveQuote}
         chartQuoteLoading={isLoading}
         chartQuoteError={error}
+        priceExtremeLabelsVisible={chartPriceExtremeLabelsVisible}
+        onTogglePriceExtremeLabels={handleTogglePriceExtremeLabels}
       />
 
       {isMobile && (showMarketPanel || mobileRightOpen) && (
@@ -616,6 +621,8 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
                 chartPaneSeparator={chartPaneSeparator}
                 chartCrosshairInfoVisible={chartCrosshairInfoVisible}
                 chartHoverToolbarVisible={chartHoverToolbarVisible}
+                chartPriceExtremeLabelsVisible={chartPriceExtremeLabelsVisible}
+                onTogglePriceExtremeLabels={handleTogglePriceExtremeLabels}
                 chartLiveReceiveHighlight={chartLiveReceiveHighlight}
                 chartRealtimeSource={chartRealtimeSource as 'BACKEND_STOMP' | 'UPBIT_DIRECT'}
                 displayTimezone={displayTimezone}
@@ -659,6 +666,7 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
                     chartPaneSeparator={chartPaneSeparator}
                     chartCrosshairInfoVisible={chartCrosshairInfoVisible}
                     chartHoverToolbarVisible={chartHoverToolbarVisible}
+                    chartPriceExtremeLabelsVisible={chartPriceExtremeLabelsVisible}
                     chartLiveReceiveHighlight={chartLiveReceiveHighlight}
                     chartRealtimeSource={chartRealtimeSource as 'BACKEND_STOMP' | 'UPBIT_DIRECT'}
                     displayTimezone={displayTimezone}
@@ -723,6 +731,7 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
               mgr.setIndicatorAreaPriceLabelsEnabled(chartSeriesPriceLabels);
               const wrapper = document.querySelector('.chart-wrapper') as HTMLElement | null;
               mgr.setVolumeVisible(chartVolumeVisible, wrapper?.clientHeight);
+              mgr.setPriceExtremeLabelsVisible(chartPriceExtremeLabelsVisible);
               mgr.setPaneSeparatorOptions(chartPaneSeparator);
               mgr.setDisplayTimezone(displayTimezone, timeframe, chartTimeFormat);
               mgr.setChartOverlayVisibility(overlayVisibilityRef.current);
@@ -773,6 +782,8 @@ function ChartWorkspaceViewInner(props: ChartWorkspaceViewProps) {
             paneSeparatorOptions={chartPaneSeparator}
             candleOverlayToggles={candleOverlayToggles}
             onToggleCandleOverlay={handleToggleCandleOverlay}
+            priceExtremeLabelsVisible={chartPriceExtremeLabelsVisible}
+            onTogglePriceExtremeLabels={handleTogglePriceExtremeLabels}
             customOverlayActive={customOverlayActive}
             onCustomOverlayActiveChange={handleCustomOverlayActiveChange}
             onOpenCustomOverlaySettings={() => setCustomOverlaySettingsSlot('custom')}

frontend/src/chart/useChartWorkspace.ts

@@ -54,6 +54,10 @@ import {
   DEFAULT_CHART_OVERLAY_VISIBILITY,
   listChartOverlayToggleItems,
 } from '../utils/chartOverlayVisibility';
+import {
+  loadChartPriceExtremeLabelsVisible,
+  saveChartPriceExtremeLabelsVisible,
+} from '../utils/chartPriceExtremeLabelsPref';
 import {
   type ChartCustomOverlaySelection,
   type ChartCustomOverlaySlotId,
@@ -1396,6 +1400,15 @@ export function useChartWorkspace({
     [overlayVisibility],
   );
 
+  const [chartPriceExtremeLabelsVisible, setChartPriceExtremeLabelsVisible] = useState(
+    () => loadChartPriceExtremeLabelsVisible(),
+  );
+
+  useEffect(() => {
+    managerRef.current?.setPriceExtremeLabelsVisible(chartPriceExtremeLabelsVisible);
+    slotRefs.current.forEach(slot => slot?.setPriceExtremeLabelsVisible(chartPriceExtremeLabelsVisible));
+  }, [chartPriceExtremeLabelsVisible]);
+
   const [customOverlaySelection, setCustomOverlaySelection] = useState<ChartCustomOverlaySelection>(
     () => createDefaultChartCustomOverlaySelection(),
   );
@@ -1481,6 +1494,16 @@ export function useChartWorkspace({
     });
   }, []);
 
+  const handleTogglePriceExtremeLabels = useCallback(() => {
+    setChartPriceExtremeLabelsVisible(prev => {
+      const next = !prev;
+      saveChartPriceExtremeLabelsVisible(next);
+      managerRef.current?.setPriceExtremeLabelsVisible(next);
+      slotRefs.current.forEach(slot => slot?.setPriceExtremeLabelsVisible(next));
+      return next;
+    });
+  }, []);
+
   /**
    * 보조지표 순서 변경 (드래그 핸들): fromId 를 indicators 배열에서 이동.
    * overlay/markers 지표는 건드리지 않고 비오버레이 지표 위치만 변경됨.
@@ -1908,7 +1931,7 @@ export function useChartWorkspace({
     candleOverlayToggles, customOverlaySelection, custom1OverlaySelection,
     activeCustomOverlaySlot, customOverlaySettingsSlot, customOverlayActive,
     custom1OverlayActive, chartCandleAreaPriceLabels, chartSeriesPriceLabels,
-    chartVolumeVisible, chartPaneSeparator, chartCrosshairInfoVisible,
+    chartVolumeVisible, chartPriceExtremeLabelsVisible, chartPaneSeparator, chartCrosshairInfoVisible,
     chartHoverToolbarVisible, chartLiveReceiveHighlight,
     chartRealtimeSource: (chartRealtimeSource ?? 'BACKEND_STOMP') as 'BACKEND_STOMP' | 'UPBIT_DIRECT',
     displayTimezone, chartTimeFormat, chartLegendOptions, useUpbit,
@@ -1948,6 +1971,7 @@ export function useChartWorkspace({
     handleDuplicateIndicator, handleRemoveIndicatorById, handleScreenshot,
     handleReorderIndicators, handleMergeIndicators, handleSplitIndicatorPane,
     handleExpandIndicator, handleRestoreIndicators, handleToggleCandleOverlay,
+    handleTogglePriceExtremeLabels,
     handleCustomOverlayActiveChange, handleCustom1OverlayActiveChange,
     handleSaveCustomOverlaySelection, syncCustomOverlaysToManager,
     handleCandlesReady, applyBacktestMarkersWhenReady, btRun, refreshPaperAccount,