feat(stock): ResultTable 본구현 + ScoreChips (노드 칩 + 70점 강조)
This commit is contained in:
@@ -59,3 +59,12 @@
|
||||
}
|
||||
.node-card-header { font-weight: 500; margin-bottom: 6px; }
|
||||
.weight-row, .param-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
|
||||
|
||||
.screener-table {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.screener-table th { text-align: left; padding: 8px; background: #0a0f1a; color: #9ca3af; font-weight: 500; border-bottom: 1px solid #1f2937; }
|
||||
.screener-table td { padding: 8px; border-bottom: 1px solid #1a2230; vertical-align: middle; }
|
||||
.screener-table tr:hover { background: #0a0f1a; }
|
||||
|
||||
@@ -1,25 +1,54 @@
|
||||
import ScoreChips from './ScoreChips';
|
||||
|
||||
export default function ResultTable({ result }) {
|
||||
if (!result) return <section className="screener-card"><p style={{color:'#9ca3af'}}>아직 결과 없음. "지금 실행"을 눌러보세요.</p></section>;
|
||||
if (!result) {
|
||||
return (
|
||||
<section className="screener-card">
|
||||
<p style={{ color: '#9ca3af' }}>아직 결과 없음. "지금 실행"을 눌러보세요.</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="screener-card">
|
||||
<h3>Top {result.top_n} · 통과 {result.survivors_count}</h3>
|
||||
<table style={{ width: '100%', fontSize: 13 }}>
|
||||
<thead>
|
||||
<tr><th>#</th><th>종목</th><th>총점</th><th>진입</th><th>손절</th><th>익절</th><th>R%</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(result.results || []).map((r) => (
|
||||
<tr key={r.ticker}>
|
||||
<td>{r.rank}</td><td>{r.name} ({r.ticker})</td>
|
||||
<td>{r.total_score?.toFixed?.(1)}</td>
|
||||
<td>{r.entry_price?.toLocaleString?.()}</td>
|
||||
<td>{r.stop_price?.toLocaleString?.()}</td>
|
||||
<td>{r.target_price?.toLocaleString?.()}</td>
|
||||
<td>{r.r_pct?.toFixed?.(1)}</td>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<h3 style={{ margin: 0 }}>
|
||||
Top {result.top_n} · 통과 {result.survivors_count} · {result.asof}
|
||||
</h3>
|
||||
{result.warnings?.length > 0 && (
|
||||
<div style={{
|
||||
background: '#7c2d12', color: '#fde68a', padding: '4px 10px',
|
||||
borderRadius: 4, fontSize: 12,
|
||||
}}>
|
||||
⚠ {result.warnings.join(' · ')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ overflowX: 'auto', marginTop: 12 }}>
|
||||
<table className="screener-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th><th>종목</th><th>총점</th><th>노드</th>
|
||||
<th>진입</th><th>손절</th><th>익절</th><th>R%</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(result.results || []).map((r) => (
|
||||
<tr key={r.ticker}>
|
||||
<td>{r.rank}</td>
|
||||
<td>{r.name}<br /><span style={{ fontSize: 11, color: '#9ca3af' }}>{r.ticker}</span></td>
|
||||
<td style={{ fontWeight: 600 }}>{r.total_score?.toFixed(1)}</td>
|
||||
<td><ScoreChips scores={r.scores} /></td>
|
||||
<td>{r.entry_price?.toLocaleString?.()}</td>
|
||||
<td>{r.stop_price?.toLocaleString?.()}</td>
|
||||
<td>{r.target_price?.toLocaleString?.()}</td>
|
||||
<td>{r.r_pct?.toFixed?.(1)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
32
src/pages/stock/screener/components/ScoreChips.jsx
Normal file
32
src/pages/stock/screener/components/ScoreChips.jsx
Normal file
@@ -0,0 +1,32 @@
|
||||
const NODE_ICONS = {
|
||||
foreign_buy: { icon: '👤', label: '외국인' },
|
||||
volume_surge: { icon: '⚡', label: '거래량' },
|
||||
momentum: { icon: '🚀', label: '모멘텀' },
|
||||
high52w: { icon: '🆙', label: '52w고' },
|
||||
rs_rating: { icon: '💪', label: 'RS' },
|
||||
ma_alignment: { icon: '📈', label: '정배열' },
|
||||
vcp_lite: { icon: '🌀', label: 'VCP' },
|
||||
};
|
||||
|
||||
export default function ScoreChips({ scores }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
|
||||
{Object.entries(scores || {}).map(([name, s]) => {
|
||||
const meta = NODE_ICONS[name];
|
||||
if (!meta) return null;
|
||||
const active = s >= 70;
|
||||
return (
|
||||
<span key={name}
|
||||
title={`${meta.label}: ${s.toFixed?.(0) ?? s}`}
|
||||
style={{
|
||||
padding: '2px 6px', borderRadius: 4, fontSize: 11,
|
||||
background: active ? '#fbbf24' : '#1f2937',
|
||||
color: active ? '#0b0f17' : '#9ca3af',
|
||||
}}>
|
||||
{meta.icon}{Math.round(s)}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user