가상투자 화면 추가

2026-05-25 13:14:36 +09:00
parent 1fe3e404fa
commit 339e2355eb
23 changed files with 2230 additions and 457 deletions
@@ -0,0 +1,103 @@
+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;