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

features/kis-realtime/hooks/useKisWebSocket.ts

@@ -22,7 +22,9 @@ export function useKisWebSocket({
   onMessage,
   enabled = true,
 }: UseKisWebSocketParams) {
-  const { subscribe, connect, isConnected } = useKisWebSocketStore();
+  const subscribeRef = useRef(useKisWebSocketStore.getState().subscribe);
+  const connectRef = useRef(useKisWebSocketStore.getState().connect);
+  const { isConnected } = useKisWebSocketStore();
   const callbackRef = useRef(onMessage);
 
   // 콜백 함수가 바뀌어도 재구독하지 않도록 ref 사용
@@ -34,10 +36,10 @@ export function useKisWebSocket({
     if (!enabled || !symbol || !trId) return;
 
     // 연결 시도 (이미 연결 중이면 스토어에서 무시됨)
-    connect();
+    connectRef.current();
 
     // 구독 요청
-    const unsubscribe = subscribe(trId, symbol, (data) => {
+    const unsubscribe = subscribeRef.current(trId, symbol, (data) => {
       callbackRef.current?.(data);
     });
 
@@ -45,7 +47,7 @@ export function useKisWebSocket({
     return () => {
       unsubscribe();
     };
-  }, [symbol, trId, enabled, connect, subscribe]);
+  }, [symbol, trId, enabled]);
 
   return { isConnected };
 }