대시보드 중간 커밋
This commit is contained in:
291
features/dashboard/hooks/useKisTradeWebSocket.ts
Normal file
291
features/dashboard/hooks/useKisTradeWebSocket.ts
Normal file
@@ -0,0 +1,291 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
type KisRuntimeCredentials,
|
||||
useKisRuntimeStore,
|
||||
} from "@/features/dashboard/store/use-kis-runtime-store";
|
||||
import type {
|
||||
DashboardRealtimeTradeTick,
|
||||
DashboardStockOrderBookResponse,
|
||||
StockCandlePoint,
|
||||
} from "@/features/dashboard/types/dashboard.types";
|
||||
import {
|
||||
appendRealtimeTick,
|
||||
buildKisRealtimeMessage,
|
||||
formatRealtimeTickTime,
|
||||
parseKisRealtimeOrderbook,
|
||||
parseKisRealtimeTickBatch,
|
||||
toTickOrderValue,
|
||||
} from "@/features/dashboard/utils/kis-realtime.utils";
|
||||
|
||||
// ─── TR ID 상수 ─────────────────────────────────────────
|
||||
const TRADE_TR_ID = "H0STCNT0"; // 체결 (실전/모의 공통)
|
||||
const TRADE_TR_ID_OVERTIME = "H0STOUP0"; // 시간외 단일가
|
||||
const ORDERBOOK_TR_ID = "H0STASP0"; // 호가 (정규장)
|
||||
const ORDERBOOK_TR_ID_OVERTIME = "H0STOAA0"; // 호가 (시간외)
|
||||
|
||||
const MAX_TRADE_TICKS = 10;
|
||||
|
||||
// ─── 시간대별 TR ID 선택 ────────────────────────────────
|
||||
|
||||
function isOvertimeHours() {
|
||||
const now = new Date();
|
||||
const t = now.getHours() * 100 + now.getMinutes();
|
||||
return t >= 1600 && t < 1800;
|
||||
}
|
||||
|
||||
function resolveTradeTrId(env: KisRuntimeCredentials["tradingEnv"]) {
|
||||
if (env === "mock") return TRADE_TR_ID;
|
||||
return isOvertimeHours() ? TRADE_TR_ID_OVERTIME : TRADE_TR_ID;
|
||||
}
|
||||
|
||||
function resolveOrderBookTrId() {
|
||||
return isOvertimeHours() ? ORDERBOOK_TR_ID_OVERTIME : ORDERBOOK_TR_ID;
|
||||
}
|
||||
|
||||
// ─── 메인 훅 ────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* 통합 실시간 웹소켓 훅 — 체결(H0STCNT0) + 호가(H0STASP0)를 단일 WS로 수신합니다.
|
||||
*
|
||||
* @param symbol 종목코드
|
||||
* @param credentials KIS 인증 정보
|
||||
* @param isVerified 인증 완료 여부
|
||||
* @param onTick 체결 콜백 (StockHeader 갱신용)
|
||||
* @param options.orderBookSymbol 호가 구독 종목코드
|
||||
* @param options.onOrderBookMessage 호가 수신 콜백
|
||||
*/
|
||||
export function useKisTradeWebSocket(
|
||||
symbol: string | undefined,
|
||||
credentials: KisRuntimeCredentials | null,
|
||||
isVerified: boolean,
|
||||
onTick?: (tick: DashboardRealtimeTradeTick) => void,
|
||||
options?: {
|
||||
orderBookSymbol?: string;
|
||||
onOrderBookMessage?: (data: DashboardStockOrderBookResponse) => void;
|
||||
},
|
||||
) {
|
||||
const [latestTick, setLatestTick] =
|
||||
useState<DashboardRealtimeTradeTick | null>(null);
|
||||
const [realtimeCandles, setRealtimeCandles] = useState<StockCandlePoint[]>(
|
||||
[],
|
||||
);
|
||||
const [recentTradeTicks, setRecentTradeTicks] = useState<
|
||||
DashboardRealtimeTradeTick[]
|
||||
>([]);
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [lastTickAt, setLastTickAt] = useState<number | null>(null);
|
||||
|
||||
const socketRef = useRef<WebSocket | null>(null);
|
||||
const approvalKeyRef = useRef<string | null>(null);
|
||||
const lastTickOrderRef = useRef<number>(-1);
|
||||
const seenTickRef = useRef<Set<string>>(new Set());
|
||||
|
||||
const trId = credentials ? resolveTradeTrId(credentials.tradingEnv) : null;
|
||||
const obSymbol = options?.orderBookSymbol;
|
||||
const onOrderBookMsg = options?.onOrderBookMessage;
|
||||
const obTrId = obSymbol ? resolveOrderBookTrId() : null;
|
||||
|
||||
// 8초간 데이터 없을 시 안내 메시지
|
||||
useEffect(() => {
|
||||
if (!isConnected || lastTickAt) return;
|
||||
|
||||
const timer = window.setTimeout(() => {
|
||||
setError(
|
||||
"실시간 연결은 되었지만 체결 데이터가 없습니다. 장중(09:00~15:30)인지 확인해 주세요.",
|
||||
);
|
||||
}, 8000);
|
||||
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [isConnected, lastTickAt]);
|
||||
|
||||
// ─── 웹소켓 연결 ─────────────────────────────────────
|
||||
useEffect(() => {
|
||||
setLatestTick(null);
|
||||
setRealtimeCandles([]);
|
||||
setRecentTradeTicks([]);
|
||||
setError(null);
|
||||
seenTickRef.current.clear();
|
||||
|
||||
if (!symbol || !isVerified || !credentials) {
|
||||
socketRef.current?.close();
|
||||
socketRef.current = null;
|
||||
approvalKeyRef.current = null;
|
||||
setIsConnected(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let disposed = false;
|
||||
let socket: WebSocket | null = null;
|
||||
const currentTrId = resolveTradeTrId(credentials.tradingEnv);
|
||||
|
||||
const connect = async () => {
|
||||
try {
|
||||
setError(null);
|
||||
setIsConnected(false);
|
||||
|
||||
const approvalKey = await useKisRuntimeStore
|
||||
.getState()
|
||||
.getOrFetchApprovalKey();
|
||||
|
||||
if (!approvalKey) throw new Error("웹소켓 승인키 발급에 실패했습니다.");
|
||||
if (disposed) return;
|
||||
|
||||
approvalKeyRef.current = approvalKey;
|
||||
|
||||
const wsBase =
|
||||
process.env.NEXT_PUBLIC_KIS_WS_URL ||
|
||||
"ws://ops.koreainvestment.com:21000";
|
||||
socket = new WebSocket(`${wsBase}/tryitout/${currentTrId}`);
|
||||
socketRef.current = socket;
|
||||
|
||||
// ── onopen: 체결 + 호가 구독 ──
|
||||
socket.onopen = () => {
|
||||
if (disposed || !approvalKeyRef.current) return;
|
||||
|
||||
socket?.send(
|
||||
JSON.stringify(
|
||||
buildKisRealtimeMessage(
|
||||
approvalKeyRef.current,
|
||||
symbol,
|
||||
currentTrId,
|
||||
"1",
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if (obSymbol && obTrId) {
|
||||
socket?.send(
|
||||
JSON.stringify(
|
||||
buildKisRealtimeMessage(
|
||||
approvalKeyRef.current,
|
||||
obSymbol,
|
||||
obTrId,
|
||||
"1",
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
setIsConnected(true);
|
||||
};
|
||||
|
||||
// ── onmessage: TR ID 기반 분기 ──
|
||||
socket.onmessage = (event) => {
|
||||
if (disposed || typeof event.data !== "string") return;
|
||||
|
||||
// 호가 메시지 확인
|
||||
if (obSymbol && onOrderBookMsg) {
|
||||
const ob = parseKisRealtimeOrderbook(event.data, obSymbol);
|
||||
if (ob) {
|
||||
if (credentials) ob.tradingEnv = credentials.tradingEnv;
|
||||
onOrderBookMsg(ob);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 체결 메시지 파싱
|
||||
const ticks = parseKisRealtimeTickBatch(event.data, symbol);
|
||||
if (ticks.length === 0) return;
|
||||
|
||||
// 중복 제거 (TradeTape용)
|
||||
const meaningful = ticks.filter((t) => t.tradeVolume > 0);
|
||||
const deduped = meaningful.filter((t) => {
|
||||
const key = `${t.tickTime}-${t.price}-${t.tradeVolume}`;
|
||||
if (seenTickRef.current.has(key)) return false;
|
||||
seenTickRef.current.add(key);
|
||||
return true;
|
||||
});
|
||||
|
||||
// 최신 틱 → Header
|
||||
const latest = ticks[ticks.length - 1];
|
||||
setLatestTick(latest);
|
||||
|
||||
// 캔들 → Chart
|
||||
const order = toTickOrderValue(latest.tickTime);
|
||||
if (order > 0 && lastTickOrderRef.current <= order) {
|
||||
lastTickOrderRef.current = order;
|
||||
setRealtimeCandles((prev) =>
|
||||
appendRealtimeTick(prev, {
|
||||
time: formatRealtimeTickTime(latest.tickTime),
|
||||
price: latest.price,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
// 체결 테이프
|
||||
if (deduped.length > 0) {
|
||||
setRecentTradeTicks((prev) =>
|
||||
[...deduped.reverse(), ...prev].slice(0, MAX_TRADE_TICKS),
|
||||
);
|
||||
}
|
||||
|
||||
setError(null);
|
||||
setLastTickAt(Date.now());
|
||||
onTick?.(latest);
|
||||
};
|
||||
|
||||
socket.onerror = () => {
|
||||
if (!disposed) setIsConnected(false);
|
||||
};
|
||||
socket.onclose = () => {
|
||||
if (!disposed) setIsConnected(false);
|
||||
};
|
||||
} catch (err) {
|
||||
if (disposed) return;
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "실시간 웹소켓 초기화 중 오류가 발생했습니다.",
|
||||
);
|
||||
setIsConnected(false);
|
||||
}
|
||||
};
|
||||
|
||||
void connect();
|
||||
const seenRef = seenTickRef.current;
|
||||
|
||||
// ── cleanup: 구독 해제 ──
|
||||
return () => {
|
||||
disposed = true;
|
||||
setIsConnected(false);
|
||||
|
||||
const key = approvalKeyRef.current;
|
||||
if (socket?.readyState === WebSocket.OPEN && key) {
|
||||
socket.send(
|
||||
JSON.stringify(
|
||||
buildKisRealtimeMessage(key, symbol, currentTrId, "2"),
|
||||
),
|
||||
);
|
||||
if (obSymbol && obTrId) {
|
||||
socket.send(
|
||||
JSON.stringify(buildKisRealtimeMessage(key, obSymbol, obTrId, "2")),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
socket?.close();
|
||||
if (socketRef.current === socket) socketRef.current = null;
|
||||
approvalKeyRef.current = null;
|
||||
seenRef.clear();
|
||||
};
|
||||
}, [
|
||||
isVerified,
|
||||
symbol,
|
||||
credentials,
|
||||
onTick,
|
||||
obSymbol,
|
||||
obTrId,
|
||||
onOrderBookMsg,
|
||||
]);
|
||||
|
||||
return {
|
||||
latestTick,
|
||||
realtimeCandles,
|
||||
recentTradeTicks,
|
||||
isConnected,
|
||||
error,
|
||||
lastTickAt,
|
||||
realtimeTrId: trId ?? TRADE_TR_ID,
|
||||
};
|
||||
}
|
||||
61
features/dashboard/hooks/useOrder.ts
Normal file
61
features/dashboard/hooks/useOrder.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import type { KisRuntimeCredentials } from "@/features/dashboard/store/use-kis-runtime-store";
|
||||
import type {
|
||||
DashboardStockCashOrderRequest,
|
||||
DashboardStockCashOrderResponse,
|
||||
} from "@/features/dashboard/types/dashboard.types";
|
||||
import { fetchOrderCash } from "@/features/dashboard/apis/kis-stock.api";
|
||||
|
||||
export function useOrder() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [result, setResult] = useState<DashboardStockCashOrderResponse | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const placeOrder = useCallback(
|
||||
async (
|
||||
request: DashboardStockCashOrderRequest,
|
||||
credentials: KisRuntimeCredentials | null,
|
||||
) => {
|
||||
if (!credentials) {
|
||||
setError("KIS API 자격 증명이 없습니다.");
|
||||
return null;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
setResult(null);
|
||||
|
||||
try {
|
||||
const data = await fetchOrderCash(request, credentials);
|
||||
setResult(data);
|
||||
return data;
|
||||
} catch (err) {
|
||||
const message =
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "주문 처리 중 오류가 발생했습니다.";
|
||||
setError(message);
|
||||
return null;
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
setError(null);
|
||||
setResult(null);
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
placeOrder,
|
||||
isLoading,
|
||||
error,
|
||||
result,
|
||||
reset,
|
||||
};
|
||||
}
|
||||
91
features/dashboard/hooks/useOrderBook.ts
Normal file
91
features/dashboard/hooks/useOrderBook.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { KisRuntimeCredentials } from "@/features/dashboard/store/use-kis-runtime-store";
|
||||
import type { DashboardStockOrderBookResponse } from "@/features/dashboard/types/dashboard.types";
|
||||
import { fetchStockOrderBook } from "@/features/dashboard/apis/kis-stock.api";
|
||||
import { toast } from "sonner";
|
||||
|
||||
/**
|
||||
* @description 초기 REST 호가를 한 번 조회하고, 이후에는 웹소켓 호가를 우선 사용합니다.
|
||||
* 웹소켓 호가 데이터는 DashboardContainer에서 useKisTradeWebSocket을 통해
|
||||
* 단일 WebSocket으로 수신되어 externalRealtimeOrderBook으로 주입됩니다.
|
||||
* @see features/dashboard/components/DashboardContainer.tsx 호가 데이터 흐름
|
||||
* @see features/dashboard/components/orderbook/OrderBook.tsx 호가창 렌더링 데이터 공급
|
||||
*/
|
||||
export function useOrderBook(
|
||||
symbol: string | undefined,
|
||||
market: "KOSPI" | "KOSDAQ" | undefined,
|
||||
credentials: KisRuntimeCredentials | null,
|
||||
isVerified: boolean,
|
||||
options: {
|
||||
enabled?: boolean;
|
||||
/** 체결 WS에서 받은 실시간 호가 데이터 (단일 WS 통합) */
|
||||
externalRealtimeOrderBook?: DashboardStockOrderBookResponse | null;
|
||||
} = {},
|
||||
) {
|
||||
const { enabled = true, externalRealtimeOrderBook = null } = options;
|
||||
const isRequestEnabled = enabled && !!symbol && !!credentials;
|
||||
const requestSeqRef = useRef(0);
|
||||
const lastErrorToastRef = useRef<string>("");
|
||||
|
||||
const [initialData, setInitialData] =
|
||||
useState<DashboardStockOrderBookResponse | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isRequestEnabled || !symbol || !credentials) {
|
||||
return;
|
||||
}
|
||||
|
||||
const requestSeq = ++requestSeqRef.current;
|
||||
let isDisposed = false;
|
||||
|
||||
const loadInitialOrderBook = async () => {
|
||||
setInitialData(null);
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const data = await fetchStockOrderBook(symbol, credentials);
|
||||
if (isDisposed || requestSeq !== requestSeqRef.current) return;
|
||||
setInitialData(data);
|
||||
} catch (err) {
|
||||
if (isDisposed || requestSeq !== requestSeqRef.current) return;
|
||||
console.error("Failed to fetch initial orderbook:", err);
|
||||
const message =
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "호가 정보를 불러오지 못했습니다. 잠시 후 다시 시도해주세요.";
|
||||
setError(message);
|
||||
|
||||
if (lastErrorToastRef.current !== message) {
|
||||
lastErrorToastRef.current = message;
|
||||
toast.error(message);
|
||||
}
|
||||
} finally {
|
||||
if (isDisposed || requestSeq !== requestSeqRef.current) return;
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
void loadInitialOrderBook();
|
||||
|
||||
return () => {
|
||||
isDisposed = true;
|
||||
};
|
||||
}, [isRequestEnabled, symbol, credentials]);
|
||||
|
||||
// 외부 실시간 호가 → 초기 데이터 → null 순 우선
|
||||
const orderBook = isRequestEnabled
|
||||
? (externalRealtimeOrderBook ?? initialData)
|
||||
: null;
|
||||
const mergedError = isRequestEnabled ? error : null;
|
||||
const mergedLoading = isRequestEnabled ? isLoading && !orderBook : false;
|
||||
|
||||
return {
|
||||
orderBook,
|
||||
isLoading: mergedLoading,
|
||||
error: mergedError,
|
||||
isWsConnected: !!externalRealtimeOrderBook,
|
||||
};
|
||||
}
|
||||
118
features/dashboard/hooks/useStockOverview.ts
Normal file
118
features/dashboard/hooks/useStockOverview.ts
Normal file
@@ -0,0 +1,118 @@
|
||||
import { useCallback, useState, useTransition } from "react";
|
||||
import type { KisRuntimeCredentials } from "@/features/dashboard/store/use-kis-runtime-store";
|
||||
import type {
|
||||
DashboardMarketPhase,
|
||||
DashboardPriceSource,
|
||||
DashboardRealtimeTradeTick,
|
||||
DashboardStockSearchItem,
|
||||
DashboardStockItem,
|
||||
} from "@/features/dashboard/types/dashboard.types";
|
||||
import { fetchStockOverview } from "@/features/dashboard/apis/kis-stock.api";
|
||||
|
||||
interface OverviewMeta {
|
||||
priceSource: DashboardPriceSource;
|
||||
marketPhase: DashboardMarketPhase;
|
||||
fetchedAt: string;
|
||||
}
|
||||
|
||||
export function useStockOverview() {
|
||||
const [selectedStock, setSelectedStock] = useState<DashboardStockItem | null>(
|
||||
null,
|
||||
);
|
||||
const [meta, setMeta] = useState<OverviewMeta | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isLoading, startTransition] = useTransition();
|
||||
|
||||
const loadOverview = useCallback(
|
||||
(
|
||||
symbol: string,
|
||||
credentials: KisRuntimeCredentials | null,
|
||||
marketHint?: DashboardStockSearchItem["market"],
|
||||
) => {
|
||||
if (!credentials) return;
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
setError(null);
|
||||
const data = await fetchStockOverview(symbol, credentials);
|
||||
setSelectedStock({
|
||||
...data.stock,
|
||||
market: marketHint ?? data.stock.market,
|
||||
});
|
||||
setMeta({
|
||||
priceSource: data.priceSource,
|
||||
marketPhase: data.marketPhase,
|
||||
fetchedAt: data.fetchedAt,
|
||||
});
|
||||
} catch (err) {
|
||||
const message =
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "종목 조회 중 오류가 발생했습니다.";
|
||||
setError(message);
|
||||
setMeta(null);
|
||||
}
|
||||
});
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// 실시간 체결 데이터 수신 시 헤더/차트 기준 가격을 갱신합니다.
|
||||
const updateRealtimeTradeTick = useCallback(
|
||||
(tick: DashboardRealtimeTradeTick) => {
|
||||
setSelectedStock((prev) => {
|
||||
if (!prev) return prev;
|
||||
const { price, accumulatedVolume, change, changeRate, tickTime } = tick;
|
||||
const pointTime =
|
||||
tickTime && tickTime.length === 6
|
||||
? `${tickTime.slice(0, 2)}:${tickTime.slice(2, 4)}`
|
||||
: "실시간";
|
||||
|
||||
const nextChange = change;
|
||||
const nextChangeRate = Number.isFinite(changeRate)
|
||||
? changeRate
|
||||
: prev.prevClose > 0
|
||||
? (nextChange / prev.prevClose) * 100
|
||||
: prev.changeRate;
|
||||
const nextHigh = prev.high > 0 ? Math.max(prev.high, price) : price;
|
||||
const nextLow = prev.low > 0 ? Math.min(prev.low, price) : price;
|
||||
const nextCandles =
|
||||
prev.candles.length > 0 &&
|
||||
prev.candles[prev.candles.length - 1]?.time === pointTime
|
||||
? [
|
||||
...prev.candles.slice(0, -1),
|
||||
{
|
||||
...prev.candles[prev.candles.length - 1],
|
||||
time: pointTime,
|
||||
price,
|
||||
},
|
||||
]
|
||||
: [...prev.candles, { time: pointTime, price }].slice(-80);
|
||||
|
||||
return {
|
||||
...prev,
|
||||
currentPrice: price,
|
||||
change: nextChange,
|
||||
changeRate: nextChangeRate,
|
||||
high: nextHigh,
|
||||
low: nextLow,
|
||||
volume: accumulatedVolume > 0 ? accumulatedVolume : prev.volume,
|
||||
candles: nextCandles,
|
||||
};
|
||||
});
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
return {
|
||||
selectedStock,
|
||||
setSelectedStock,
|
||||
meta,
|
||||
setMeta,
|
||||
error,
|
||||
setError,
|
||||
isLoading,
|
||||
loadOverview,
|
||||
updateRealtimeTradeTick,
|
||||
};
|
||||
}
|
||||
91
features/dashboard/hooks/useStockSearch.ts
Normal file
91
features/dashboard/hooks/useStockSearch.ts
Normal file
@@ -0,0 +1,91 @@
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import type { KisRuntimeCredentials } from "@/features/dashboard/store/use-kis-runtime-store";
|
||||
import type { DashboardStockSearchItem } from "@/features/dashboard/types/dashboard.types";
|
||||
import { fetchStockSearch } from "@/features/dashboard/apis/kis-stock.api";
|
||||
|
||||
export function useStockSearch() {
|
||||
const [keyword, setKeyword] = useState("삼성전자");
|
||||
const [searchResults, setSearchResults] = useState<
|
||||
DashboardStockSearchItem[]
|
||||
>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
const requestIdRef = useRef(0);
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
|
||||
const loadSearch = useCallback(async (query: string) => {
|
||||
const requestId = ++requestIdRef.current;
|
||||
const controller = new AbortController();
|
||||
abortRef.current?.abort();
|
||||
abortRef.current = controller;
|
||||
|
||||
setIsSearching(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const data = await fetchStockSearch(query, controller.signal);
|
||||
if (requestId === requestIdRef.current) {
|
||||
setSearchResults(data.items);
|
||||
}
|
||||
return data.items;
|
||||
} catch (err) {
|
||||
if (controller.signal.aborted) {
|
||||
return [];
|
||||
}
|
||||
if (requestId === requestIdRef.current) {
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "종목 검색 중 오류가 발생했습니다.",
|
||||
);
|
||||
}
|
||||
return [];
|
||||
} finally {
|
||||
if (requestId === requestIdRef.current) {
|
||||
setIsSearching(false);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const search = useCallback(
|
||||
(query: string, credentials: KisRuntimeCredentials | null) => {
|
||||
if (!credentials) {
|
||||
setError("API 키 검증이 필요합니다.");
|
||||
setSearchResults([]);
|
||||
setIsSearching(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const trimmed = query.trim();
|
||||
if (!trimmed) {
|
||||
abortRef.current?.abort();
|
||||
setSearchResults([]);
|
||||
setError(null);
|
||||
setIsSearching(false);
|
||||
return;
|
||||
}
|
||||
|
||||
void loadSearch(trimmed);
|
||||
},
|
||||
[loadSearch],
|
||||
);
|
||||
|
||||
const clearSearch = useCallback(() => {
|
||||
abortRef.current?.abort();
|
||||
setSearchResults([]);
|
||||
setError(null);
|
||||
setIsSearching(false);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
keyword,
|
||||
setKeyword,
|
||||
searchResults,
|
||||
setSearchResults,
|
||||
error,
|
||||
setError,
|
||||
isSearching,
|
||||
search,
|
||||
clearSearch,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user