대시보드 중간 커밋

features/dashboard/hooks/useCurrentPrice.ts

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+import type {
+  DashboardRealtimeTradeTick,
+  DashboardStockItem,
+  DashboardStockOrderBookResponse,
+} from "@/features/dashboard/types/dashboard.types";
+
+interface UseCurrentPriceParams {
+  stock?: DashboardStockItem | null;
+  latestTick: DashboardRealtimeTradeTick | null;
+  orderBook: DashboardStockOrderBookResponse | null;
+}
+
+export function useCurrentPrice({
+  stock,
+  latestTick,
+  orderBook,
+}: UseCurrentPriceParams) {
+  return useMemo(() => {
+    let currentPrice = stock?.currentPrice ?? 0;
+    let change = stock?.change ?? 0;
+    let changeRate = stock?.changeRate ?? 0;
+    const prevClose = stock?.prevClose ?? 0;
+
+    // 1. Priority: Realtime Tick (Trade WS)
+    if (latestTick?.price && latestTick.price > 0) {
+      currentPrice = latestTick.price;
+      change = latestTick.change;
+      changeRate = latestTick.changeRate;
+    }
+    // 2. Fallback: OrderBook Best Ask (Proxy for current price if no tick)
+    else if (
+      orderBook?.levels[0]?.askPrice &&
+      orderBook.levels[0].askPrice > 0
+    ) {
+      const askPrice = orderBook.levels[0].askPrice;
+      currentPrice = askPrice;
+
+      // Recalculate change/rate based on prevClose
+      if (prevClose > 0) {
+        change = currentPrice - prevClose;
+        changeRate = (change / prevClose) * 100;
+      }
+    }
+
+    return {
+      currentPrice,
+      change,
+      changeRate,
+      prevClose,
+    };
+  }, [stock, latestTick, orderBook]);
+}

features/dashboard/hooks/useKisTradeWebSocket.ts

