모의투자 화면수정
This commit is contained in:
Macbook
@@ -9,6 +9,13 @@ interface Props {
|
||||
onOpenSettings?: () => void;
|
||||
}
|
||||
|
||||
const SettingsFieldRow: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => (
|
||||
<div className="vtd-target-strategy-field">
|
||||
<span className="vtd-target-strategy-label">{label}</span>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
const PaperLeftSettingsTab: React.FC<Props> = ({ onSettingsSaved, onAccountReset, onOpenSettings }) => {
|
||||
const { defaults, save, isLoaded } = useAppSettings();
|
||||
|
||||
@@ -28,101 +35,100 @@ const PaperLeftSettingsTab: React.FC<Props> = ({ onSettingsSaved, onAccountReset
|
||||
};
|
||||
|
||||
const top = (
|
||||
<>
|
||||
<div className="ptd-settings-panel">
|
||||
{onOpenSettings && (
|
||||
<button type="button" className="bps-btn bps-btn--ghost ptd-left-settings-link" onClick={onOpenSettings}>
|
||||
<button type="button" className="bps-btn bps-btn--ghost ptd-settings-link" onClick={onOpenSettings}>
|
||||
설정 → 모의투자에서 전체 관리
|
||||
</button>
|
||||
)}
|
||||
<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 className="vtd-target-item ptd-item-card ptd-settings-card">
|
||||
<div className="ptd-item-card-metrics">
|
||||
<SettingsFieldRow label="모의투자 활성화">
|
||||
<label className="vtd-trade-meta-value ptd-settings-value-box ptd-settings-value-box--check">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={defaults.paperTradingEnabled}
|
||||
onChange={e => patch({ paperTradingEnabled: e.target.checked })}
|
||||
/>
|
||||
</label>
|
||||
</SettingsFieldRow>
|
||||
<SettingsFieldRow label="자동매매">
|
||||
<label className="vtd-trade-meta-value ptd-settings-value-box ptd-settings-value-box--check">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={defaults.paperAutoTradeEnabled}
|
||||
onChange={e => patch({ paperAutoTradeEnabled: e.target.checked })}
|
||||
/>
|
||||
</label>
|
||||
</SettingsFieldRow>
|
||||
<SettingsFieldRow label="매수 예산 (%)">
|
||||
<input
|
||||
type="number"
|
||||
className="vtd-trade-meta-value ptd-settings-input"
|
||||
min={1}
|
||||
max={100}
|
||||
value={defaults.paperAutoTradeBudgetPct}
|
||||
disabled={!defaults.paperAutoTradeEnabled}
|
||||
onChange={e => patch({ paperAutoTradeBudgetPct: Number(e.target.value) })}
|
||||
/>
|
||||
</SettingsFieldRow>
|
||||
</div>
|
||||
</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>
|
||||
</>
|
||||
</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 className="ptd-settings-panel ptd-settings-panel--account">
|
||||
<div className="vtd-target-item ptd-item-card ptd-settings-card">
|
||||
<div className="ptd-item-card-metrics">
|
||||
<SettingsFieldRow label="초기 자본 (KRW)">
|
||||
<input
|
||||
type="number"
|
||||
className="vtd-trade-meta-value ptd-settings-input"
|
||||
min={100000}
|
||||
step={100000}
|
||||
value={defaults.paperInitialCapital}
|
||||
onChange={e => patch({ paperInitialCapital: Number(e.target.value) })}
|
||||
/>
|
||||
</SettingsFieldRow>
|
||||
<SettingsFieldRow label="수수료율 (%)">
|
||||
<input
|
||||
type="number"
|
||||
className="vtd-trade-meta-value ptd-settings-input"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={defaults.paperFeeRatePct}
|
||||
onChange={e => patch({ paperFeeRatePct: Number(e.target.value) })}
|
||||
/>
|
||||
</SettingsFieldRow>
|
||||
<SettingsFieldRow label="슬리피지 (%)">
|
||||
<input
|
||||
type="number"
|
||||
className="vtd-trade-meta-value ptd-settings-input"
|
||||
min={0}
|
||||
max={5}
|
||||
step={0.01}
|
||||
value={defaults.paperSlippagePct}
|
||||
onChange={e => patch({ paperSlippagePct: Number(e.target.value) })}
|
||||
/>
|
||||
</SettingsFieldRow>
|
||||
<SettingsFieldRow label="최소 주문 (KRW)">
|
||||
<input
|
||||
type="number"
|
||||
className="vtd-trade-meta-value ptd-settings-input"
|
||||
min={1000}
|
||||
step={1000}
|
||||
value={defaults.paperMinOrderKrw}
|
||||
onChange={e => patch({ paperMinOrderKrw: Number(e.target.value) })}
|
||||
/>
|
||||
</SettingsFieldRow>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" className="bps-btn bps-btn--danger ptd-left-reset" onClick={() => void handleReset()}>
|
||||
<button type="button" className="bps-btn bps-btn--danger ptd-settings-reset" onClick={() => void handleReset()}>
|
||||
계좌 초기화
|
||||
</button>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user