캔들차트, 이동평균선, 일목균형표, 볼린저밴드 보이기 숨기기 기능적용

frontend/src/components/SettingsPage.tsx

@@ -125,6 +125,8 @@ interface SettingsPageProps {
   onChartLegendOptionsChange?: (patch: Partial<ChartLegendVisibility>) => void;
   chartCrosshairInfoVisible?: boolean;
   onChartCrosshairInfoVisible?: (v: boolean) => void;
+  chartHoverToolbarVisible?: boolean;
+  onChartHoverToolbarVisible?: (v: boolean) => void;
   chartPaneSeparator?: ChartPaneSeparatorOptions;
   onChartPaneSeparatorChange?: (opts: ChartPaneSeparatorOptions) => void;
   paperTradingEnabled?: boolean;
@@ -783,6 +785,8 @@ interface ChartPanelProps {
   onChartLegendOptionsChange?: (patch: Partial<ChartLegendVisibility>) => void;
   chartCrosshairInfoVisible?: boolean;
   onChartCrosshairInfoVisible?: (v: boolean) => void;
+  chartHoverToolbarVisible?: boolean;
+  onChartHoverToolbarVisible?: (v: boolean) => void;
   chartPaneSeparator?: ChartPaneSeparatorOptions;
   onChartPaneSeparatorChange?: (opts: ChartPaneSeparatorOptions) => void;
   chartTimeFormat?: string;
@@ -807,6 +811,8 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
   onChartLegendOptionsChange,
   chartCrosshairInfoVisible = true,
   onChartCrosshairInfoVisible,
+  chartHoverToolbarVisible = true,
+  onChartHoverToolbarVisible,
   chartPaneSeparator,
   onChartPaneSeparatorChange,
   chartTimeFormat = 'MM-dd HH:mm',
@@ -1054,6 +1060,22 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
           </select>
         </SettingRow>
       </SettingSection>
+
+      <SettingSection title="차트 조작 툴바">
+        <SettingRow
+          label="줌·이동 플로팅 툴바"
+          desc="켜면 차트에 마우스를 올렸을 때 하단에 축소(−)·확대(+)·전체 보기·좌우 이동(‹ ›) 버튼이 표시됩니다. 끄면 툴바가 나타나지 않습니다."
+        >
+          <label className="stg-toggle">
+            <input
+              type="checkbox"
+              checked={chartHoverToolbarVisible}
+              onChange={e => onChartHoverToolbarVisible?.(e.target.checked)}
+            />
+            <span className="stg-toggle-slider" />
+          </label>
+        </SettingRow>
+      </SettingSection>
     </>
   );
 };
@@ -1714,6 +1736,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
   onChartLegendOptionsChange,
   chartCrosshairInfoVisible = true,
   onChartCrosshairInfoVisible,
+  chartHoverToolbarVisible = true,
+  onChartHoverToolbarVisible,
   chartPaneSeparator,
   onChartPaneSeparatorChange,
   tradeAlertSoundEnabled = true,
@@ -1828,6 +1852,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
           onChartLegendOptionsChange={onChartLegendOptionsChange}
           chartCrosshairInfoVisible={chartCrosshairInfoVisible}
           onChartCrosshairInfoVisible={onChartCrosshairInfoVisible}
+          chartHoverToolbarVisible={chartHoverToolbarVisible}
+          onChartHoverToolbarVisible={onChartHoverToolbarVisible}
           chartPaneSeparator={chartPaneSeparator}
           onChartPaneSeparatorChange={onChartPaneSeparatorChange}
           chartTimeFormat={chartTimeFormat}