@@ -0,0 +1,291 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  type KisRuntimeCredentials,
+  useKisRuntimeStore,
+} from "@/features/dashboard/store/use-kis-runtime-store";
+import type {
+  DashboardRealtimeTradeTick,
+  DashboardStockOrderBookResponse,
+  StockCandlePoint,
+} from "@/features/dashboard/types/dashboard.types";
+import {
+  appendRealtimeTick,
+  buildKisRealtimeMessage,
+  formatRealtimeTickTime,
+  parseKisRealtimeOrderbook,
+  parseKisRealtimeTickBatch,
+  toTickOrderValue,
+} from "@/features/dashboard/utils/kis-realtime.utils";
+
+// ─── TR ID 상수 ─────────────────────────────────────────
+const TRADE_TR_ID = "H0STCNT0"; // 체결 (실전/모의 공통)
+const TRADE_TR_ID_OVERTIME = "H0STOUP0"; // 시간외 단일가
+const ORDERBOOK_TR_ID = "H0STASP0"; // 호가 (정규장)
+const ORDERBOOK_TR_ID_OVERTIME = "H0STOAA0"; // 호가 (시간외)
+
+const MAX_TRADE_TICKS = 10;
+
+// ─── 시간대별 TR ID 선택 ────────────────────────────────
+
+function isOvertimeHours() {
+  const now = new Date();
+  const t = now.getHours() * 100 + now.getMinutes();
+  return t >= 1600 && t < 1800;
+}
+
+function resolveTradeTrId(env: KisRuntimeCredentials["tradingEnv"]) {
+  if (env === "mock") return TRADE_TR_ID;
+  return isOvertimeHours() ? TRADE_TR_ID_OVERTIME : TRADE_TR_ID;
+}
+
+function resolveOrderBookTrId() {
+  return isOvertimeHours() ? ORDERBOOK_TR_ID_OVERTIME : ORDERBOOK_TR_ID;
+}
+
+// ─── 메인 훅 ────────────────────────────────────────────
+
+/**
+ * 통합 실시간 웹소켓 훅 — 체결(H0STCNT0) + 호가(H0STASP0)를 단일 WS로 수신합니다.
+ *
+ * @param symbol 종목코드
+ * @param credentials KIS 인증 정보
+ * @param isVerified 인증 완료 여부
+ * @param onTick 체결 콜백 (StockHeader 갱신용)
+ * @param options.orderBookSymbol 호가 구독 종목코드
+ * @param options.onOrderBookMessage 호가 수신 콜백
+ */
+export function useKisTradeWebSocket(
+  symbol: string | undefined,
+  credentials: KisRuntimeCredentials | null,
+  isVerified: boolean,
+  onTick?: (tick: DashboardRealtimeTradeTick) => void,
+  options?: {
+    orderBookSymbol?: string;
+    onOrderBookMessage?: (data: DashboardStockOrderBookResponse) => void;
+  },
+) {
+  const [latestTick, setLatestTick] =
+    useState<DashboardRealtimeTradeTick | null>(null);
+  const [realtimeCandles, setRealtimeCandles] = useState<StockCandlePoint[]>(
+    [],
+  );
+  const [recentTradeTicks, setRecentTradeTicks] = useState<
+    DashboardRealtimeTradeTick[]
+  >([]);
+  const [isConnected, setIsConnected] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [lastTickAt, setLastTickAt] = useState<number | null>(null);
+
+  const socketRef = useRef<WebSocket | null>(null);
+  const approvalKeyRef = useRef<string | null>(null);
+  const lastTickOrderRef = useRef<number>(-1);
+  const seenTickRef = useRef<Set<string>>(new Set());
+
+  const trId = credentials ? resolveTradeTrId(credentials.tradingEnv) : null;
+  const obSymbol = options?.orderBookSymbol;
+  const onOrderBookMsg = options?.onOrderBookMessage;
+  const obTrId = obSymbol ? resolveOrderBookTrId() : null;
+
+  // 8초간 데이터 없을 시 안내 메시지
+  useEffect(() => {
+    if (!isConnected || lastTickAt) return;
+
+    const timer = window.setTimeout(() => {
+      setError(
+        "실시간 연결은 되었지만 체결 데이터가 없습니다. 장중(09:00~15:30)인지 확인해 주세요.",
+      );
+    }, 8000);
+
+    return () => window.clearTimeout(timer);
+  }, [isConnected, lastTickAt]);
+
+  // ─── 웹소켓 연결 ─────────────────────────────────────
+  useEffect(() => {
+    setLatestTick(null);
+    setRealtimeCandles([]);
+    setRecentTradeTicks([]);
+    setError(null);
+    seenTickRef.current.clear();
+
+    if (!symbol || !isVerified || !credentials) {
+      socketRef.current?.close();
+      socketRef.current = null;
+      approvalKeyRef.current = null;
+      setIsConnected(false);
+      return;
+    }
+
+    let disposed = false;
+    let socket: WebSocket | null = null;
+    const currentTrId = resolveTradeTrId(credentials.tradingEnv);
+
+    const connect = async () => {
+      try {
+        setError(null);
+        setIsConnected(false);
+
+        const approvalKey = await useKisRuntimeStore
+          .getState()
+          .getOrFetchApprovalKey();
+
+        if (!approvalKey) throw new Error("웹소켓 승인키 발급에 실패했습니다.");
+        if (disposed) return;
+
+        approvalKeyRef.current = approvalKey;
+
+        const wsBase =
+          process.env.NEXT_PUBLIC_KIS_WS_URL ||
+          "ws://ops.koreainvestment.com:21000";
+        socket = new WebSocket(`${wsBase}/tryitout/${currentTrId}`);
+        socketRef.current = socket;
+
+        // ── onopen: 체결 + 호가 구독 ──
+        socket.onopen = () => {
+          if (disposed || !approvalKeyRef.current) return;
+
+          socket?.send(
+            JSON.stringify(
+              buildKisRealtimeMessage(
+                approvalKeyRef.current,
+                symbol,
+                currentTrId,
+                "1",
+              ),
+            ),
+          );
+
+          if (obSymbol && obTrId) {
+            socket?.send(
+              JSON.stringify(
+                buildKisRealtimeMessage(
+                  approvalKeyRef.current,
+                  obSymbol,
+                  obTrId,
+                  "1",
+                ),
+              ),
+            );
+          }
+
+          setIsConnected(true);
+        };
+
+        // ── onmessage: TR ID 기반 분기 ──
+        socket.onmessage = (event) => {
+          if (disposed || typeof event.data !== "string") return;
+
+          // 호가 메시지 확인
+          if (obSymbol && onOrderBookMsg) {
+            const ob = parseKisRealtimeOrderbook(event.data, obSymbol);
+            if (ob) {
+              if (credentials) ob.tradingEnv = credentials.tradingEnv;
+              onOrderBookMsg(ob);
+              return;
+            }
+          }
+
+          // 체결 메시지 파싱
+          const ticks = parseKisRealtimeTickBatch(event.data, symbol);
+          if (ticks.length === 0) return;
+
+          // 중복 제거 (TradeTape용)
+          const meaningful = ticks.filter((t) => t.tradeVolume > 0);
+          const deduped = meaningful.filter((t) => {
+            const key = `${t.tickTime}-${t.price}-${t.tradeVolume}`;
+            if (seenTickRef.current.has(key)) return false;
+            seenTickRef.current.add(key);
+            return true;
+          });
+
+          // 최신 틱 → Header
+          const latest = ticks[ticks.length - 1];
+          setLatestTick(latest);
+
+          // 캔들 → Chart
+          const order = toTickOrderValue(latest.tickTime);
+          if (order > 0 && lastTickOrderRef.current <= order) {
+            lastTickOrderRef.current = order;
+            setRealtimeCandles((prev) =>
+              appendRealtimeTick(prev, {
+                time: formatRealtimeTickTime(latest.tickTime),
+                price: latest.price,
+              }),
+            );
+          }
+
+          // 체결 테이프
+          if (deduped.length > 0) {
+            setRecentTradeTicks((prev) =>
+              [...deduped.reverse(), ...prev].slice(0, MAX_TRADE_TICKS),
+            );
+          }
+
+          setError(null);
+          setLastTickAt(Date.now());
+          onTick?.(latest);
+        };
+
+        socket.onerror = () => {
+          if (!disposed) setIsConnected(false);
+        };
+        socket.onclose = () => {
+          if (!disposed) setIsConnected(false);
+        };
+      } catch (err) {
+        if (disposed) return;
+        setError(
+          err instanceof Error
+            ? err.message
+            : "실시간 웹소켓 초기화 중 오류가 발생했습니다.",
+        );
+        setIsConnected(false);
+      }
+    };
+
+    void connect();
+    const seenRef = seenTickRef.current;
+
+    // ── cleanup: 구독 해제 ──
+    return () => {
+      disposed = true;
+      setIsConnected(false);
+
+      const key = approvalKeyRef.current;
+      if (socket?.readyState === WebSocket.OPEN && key) {
+        socket.send(
+          JSON.stringify(
+            buildKisRealtimeMessage(key, symbol, currentTrId, "2"),
+          ),
+        );
+        if (obSymbol && obTrId) {
+          socket.send(
+            JSON.stringify(buildKisRealtimeMessage(key, obSymbol, obTrId, "2")),
+          );
+        }
+      }
+
+      socket?.close();
+      if (socketRef.current === socket) socketRef.current = null;
+      approvalKeyRef.current = null;
+      seenRef.clear();
+    };
+  }, [
+    isVerified,
+    symbol,
+    credentials,
+    onTick,
+    obSymbol,
+    obTrId,
+    onOrderBookMsg,
+  ]);
+
+  return {
+    latestTick,
+    realtimeCandles,
+    recentTradeTicks,
+    isConnected,
+    error,
+    lastTickAt,
+    realtimeTrId: trId ?? TRADE_TR_ID,
+  };
+}

