트레이딩창 UI 배치 및 UX 수정 및 기획서 추가

This commit is contained in:
2026-02-24 15:43:56 +09:00
parent 19ebb1c6ea
commit c53f79a86f
16 changed files with 1553 additions and 450 deletions

View File

@@ -35,7 +35,8 @@ export function useOrderbookSubscription({
marketSession,
onOrderBookMessage,
}: UseOrderbookSubscriptionParams) {
const { subscribe, connect } = useKisWebSocketStore();
const subscribeRef = useRef(useKisWebSocketStore.getState().subscribe);
const connectRef = useRef(useKisWebSocketStore.getState().connect);
const onOrderBookMessageRef = useRef(onOrderBookMessage);
const activeOrderBookTrIdRef = useRef<string | null>(null);
const activeOrderBookTrUpdatedAtRef = useRef(0);
@@ -47,7 +48,7 @@ export function useOrderbookSubscription({
useEffect(() => {
if (!symbol || !isVerified || !credentials) return;
connect();
connectRef.current();
const trIds = resolveOrderBookTrIds(
credentials.tradingEnv,
@@ -83,7 +84,9 @@ export function useOrderbookSubscription({
};
for (const trId of trIds) {
unsubscribers.push(subscribe(trId, symbol, handleOrderBookMessage));
unsubscribers.push(
subscribeRef.current(trId, symbol, handleOrderBookMessage),
);
}
return () => {
@@ -91,5 +94,5 @@ export function useOrderbookSubscription({
activeOrderBookTrIdRef.current = null;
activeOrderBookTrUpdatedAtRef.current = 0;
};
}, [symbol, market, isVerified, credentials, marketSession, connect, subscribe]);
}, [symbol, market, isVerified, credentials, marketSession]);
}

View File

@@ -45,7 +45,8 @@ export function useTradeTickSubscription({
const activeTradeTrIdRef = useRef<string | null>(null);
const activeTradeTrUpdatedAtRef = useRef(0);
const { subscribe, connect } = useKisWebSocketStore();
const subscribeRef = useRef(useKisWebSocketStore.getState().subscribe);
const connectRef = useRef(useKisWebSocketStore.getState().connect);
const onTickRef = useRef(onTick);
useEffect(() => {
@@ -73,7 +74,7 @@ export function useTradeTickSubscription({
useEffect(() => {
if (!symbol || !isVerified || !credentials) return;
connect();
connectRef.current();
const trIds = resolveTradeTrIds(credentials.tradingEnv, marketSession);
const unsubscribers: Array<() => void> = [];
@@ -148,13 +149,15 @@ export function useTradeTickSubscription({
};
for (const trId of trIds) {
unsubscribers.push(subscribe(trId, symbol, handleTradeMessage));
unsubscribers.push(
subscribeRef.current(trId, symbol, handleTradeMessage),
);
}
return () => {
unsubscribers.forEach((unsub) => unsub());
};
}, [symbol, isVerified, credentials, marketSession, connect, subscribe]);
}, [symbol, isVerified, credentials, marketSession]);
return { latestTick, recentTradeTicks, lastTickAt };
}