모의투자, 백테스팅 레이아웃 수정

2026-05-24 20:13:21 +09:00
parent 958b813f3b
commit af230a4233
23 changed files with 2394 additions and 782 deletions
@@ -0,0 +1,133 @@
+import React from 'react';
+import { useAppSettings } from '../../hooks/useAppSettings';
+import { resetPaperAccount } from '../../utils/backendApi';
+import PaperSplitPanel from './PaperSplitPanel';
+
+interface Props {
+  onSettingsSaved?: () => void;
+  onAccountReset?: () => void;
+}
+
+const PaperLeftSettingsTab: React.FC<Props> = ({ onSettingsSaved, onAccountReset }) => {
+  const { defaults, save, isLoaded } = useAppSettings();
+
+  if (!isLoaded) {
+    return <p className="ptd-muted">설정 로딩…</p>;
+  }
+
+  const patch = (p: Parameters<typeof save>[0]) => {
+    save(p);
+    onSettingsSaved?.();
+  };
+
+  const handleReset = async () => {
+    if (!window.confirm('모의투자 계좌를 초기화합니다. 계속할까요?')) return;
+    const res = await resetPaperAccount();
+    if (res) onAccountReset?.();
+  };
+
+  const top = (
+    <>
+      <div className="ptd-left-section">
+        <label className="ptd-left-row">
+          <span>모의투자 활성화</span>
+          <input
+            type="checkbox"
+            checked={defaults.paperTradingEnabled}
+            onChange={e => patch({ paperTradingEnabled: e.target.checked })}
+          />
+        </label>
+      </div>
+      <div className="ptd-left-section">
+        <label className="ptd-left-row">
+          <span>자동매매</span>
+          <input
+            type="checkbox"
+            checked={defaults.paperAutoTradeEnabled}
+            onChange={e => patch({ paperAutoTradeEnabled: e.target.checked })}
+          />
+        </label>
+        <label className="ptd-left-field">
+          <span>매수 예산 (%)</span>
+          <input
+            type="number"
+            className="ptd-left-input"
+            min={1}
+            max={100}
+            value={defaults.paperAutoTradeBudgetPct}
+            disabled={!defaults.paperAutoTradeEnabled}
+            onChange={e => patch({ paperAutoTradeBudgetPct: Number(e.target.value) })}
+          />
+        </label>
+      </div>
+    </>
+  );
+
+  const bottom = (
+    <>
+      <div className="ptd-left-section">
+        <label className="ptd-left-field">
+          <span>초기 자본 (KRW)</span>
+          <input
+            type="number"
+            className="ptd-left-input"
+            min={100000}
+            step={100000}
+            value={defaults.paperInitialCapital}
+            onChange={e => patch({ paperInitialCapital: Number(e.target.value) })}
+          />
+        </label>
+        <label className="ptd-left-field">
+          <span>수수료율 (%)</span>
+          <input
+            type="number"
+            className="ptd-left-input"
+            min={0}
+            max={1}
+            step={0.01}
+            value={defaults.paperFeeRatePct}
+            onChange={e => patch({ paperFeeRatePct: Number(e.target.value) })}
+          />
+        </label>
+        <label className="ptd-left-field">
+          <span>슬리피지 (%)</span>
+          <input
+            type="number"
+            className="ptd-left-input"
+            min={0}
+            max={5}
+            step={0.01}
+            value={defaults.paperSlippagePct}
+            onChange={e => patch({ paperSlippagePct: Number(e.target.value) })}
+          />
+        </label>
+        <label className="ptd-left-field">
+          <span>최소 주문 (KRW)</span>
+          <input
+            type="number"
+            className="ptd-left-input"
+            min={1000}
+            step={1000}
+            value={defaults.paperMinOrderKrw}
+            onChange={e => patch({ paperMinOrderKrw: Number(e.target.value) })}
+          />
+        </label>
+      </div>
+      <button type="button" className="bps-btn bps-btn--danger ptd-left-reset" onClick={() => void handleReset()}>
+        계좌 초기화
+      </button>
+    </>
+  );
+
+  return (
+    <PaperSplitPanel
+      className="ptd-split-panel--left"
+      topTitle="운영 · 자동매매"
+      bottomTitle="계좌 · 비용"
+      top={top}
+      bottom={bottom}
+    />
+  );
+};
+
+export default PaperLeftSettingsTab;