features/dashboard/hooks/useOrder.ts

@@ -0,0 +1,61 @@
+import { useState, useCallback } from "react";
+import type { KisRuntimeCredentials } from "@/features/dashboard/store/use-kis-runtime-store";
+import type {
+  DashboardStockCashOrderRequest,
+  DashboardStockCashOrderResponse,
+} from "@/features/dashboard/types/dashboard.types";
+import { fetchOrderCash } from "@/features/dashboard/apis/kis-stock.api";
+
+export function useOrder() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<DashboardStockCashOrderResponse | null>(
+    null,
+  );
+
+  const placeOrder = useCallback(
+    async (
+      request: DashboardStockCashOrderRequest,
+      credentials: KisRuntimeCredentials | null,
+    ) => {
+      if (!credentials) {
+        setError("KIS API 자격 증명이 없습니다.");
+        return null;
+      }
+
+      setIsLoading(true);
+      setError(null);
+      setResult(null);
+
+      try {
+        const data = await fetchOrderCash(request, credentials);
+        setResult(data);
+        return data;
+      } catch (err) {
+        const message =
+          err instanceof Error
+            ? err.message
+            : "주문 처리 중 오류가 발생했습니다.";
+        setError(message);
+        return null;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [],
+  );
+
+  const reset = useCallback(() => {
+    setError(null);
+    setResult(null);
+    setIsLoading(false);
+  }, []);
+
+  return {
+    placeOrder,
+    isLoading,
+    error,
+    result,
+    reset,
+  };
+}

features/dashboard/hooks/useOrderBook.ts

@@ -0,0 +1,91 @@
+import { useEffect, useRef, useState } from "react";
+import type { KisRuntimeCredentials } from "@/features/dashboard/store/use-kis-runtime-store";
+import type { DashboardStockOrderBookResponse } from "@/features/dashboard/types/dashboard.types";
+import { fetchStockOrderBook } from "@/features/dashboard/apis/kis-stock.api";
+import { toast } from "sonner";
+
+/**
+ * @description 초기 REST 호가를 한 번 조회하고, 이후에는 웹소켓 호가를 우선 사용합니다.
+ * 웹소켓 호가 데이터는 DashboardContainer에서 useKisTradeWebSocket을 통해
+ * 단일 WebSocket으로 수신되어 externalRealtimeOrderBook으로 주입됩니다.
+ * @see features/dashboard/components/DashboardContainer.tsx 호가 데이터 흐름
+ * @see features/dashboard/components/orderbook/OrderBook.tsx 호가창 렌더링 데이터 공급
+ */
+export function useOrderBook(
+  symbol: string | undefined,
+  market: "KOSPI" | "KOSDAQ" | undefined,
+  credentials: KisRuntimeCredentials | null,
+  isVerified: boolean,
+  options: {
+    enabled?: boolean;
+    /** 체결 WS에서 받은 실시간 호가 데이터 (단일 WS 통합) */
+    externalRealtimeOrderBook?: DashboardStockOrderBookResponse | null;
+  } = {},
+) {
+  const { enabled = true, externalRealtimeOrderBook = null } = options;
+  const isRequestEnabled = enabled && !!symbol && !!credentials;
+  const requestSeqRef = useRef(0);
+  const lastErrorToastRef = useRef<string>("");
+
+  const [initialData, setInitialData] =
+    useState<DashboardStockOrderBookResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isRequestEnabled || !symbol || !credentials) {
+      return;
+    }
+
+    const requestSeq = ++requestSeqRef.current;
+    let isDisposed = false;
+
+    const loadInitialOrderBook = async () => {
+      setInitialData(null);
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const data = await fetchStockOrderBook(symbol, credentials);
+        if (isDisposed || requestSeq !== requestSeqRef.current) return;
+        setInitialData(data);
+      } catch (err) {
+        if (isDisposed || requestSeq !== requestSeqRef.current) return;
+        console.error("Failed to fetch initial orderbook:", err);
+        const message =
+          err instanceof Error
+            ? err.message
+            : "호가 정보를 불러오지 못했습니다. 잠시 후 다시 시도해주세요.";
+        setError(message);
+
+        if (lastErrorToastRef.current !== message) {
+          lastErrorToastRef.current = message;
+          toast.error(message);
+        }
+      } finally {
+        if (isDisposed || requestSeq !== requestSeqRef.current) return;
+        setIsLoading(false);
+      }
+    };
+
+    void loadInitialOrderBook();
+
+    return () => {
+      isDisposed = true;
+    };
+  }, [isRequestEnabled, symbol, credentials]);
+
+  // 외부 실시간 호가 → 초기 데이터 → null 순 우선
+  const orderBook = isRequestEnabled
+    ? (externalRealtimeOrderBook ?? initialData)
+    : null;
+  const mergedError = isRequestEnabled ? error : null;
+  const mergedLoading = isRequestEnabled ? isLoading && !orderBook : false;
+
+  return {
+    orderBook,
+    isLoading: mergedLoading,
+    error: mergedError,
+    isWsConnected: !!externalRealtimeOrderBook,
+  };
+}

