// stock-sheet.jsx — 개별 종목 클릭 시 열리는 실시간 차트 시트 // 차트 데이터는 /api/stock-chart 에서 실제 Yahoo Finance 인트라데이/히스토리 종가를 받아옴. function StockChartSheet({ stock, onClose }) { const { dark, lang } = useTheme(); const p = palette(dark); const [mounted, setMounted] = React.useState(false); const [period, setPeriod] = React.useState('1D'); const [hover, setHover] = React.useState(null); const [chart, setChart] = React.useState(null); // {sym, period, px, prev, pct, chg, high, low, closes} const [loading, setLoading] = React.useState(false); const svgRef = React.useRef(null); React.useEffect(() => { if (stock) requestAnimationFrame(()=>setMounted(true)); else { setMounted(false); setHover(null); setChart(null); } }, [stock]); // 실제 차트 데이터 fetch (종목 or 기간 변경 시) React.useEffect(() => { if (!stock || !stock.sym) return; let aborted = false; setLoading(true); fetch(`/api/stock-chart?sym=${encodeURIComponent(stock.sym)}&period=${period}`, { cache: 'no-store' }) .then((r) => (r.ok ? r.json() : null)) .then((data) => { if (aborted) return; if (data && Array.isArray(data.closes) && data.closes.length > 0) { setChart(data); } else { setChart(null); } }) .catch(() => { if (!aborted) setChart(null); }) .finally(() => { if (!aborted) setLoading(false); }); return () => { aborted = true; }; }, [stock, period]); const PERIODS_LOCAL = [ { k:'1D', labelKo:'1일', labelEn:'1D' }, { k:'1W', labelKo:'1주', labelEn:'1W' }, { k:'1M', labelKo:'1개월',labelEn:'1M' }, { k:'3M', labelKo:'3개월',labelEn:'3M' }, { k:'1Y', labelKo:'1년', labelEn:'1Y' }, ]; if (!stock) return null; // Authoritative live values: chart response preferred, fall back to stock row. const livePx = (chart && typeof chart.px === 'number') ? chart.px : stock.px; const livePct = (chart && typeof chart.pct === 'number') ? chart.pct : stock.pct; const liveChg = (chart && typeof chart.chg === 'number') ? chart.chg : (typeof stock.chg === 'number' ? stock.chg : null); const livePrev = (chart && typeof chart.prev === 'number') ? chart.prev : (livePx != null && livePct != null ? livePx / (1 + livePct/100) : null); const series = (chart && chart.closes) ? chart.closes : []; const hasData = series.length >= 2; const up = (livePct || 0) >= 0; const stroke = up ? p.inkUp : p.inkDown; const W = 370, H = 200, padX = 14, padY = 14; const n = series.length; const min = hasData ? Math.min(...series) : 0; const max = hasData ? Math.max(...series) : 1; const rng = (max - min) || 1; const x = (i) => padX + (n > 1 ? (i/(n-1)) * (W - padX*2) : 0); const y = (v) => padY + (1 - (v-min)/rng) * (H - padY*2); const d = hasData ? series.map((v,i)=> `${i?'L':'M'}${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ') : ''; const onMove = (ev) => { if (!hasData) return; const rect = svgRef.current.getBoundingClientRect(); const px = (ev.touches? ev.touches[0].clientX : ev.clientX) - rect.left; const scale = W / rect.width; const xPx = px * scale; const idx = Math.max(0, Math.min(n-1, Math.round(((xPx - padX)/(W - padX*2)) * (n-1)))); setHover({ idx, x: x(idx), y: y(series[idx]), v: series[idx] }); }; const onLeave = () => setHover(null); const high = (chart && typeof chart.high === 'number') ? chart.high : (hasData ? Math.max(...series) : null); const low = (chart && typeof chart.low === 'number') ? chart.low : (hasData ? Math.min(...series) : null); const close = livePx; const displayPx = hover ? hover.v : close; const displayChg = hover && livePrev != null ? (hover.v - livePrev) : liveChg; const displayPct = hover && livePrev != null ? ((hover.v - livePrev)/livePrev * 100) : livePct; const xLabels = (() => { if (period === '1D') return ['09:00','11:00','13:00','15:30']; if (period === '1W') return ['Mon','Wed','Fri']; if (period === '1M') return [lang==='ko'?'4주 전':'4w',lang==='ko'?'2주 전':'2w',lang==='ko'?'지금':'now']; if (period === '3M') return ['3M','2M','1M',lang==='ko'?'지금':'now']; return ['1Y',lang==='ko'?'6개월':'6M',lang==='ko'?'지금':'now']; })(); const yTicks = hasData ? [max, (max+min)/2, min] : []; const fmtPx = (v) => { if (typeof v !== 'number') return '—'; return v >= 1000 ? v.toLocaleString('en-US', {maximumFractionDigits:0}) : v.toFixed(2); }; return (
{stock.sym} LIVE
{stock.name}
{fmtPx(displayPx)}
{hover && ( @ {xLabels[Math.round(hover.idx / (n-1) * (xLabels.length-1))] || ''} )}
{PERIODS_LOCAL.map(pd=>( ))}
{/* chart */}
{hasData ? ( {yTicks.map((v,i)=>( {fmtPx(v)} ))} {hover && ( )} {xLabels.map((l,i)=>{ const lx = padX + (i/(xLabels.length-1)) * (W - padX*2); return {l}; })} ) : (
{loading ? (lang==='ko' ? '실시간 차트 로딩 중…' : 'LOADING LIVE CHART…') : (lang==='ko' ? '차트 데이터 없음' : 'NO CHART DATA')}
)}
{/* stats */}
{[ [lang==='ko'?'전일종가':'PREV', fmtPx(livePrev)], [lang==='ko'?'고가':'HIGH', fmtPx(high)], [lang==='ko'?'저가':'LOW', fmtPx(low)], [lang==='ko'?'현재가':'LAST', fmtPx(close)], ].map(([k,v])=>(
{k}
{v}
))}
{/* CCI 시그널 — stock.cci 없으면 series 기반으로 근사치 계산 */} {(() => { let cciVal = stock.cci; if (cciVal == null && hasData && series.length >= 10) { const recent = series.slice(-Math.min(20, series.length)); const mean = recent.reduce((a,b)=>a+b,0)/recent.length; const mad = recent.reduce((a,b)=>a+Math.abs(b-mean),0)/recent.length || 1; const raw = (close - mean) / (0.015 * mad); cciVal = Math.max(-200, Math.min(200, Math.round(raw))); } return cciVal != null ? (
) : null; })()} {/* footer */}
{lang==='ko'?'Yahoo Finance · 15분 지연될 수 있음':'Yahoo Finance · MAY BE 15M DELAYED'} {stock.sym}
); } Object.assign(window, { StockChartSheet });