정리
This commit is contained in:
@@ -23,28 +23,128 @@ import {
|
||||
const TRADE_TR_ID = "H0STCNT0";
|
||||
const TRADE_TR_ID_EXPECTED = "H0STANC0";
|
||||
const TRADE_TR_ID_OVERTIME = "H0STOUP0";
|
||||
const TRADE_TR_ID_OVERTIME_EXPECTED = "H0STOAC0";
|
||||
const TRADE_TR_ID_TOTAL = "H0UNCNT0";
|
||||
const TRADE_TR_ID_TOTAL_EXPECTED = "H0UNANC0";
|
||||
const ORDERBOOK_TR_ID = "H0STASP0";
|
||||
const ORDERBOOK_TR_ID_OVERTIME = "H0STOAA0";
|
||||
const MAX_TRADE_TICKS = 10;
|
||||
const WS_DEBUG_STORAGE_KEY = "KIS_WS_DEBUG";
|
||||
|
||||
function resolveTradeTrId(
|
||||
/**
|
||||
* @description 장 구간/시장별 누락을 줄이기 위해 TR ID를 우선순위 배열로 반환합니다.
|
||||
* @see features/trade/hooks/useKisTradeWebSocket.ts useEffect WebSocket 구독 등록
|
||||
* @see temp-kis-domestic-functions-ws.py ccnl_krx/ccnl_total/exp_ccnl_krx/exp_ccnl_total/overtime_ccnl_krx
|
||||
*/
|
||||
function resolveTradeTrIds(
|
||||
env: KisRuntimeCredentials["tradingEnv"],
|
||||
session: DomesticKisSession,
|
||||
) {
|
||||
if (env === "mock") return TRADE_TR_ID;
|
||||
if (shouldUseAfterHoursSinglePriceTr(session)) return TRADE_TR_ID;
|
||||
if (shouldUseExpectedExecutionTr(session)) return TRADE_TR_ID;
|
||||
return TRADE_TR_ID;
|
||||
if (env === "mock") return [TRADE_TR_ID];
|
||||
|
||||
if (shouldUseAfterHoursSinglePriceTr(session)) {
|
||||
// 시간외 단일가(16:00~18:00): 전용 TR + 통합 TR 백업
|
||||
return uniqueTrIds([
|
||||
TRADE_TR_ID_OVERTIME,
|
||||
TRADE_TR_ID_OVERTIME_EXPECTED,
|
||||
TRADE_TR_ID_TOTAL,
|
||||
TRADE_TR_ID_TOTAL_EXPECTED,
|
||||
]);
|
||||
}
|
||||
|
||||
if (shouldUseExpectedExecutionTr(session)) {
|
||||
// 동시호가 구간(장전/장마감): 예상체결 TR을 우선, 일반체결/통합체결을 백업
|
||||
return uniqueTrIds([
|
||||
TRADE_TR_ID_EXPECTED,
|
||||
TRADE_TR_ID_TOTAL_EXPECTED,
|
||||
TRADE_TR_ID,
|
||||
TRADE_TR_ID_TOTAL,
|
||||
]);
|
||||
}
|
||||
|
||||
if (session === "afterCloseFixedPrice") {
|
||||
// 시간외 종가(15:40~16:00): 브로커별 라우팅 차이를 대비해 일반/시간외/통합 TR을 함께 구독
|
||||
return uniqueTrIds([
|
||||
TRADE_TR_ID,
|
||||
TRADE_TR_ID_TOTAL,
|
||||
TRADE_TR_ID_OVERTIME,
|
||||
TRADE_TR_ID_OVERTIME_EXPECTED,
|
||||
TRADE_TR_ID_TOTAL_EXPECTED,
|
||||
]);
|
||||
}
|
||||
|
||||
return uniqueTrIds([TRADE_TR_ID, TRADE_TR_ID_TOTAL]);
|
||||
}
|
||||
|
||||
function resolveOrderBookTrId(
|
||||
/**
|
||||
* @description 장 구간별 호가 TR ID 후보를 우선순위 배열로 반환합니다.
|
||||
* @see features/trade/hooks/useKisTradeWebSocket.ts useEffect WebSocket 구독 등록
|
||||
* @see temp-kis-domestic-functions-ws.py asking_price_krx/asking_price_total/overtime_asking_price_krx
|
||||
*/
|
||||
function resolveOrderBookTrIds(
|
||||
env: KisRuntimeCredentials["tradingEnv"],
|
||||
session: DomesticKisSession,
|
||||
) {
|
||||
if (env === "mock") return ORDERBOOK_TR_ID;
|
||||
if (shouldUseAfterHoursSinglePriceTr(session))
|
||||
return ORDERBOOK_TR_ID_OVERTIME;
|
||||
return ORDERBOOK_TR_ID;
|
||||
if (env === "mock") return [ORDERBOOK_TR_ID];
|
||||
|
||||
if (shouldUseAfterHoursSinglePriceTr(session)) {
|
||||
// 시간외 단일가(16:00~18:00)는 KRX 전용 호가 TR만 구독합니다.
|
||||
// 통합 TR(H0UNASP0)을 같이 구독하면 종목별로 포맷/잔량이 섞여 보일 수 있습니다.
|
||||
return uniqueTrIds([ORDERBOOK_TR_ID_OVERTIME]);
|
||||
}
|
||||
|
||||
if (session === "afterCloseFixedPrice") {
|
||||
return uniqueTrIds([ORDERBOOK_TR_ID_OVERTIME]);
|
||||
}
|
||||
|
||||
// UI 흐름: 호가창 UI -> useKisTradeWebSocket onmessage -> onOrderBookMessage
|
||||
// -> TradeContainer setRealtimeOrderBook -> useOrderBook 병합 -> OrderBook 렌더
|
||||
// 장중에는 KRX 전용(H0STASP0)만 구독해 값이 번갈아 덮이는 현상을 방지합니다.
|
||||
return uniqueTrIds([ORDERBOOK_TR_ID]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 콘솔 디버그 플래그를 확인합니다.
|
||||
* @see features/trade/hooks/useKisTradeWebSocket.ts socket.onmessage
|
||||
*/
|
||||
function isWsDebugEnabled() {
|
||||
if (typeof window === "undefined") return false;
|
||||
|
||||
try {
|
||||
return window.localStorage.getItem(WS_DEBUG_STORAGE_KEY) === "1";
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 실시간 웹소켓 제어(JSON) 메시지를 파싱합니다.
|
||||
* @see features/trade/hooks/useKisTradeWebSocket.ts socket.onmessage
|
||||
*/
|
||||
function parseWsControlMessage(raw: string) {
|
||||
if (!raw.startsWith("{")) return null;
|
||||
|
||||
try {
|
||||
return JSON.parse(raw) as {
|
||||
header?: { tr_id?: string };
|
||||
body?: { rt_cd?: string; msg1?: string };
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 실시간 원문에서 파이프 구분 TR ID를 빠르게 추출합니다.
|
||||
* @see features/trade/hooks/useKisTradeWebSocket.ts socket.onmessage
|
||||
*/
|
||||
function peekPipeTrId(raw: string) {
|
||||
const parts = raw.split("|");
|
||||
return parts.length > 1 ? parts[1] : "";
|
||||
}
|
||||
|
||||
function uniqueTrIds(ids: string[]) {
|
||||
return [...new Set(ids)];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -80,8 +180,11 @@ export function useKisTradeWebSocket(
|
||||
|
||||
const obSymbol = options?.orderBookSymbol;
|
||||
const onOrderBookMsg = options?.onOrderBookMessage;
|
||||
const realtimeTrIds = credentials
|
||||
? resolveTradeTrIds(credentials.tradingEnv, marketSession)
|
||||
: [TRADE_TR_ID];
|
||||
const realtimeTrId = credentials
|
||||
? resolveTradeTrId(credentials.tradingEnv, marketSession)
|
||||
? realtimeTrIds[0] ?? TRADE_TR_ID
|
||||
: TRADE_TR_ID;
|
||||
|
||||
useEffect(() => {
|
||||
@@ -122,11 +225,24 @@ export function useKisTradeWebSocket(
|
||||
|
||||
let disposed = false;
|
||||
let socket: WebSocket | null = null;
|
||||
const debugEnabled = isWsDebugEnabled();
|
||||
|
||||
const tradeTrId = resolveTradeTrId(credentials.tradingEnv, marketSession);
|
||||
const orderBookTrId = obSymbol
|
||||
? resolveOrderBookTrId(credentials.tradingEnv, marketSession)
|
||||
: null;
|
||||
const tradeTrIds = resolveTradeTrIds(credentials.tradingEnv, marketSession);
|
||||
const orderBookTrIds =
|
||||
obSymbol && onOrderBookMsg
|
||||
? resolveOrderBookTrIds(credentials.tradingEnv, marketSession)
|
||||
: [];
|
||||
|
||||
const subscribe = (
|
||||
key: string,
|
||||
targetSymbol: string,
|
||||
trId: string,
|
||||
trType: "1" | "2",
|
||||
) => {
|
||||
socket?.send(
|
||||
JSON.stringify(buildKisRealtimeMessage(key, targetSymbol, trId, trType)),
|
||||
);
|
||||
};
|
||||
|
||||
const connect = async () => {
|
||||
try {
|
||||
@@ -144,34 +260,31 @@ export function useKisTradeWebSocket(
|
||||
if (disposed) return;
|
||||
approvalKeyRef.current = wsConnection.approvalKey;
|
||||
|
||||
socket = new WebSocket(`${wsConnection.wsUrl}/tryitout/${tradeTrId}`);
|
||||
// 공식 샘플과 동일하게 /tryitout 엔드포인트로 연결하고, TR은 payload로 구독합니다.
|
||||
socket = new WebSocket(`${wsConnection.wsUrl}/tryitout`);
|
||||
socketRef.current = socket;
|
||||
|
||||
socket.onopen = () => {
|
||||
if (disposed || !approvalKeyRef.current) return;
|
||||
|
||||
socket?.send(
|
||||
JSON.stringify(
|
||||
buildKisRealtimeMessage(
|
||||
approvalKeyRef.current,
|
||||
symbol,
|
||||
tradeTrId,
|
||||
"1",
|
||||
),
|
||||
),
|
||||
);
|
||||
for (const trId of tradeTrIds) {
|
||||
subscribe(approvalKeyRef.current, symbol, trId, "1");
|
||||
}
|
||||
|
||||
if (obSymbol && orderBookTrId) {
|
||||
socket?.send(
|
||||
JSON.stringify(
|
||||
buildKisRealtimeMessage(
|
||||
approvalKeyRef.current,
|
||||
obSymbol,
|
||||
orderBookTrId,
|
||||
"1",
|
||||
),
|
||||
),
|
||||
);
|
||||
if (obSymbol) {
|
||||
for (const trId of orderBookTrIds) {
|
||||
subscribe(approvalKeyRef.current, obSymbol, trId, "1");
|
||||
}
|
||||
}
|
||||
|
||||
if (debugEnabled) {
|
||||
console.info("[KisRealtime] Subscribed", {
|
||||
symbol,
|
||||
marketSession,
|
||||
tradeTrIds,
|
||||
orderBookSymbol: obSymbol ?? null,
|
||||
orderBookTrIds,
|
||||
});
|
||||
}
|
||||
|
||||
setIsConnected(true);
|
||||
@@ -180,29 +293,92 @@ export function useKisTradeWebSocket(
|
||||
socket.onmessage = (event) => {
|
||||
if (disposed || typeof event.data !== "string") return;
|
||||
|
||||
const control = parseWsControlMessage(event.data);
|
||||
if (control) {
|
||||
const trId = control.header?.tr_id ?? "";
|
||||
if (trId === "PINGPONG") {
|
||||
// 서버 Keepalive에 응답하지 않으면 연결이 끊길 수 있습니다.
|
||||
socket?.send(event.data);
|
||||
return;
|
||||
}
|
||||
|
||||
if (debugEnabled) {
|
||||
console.info("[KisRealtime] Control", {
|
||||
trId,
|
||||
rt_cd: control.body?.rt_cd,
|
||||
message: control.body?.msg1,
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (obSymbol && onOrderBookMsg) {
|
||||
const orderBook = parseKisRealtimeOrderbook(event.data, obSymbol);
|
||||
if (orderBook) {
|
||||
orderBook.tradingEnv = credentials.tradingEnv;
|
||||
if (debugEnabled) {
|
||||
console.debug("[KisRealtime] OrderBook", {
|
||||
trId: peekPipeTrId(event.data),
|
||||
symbol: orderBook.symbol,
|
||||
businessHour: orderBook.businessHour,
|
||||
hourClassCode: orderBook.hourClassCode,
|
||||
});
|
||||
}
|
||||
onOrderBookMsg(orderBook);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const ticks = parseKisRealtimeTickBatch(event.data, symbol);
|
||||
if (ticks.length === 0) return;
|
||||
if (ticks.length === 0) {
|
||||
if (debugEnabled && event.data.includes("|")) {
|
||||
console.debug("[KisRealtime] Unparsed payload", {
|
||||
trId: peekPipeTrId(event.data),
|
||||
preview: event.data.slice(0, 220),
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const meaningfulTicks = ticks.filter((tick) => tick.tradeVolume > 0);
|
||||
if (meaningfulTicks.length === 0) {
|
||||
if (debugEnabled) {
|
||||
console.debug("[KisRealtime] Ignored zero-volume ticks", {
|
||||
trId: peekPipeTrId(event.data),
|
||||
parsedCount: ticks.length,
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const dedupedTicks = meaningfulTicks.filter((tick) => {
|
||||
const key = `${tick.tickTime}-${tick.price}-${tick.tradeVolume}`;
|
||||
if (seenTickRef.current.has(key)) return false;
|
||||
seenTickRef.current.add(key);
|
||||
if (seenTickRef.current.size > 5_000) {
|
||||
seenTickRef.current.clear();
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
const latest = ticks[ticks.length - 1];
|
||||
const latest = meaningfulTicks[meaningfulTicks.length - 1];
|
||||
setLatestTick(latest);
|
||||
|
||||
if (debugEnabled) {
|
||||
console.debug("[KisRealtime] Tick", {
|
||||
trId: peekPipeTrId(event.data),
|
||||
symbol: latest.symbol,
|
||||
tickTime: latest.tickTime,
|
||||
price: latest.price,
|
||||
tradeVolume: latest.tradeVolume,
|
||||
executionClassCode: latest.executionClassCode,
|
||||
buyExecutionCount: latest.buyExecutionCount,
|
||||
sellExecutionCount: latest.sellExecutionCount,
|
||||
netBuyExecutionCount: latest.netBuyExecutionCount,
|
||||
parsedCount: ticks.length,
|
||||
});
|
||||
}
|
||||
|
||||
if (dedupedTicks.length > 0) {
|
||||
setRecentTradeTicks((prev) =>
|
||||
[...dedupedTicks.reverse(), ...prev].slice(0, MAX_TRADE_TICKS),
|
||||
@@ -215,11 +391,29 @@ export function useKisTradeWebSocket(
|
||||
};
|
||||
|
||||
socket.onerror = () => {
|
||||
if (!disposed) setIsConnected(false);
|
||||
if (!disposed) {
|
||||
if (debugEnabled) {
|
||||
console.warn("[KisRealtime] WebSocket error", {
|
||||
symbol,
|
||||
marketSession,
|
||||
tradeTrIds,
|
||||
});
|
||||
}
|
||||
setIsConnected(false);
|
||||
}
|
||||
};
|
||||
|
||||
socket.onclose = () => {
|
||||
if (!disposed) setIsConnected(false);
|
||||
if (!disposed) {
|
||||
if (debugEnabled) {
|
||||
console.warn("[KisRealtime] WebSocket closed", {
|
||||
symbol,
|
||||
marketSession,
|
||||
tradeTrIds,
|
||||
});
|
||||
}
|
||||
setIsConnected(false);
|
||||
}
|
||||
};
|
||||
} catch (err) {
|
||||
if (disposed) return;
|
||||
@@ -242,16 +436,14 @@ export function useKisTradeWebSocket(
|
||||
|
||||
const key = approvalKeyRef.current;
|
||||
if (socket?.readyState === WebSocket.OPEN && key) {
|
||||
socket.send(
|
||||
JSON.stringify(buildKisRealtimeMessage(key, symbol, tradeTrId, "2")),
|
||||
);
|
||||
for (const trId of tradeTrIds) {
|
||||
subscribe(key, symbol, trId, "2");
|
||||
}
|
||||
|
||||
if (obSymbol && orderBookTrId) {
|
||||
socket.send(
|
||||
JSON.stringify(
|
||||
buildKisRealtimeMessage(key, obSymbol, orderBookTrId, "2"),
|
||||
),
|
||||
);
|
||||
if (obSymbol) {
|
||||
for (const trId of orderBookTrIds) {
|
||||
subscribe(key, obSymbol, trId, "2");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -49,7 +49,7 @@ function writeSearchHistory(items: DashboardStockSearchHistoryItem[]) {
|
||||
*/
|
||||
export function useStockSearch() {
|
||||
// ========== SEARCH STATE ==========
|
||||
const [keyword, setKeyword] = useState("삼성전자");
|
||||
const [keyword, setKeyword] = useState("");
|
||||
const [searchResults, setSearchResults] = useState<DashboardStockSearchItem[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
|
||||
118
features/trade/hooks/useTradeSearchPanel.ts
Normal file
118
features/trade/hooks/useTradeSearchPanel.ts
Normal file
@@ -0,0 +1,118 @@
|
||||
import {
|
||||
type FocusEvent,
|
||||
type KeyboardEvent,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
|
||||
|
||||
interface UseTradeSearchPanelParams {
|
||||
canSearch: boolean;
|
||||
keyword: string;
|
||||
verifiedCredentials: KisRuntimeCredentials | null;
|
||||
search: (query: string, credentials: KisRuntimeCredentials | null) => void;
|
||||
clearSearch: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 트레이드 검색 패널(열림/닫힘/자동검색/포커스 이탈) UI 상태를 관리합니다.
|
||||
* @see features/trade/components/TradeContainer.tsx TradeContainer에서 검색 관련 상태 조합을 단순화하기 위해 사용합니다.
|
||||
* @see features/trade/components/search/TradeSearchSection.tsx 검색 UI 이벤트 핸들러를 전달합니다.
|
||||
*/
|
||||
export function useTradeSearchPanel({
|
||||
canSearch,
|
||||
keyword,
|
||||
verifiedCredentials,
|
||||
search,
|
||||
clearSearch,
|
||||
}: UseTradeSearchPanelParams) {
|
||||
// [Ref] 종목 선택 직후 자동 검색을 1회 건너뛰기 위한 플래그
|
||||
const skipNextAutoSearchRef = useRef(false);
|
||||
// [Ref] 검색 패널 루트 (포커스 아웃 감지 범위)
|
||||
const searchShellRef = useRef<HTMLDivElement | null>(null);
|
||||
// [State] 검색 패널 열림 상태
|
||||
const [isSearchPanelOpen, setIsSearchPanelOpen] = useState(false);
|
||||
|
||||
/**
|
||||
* @description 다음 자동 검색 사이클 1회를 건너뛰도록 표시합니다.
|
||||
* @see features/trade/components/TradeContainer.tsx handleSelectStock 종목 선택 직후 중복 검색 방지에 사용합니다.
|
||||
*/
|
||||
const markSkipNextAutoSearch = useCallback(() => {
|
||||
skipNextAutoSearchRef.current = true;
|
||||
}, []);
|
||||
|
||||
const closeSearchPanel = useCallback(() => {
|
||||
setIsSearchPanelOpen(false);
|
||||
}, []);
|
||||
|
||||
const openSearchPanel = useCallback(() => {
|
||||
if (!canSearch) return;
|
||||
setIsSearchPanelOpen(true);
|
||||
}, [canSearch]);
|
||||
|
||||
/**
|
||||
* @description 검색 박스에서 포커스가 완전히 벗어나면 드롭다운을 닫습니다.
|
||||
* @see features/trade/components/search/TradeSearchSection.tsx onBlurCapture 이벤트로 연결됩니다.
|
||||
*/
|
||||
const handleSearchShellBlur = useCallback(
|
||||
(event: FocusEvent<HTMLDivElement>) => {
|
||||
const nextTarget = event.relatedTarget as Node | null;
|
||||
if (nextTarget && searchShellRef.current?.contains(nextTarget)) return;
|
||||
closeSearchPanel();
|
||||
},
|
||||
[closeSearchPanel],
|
||||
);
|
||||
|
||||
/**
|
||||
* @description ESC 키 입력 시 검색 드롭다운을 닫고 포커스를 해제합니다.
|
||||
* @see features/trade/components/search/TradeSearchSection.tsx onKeyDownCapture 이벤트로 연결됩니다.
|
||||
*/
|
||||
const handleSearchShellKeyDown = useCallback(
|
||||
(event: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key !== "Escape") return;
|
||||
closeSearchPanel();
|
||||
(event.target as HTMLElement | null)?.blur?.();
|
||||
},
|
||||
[closeSearchPanel],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// [Step 1] 종목 선택 직후 1회 자동 검색 스킵 처리
|
||||
if (skipNextAutoSearchRef.current) {
|
||||
skipNextAutoSearchRef.current = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// [Step 2] 인증 불가 상태면 검색 결과를 즉시 정리
|
||||
if (!canSearch) {
|
||||
clearSearch();
|
||||
return;
|
||||
}
|
||||
|
||||
const trimmed = keyword.trim();
|
||||
// [Step 3] 입력값이 비어 있으면 검색 상태 초기화
|
||||
if (!trimmed) {
|
||||
clearSearch();
|
||||
return;
|
||||
}
|
||||
|
||||
// [Step 4] 입력 디바운스 후 검색 실행
|
||||
const timer = window.setTimeout(() => {
|
||||
search(trimmed, verifiedCredentials);
|
||||
}, 220);
|
||||
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [canSearch, keyword, verifiedCredentials, search, clearSearch]);
|
||||
|
||||
return {
|
||||
searchShellRef,
|
||||
isSearchPanelOpen: canSearch && isSearchPanelOpen,
|
||||
markSkipNextAutoSearch,
|
||||
openSearchPanel,
|
||||
closeSearchPanel,
|
||||
handleSearchShellBlur,
|
||||
handleSearchShellKeyDown,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user