features/dashboard/hooks/useStockOverview.ts

@@ -0,0 +1,118 @@
+import { useCallback, useState, useTransition } from "react";
+import type { KisRuntimeCredentials } from "@/features/dashboard/store/use-kis-runtime-store";
+import type {
+  DashboardMarketPhase,
+  DashboardPriceSource,
+  DashboardRealtimeTradeTick,
+  DashboardStockSearchItem,
+  DashboardStockItem,
+} from "@/features/dashboard/types/dashboard.types";
+import { fetchStockOverview } from "@/features/dashboard/apis/kis-stock.api";
+
+interface OverviewMeta {
+  priceSource: DashboardPriceSource;
+  marketPhase: DashboardMarketPhase;
+  fetchedAt: string;
+}
+
+export function useStockOverview() {
+  const [selectedStock, setSelectedStock] = useState<DashboardStockItem | null>(
+    null,
+  );
+  const [meta, setMeta] = useState<OverviewMeta | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, startTransition] = useTransition();
+
+  const loadOverview = useCallback(
+    (
+      symbol: string,
+      credentials: KisRuntimeCredentials | null,
+      marketHint?: DashboardStockSearchItem["market"],
+    ) => {
+      if (!credentials) return;
+
+      startTransition(async () => {
+        try {
+          setError(null);
+          const data = await fetchStockOverview(symbol, credentials);
+          setSelectedStock({
+            ...data.stock,
+            market: marketHint ?? data.stock.market,
+          });
+          setMeta({
+            priceSource: data.priceSource,
+            marketPhase: data.marketPhase,
+            fetchedAt: data.fetchedAt,
+          });
+        } catch (err) {
+          const message =
+            err instanceof Error
+              ? err.message
+              : "종목 조회 중 오류가 발생했습니다.";
+          setError(message);
+          setMeta(null);
+        }
+      });
+    },
+    [],
+  );
+
+  // 실시간 체결 데이터 수신 시 헤더/차트 기준 가격을 갱신합니다.
+  const updateRealtimeTradeTick = useCallback(
+    (tick: DashboardRealtimeTradeTick) => {
+      setSelectedStock((prev) => {
+        if (!prev) return prev;
+        const { price, accumulatedVolume, change, changeRate, tickTime } = tick;
+        const pointTime =
+          tickTime && tickTime.length === 6
+            ? `${tickTime.slice(0, 2)}:${tickTime.slice(2, 4)}`
+            : "실시간";
+
+        const nextChange = change;
+        const nextChangeRate = Number.isFinite(changeRate)
+          ? changeRate
+          : prev.prevClose > 0
+            ? (nextChange / prev.prevClose) * 100
+            : prev.changeRate;
+        const nextHigh = prev.high > 0 ? Math.max(prev.high, price) : price;
+        const nextLow = prev.low > 0 ? Math.min(prev.low, price) : price;
+        const nextCandles =
+          prev.candles.length > 0 &&
+          prev.candles[prev.candles.length - 1]?.time === pointTime
+            ? [
+                ...prev.candles.slice(0, -1),
+                {
+                  ...prev.candles[prev.candles.length - 1],
+                  time: pointTime,
+                  price,
+                },
+              ]
+            : [...prev.candles, { time: pointTime, price }].slice(-80);
+
+        return {
+          ...prev,
+          currentPrice: price,
+          change: nextChange,
+          changeRate: nextChangeRate,
+          high: nextHigh,
+          low: nextLow,
+          volume: accumulatedVolume > 0 ? accumulatedVolume : prev.volume,
+          candles: nextCandles,
+        };
+      });
+    },
+    [],
+  );
+
+  return {
+    selectedStock,
+    setSelectedStock,
+    meta,
+    setMeta,
+    error,
+    setError,
+    isLoading,
+    loadOverview,
+    updateRealtimeTradeTick,
+  };
+}

