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

features/trade/hooks/useOrderbookSubscription.ts

@@ -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]);
 }