Macbook
104 lines
3.3 KiB
TypeScript
104 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import type { StrategyDto } from '../../utils/backendApi';
|
|
import type { VirtualSessionConfig } from '../../utils/virtualTradingStorage';
|
|
|
|
interface Props {
|
|
session: Pick<VirtualSessionConfig, 'globalStrategyId' | 'executionType' | 'positionMode' | 'running'>;
|
|
strategies: StrategyDto[];
|
|
onStrategyChange: (strategyId: number | null) => void;
|
|
onExecutionTypeChange: (type: VirtualSessionConfig['executionType']) => void;
|
|
onPositionModeChange: (mode: VirtualSessionConfig['positionMode']) => void;
|
|
onStart: () => void;
|
|
onStop: () => void;
|
|
}
|
|
|
|
const VirtualSessionToolbar: React.FC<Props> = ({
|
|
session,
|
|
strategies,
|
|
onStrategyChange,
|
|
onExecutionTypeChange,
|
|
onPositionModeChange,
|
|
onStart,
|
|
onStop,
|
|
}) => (
|
|
<div className="vtd-session-toolbar">
|
|
<div className="vtd-session-field">
|
|
<span className="vtd-session-label">투자전략</span>
|
|
<select
|
|
className="vtd-session-select"
|
|
value={session.globalStrategyId ?? ''}
|
|
onChange={e => {
|
|
const v = e.target.value;
|
|
onStrategyChange(v ? Number(v) : null);
|
|
}}
|
|
>
|
|
<option value="">— 선택 —</option>
|
|
{strategies.map(s => (
|
|
<option key={s.id} value={s.id}>{s.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="vtd-session-field">
|
|
<span className="vtd-session-label">실행방식</span>
|
|
<div className="vtd-view-toggle" role="group" aria-label="실행방식">
|
|
<button
|
|
type="button"
|
|
className={`vtd-view-toggle-btn${session.executionType === 'CANDLE_CLOSE' ? ' vtd-view-toggle-btn--on' : ''}`}
|
|
onClick={() => onExecutionTypeChange('CANDLE_CLOSE')}
|
|
>
|
|
봉 마감 직후
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`vtd-view-toggle-btn${session.executionType === 'REALTIME_TICK' ? ' vtd-view-toggle-btn--on' : ''}`}
|
|
onClick={() => onExecutionTypeChange('REALTIME_TICK')}
|
|
>
|
|
실시간 틱
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vtd-session-field">
|
|
<span className="vtd-session-label">시그널 모드</span>
|
|
<div className="vtd-view-toggle" role="group" aria-label="시그널 모드">
|
|
<button
|
|
type="button"
|
|
className={`vtd-view-toggle-btn${session.positionMode === 'LONG_ONLY' ? ' vtd-view-toggle-btn--on' : ''}`}
|
|
onClick={() => onPositionModeChange('LONG_ONLY')}
|
|
>
|
|
보유 자산 기준
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`vtd-view-toggle-btn${session.positionMode === 'SIGNAL_ONLY' ? ' vtd-view-toggle-btn--on' : ''}`}
|
|
onClick={() => onPositionModeChange('SIGNAL_ONLY')}
|
|
>
|
|
순수 지표 기준
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="vtd-session-actions">
|
|
<button
|
|
type="button"
|
|
className="bps-btn vtd-session-btn vtd-session-btn--start"
|
|
disabled={session.running}
|
|
onClick={onStart}
|
|
>
|
|
시작
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="bps-btn bps-btn--danger vtd-session-btn"
|
|
disabled={!session.running}
|
|
onClick={onStop}
|
|
>
|
|
종료
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default VirtualSessionToolbar;
|