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

features/dashboard/hooks/use-holdings-realtime.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { DashboardHoldingItem } from "@/features/dashboard/types/dashboard.types";
 import {
   type KisRealtimeStockTick,
@@ -21,10 +21,13 @@ export function useHoldingsRealtime(holdings: DashboardHoldingItem[]) {
   const [realtimeData, setRealtimeData] = useState<
     Record<string, KisRealtimeStockTick>
   >({});
-  const { subscribe, connect, isConnected } = useKisWebSocketStore();
+  const subscribeRef = useRef(useKisWebSocketStore.getState().subscribe);
+  const connectRef = useRef(useKisWebSocketStore.getState().connect);
+  const { isConnected } = useKisWebSocketStore();
 
   const uniqueSymbols = useMemo(
-    () => Array.from(new Set((holdings ?? []).map((item) => item.symbol))).sort(),
+    () =>
+      Array.from(new Set((holdings ?? []).map((item) => item.symbol))).sort(),
     [holdings],
   );
   const symbolKey = useMemo(() => uniqueSymbols.join(","), [uniqueSymbols]);
@@ -37,40 +40,42 @@ export function useHoldingsRealtime(holdings: DashboardHoldingItem[]) {
       return () => window.clearTimeout(resetTimerId);
     }
 
-    if (!isConnected) {
-      connect();
-    }
+    connectRef.current();
 
     const unsubs: (() => void)[] = [];
 
     uniqueSymbols.forEach((symbol) => {
-      const unsub = subscribe(STOCK_REALTIME_TR_ID, symbol, (data) => {
-        const tick = parseKisRealtimeStockTick(data);
-        if (tick) {
-          setRealtimeData((prev) => {
-            const prevTick = prev[tick.symbol];
-            if (
-              prevTick?.currentPrice === tick.currentPrice &&
-              prevTick?.change === tick.change &&
-              prevTick?.changeRate === tick.changeRate
-            ) {
-              return prev;
-            }
+      const unsub = subscribeRef.current(
+        STOCK_REALTIME_TR_ID,
+        symbol,
+        (data: string) => {
+          const tick = parseKisRealtimeStockTick(data);
+          if (tick) {
+            setRealtimeData((prev) => {
+              const prevTick = prev[tick.symbol];
+              if (
+                prevTick?.currentPrice === tick.currentPrice &&
+                prevTick?.change === tick.change &&
+                prevTick?.changeRate === tick.changeRate
+              ) {
+                return prev;
+              }
 
-            return {
-              ...prev,
-              [tick.symbol]: tick,
-            };
-          });
-        }
-      });
+              return {
+                ...prev,
+                [tick.symbol]: tick,
+              };
+            });
+          }
+        },
+      );
       unsubs.push(unsub);
     });
 
     return () => {
       unsubs.forEach((unsub) => unsub());
     };
-  }, [symbolKey, uniqueSymbols, connect, subscribe, isConnected]);
+  }, [symbolKey, uniqueSymbols]);
 
   return { realtimeData, isConnected };
 }