features/dashboard/hooks/useStockSearch.ts

@@ -0,0 +1,91 @@
+import { useCallback, useRef, useState } from "react";
+import type { KisRuntimeCredentials } from "@/features/dashboard/store/use-kis-runtime-store";
+import type { DashboardStockSearchItem } from "@/features/dashboard/types/dashboard.types";
+import { fetchStockSearch } from "@/features/dashboard/apis/kis-stock.api";
+
+export function useStockSearch() {
+  const [keyword, setKeyword] = useState("삼성전자");
+  const [searchResults, setSearchResults] = useState<
+    DashboardStockSearchItem[]
+  >([]);
+  const [error, setError] = useState<string | null>(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const requestIdRef = useRef(0);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const loadSearch = useCallback(async (query: string) => {
+    const requestId = ++requestIdRef.current;
+    const controller = new AbortController();
+    abortRef.current?.abort();
+    abortRef.current = controller;
+
+    setIsSearching(true);
+    setError(null);
+
+    try {
+      const data = await fetchStockSearch(query, controller.signal);
+      if (requestId === requestIdRef.current) {
+        setSearchResults(data.items);
+      }
+      return data.items;
+    } catch (err) {
+      if (controller.signal.aborted) {
+        return [];
+      }
+      if (requestId === requestIdRef.current) {
+        setError(
+          err instanceof Error
+            ? err.message
+            : "종목 검색 중 오류가 발생했습니다.",
+        );
+      }
+      return [];
+    } finally {
+      if (requestId === requestIdRef.current) {
+        setIsSearching(false);
+      }
+    }
+  }, []);
+
+  const search = useCallback(
+    (query: string, credentials: KisRuntimeCredentials | null) => {
+      if (!credentials) {
+        setError("API 키 검증이 필요합니다.");
+        setSearchResults([]);
+        setIsSearching(false);
+        return;
+      }
+
+      const trimmed = query.trim();
+      if (!trimmed) {
+        abortRef.current?.abort();
+        setSearchResults([]);
+        setError(null);
+        setIsSearching(false);
+        return;
+      }
+
+      void loadSearch(trimmed);
+    },
+    [loadSearch],
+  );
+
+  const clearSearch = useCallback(() => {
+    abortRef.current?.abort();
+    setSearchResults([]);
+    setError(null);
+    setIsSearching(false);
+  }, []);
+
+  return {
+    keyword,
+    setKeyword,
+    searchResults,
+    setSearchResults,
+    error,
+    setError,
+    isSearching,
+    search,
+    clearSearch,
+  };
+}