실시간 차트 스크롤시 날짜 동기화 문제

frontend/src/components/SettingsPage.tsx

@@ -118,6 +118,8 @@ interface SettingsPageProps {
   onChartLiveReceiveHighlight?: (v: boolean) => void;
   chartLegendOptions?: ChartLegendVisibility;
   onChartLegendOptionsChange?: (patch: Partial<ChartLegendVisibility>) => void;
+  chartCrosshairInfoVisible?: boolean;
+  onChartCrosshairInfoVisible?: (v: boolean) => void;
   chartPaneSeparator?: ChartPaneSeparatorOptions;
   onChartPaneSeparatorChange?: (opts: ChartPaneSeparatorOptions) => void;
   paperTradingEnabled?: boolean;
@@ -672,6 +674,8 @@ interface ChartPanelProps {
   onChartLiveReceiveHighlight?: (v: boolean) => void;
   chartLegendOptions?: ChartLegendVisibility;
   onChartLegendOptionsChange?: (patch: Partial<ChartLegendVisibility>) => void;
+  chartCrosshairInfoVisible?: boolean;
+  onChartCrosshairInfoVisible?: (v: boolean) => void;
   chartPaneSeparator?: ChartPaneSeparatorOptions;
   onChartPaneSeparatorChange?: (opts: ChartPaneSeparatorOptions) => void;
   chartTimeFormat?: string;
@@ -690,6 +694,8 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
   onChartLiveReceiveHighlight,
   chartLegendOptions,
   onChartLegendOptionsChange,
+  chartCrosshairInfoVisible = true,
+  onChartCrosshairInfoVisible,
   chartPaneSeparator,
   onChartPaneSeparatorChange,
   chartTimeFormat = 'MM-dd HH:mm',
@@ -881,6 +887,24 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
         </SettingSection>
       )}
 
+      {chartLegendOptions && onChartLegendOptionsChange && (
+        <SettingSection title="크로스헤어 정보">
+          <SettingRow
+            label="크로스헤어 정보 표시"
+            desc="마우스로 차트를 가리킬 때 표시되는 시가·고가·저가·종가와 보조지표 수치를 켜거나 끕니다. 종목·현재가·보조지표 이름은 유지됩니다."
+          >
+            <label className="stg-toggle">
+              <input
+                type="checkbox"
+                checked={chartCrosshairInfoVisible}
+                onChange={e => onChartCrosshairInfoVisible?.(e.target.checked)}
+              />
+              <span className="stg-toggle-slider" />
+            </label>
+          </SettingRow>
+        </SettingSection>
+      )}
+
       {chartLegendOptions && onChartLegendOptionsChange && (
         <SettingSection title="상단 정보 표시">
           {CHART_LEGEND_SETTING_ITEMS.map(({ key, label, desc }) => (
@@ -1571,6 +1595,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
   onChartLiveReceiveHighlight,
   chartLegendOptions,
   onChartLegendOptionsChange,
+  chartCrosshairInfoVisible = true,
+  onChartCrosshairInfoVisible,
   chartPaneSeparator,
   onChartPaneSeparatorChange,
   tradeAlertSoundEnabled = true,
@@ -1667,6 +1693,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
           onChartLiveReceiveHighlight={onChartLiveReceiveHighlight}
           chartLegendOptions={chartLegendOptions}
           onChartLegendOptionsChange={onChartLegendOptionsChange}
+          chartCrosshairInfoVisible={chartCrosshairInfoVisible}
+          onChartCrosshairInfoVisible={onChartCrosshairInfoVisible}
           chartPaneSeparator={chartPaneSeparator}
           onChartPaneSeparatorChange={onChartPaneSeparatorChange}
           chartTimeFormat={chartTimeFormat}