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

features/trade/hooks/useTradeTickSubscription.ts

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