차트 설정 수정

frontend/src/components/SettingsPage.tsx

@@ -39,6 +39,8 @@ import {
   type ChartLegendVisibility,
 } from '../types/chartLegend';
 import type { ChartPaneSeparatorOptions, PaneSeparatorStyle } from '../types/chartPaneSeparator';
+import { cloneChartPaneSeparatorOptions } from '../types/chartPaneSeparator';
+import ColorInput from './ColorInput';
 import {
   LINE_STYLE_LABELS,
   LINE_STYLE_OPTIONS,
@@ -724,15 +726,11 @@ function PaneSeparatorStyleFields({
       {style.visible && (
         <>
           <SettingRow label="선 색상">
-            <div className="stg-color-row">
-              <input
-                type="color"
-                className="stg-color"
-                value={style.color.startsWith('#') ? style.color.slice(0, 7) : '#2a2e3a'}
-                onChange={e => onChange({ ...style, color: e.target.value })}
-              />
-              <span className="stg-color-label">{style.color}</span>
-            </div>
+            <ColorInput
+              value={style.color}
+              onChange={color => onChange({ ...style, color })}
+              showCompactNative={false}
+            />
           </SettingRow>
           <SettingRow label="선 굵기">
             <select
@@ -789,6 +787,8 @@ interface ChartPanelProps {
   onChartPaneSeparatorChange?: (opts: ChartPaneSeparatorOptions) => void;
   chartTimeFormat?: string;
   onChartTimeFormatChange?: (format: string) => void;
+  btShowPrice?: boolean;
+  onBtShowPrice?: (v: boolean) => void;
 }
 
 const ChartPanel: React.FC<ChartPanelProps> = ({
@@ -811,6 +811,8 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
   onChartPaneSeparatorChange,
   chartTimeFormat = 'MM-dd HH:mm',
   onChartTimeFormatChange,
+  btShowPrice = true,
+  onBtShowPrice,
 }) => {
   const [upColor,   setUp]   = useState('#26a69a');
   const [downColor, setDown] = useState('#ef5350');
@@ -953,6 +955,22 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
         </SettingRow>
       </SettingSection>
 
+      <SettingSection title="매매 시그널">
+        <SettingRow
+          label="매수·매도 금액 표시"
+          desc="백테스트·실시간 전략 시그널 마커에 체결 금액을 함께 표시합니다. OFF이면 '매수'·'매도'만 표시합니다."
+        >
+          <label className="stg-toggle">
+            <input
+              type="checkbox"
+              checked={btShowPrice}
+              onChange={e => onBtShowPrice?.(e.target.checked)}
+            />
+            <span className="stg-toggle-slider" />
+          </label>
+        </SettingRow>
+      </SettingSection>
+
       {chartPaneSeparator && onChartPaneSeparatorChange && (
         <SettingSection title="차트 영역 구분선">
           <div className="stg-subsection-label">
@@ -961,10 +979,12 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
           </div>
           <PaneSeparatorStyleFields
             style={chartPaneSeparator.mainToIndicator}
-            onChange={mainToIndicator => onChartPaneSeparatorChange({
-              ...chartPaneSeparator,
-              mainToIndicator,
-            })}
+            onChange={mainToIndicator => onChartPaneSeparatorChange(
+              cloneChartPaneSeparatorOptions({
+                ...chartPaneSeparator,
+                mainToIndicator,
+              }),
+            )}
           />
           <div className="stg-subsection-label stg-subsection-label--spaced">
             보조지표 간
@@ -972,10 +992,12 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
           </div>
           <PaneSeparatorStyleFields
             style={chartPaneSeparator.indicatorToIndicator}
-            onChange={indicatorToIndicator => onChartPaneSeparatorChange({
-              ...chartPaneSeparator,
-              indicatorToIndicator,
-            })}
+            onChange={indicatorToIndicator => onChartPaneSeparatorChange(
+              cloneChartPaneSeparatorOptions({
+                ...chartPaneSeparator,
+                indicatorToIndicator,
+              }),
+            )}
           />
         </SettingSection>
       )}
@@ -1810,6 +1832,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
           onChartPaneSeparatorChange={onChartPaneSeparatorChange}
           chartTimeFormat={chartTimeFormat}
           onChartTimeFormatChange={onChartTimeFormatChange}
+          btShowPrice={btShowPrice}
+          onBtShowPrice={onBtShowPrice}
         />
       );
       case 'indicators':