aidev
336 lines
15 KiB
TypeScript
336 lines
15 KiB
TypeScript
/**
|
||
* 설정 화면 — 백테스팅 설정 패널 (2열 카드 레이아웃)
|
||
*/
|
||
import React, { useState, useEffect, useCallback } from 'react';
|
||
import {
|
||
type BacktestSettingsDto,
|
||
DEFAULT_BACKTEST_SETTINGS,
|
||
loadBacktestSettings,
|
||
saveBacktestSettings,
|
||
} from '../utils/backendApi';
|
||
|
||
// ── 백테스팅 전용 UI 컴포넌트 ───────────────────────────────────────────────
|
||
|
||
const BtSection: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (
|
||
<section className="stg-bt-section">
|
||
<h3 className="stg-bt-section-title">{title}</h3>
|
||
<div className="stg-bt-section-body">{children}</div>
|
||
</section>
|
||
);
|
||
|
||
const BtGrid: React.FC<{ children: React.ReactNode }> = ({ children }) => (
|
||
<div className="stg-bt-grid">{children}</div>
|
||
);
|
||
|
||
const BtField: React.FC<{
|
||
label: string;
|
||
desc?: string;
|
||
full?: boolean;
|
||
children: React.ReactNode;
|
||
}> = ({ label, desc, full, children }) => (
|
||
<div className={`stg-bt-field${full ? ' stg-bt-field--full' : ''}`}>
|
||
<div className="stg-bt-field-head">
|
||
<span className="stg-bt-field-label">{label}</span>
|
||
{desc && <span className="stg-bt-field-desc">{desc}</span>}
|
||
</div>
|
||
<div className="stg-bt-field-ctrl">{children}</div>
|
||
</div>
|
||
);
|
||
|
||
export interface BacktestSettingsPanelProps {
|
||
btAutoPopup?: boolean;
|
||
onBtAutoPopup?: (v: boolean) => void;
|
||
btShowPrice?: boolean;
|
||
onBtShowPrice?: (v: boolean) => void;
|
||
}
|
||
|
||
export const BacktestSettingsPanel: React.FC<BacktestSettingsPanelProps> = ({
|
||
btAutoPopup = true,
|
||
onBtAutoPopup,
|
||
btShowPrice = true,
|
||
onBtShowPrice,
|
||
}) => {
|
||
const [cfg, setCfg] = useState<BacktestSettingsDto>(DEFAULT_BACKTEST_SETTINGS);
|
||
const [saving, setSaving] = useState(false);
|
||
const [saved, setSaved] = useState(false);
|
||
|
||
useEffect(() => {
|
||
loadBacktestSettings().then(s => { if (s) setCfg(s); });
|
||
}, []);
|
||
|
||
const update = useCallback(async (patch: Partial<BacktestSettingsDto>) => {
|
||
const next = { ...cfg, ...patch };
|
||
setCfg(next);
|
||
setSaving(true);
|
||
setSaved(false);
|
||
try {
|
||
await saveBacktestSettings(next);
|
||
setSaved(true);
|
||
setTimeout(() => setSaved(false), 1500);
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}, [cfg]);
|
||
|
||
const field = <K extends keyof BacktestSettingsDto>(key: K, value: BacktestSettingsDto[K]) =>
|
||
update({ [key]: value } as Partial<BacktestSettingsDto>);
|
||
|
||
return (
|
||
<div className="stg-bt-panel">
|
||
{(saving || saved) && (
|
||
<div className={`stg-bt-status${saved ? ' stg-bt-status--ok' : ''}`}>
|
||
{saving ? '저장 중…' : '✓ 저장됨'}
|
||
</div>
|
||
)}
|
||
|
||
<BtSection title="표시 설정">
|
||
<BtGrid>
|
||
<BtField
|
||
label="결과 팝업 자동 표시"
|
||
desc="백테스팅 실행 완료 후 결과 팝업을 자동으로 띄웁니다. OFF이면 툴바의 '결과보기' 버튼을 직접 클릭해야 합니다."
|
||
>
|
||
<label className="stg-toggle">
|
||
<input type="checkbox" checked={btAutoPopup} onChange={e => onBtAutoPopup?.(e.target.checked)} />
|
||
<span className="stg-toggle-slider" />
|
||
</label>
|
||
</BtField>
|
||
<BtField
|
||
label="매수/매도 금액 표시"
|
||
desc="차트 마커에 체결 금액을 함께 표시합니다. ON: '매수 : 1,234,000' / OFF: '매수'만 표시."
|
||
>
|
||
<label className="stg-toggle">
|
||
<input type="checkbox" checked={btShowPrice} onChange={e => onBtShowPrice?.(e.target.checked)} />
|
||
<span className="stg-toggle-slider" />
|
||
</label>
|
||
</BtField>
|
||
</BtGrid>
|
||
</BtSection>
|
||
|
||
<BtSection title="자본 · 거래 규모">
|
||
<BtGrid>
|
||
<BtField
|
||
label="초기 자본 (원)"
|
||
desc="백테스팅 시뮬레이션의 시작 자본금입니다. 수익/손실과 최종 자산을 이 금액 기준으로 계산합니다."
|
||
>
|
||
<input
|
||
className="stg-input stg-input--wide"
|
||
type="number" min={100000} step={1000000}
|
||
value={cfg.initialCapital}
|
||
onChange={e => field('initialCapital', Number(e.target.value))}
|
||
/>
|
||
</BtField>
|
||
<BtField label="거래 규모 유형" desc="자본 비율(복리) 또는 매 거래 고정 금액 중 선택합니다.">
|
||
<select className="stg-select stg-select--wide"
|
||
value={cfg.tradeSizeType}
|
||
onChange={e => field('tradeSizeType', e.target.value as 'CAPITAL_PCT' | 'FIXED_AMOUNT')}>
|
||
<option value="CAPITAL_PCT">자본 비율 (%)</option>
|
||
<option value="FIXED_AMOUNT">고정 금액 (원)</option>
|
||
</select>
|
||
</BtField>
|
||
<BtField
|
||
label={cfg.tradeSizeType === 'CAPITAL_PCT' ? '사용 자본 비율 (%)' : '거래당 금액 (원)'}
|
||
desc={cfg.tradeSizeType === 'CAPITAL_PCT'
|
||
? '매 거래에 사용할 자본 비율. 100 = 전체 자본.'
|
||
: '매 거래마다 사용할 원화 금액.'}
|
||
>
|
||
<input
|
||
className="stg-input stg-input--wide"
|
||
type="number" min={1} step={cfg.tradeSizeType === 'CAPITAL_PCT' ? 1 : 100000}
|
||
value={cfg.tradeSizeValue}
|
||
onChange={e => field('tradeSizeValue', Number(e.target.value))}
|
||
/>
|
||
</BtField>
|
||
</BtGrid>
|
||
</BtSection>
|
||
|
||
<BtSection title="비용 모델">
|
||
<BtGrid>
|
||
<BtField label="수수료 유형" desc="LINEAR: 거래금액 × 수수료율. ZERO: 수수료 없음.">
|
||
<select className="stg-select stg-select--wide"
|
||
value={cfg.commissionType}
|
||
onChange={e => field('commissionType', e.target.value as 'LINEAR' | 'ZERO')}>
|
||
<option value="LINEAR">LINEAR (비율 수수료)</option>
|
||
<option value="ZERO">ZERO (수수료 없음)</option>
|
||
</select>
|
||
</BtField>
|
||
{cfg.commissionType === 'LINEAR' ? (
|
||
<BtField label="수수료율 (%)" desc="매수·매도 각 1회당 수수료율. 업비트 현물 약 0.05%.">
|
||
<input
|
||
className="stg-input stg-input--wide"
|
||
type="number" min={0} max={5} step={0.01}
|
||
value={(cfg.commissionRate ?? 0) * 100}
|
||
onChange={e => field('commissionRate', Number(e.target.value) / 100)}
|
||
/>
|
||
</BtField>
|
||
) : (
|
||
<div className="stg-bt-field stg-bt-field--placeholder" aria-hidden />
|
||
)}
|
||
<BtField
|
||
label="슬리피지 (%)"
|
||
desc="의도 가격과 실제 체결 가격 차이. 매수는 높게, 매도는 낮게 체결되는 효과."
|
||
>
|
||
<input
|
||
className="stg-input stg-input--wide"
|
||
type="number" min={0} max={5} step={0.01}
|
||
value={(cfg.slippageRate ?? 0) * 100}
|
||
onChange={e => field('slippageRate', Number(e.target.value) / 100)}
|
||
/>
|
||
</BtField>
|
||
</BtGrid>
|
||
</BtSection>
|
||
|
||
<BtSection title="거래 가격 기준">
|
||
<BtGrid>
|
||
<BtField label="진입 가격 기준" desc="매수 신호 시 진입 가격. 종가 즉시 진입 또는 다음 봉 시가 진입.">
|
||
<select className="stg-select stg-select--wide"
|
||
value={cfg.entryPriceType}
|
||
onChange={e => field('entryPriceType', e.target.value as 'CLOSE' | 'NEXT_OPEN')}>
|
||
<option value="CLOSE">종가 (Close)</option>
|
||
<option value="NEXT_OPEN">다음봉 시가 (Next Open)</option>
|
||
</select>
|
||
</BtField>
|
||
<BtField label="청산 가격 기준" desc="매도 신호 시 청산 가격. 종가 즉시 청산 또는 다음 봉 시가 청산.">
|
||
<select className="stg-select stg-select--wide"
|
||
value={cfg.exitPriceType}
|
||
onChange={e => field('exitPriceType', e.target.value as 'CLOSE' | 'NEXT_OPEN')}>
|
||
<option value="CLOSE">종가 (Close)</option>
|
||
<option value="NEXT_OPEN">다음봉 시가 (Next Open)</option>
|
||
</select>
|
||
</BtField>
|
||
<BtField label="포지션 방향" desc="LONG(매수만), SHORT(공매도), BOTH(양방향) 중 선택.">
|
||
<select className="stg-select stg-select--wide"
|
||
value={cfg.positionDirection}
|
||
onChange={e => field('positionDirection', e.target.value as 'LONG' | 'SHORT' | 'BOTH')}>
|
||
<option value="LONG">LONG (매수만)</option>
|
||
<option value="SHORT">SHORT (공매도)</option>
|
||
<option value="BOTH">BOTH (양방향)</option>
|
||
</select>
|
||
</BtField>
|
||
</BtGrid>
|
||
</BtSection>
|
||
|
||
<BtSection title="리스크 관리">
|
||
<BtGrid>
|
||
<BtField label="손절 활성화" desc="진입가 대비 N% 하락 시 자동 청산 (StopLossRule).">
|
||
<label className="stg-toggle">
|
||
<input type="checkbox" checked={!!cfg.stopLossEnabled}
|
||
onChange={e => field('stopLossEnabled', e.target.checked)} />
|
||
<span className="stg-toggle-slider" />
|
||
</label>
|
||
</BtField>
|
||
{cfg.stopLossEnabled ? (
|
||
<BtField label="손절 비율 (%)" desc="진입가 대비 하락 허용 비율.">
|
||
<input className="stg-input stg-input--wide" type="number" min={0.1} max={50} step={0.1}
|
||
value={cfg.stopLossPct ?? 2}
|
||
onChange={e => field('stopLossPct', Number(e.target.value))} />
|
||
</BtField>
|
||
) : <div className="stg-bt-field stg-bt-field--placeholder" aria-hidden />}
|
||
|
||
<BtField label="익절 활성화" desc="진입가 대비 N% 상승 시 자동 청산 (StopGainRule).">
|
||
<label className="stg-toggle">
|
||
<input type="checkbox" checked={!!cfg.takeProfitEnabled}
|
||
onChange={e => field('takeProfitEnabled', e.target.checked)} />
|
||
<span className="stg-toggle-slider" />
|
||
</label>
|
||
</BtField>
|
||
{cfg.takeProfitEnabled ? (
|
||
<BtField label="익절 비율 (%)" desc="진입가 대비 상승 목표 비율.">
|
||
<input className="stg-input stg-input--wide" type="number" min={0.1} max={200} step={0.1}
|
||
value={cfg.takeProfitPct ?? 5}
|
||
onChange={e => field('takeProfitPct', Number(e.target.value))} />
|
||
</BtField>
|
||
) : <div className="stg-bt-field stg-bt-field--placeholder" aria-hidden />}
|
||
|
||
<BtField label="트레일링 스탑 활성화" desc="최고가 대비 N% 하락 시 자동 청산.">
|
||
<label className="stg-toggle">
|
||
<input type="checkbox" checked={!!cfg.trailingStopEnabled}
|
||
onChange={e => field('trailingStopEnabled', e.target.checked)} />
|
||
<span className="stg-toggle-slider" />
|
||
</label>
|
||
</BtField>
|
||
{cfg.trailingStopEnabled ? (
|
||
<BtField label="트레일링 비율 (%)" desc="최고가 대비 하락 허용 비율.">
|
||
<input className="stg-input stg-input--wide" type="number" min={0.1} max={50} step={0.1}
|
||
value={cfg.trailingStopPct ?? 2}
|
||
onChange={e => field('trailingStopPct', Number(e.target.value))} />
|
||
</BtField>
|
||
) : <div className="stg-bt-field stg-bt-field--placeholder" aria-hidden />}
|
||
</BtGrid>
|
||
</BtSection>
|
||
|
||
<BtSection title="재진입 · 분할 청산">
|
||
<BtGrid>
|
||
<BtField label="재진입 대기 봉 수" desc="매도 후 다음 매수까지 최소 대기 캔들 수. 0 = 즉시 재진입.">
|
||
<input className="stg-input stg-input--wide" type="number" min={0} max={100} step={1}
|
||
value={cfg.reentryWaitBars ?? 0}
|
||
onChange={e => field('reentryWaitBars', Number(e.target.value))} />
|
||
</BtField>
|
||
<BtField label="최대 동시 포지션" desc="동시 보유 가능한 최대 포지션 수 (현재 단일 포지션 지원).">
|
||
<input className="stg-input stg-input--wide" type="number" min={1} max={10} step={1}
|
||
value={cfg.maxOpenTrades ?? 1}
|
||
onChange={e => field('maxOpenTrades', Number(e.target.value))} />
|
||
</BtField>
|
||
<BtField label="분할 청산 활성화" desc="첫 매도 신호 시 포지션의 일부만 청산합니다.">
|
||
<label className="stg-toggle">
|
||
<input type="checkbox" checked={!!cfg.partialExitEnabled}
|
||
onChange={e => field('partialExitEnabled', e.target.checked)} />
|
||
<span className="stg-toggle-slider" />
|
||
</label>
|
||
</BtField>
|
||
{cfg.partialExitEnabled ? (
|
||
<BtField label="1차 청산 비율 (%)" desc="첫 매도 시 청산할 포지션 비율.">
|
||
<input className="stg-input stg-input--wide" type="number" min={10} max={90} step={5}
|
||
value={cfg.partialExitPct ?? 50}
|
||
onChange={e => field('partialExitPct', Number(e.target.value))} />
|
||
</BtField>
|
||
) : <div className="stg-bt-field stg-bt-field--placeholder" aria-hidden />}
|
||
</BtGrid>
|
||
</BtSection>
|
||
|
||
<BtSection title="포지션 종속성 모드">
|
||
<BtField
|
||
full
|
||
label="매매 시그널 발생 조건"
|
||
desc="매도 시그널이 이전 매수(포지션) 없이도 발생할지 선택합니다."
|
||
>
|
||
<div className="stg-bt-radio-group">
|
||
<label className="stg-bt-radio">
|
||
<input
|
||
type="radio"
|
||
name="bt-pos-mode"
|
||
value="LONG_ONLY"
|
||
checked={(cfg.positionMode ?? 'LONG_ONLY') === 'LONG_ONLY'}
|
||
onChange={() => field('positionMode', 'LONG_ONLY')}
|
||
/>
|
||
<span className="stg-bt-radio-text">
|
||
<strong>보유 자산 기준 (Long-Only)</strong>
|
||
<span>매수 이력이 있을 때만 매도 허용 · Ta4j 표준 엄격 모드</span>
|
||
</span>
|
||
</label>
|
||
<label className="stg-bt-radio">
|
||
<input
|
||
type="radio"
|
||
name="bt-pos-mode"
|
||
value="SIGNAL_ONLY"
|
||
checked={cfg.positionMode === 'SIGNAL_ONLY'}
|
||
onChange={() => field('positionMode', 'SIGNAL_ONLY')}
|
||
/>
|
||
<span className="stg-bt-radio-text">
|
||
<strong>순수 지표 기준 (Signal-Only)</strong>
|
||
<span>포지션 무관, 지표 규칙 충족 시 즉시 매도 · 락 우회 모드</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</BtField>
|
||
{cfg.positionMode === 'SIGNAL_ONLY' && (
|
||
<div className="stg-bt-hint stg-bt-hint--warn">
|
||
Signal-Only 모드: 매도 시그널이 이전 매수 없이도 발생합니다
|
||
</div>
|
||
)}
|
||
</BtSection>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default BacktestSettingsPanel;
|