일목균형표 수정

frontend/src/components/SettingsPage.tsx

@@ -35,6 +35,12 @@ import {
   CHART_LEGEND_SETTING_ITEMS,
   type ChartLegendVisibility,
 } from '../types/chartLegend';
+import type { ChartPaneSeparatorOptions } from '../types/chartPaneSeparator';
+import {
+  LINE_STYLE_LABELS,
+  LINE_STYLE_OPTIONS,
+  LINE_WIDTH_OPTIONS,
+} from '../utils/plotColorUtils';
 import TimezonePicker from './TimezonePicker';
 import AdminPasswordGate from './AdminPasswordGate';
 import AdminSettingsPanel from './AdminSettingsPanel';
@@ -108,6 +114,8 @@ interface SettingsPageProps {
   onChartLiveReceiveHighlight?: (v: boolean) => void;
   chartLegendOptions?: ChartLegendVisibility;
   onChartLegendOptionsChange?: (patch: Partial<ChartLegendVisibility>) => void;
+  chartPaneSeparator?: ChartPaneSeparatorOptions;
+  onChartPaneSeparatorChange?: (opts: ChartPaneSeparatorOptions) => void;
   paperTradingEnabled?: boolean;
   onPaperTradingEnabled?: (v: boolean) => void;
   paperInitialCapital?: number;
@@ -638,6 +646,8 @@ interface ChartPanelProps {
   onChartLiveReceiveHighlight?: (v: boolean) => void;
   chartLegendOptions?: ChartLegendVisibility;
   onChartLegendOptionsChange?: (patch: Partial<ChartLegendVisibility>) => void;
+  chartPaneSeparator?: ChartPaneSeparatorOptions;
+  onChartPaneSeparatorChange?: (opts: ChartPaneSeparatorOptions) => void;
 }
 
 const ChartPanel: React.FC<ChartPanelProps> = ({
@@ -652,6 +662,8 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
   onChartLiveReceiveHighlight,
   chartLegendOptions,
   onChartLegendOptionsChange,
+  chartPaneSeparator,
+  onChartPaneSeparatorChange,
 }) => {
   const [upColor,   setUp]   = useState('#26a69a');
   const [downColor, setDown] = useState('#ef5350');
@@ -758,6 +770,75 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
         </SettingRow>
       </SettingSection>
 
+      {chartPaneSeparator && onChartPaneSeparatorChange && (
+        <SettingSection title="차트 영역 구분선">
+          <SettingRow
+            label="구분선 표시"
+            desc="캔들·거래량·보조지표 pane 사이에 구분선을 표시합니다."
+          >
+            <label className="stg-toggle">
+              <input
+                type="checkbox"
+                checked={chartPaneSeparator.visible}
+                onChange={e => onChartPaneSeparatorChange({
+                  ...chartPaneSeparator,
+                  visible: e.target.checked,
+                })}
+              />
+              <span className="stg-toggle-slider" />
+            </label>
+          </SettingRow>
+          {chartPaneSeparator.visible && (
+            <>
+              <SettingRow label="선 색상" desc="pane 사이 구분선 색상입니다.">
+                <div className="stg-color-row">
+                  <input
+                    type="color"
+                    className="stg-color"
+                    value={chartPaneSeparator.color.startsWith('#')
+                      ? chartPaneSeparator.color.slice(0, 7)
+                      : '#2a2e3a'}
+                    onChange={e => onChartPaneSeparatorChange({
+                      ...chartPaneSeparator,
+                      color: e.target.value,
+                    })}
+                  />
+                  <span className="stg-color-label">{chartPaneSeparator.color}</span>
+                </div>
+              </SettingRow>
+              <SettingRow label="선 굵기" desc="구분선 두께(px)입니다.">
+                <select
+                  className="stg-select"
+                  value={chartPaneSeparator.width}
+                  onChange={e => onChartPaneSeparatorChange({
+                    ...chartPaneSeparator,
+                    width: Number(e.target.value) as ChartPaneSeparatorOptions['width'],
+                  })}
+                >
+                  {LINE_WIDTH_OPTIONS.map(w => (
+                    <option key={w} value={w}>{w}px</option>
+                  ))}
+                </select>
+              </SettingRow>
+              <SettingRow label="선 스타일" desc="실선·점선·도트 중 선택합니다.">
+                <select
+                  className="stg-select"
+                  value={chartPaneSeparator.lineStyle}
+                  onChange={e => onChartPaneSeparatorChange({
+                    ...chartPaneSeparator,
+                    lineStyle: e.target.value as ChartPaneSeparatorOptions['lineStyle'],
+                  })}
+                >
+                  {LINE_STYLE_OPTIONS.map(s => (
+                    <option key={s} value={s}>{LINE_STYLE_LABELS[s]}</option>
+                  ))}
+                </select>
+              </SettingRow>
+            </>
+          )}
+        </SettingSection>
+      )}
+
       {chartLegendOptions && onChartLegendOptionsChange && (
         <SettingSection title="상단 정보 표시">
           {CHART_LEGEND_SETTING_ITEMS.map(({ key, label, desc }) => (
@@ -1443,6 +1524,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
   onChartLiveReceiveHighlight,
   chartLegendOptions,
   onChartLegendOptionsChange,
+  chartPaneSeparator,
+  onChartPaneSeparatorChange,
   tradeAlertSoundEnabled = true,
   onTradeAlertSoundEnabled,
   tradeAlertSound = 'bell',
@@ -1533,6 +1616,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
           onChartLiveReceiveHighlight={onChartLiveReceiveHighlight}
           chartLegendOptions={chartLegendOptions}
           onChartLegendOptionsChange={onChartLegendOptionsChange}
+          chartPaneSeparator={chartPaneSeparator}
+          onChartPaneSeparatorChange={onChartPaneSeparatorChange}
         />
       );
       case 'indicators':