feat(stock): 스크리너 노드/컬럼 hover 설명 추가

- ScoreChips: 아이콘 제거, 풀 라벨 표시 (외국인/거래량급증/20일모멘텀/
  52주신고가/RS레이팅/이평선정배열/VCP수축). title에 노드 의미 + 70점
  강조 안내.
- ResultTable: 각 컬럼 헤더에 ⓘ 마커 + 의미 hover 설명. 진입/손절/익절
  컬럼명에 '(원)' 명시. 상단에 hover 가이드 한 줄 추가.
This commit is contained in:
2026-05-13 07:52:14 +09:00
parent 9f4363cdbb
commit 6fd70dd802
2 changed files with 78 additions and 19 deletions

View File

@@ -1,10 +1,33 @@
import ScoreChips from './ScoreChips';
const COL_TIPS = {
rank: '순위 — 종합 점수가 높은 순서',
name: '종목명과 종목 코드',
total: '종합 점수 (0~100) — 활성 점수 노드들의 가중평균. 가중치는 좌측 패널에서 조정',
nodes: '노드별 점수 칩 — 70점 이상이면 노란색 강조. 각 칩에 마우스 올리면 해당 노드 설명이 나옵니다',
entry: '예상 진입가 (원) — 현재 종가의 +0.5%, 다음날 시초가 슬리피지 가정',
stop: '손절가 (원) — 현재가 - 2 × ATR(14, Wilder smoothing). 변동성 기반 손절',
target: '익절가 (원) — 진입가 + (진입가 - 손절가) × R:R 비율 (기본 2.0). 위험 1 대비 보상 2',
r_pct: '손실 위험 % — (진입가 - 손절가) / 진입가 × 100. 클수록 변동성 큰 종목',
};
function Th({ k, children }) {
return (
<th title={COL_TIPS[k]} style={{ cursor: 'help' }}>
{children}
<span style={{ marginLeft: 4, fontSize: 10, color: '#6b7280' }}></span>
</th>
);
}
export default function ResultTable({ result }) {
if (!result) {
return (
<section className="screener-card">
<p style={{ color: '#9ca3af' }}>아직 결과 없음. "지금 실행" 눌러보세요.</p>
<p style={{ color: '#6b7280', fontSize: 12, marginTop: 8 }}>
💡 점수·가격 컬럼 헤더와 노드 칩에 마우스를 올리면 의미가 표시됩니다.
</p>
</section>
);
}
@@ -25,12 +48,22 @@ export default function ResultTable({ result }) {
)}
</div>
<p style={{ color: '#6b7280', fontSize: 11, marginTop: 8, marginBottom: 0 }}>
💡 컬럼 헤더와 노드 칩에 마우스를 올리면 의미가 표시됩니다.
</p>
<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>
<Th k="rank">#</Th>
<Th k="name">종목</Th>
<Th k="total">총점</Th>
<Th k="nodes">노드</Th>
<Th k="entry">진입()</Th>
<Th k="stop">손절()</Th>
<Th k="target">익절()</Th>
<Th k="r_pct">R%</Th>
</tr>
</thead>
<tbody>

View File

@@ -1,29 +1,55 @@
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' },
const NODE_META = {
foreign_buy: {
label: '외국인',
description: '외국인 누적 순매수 강도 — 최근 N일(기본 5일) 외국인 순매수 합계를 시가총액으로 나눈 비율의 백분위',
},
volume_surge: {
label: '거래량 급증',
description: '최근 3일 평균 거래량 vs 직전 20일 평균의 log(비율) 백분위 — 매집/관심 급증 신호',
},
momentum: {
label: '20일 모멘텀',
description: '20일 누적 수익률 백분위 — 단기 상승 추세 강도',
},
high52w: {
label: '52주 신고가 근접도',
description: '현재가 / 52주 최고가 (룰 기반: 70% 미만 0점, 100% 도달 100점, 선형) — 미너비니 SEPA 핵심',
},
rs_rating: {
label: 'RS Rating',
description: '시장(KOSPI) 대비 3·6·9·12개월 초과수익 가중합 (IBD 표준 2:1:1:1) 백분위 — 상대강도',
},
ma_alignment: {
label: '이평선 정배열',
description: '현재가>MA50, MA50>MA150, MA150>MA200, 현재가>MA200, 52주 저점+25% 이상 — 5조건 만족도 × 20점',
},
vcp_lite: {
label: 'VCP-lite (변동성 수축)',
description: '단기(40일) vs 장기(252일) 일중 변동성 비율 백분위 — 변동성 수축 = 돌파 직전 패턴',
},
};
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];
const meta = NODE_META[name];
if (!meta) return null;
const active = s >= 70;
const score = Math.round(s);
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
key={name}
title={`${meta.label} ${score}\n\n${meta.description}\n\n(70점 이상이면 강조 표시)`}
style={{
padding: '3px 8px', borderRadius: 4, fontSize: 11,
background: active ? '#fbbf24' : '#1f2937',
color: active ? '#0b0f17' : '#9ca3af',
cursor: 'help',
fontWeight: active ? 600 : 400,
}}
>
{meta.label} {score}
</span>
);
})}