차트 세로크로스헤어 교차점 on off

frontend/src/components/SettingsPage.tsx

@@ -129,6 +129,8 @@ interface SettingsPageProps {
   onChartLegendOptionsChange?: (patch: Partial<ChartLegendVisibility>) => void;
   chartCrosshairInfoVisible?: boolean;
   onChartCrosshairInfoVisible?: (v: boolean) => void;
+  chartCrosshairMarkersVisible?: boolean;
+  onChartCrosshairMarkersVisible?: (v: boolean) => void;
   chartHoverToolbarVisible?: boolean;
   onChartHoverToolbarVisible?: (v: boolean) => void;
   chartPaneSeparator?: ChartPaneSeparatorOptions;
@@ -1010,6 +1012,8 @@ interface ChartPanelProps {
   onChartLegendOptionsChange?: (patch: Partial<ChartLegendVisibility>) => void;
   chartCrosshairInfoVisible?: boolean;
   onChartCrosshairInfoVisible?: (v: boolean) => void;
+  chartCrosshairMarkersVisible?: boolean;
+  onChartCrosshairMarkersVisible?: (v: boolean) => void;
   chartHoverToolbarVisible?: boolean;
   onChartHoverToolbarVisible?: (v: boolean) => void;
   chartPaneSeparator?: ChartPaneSeparatorOptions;
@@ -1036,6 +1040,8 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
   onChartLegendOptionsChange,
   chartCrosshairInfoVisible = true,
   onChartCrosshairInfoVisible,
+  chartCrosshairMarkersVisible = true,
+  onChartCrosshairMarkersVisible,
   chartHoverToolbarVisible = true,
   onChartHoverToolbarVisible,
   chartPaneSeparator,
@@ -1248,6 +1254,19 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
               <span className="stg-toggle-slider" />
             </label>
           </SettingRow>
+          <SettingRow
+            label="교차점 점 표시"
+            desc="켜면 세로 크로스헤어가 캔들·보조지표 선과 만나는 위치에 색 점이 표시됩니다. 끄면 크로스헤어 선만 표시됩니다."
+          >
+            <label className="stg-toggle">
+              <input
+                type="checkbox"
+                checked={chartCrosshairMarkersVisible}
+                onChange={e => onChartCrosshairMarkersVisible?.(e.target.checked)}
+              />
+              <span className="stg-toggle-slider" />
+            </label>
+          </SettingRow>
         </SettingSection>
       )}
 
@@ -1955,6 +1974,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
   onChartLegendOptionsChange,
   chartCrosshairInfoVisible = true,
   onChartCrosshairInfoVisible,
+  chartCrosshairMarkersVisible = true,
+  onChartCrosshairMarkersVisible,
   chartHoverToolbarVisible = true,
   onChartHoverToolbarVisible,
   chartPaneSeparator,
@@ -2077,6 +2098,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
           onChartLegendOptionsChange={onChartLegendOptionsChange}
           chartCrosshairInfoVisible={chartCrosshairInfoVisible}
           onChartCrosshairInfoVisible={onChartCrosshairInfoVisible}
+          chartCrosshairMarkersVisible={chartCrosshairMarkersVisible}
+          onChartCrosshairMarkersVisible={onChartCrosshairMarkersVisible}
           chartHoverToolbarVisible={chartHoverToolbarVisible}
           onChartHoverToolbarVisible={onChartHoverToolbarVisible}
           chartPaneSeparator={chartPaneSeparator}