/** * 업비트 마켓 목록 + 실시간 시세 훅 * * 1) /v1/market/all — 마켓 목록 * 2) /v1/ticker — 초기 시세 (lite: 우선 종목만, full: 전 종목) * 3) upbitWsBroker ticker 구독 * 4) REST 보조 폴링 30초 */ import { useState, useEffect, useRef, useCallback, useMemo } from 'react'; import { setMarketNames } from '../utils/marketNameCache'; import { UPBIT_API } from '../utils/upbitApi'; import { subscribeUpbitWs } from '../utils/upbitWsBroker'; export type ChangeDir = 'RISE' | 'FALL' | 'EVEN'; export interface TickerData { market: string; koreanName: string; tradePrice: number | null; changeRate: number | null; changePrice: number | null; accTradePrice24: number; accTradeVolume24: number | null; openingPrice: number | null; highPrice: number | null; lowPrice: number | null; change: ChangeDir; } export interface MarketInfo { market: string; koreanName: string; englishName: string; } export interface UseMarketTickerOptions { /** 모바일 등: 우선 종목만 먼저 로드 */ lite?: boolean; /** lite 시 즉시 ticker REST·WS 할 마켓 (차트·관심 등) */ priorityMarkets?: string[]; /** 렌더마다 최신 우선 종목 (watchlist 등 — 훅 순서 유지용) */ getPriorityMarkets?: () => string[]; /** true면 전 종목 ticker 로드 (마켓 패널 열림 등) */ loadFull?: boolean; } const REST_POLL_INTERVAL = 30_000; const WS_BATCH_MS = 400; const LITE_BASE_MARKETS = ['KRW-BTC', 'KRW-USDT']; function toChangeDir(raw: UpbitTickerRaw): ChangeDir { if (raw.change === 'RISE' || raw.change === 'FALL' || raw.change === 'EVEN') return raw.change; const r = raw.signed_change_rate ?? 0; return r > 0 ? 'RISE' : r < 0 ? 'FALL' : 'EVEN'; } interface UpbitMarketAll { market: string; korean_name: string; english_name: string; } interface UpbitTickerRaw { market?: string; code?: string; trade_price: number; signed_change_rate: number; signed_change_price: number; acc_trade_price_24h: number; acc_trade_volume_24h?: number; opening_price: number; high_price: number; low_price: number; change?: 'RISE' | 'FALL' | 'EVEN'; } function getMarketCode(raw: UpbitTickerRaw): string { return (raw.code ?? raw.market ?? '') as string; } async function fetchAllMarkets(): Promise { const res = await fetch(`${UPBIT_API}/market/all?isDetails=true`); if (!res.ok) throw new Error(`market/all ${res.status}`); const data: UpbitMarketAll[] = await res.json(); const krw = data.filter(m => m.market.startsWith('KRW-')); const nameMap: Record = {}; krw.forEach(m => { nameMap[m.market] = m.korean_name; }); setMarketNames(nameMap); return krw.map(m => ({ market: m.market, koreanName: m.korean_name, englishName: m.english_name, })); } async function fetchAllTickers(markets: string[]): Promise { const results: UpbitTickerRaw[] = []; for (let i = 0; i < markets.length; i += 100) { const chunk = markets.slice(i, i + 100); try { const res = await fetch(`${UPBIT_API}/ticker?markets=${chunk.join(',')}`); if (res.ok) results.push(...(await res.json())); } catch { /* 부분 실패 무시 */ } } return results; } function rawToTicker(raw: UpbitTickerRaw, koreanName: string): TickerData { return { market: getMarketCode(raw), koreanName, tradePrice: raw.trade_price ?? null, changeRate: raw.signed_change_rate ?? null, changePrice: raw.signed_change_price ?? null, accTradePrice24: raw.acc_trade_price_24h ?? 0, accTradeVolume24: raw.acc_trade_volume_24h ?? null, openingPrice: raw.opening_price ?? null, highPrice: raw.high_price ?? null, lowPrice: raw.low_price ?? null, change: toChangeDir(raw), }; } function subscribeTickerWs( markets: string[], onBatch: (rawList: UpbitTickerRaw[]) => void, ): () => void { const batch = new Map(); let batchTimer: ReturnType | null = null; const flushBatch = () => { batchTimer = null; if (batch.size === 0) return; onBatch(Array.from(batch.values())); batch.clear(); }; return subscribeUpbitWs('ticker', markets, raw => { if (raw.type !== 'ticker' && !raw.code) return; const msg = raw as unknown as UpbitTickerRaw; const code = getMarketCode(msg); if (!code) return; batch.set(code, msg); if (!batchTimer) batchTimer = setTimeout(flushBatch, WS_BATCH_MS); }); } function mergePriorityMarkets(priorityMarkets?: string[]): string[] { const set = new Set(LITE_BASE_MARKETS); priorityMarkets?.forEach(m => { if (m?.startsWith('KRW-')) set.add(m); }); return [...set]; } export function useMarketTicker(opts: UseMarketTickerOptions = {}) { const lite = opts.lite ?? false; const loadFull = opts.loadFull ?? !lite; const priorityList = mergePriorityMarkets(opts.getPriorityMarkets?.() ?? opts.priorityMarkets); const priorityKey = priorityList.join(','); const [tickers, setTickers] = useState>(new Map()); const [marketInfos, setMarketInfos] = useState([]); const [loading, setLoading] = useState(true); const [usdRate, setUsdRate] = useState(1_300); const mountedRef = useRef(true); const marketListRef = useRef([]); const marketInfoMapRef = useRef>(new Map()); const destroyWsRef = useRef<(() => void) | null>(null); const pollTimerRef = useRef | null>(null); const wsMarketsRef = useRef([]); const fullLoadedRef = useRef(false); const applyRawList = useCallback((rawList: UpbitTickerRaw[]) => { if (!mountedRef.current) return; setTickers(prev => { const next = new Map(prev); rawList.forEach(raw => { const code = getMarketCode(raw); if (!code) return; const info = marketInfoMapRef.current.get(code); const name = info?.koreanName ?? next.get(code)?.koreanName ?? code.replace(/^KRW-/, ''); next.set(code, rawToTicker(raw, name)); }); return next; }); const usdt = rawList.find(t => getMarketCode(t) === 'KRW-USDT'); if (usdt?.trade_price) setUsdRate(usdt.trade_price); }, []); const clearPoll = useCallback(() => { if (pollTimerRef.current) { clearInterval(pollTimerRef.current); pollTimerRef.current = null; } }, []); const startPoll = useCallback((markets: string[]) => { clearPoll(); pollTimerRef.current = setInterval(async () => { if (!mountedRef.current) return; try { const rawList = await fetchAllTickers(markets); applyRawList(rawList); } catch { /* ignore */ } }, REST_POLL_INTERVAL); }, [applyRawList, clearPoll]); const attachWs = useCallback((markets: string[]) => { destroyWsRef.current?.(); wsMarketsRef.current = markets; destroyWsRef.current = subscribeTickerWs(markets, applyRawList); }, [applyRawList]); const loadTickersFor = useCallback(async (markets: string[]) => { if (markets.length === 0) return; try { const rawList = await fetchAllTickers(markets); if (mountedRef.current) applyRawList(rawList); } catch { /* ignore */ } }, [applyRawList]); // 마켓 목록 + 초기 ticker (lite / full) useEffect(() => { mountedRef.current = true; fullLoadedRef.current = false; (async () => { let infos: MarketInfo[] = []; try { infos = await fetchAllMarkets(); } catch { /* ignore */ } if (!mountedRef.current) return; infos.forEach(m => marketInfoMapRef.current.set(m.market, m)); setMarketInfos(infos); const allMarkets = infos.map(m => m.market); if (!allMarkets.includes('KRW-USDT')) allMarkets.push('KRW-USDT'); marketListRef.current = allMarkets; const initialMarkets = loadFull ? allMarkets : priorityList; await loadTickersFor(initialMarkets); if (!mountedRef.current) return; setLoading(false); attachWs(initialMarkets); startPoll(initialMarkets); if (loadFull) fullLoadedRef.current = true; })(); return () => { mountedRef.current = false; destroyWsRef.current?.(); destroyWsRef.current = null; clearPoll(); }; }, [loadFull, priorityKey, loadTickersFor, attachWs, startPoll, clearPoll, priorityList]); // lite → full 확장 (마켓 패널 열림 등) useEffect(() => { if (!loadFull || fullLoadedRef.current) return; if (marketListRef.current.length === 0) return; let cancelled = false; (async () => { const all = marketListRef.current; await loadTickersFor(all); if (cancelled || !mountedRef.current) return; fullLoadedRef.current = true; attachWs(all); startPoll(all); })(); return () => { cancelled = true; }; }, [loadFull, loadTickersFor, attachWs, startPoll]); return { tickers, marketInfos, loading, usdRate }; }