aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

모의투자 화면수정

Browse Source
This commit is contained in:
Macbook
2026-05-31 04:34:32 +09:00
parent 16d0e2c226
commit 05d2de5234
12 changed files with 717 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/paper/PaperAllocationTable.tsx
+82 -38
View File
@@ -26,57 +26,101 @@ const PaperAllocationTable: React.FC<Props> = ({
}, [onChanged]);
if (!allocations.length) {
return <p className="ptd-muted">등록된 종목 한도가 없습니다. 가상투자 대상 추가 시 동기화됩니다.</p>;
return (
<div className="ptd-item-card-section ptd-alloc-card-section">
<div className="vtd-target-list-head">
<span>종목별 한도</span>
<span className="vtd-target-count">0종목</span>
</div>
<p className="ptd-muted ptd-item-card-empty">등록된 종목 한도가 없습니다. 가상투자 대상 추가 시 동기화됩니다.</p>
</div>
);
}
return (
<div className="ptd-alloc-table-wrap">
<table className="ptd-table ptd-alloc-table">
<thead>
<tr>
<th>종목</th>
<th>비중</th>
<th>한도</th>
<th>투입</th>
<th>평가</th>
<th>수익률</th>
<th>활성</th>
</tr>
</thead>
<tbody>
<div className="ptd-item-card-section ptd-alloc-card-section">
<div className="vtd-target-list-head">
<span>종목별 한도</span>
<span className="vtd-target-count">{allocations.length}종목</span>
</div>
<div className="ptd-item-card-scroll">
<div className="vtd-target-list ptd-item-card-list">
{allocations.map(row => {
const ret = row.symbolReturnPct ?? 0;
const selected = row.symbol === selectedMarket;
const name = row.koreanName || coinCode(row.symbol);
const code = coinCode(row.symbol);
const up = ret >= 0;
return (
<tr
<div
key={row.symbol}
className={selected ? 'ptd-alloc-row--selected' : ''}
onClick={() => onSelectMarket?.(row.symbol)}
className={[
'vtd-target-item',
'ptd-item-card',
'ptd-alloc-card',
selected ? 'vtd-target-item--active' : '',
row.isActive === false ? 'ptd-alloc-card--inactive' : '',
].filter(Boolean).join(' ')}
role="button"
tabIndex={0}
onKeyDown={e => { if (e.key === 'Enter') onSelectMarket?.(row.symbol); }}
onClick={() => onSelectMarket?.(row.symbol)}
onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onSelectMarket?.(row.symbol);
}
}}
>
<td>{row.koreanName || coinCode(row.symbol)}</td>
<td>{(row.weightPct ?? 0).toFixed(1)}%</td>
<td>{fmtKrw(row.maxInvestKrw)}</td>
<td>{fmtKrw(row.investedKrw ?? 0)}</td>
<td>{fmtKrw(row.evalAmount ?? 0)}</td>
<td className={ret >= 0 ? 'up' : 'down'}>{ret >= 0 ? '+' : ''}{ret.toFixed(2)}%</td>
<td onClick={e => e.stopPropagation()}>
<button
type="button"
className={`ptd-alloc-toggle${row.isActive !== false ? ' ptd-alloc-toggle--on' : ''}`}
onClick={() => void toggleActive(row)}
title={row.isActive !== false ? '신규 매수 허용' : '신규 매수 차단'}
>
{row.isActive !== false ? 'ON' : 'OFF'}
</button>
</td>
</tr>
<div className="vtd-target-item-main">
<div className="vtd-target-names">
<span className="vtd-target-ko">{name}</span>
<span className="vtd-target-en">{code}/KRW</span>
</div>
<div className="vtd-target-item-actions">
<button
type="button"
className={`ptd-alloc-toggle${row.isActive !== false ? ' ptd-alloc-toggle--on' : ''}`}
onClick={e => {
e.stopPropagation();
void toggleActive(row);
}}
title={row.isActive !== false ? '신규 매수 허용' : '신규 매수 차단'}
>
{row.isActive !== false ? 'ON' : 'OFF'}
</button>
</div>
</div>
<div className="ptd-item-card-metrics">
<div className="vtd-target-strategy-field">
<span className="vtd-target-strategy-label">비중</span>
<span className="vtd-trade-meta-value">{(row.weightPct ?? 0).toFixed(1)}%</span>
</div>
<div className="vtd-target-strategy-field">
<span className="vtd-target-strategy-label">한도</span>
<span className="vtd-trade-meta-value">{fmtKrw(row.maxInvestKrw)}</span>
</div>
<div className="vtd-target-strategy-field">
<span className="vtd-target-strategy-label">투입</span>
<span className="vtd-trade-meta-value">{fmtKrw(row.investedKrw ?? 0)}</span>
</div>
<div className="vtd-target-strategy-field">
<span className="vtd-target-strategy-label">평가</span>
<span className="vtd-trade-meta-value">{fmtKrw(row.evalAmount ?? 0)}</span>
</div>
<div className="vtd-target-strategy-field">
<span className="vtd-target-strategy-label">수익률</span>
<span className={`vtd-trade-meta-value ${up ? 'vtd-target-up' : 'vtd-target-dn'}`}>
{ret >= 0 ? '+' : ''}{ret.toFixed(2)}%
</span>
</div>
</div>
</div>
);
})}
</tbody>
</table>
</div>
</div>
</div>
);
};