/** * useMarketData.ts — 실시간 시장 데이터 관리 커스텀 훅 * * 역할: * - WebSocket tick/quote 메시지를 수신하여 종목별 실시간 가격 관리 * - 선택 종목의 호가 데이터(liveQuote) 관리 * - 포트폴리오 초기 가격 설정 (WebSocket 데이터 수신 전 폴백) * * 성능 최적화 패턴 (ref + 주기적 스냅샷): * - tick 수신 시 ref에만 저장 (리렌더 없음) * - 1초마다 dirty 체크 후 변경분만 state 반영 * - Dashboard 리렌더를 초당 최대 1회로 제한하여 깜빡임 방지 * * @param selectedStock - 현재 선택된 종목 코드 (호가 필터링용) * @param portfolio - 보유 종목 배열 (초기 가격 설정용) * @returns livePrices, livePricesRef, liveQuote, handleMarketUpdate */ import { useEffect, useState, useRef, useCallback } from 'react' import { isKrMarketOpen } from '../utils/marketHours' import { isUsStock } from '../utils/stockUtils' /** 최근 체결 수신 후 호가(bid1)로 가격을 덮지 않는 유예 시간 */ const QUOTE_OVERRIDE_TICK_GRACE_MS = 10_000 export const useMarketData = ( selectedStock: string, portfolio: any[] | undefined ) => { // === livePrices: ref + 주기적 스냅샷 패턴 === // tick마다 ref에만 저장 → 1초마다 변경된 경우에만 state 업데이트 // Dashboard 리렌더를 초당 최대 1회로 제한 (깜빡임 방지) const [livePrices, setLivePrices] = useState>({}) /** 실시간 가격을 즉시 저장하는 ref (리렌더 없이 최신 가격 유지) */ const livePricesRef = useRef>({}) /** 가격 변경 여부 플래그 — flush interval에서 확인 */ const pricesDirtyRef = useRef(false) /** 종목별 마지막 체결(tick) 수신 시각(ms) — 최근 체결이 있으면 호가 bid1 으로 가격을 덮지 않는다 */ const lastTickAtRef = useRef>({}) /** 종목별 당일 누적 거래량(tick ACML_VOL) — 차트 오늘 캔들 거래량 반영용 */ const [liveVolumes, setLiveVolumes] = useState>({}) const liveVolumesRef = useRef>({}) const volumesDirtyRef = useRef(false) /** 선택 종목의 실시간 호가 데이터 (WebSocket quote 메시지) */ const [liveQuote, setLiveQuote] = useState(null) // 1초마다 변경된 가격을 ref에서 state로 flush useEffect(() => { const id = setInterval(() => { if (pricesDirtyRef.current) { pricesDirtyRef.current = false setLivePrices({ ...livePricesRef.current }) } if (volumesDirtyRef.current) { volumesDirtyRef.current = false setLiveVolumes({ ...liveVolumesRef.current }) } }, 1000) return () => clearInterval(id) }, []) /** * WebSocket market_update 메시지 핸들러 * * tick 메시지: 체결가 업데이트 (ref에만 저장, 리렌더 없음) * quote 메시지: 호가 업데이트 * - bid1(최우선 매수호가)을 가격으로 사용 (tick 없을 때 P&L 계산용) * - 선택 종목이면 liveQuote state 업데이트 (호가창 갱신) */ const handleMarketUpdate = useCallback((data: unknown) => { const d = data as any // 국내 장외 시간엔 잔고(portfolio current_price)가 기준 — 시간외/잔여 틱이 잔고 동기화 값을 덮어쓰지 않도록 가격 캐시 갱신을 건너뛴다. // (호가창 liveQuote 는 아래에서 계속 갱신) const krClosedForCode = !!d?.stock_code && !isUsStock(d.stock_code) && !isKrMarketOpen() if (krClosedForCode && d?._type === 'tick') return if (d?._type === 'tick' && d.stock_code && d.price != null) { lastTickAtRef.current[d.stock_code] = Date.now() const vol = Number(d.volume) if (Number.isFinite(vol) && vol > 0 && liveVolumesRef.current[d.stock_code] !== vol) { liveVolumesRef.current[d.stock_code] = vol volumesDirtyRef.current = true } // 체결가 변경 시에만 ref 업데이트 + dirty 플래그 설정 const prev = livePricesRef.current[d.stock_code] if (prev !== d.price) { livePricesRef.current[d.stock_code] = d.price pricesDirtyRef.current = true } } else if (d?._type === 'quote' && d.stock_code) { // 호가 데이터에서 현재가 추정 (bid1 = 최우선 매수호가) // tick 데이터가 없을 때 P&L 계산용 가격 업데이트 // 최근 QUOTE_OVERRIDE_TICK_GRACE_MS 내 체결(tick)이 있으면 체결가가 기준 — bid1 으로 덮지 않는다 // (매 호가마다 체결가↔매수호가가 번갈아 표시되며 가격이 흔들리던 문제) const bidPrice = d.bid1 as number | undefined const lastTickAt = lastTickAtRef.current[d.stock_code] ?? 0 const recentTick = Date.now() - lastTickAt < QUOTE_OVERRIDE_TICK_GRACE_MS if (bidPrice && bidPrice > 0 && !krClosedForCode && !recentTick) { const prev = livePricesRef.current[d.stock_code] if (prev !== bidPrice) { livePricesRef.current[d.stock_code] = bidPrice pricesDirtyRef.current = true } } // 선택된 종목이면 호가창 업데이트 (OrderbookPanel 갱신) if (d.stock_code === selectedStock) { setLiveQuote(d) } } }, [selectedStock]) // 포트폴리오 로드 시 가격 설정 // - 장중: 실시간 가격이 없는 종목만 잔고 가격으로 초기화 // - 국내 장외: 잔고(KIS 동기화) 가격이 우선 — 이전 장중 틱 캐시를 덮어쓴다 (카드/잔고 불일치 방지) useEffect(() => { if (!portfolio) return let changed = false const krOpen = isKrMarketOpen() portfolio.forEach((s: any) => { const px = Number(s.current_price || 0) if (!(px > 0)) return const cur = livePricesRef.current[s.stock_code] const overrideClosed = !isUsStock(s.stock_code) && !krOpen if (overrideClosed ? cur !== px : !cur) { livePricesRef.current[s.stock_code] = px changed = true } }) if (changed) { setLivePrices({ ...livePricesRef.current }) } }, [portfolio]) // 선택 종목 변경 시 이전 호가 데이터 초기화 useEffect(() => { setLiveQuote(null) }, [selectedStock]) return { /** 종목별 실시간 가격 맵 (state — 1초마다 갱신) */ livePrices, /** 종목별 실시간 가격 ref (리렌더 없이 즉시 접근) */ livePricesRef, /** 종목별 당일 누적 거래량 (state — 1초마다 갱신) */ liveVolumes, /** 선택 종목 실시간 호가 데이터 */ liveQuote, /** WebSocket market_update 메시지 콜백 */ handleMarketUpdate, } }