대시보드

features/dashboard/components/dashboard-main.tsx

@@ -0,0 +1,999 @@
+"use client";
+
+import { FormEvent, useCallback, useEffect, useRef, useState, useTransition } from "react";
+import { Activity, Search, ShieldCheck, TrendingDown, TrendingUp } from "lucide-react";
+import { useShallow } from "zustand/react/shallow";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import {
+  useKisRuntimeStore,
+  type KisRuntimeCredentials,
+} from "@/features/dashboard/store/use-kis-runtime-store";
+import type {
+  DashboardMarketPhase,
+  DashboardKisRevokeResponse,
+  DashboardPriceSource,
+  DashboardKisValidateResponse,
+  DashboardKisWsApprovalResponse,
+  DashboardStockItem,
+  DashboardStockOverviewResponse,
+  DashboardStockSearchItem,
+  DashboardStockSearchResponse,
+  StockCandlePoint,
+} from "@/features/dashboard/types/dashboard.types";
+
+/**
+ * @file features/dashboard/components/dashboard-main.tsx
+ * @description 대시보드 메인 UI(검색/시세/차트)
+ */
+
+const PRICE_FORMATTER = new Intl.NumberFormat("ko-KR");
+
+function formatPrice(value: number) {
+  return `${PRICE_FORMATTER.format(value)}원`;
+}
+
+function formatVolume(value: number) {
+  return `${PRICE_FORMATTER.format(value)}주`;
+}
+
+function getPriceSourceLabel(source: DashboardPriceSource, marketPhase: DashboardMarketPhase) {
+  switch (source) {
+    case "inquire-overtime-price":
+      return "시간외 현재가(inquire-overtime-price)";
+    case "inquire-ccnl":
+      return marketPhase === "afterHours"
+        ? "체결가 폴백(inquire-ccnl)"
+        : "체결가(inquire-ccnl)";
+    default:
+      return "현재가(inquire-price)";
+  }
+}
+
+function getMarketPhaseLabel(marketPhase: DashboardMarketPhase) {
+  return marketPhase === "regular" ? "장중(한국시간 09:00~15:30)" : "장외/휴장";
+}
+
+/**
+ * 주가 라인 차트(SVG)
+ */
+function StockLineChart({ candles }: { candles: StockCandlePoint[] }) {
+  const chart = (() => {
+    const width = 760;
+    const height = 280;
+    const paddingX = 24;
+    const paddingY = 20;
+    const plotWidth = width - paddingX * 2;
+    const plotHeight = height - paddingY * 2;
+
+    const prices = candles.map((item) => item.price);
+    const minPrice = Math.min(...prices);
+    const maxPrice = Math.max(...prices);
+    const range = Math.max(maxPrice - minPrice, 1);
+
+    const points = candles.map((item, index) => {
+      const x = paddingX + (index / Math.max(candles.length - 1, 1)) * plotWidth;
+      const y = paddingY + ((maxPrice - item.price) / range) * plotHeight;
+      return { x, y };
+    });
+
+    const linePoints = points.map((point) => `${point.x},${point.y}`).join(" ");
+    const firstPoint = points[0];
+    const lastPoint = points[points.length - 1];
+    const areaPoints = `${linePoints} ${lastPoint.x},${height - paddingY} ${firstPoint.x},${height - paddingY}`;
+
+    return { width, height, paddingX, paddingY, minPrice, maxPrice, linePoints, areaPoints };
+  })();
+
+  return (
+    <div className="h-[300px] w-full">
+      <svg viewBox={`0 0 ${chart.width} ${chart.height}`} className="h-full w-full">
+        <defs>
+          <linearGradient id="priceAreaGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="var(--color-brand-500)" stopOpacity="0.35" />
+            <stop offset="100%" stopColor="var(--color-brand-500)" stopOpacity="0.02" />
+          </linearGradient>
+        </defs>
+
+        <line
+          x1={chart.paddingX}
+          y1={chart.paddingY}
+          x2={chart.width - chart.paddingX}
+          y2={chart.paddingY}
+          stroke="currentColor"
+          className="text-border"
+        />
+        <line
+          x1={chart.paddingX}
+          y1={chart.height / 2}
+          x2={chart.width - chart.paddingX}
+          y2={chart.height / 2}
+          stroke="currentColor"
+          className="text-border/70"
+        />
+        <line
+          x1={chart.paddingX}
+          y1={chart.height - chart.paddingY}
+          x2={chart.width - chart.paddingX}
+          y2={chart.height - chart.paddingY}
+          stroke="currentColor"
+          className="text-border"
+        />
+
+        <polygon points={chart.areaPoints} fill="url(#priceAreaGradient)" />
+        <polyline
+          points={chart.linePoints}
+          fill="none"
+          stroke="var(--color-brand-600)"
+          strokeWidth={3}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+
+      <div className="mt-3 flex items-center justify-between text-xs text-muted-foreground">
+        <span>{candles[0]?.time}</span>
+        <span>저가 {formatPrice(chart.minPrice)}</span>
+        <span>고가 {formatPrice(chart.maxPrice)}</span>
+        <span>{candles[candles.length - 1]?.time}</span>
+      </div>
+    </div>
+  );
+}
+
+function PriceStat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-xl border border-border/70 bg-background/70 p-3">
+      <p className="text-xs text-muted-foreground">{label}</p>
+      <p className="mt-1 text-sm font-semibold text-foreground">{value}</p>
+    </div>
+  );
+}
+
+async function fetchStockSearch(keyword: string) {
+  const response = await fetch(`/api/kis/domestic/search?q=${encodeURIComponent(keyword)}`, {
+    cache: "no-store",
+  });
+
+  const payload = (await response.json()) as DashboardStockSearchResponse | { error?: string };
+
+  if (!response.ok) {
+    throw new Error("error" in payload ? payload.error : "종목 검색 중 오류가 발생했습니다.");
+  }
+
+  return payload as DashboardStockSearchResponse;
+}
+
+async function fetchStockOverview(symbol: string, credentials: KisRuntimeCredentials) {
+  const response = await fetch(`/api/kis/domestic/overview?symbol=${encodeURIComponent(symbol)}`, {
+    method: "GET",
+    headers: {
+      "x-kis-app-key": credentials.appKey,
+      "x-kis-app-secret": credentials.appSecret,
+      "x-kis-trading-env": credentials.tradingEnv,
+    },
+    cache: "no-store",
+  });
+
+  const payload = (await response.json()) as DashboardStockOverviewResponse | { error?: string };
+
+  if (!response.ok) {
+    throw new Error("error" in payload ? payload.error : "종목 조회 중 오류가 발생했습니다.");
+  }
+
+  return payload as DashboardStockOverviewResponse;
+}
+
+async function validateKisCredentials(credentials: KisRuntimeCredentials) {
+  const response = await fetch("/api/kis/validate", {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+    },
+    body: JSON.stringify(credentials),
+    cache: "no-store",
+  });
+
+  const payload = (await response.json()) as DashboardKisValidateResponse;
+
+  if (!response.ok || !payload.ok) {
+    throw new Error(payload.message || "API 키 검증에 실패했습니다.");
+  }
+
+  return payload;
+}
+
+/**
+ * KIS 접근토큰 폐기 요청
+ * @param credentials 검증 완료된 KIS 키
+ * @returns 폐기 응답
+ * @see app/api/kis/revoke/route.ts POST - revokeP 폐기 프록시
+ */
+async function revokeKisCredentials(credentials: KisRuntimeCredentials) {
+  const response = await fetch("/api/kis/revoke", {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+    },
+    body: JSON.stringify(credentials),
+    cache: "no-store",
+  });
+
+  const payload = (await response.json()) as DashboardKisRevokeResponse;
+
+  if (!response.ok || !payload.ok) {
+    throw new Error(payload.message || "API 키 접근 폐기에 실패했습니다.");
+  }
+
+  return payload;
+}
+
+const KIS_REALTIME_TR_ID_REAL = "H0UNCNT0";
+const KIS_REALTIME_TR_ID_MOCK = "H0STCNT0";
+
+function resolveRealtimeTrId(tradingEnv: KisRuntimeCredentials["tradingEnv"]) {
+  return tradingEnv === "mock" ? KIS_REALTIME_TR_ID_MOCK : KIS_REALTIME_TR_ID_REAL;
+}
+
+/**
+ * KIS 실시간 웹소켓 승인키를 발급받습니다.
+ * @param credentials 검증 완료된 KIS 키
+ * @returns approval key + ws url
+ * @see app/api/kis/ws/approval/route.ts POST - Approval 발급 프록시
+ */
+async function fetchKisWebSocketApproval(credentials: KisRuntimeCredentials) {
+  const response = await fetch("/api/kis/ws/approval", {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+    },
+    body: JSON.stringify(credentials),
+    cache: "no-store",
+  });
+
+  const payload = (await response.json()) as DashboardKisWsApprovalResponse;
+  if (!response.ok || !payload.ok || !payload.approvalKey || !payload.wsUrl) {
+    throw new Error(payload.message || "KIS 실시간 웹소켓 승인키 발급에 실패했습니다.");
+  }
+
+  return payload;
+}
+
+/**
+ * KIS 실시간 체결가 구독/해제 메시지를 생성합니다.
+ * @param approvalKey websocket 승인키
+ * @param symbol 종목코드
+ * @param trType "1"(구독) | "2"(해제)
+ * @returns websocket 요청 메시지
+ * @see https://github.com/koreainvestment/open-trading-api
+ */
+function buildKisRealtimeMessage(
+  approvalKey: string,
+  symbol: string,
+  trId: string,
+  trType: "1" | "2",
+) {
+  return {
+    header: {
+      approval_key: approvalKey,
+      custtype: "P",
+      tr_type: trType,
+      "content-type": "utf-8",
+    },
+    body: {
+      input: {
+        tr_id: trId,
+        tr_key: symbol,
+      },
+    },
+  };
+}
+
+interface KisRealtimeTick {
+  point: StockCandlePoint;
+  price: number;
+  accumulatedVolume: number;
+  tickTime: string;
+}
+
+/**
+ * KIS 실시간 체결가 원문을 차트 포인트로 변환합니다.
+ * @param raw websocket 수신 원문
+ * @param expectedSymbol 현재 선택 종목코드
+ * @returns 실시간 포인트 또는 null
+ */
+function parseKisRealtimeTick(raw: string, expectedSymbol: string, expectedTrId: string): KisRealtimeTick | null {
+  if (!/^([01])\|/.test(raw)) return null;
+
+  const parts = raw.split("|");
+  if (parts.length < 4) return null;
+  if (parts[1] !== expectedTrId) return null;
+
+  const tickCount = Number(parts[2] ?? "1");
+  const values = parts[3].split("^");
+  const isBatch = Number.isInteger(tickCount) && tickCount > 1 && values.length % tickCount === 0;
+  const fieldsPerTick = isBatch ? values.length / tickCount : values.length;
+  const baseIndex = isBatch ? (tickCount - 1) * fieldsPerTick : 0;
+  const symbol = values[baseIndex];
+  const hhmmss = values[baseIndex + 1];
+  const price = Number((values[baseIndex + 2] ?? "").replaceAll(",", "").trim());
+  const accumulatedVolume = Number((values[baseIndex + 13] ?? "").replaceAll(",", "").trim());
+
+  if (symbol !== expectedSymbol) return null;
+  if (!Number.isFinite(price) || price <= 0) return null;
+
+  return {
+    point: {
+      time: formatRealtimeTickTime(hhmmss),
+      price,
+    },
+    price,
+    accumulatedVolume: Number.isFinite(accumulatedVolume) && accumulatedVolume > 0 ? accumulatedVolume : 0,
+    tickTime: hhmmss ?? "",
+  };
+}
+
+function formatRealtimeTickTime(hhmmss?: string) {
+  if (!hhmmss || hhmmss.length !== 6) return "실시간";
+  return `${hhmmss.slice(0, 2)}:${hhmmss.slice(2, 4)}:${hhmmss.slice(4, 6)}`;
+}
+
+function appendRealtimeTick(prev: StockCandlePoint[], next: StockCandlePoint) {
+  if (prev.length === 0) return [next];
+
+  const last = prev[prev.length - 1];
+  if (last.time === next.time) {
+    return [...prev.slice(0, -1), next];
+  }
+
+  return [...prev, next].slice(-80);
+}
+
+function toTickOrderValue(hhmmss?: string) {
+  if (!hhmmss || !/^\d{6}$/.test(hhmmss)) return -1;
+  return Number(hhmmss);
+}
+
+/**
+ * 대시보드 메인 화면
+ */
+export function DashboardMain() {
+  // [State] KIS 키 입력/검증 상태(zustand + persist)
+  const {
+    kisTradingEnvInput,
+    kisAppKeyInput,
+    kisAppSecretInput,
+    verifiedCredentials,
+    isKisVerified,
+    tradingEnv,
+    setKisTradingEnvInput,
+    setKisAppKeyInput,
+    setKisAppSecretInput,
+    setVerifiedKisSession,
+    invalidateKisVerification,
+    clearKisRuntimeSession,
+  } = useKisRuntimeStore(
+    useShallow((state) => ({
+      kisTradingEnvInput: state.kisTradingEnvInput,
+      kisAppKeyInput: state.kisAppKeyInput,
+      kisAppSecretInput: state.kisAppSecretInput,
+      verifiedCredentials: state.verifiedCredentials,
+      isKisVerified: state.isKisVerified,
+      tradingEnv: state.tradingEnv,
+      setKisTradingEnvInput: state.setKisTradingEnvInput,
+      setKisAppKeyInput: state.setKisAppKeyInput,
+      setKisAppSecretInput: state.setKisAppSecretInput,
+      setVerifiedKisSession: state.setVerifiedKisSession,
+      invalidateKisVerification: state.invalidateKisVerification,
+      clearKisRuntimeSession: state.clearKisRuntimeSession,
+    })),
+  );
+
+  // [State] 검증 상태 메시지
+  const [kisStatusMessage, setKisStatusMessage] = useState<string | null>(null);
+  const [kisStatusError, setKisStatusError] = useState<string | null>(null);
+
+  // [State] 검색/선택 데이터
+  const [keyword, setKeyword] = useState("삼성전자");
+  const [searchResults, setSearchResults] = useState<DashboardStockSearchItem[]>([]);
+  const [selectedStock, setSelectedStock] = useState<DashboardStockItem | null>(null);
+  const [selectedOverviewMeta, setSelectedOverviewMeta] = useState<{
+    priceSource: DashboardPriceSource;
+    marketPhase: DashboardMarketPhase;
+    fetchedAt: string;
+  } | null>(null);
+  const [realtimeCandles, setRealtimeCandles] = useState<StockCandlePoint[]>([]);
+  const [isRealtimeConnected, setIsRealtimeConnected] = useState(false);
+  const [realtimeError, setRealtimeError] = useState<string | null>(null);
+  const [lastRealtimeTickAt, setLastRealtimeTickAt] = useState<number | null>(null);
+  const [realtimeTickCount, setRealtimeTickCount] = useState(0);
+
+  // [State] 영역별 에러
+  const [searchError, setSearchError] = useState<string | null>(null);
+  const [overviewError, setOverviewError] = useState<string | null>(null);
+
+  // [State] 비동기 전환 상태
+  const [isValidatingKis, startValidateTransition] = useTransition();
+  const [isRevokingKis, startRevokeTransition] = useTransition();
+  const [isSearching, startSearchTransition] = useTransition();
+  const [isLoadingOverview, startOverviewTransition] = useTransition();
+
+  const realtimeSocketRef = useRef<WebSocket | null>(null);
+  const realtimeApprovalKeyRef = useRef<string | null>(null);
+  const lastRealtimeTickOrderRef = useRef<number>(-1);
+  const isPositive = (selectedStock?.change ?? 0) >= 0;
+  const chartCandles =
+    isRealtimeConnected && realtimeCandles.length > 0 ? realtimeCandles : (selectedStock?.candles ?? []);
+  const apiPriceSourceLabel = selectedOverviewMeta
+    ? getPriceSourceLabel(selectedOverviewMeta.priceSource, selectedOverviewMeta.marketPhase)
+    : null;
+  const realtimeTrId = verifiedCredentials ? resolveRealtimeTrId(verifiedCredentials.tradingEnv) : null;
+  const effectivePriceSourceLabel =
+    isRealtimeConnected && lastRealtimeTickAt
+      ? `실시간 체결(WebSocket ${realtimeTrId ?? KIS_REALTIME_TR_ID_REAL})`
+      : apiPriceSourceLabel;
+
+  useEffect(() => {
+    setRealtimeCandles([]);
+    setIsRealtimeConnected(false);
+    setRealtimeError(null);
+    setLastRealtimeTickAt(null);
+    setRealtimeTickCount(0);
+    lastRealtimeTickOrderRef.current = -1;
+  }, [selectedStock?.symbol]);
+
+  useEffect(() => {
+    if (!isRealtimeConnected || lastRealtimeTickAt) return;
+
+    const noTickTimer = window.setTimeout(() => {
+      setRealtimeError("실시간 연결은 되었지만 체결 데이터가 없습니다. 장중(09:00~15:30)인지 확인해 주세요.");
+    }, 8000);
+
+    return () => {
+      window.clearTimeout(noTickTimer);
+    };
+  }, [isRealtimeConnected, lastRealtimeTickAt]);
+
+  useEffect(() => {
+    const symbol = selectedStock?.symbol;
+
+    if (!symbol || !isKisVerified || !verifiedCredentials) {
+      setIsRealtimeConnected(false);
+      setRealtimeError(null);
+      setRealtimeTickCount(0);
+      lastRealtimeTickOrderRef.current = -1;
+      realtimeSocketRef.current?.close();
+      realtimeSocketRef.current = null;
+      realtimeApprovalKeyRef.current = null;
+      return;
+    }
+
+    let disposed = false;
+    let socket: WebSocket | null = null;
+
+    const realtimeTrId = resolveRealtimeTrId(verifiedCredentials.tradingEnv);
+
+    const connectKisRealtimePrice = async () => {
+      try {
+        setRealtimeError(null);
+        setIsRealtimeConnected(false);
+
+        const approval = await fetchKisWebSocketApproval(verifiedCredentials);
+        if (disposed) return;
+
+        realtimeApprovalKeyRef.current = approval.approvalKey ?? null;
+        socket = new WebSocket(`${approval.wsUrl}/tryitout`);
+        realtimeSocketRef.current = socket;
+
+        socket.onopen = () => {
+          if (disposed || !realtimeApprovalKeyRef.current) return;
+
+          const subscribeMessage = buildKisRealtimeMessage(realtimeApprovalKeyRef.current, symbol, realtimeTrId, "1");
+          socket?.send(JSON.stringify(subscribeMessage));
+          setIsRealtimeConnected(true);
+        };
+
+        socket.onmessage = (event) => {
+          if (disposed || typeof event.data !== "string") return;
+
+          const tick = parseKisRealtimeTick(event.data, symbol, realtimeTrId);
+          if (!tick) return;
+
+          // 지연 도착으로 시간이 역행하는 틱은 무시해 차트 흔들림을 줄입니다.
+          const nextTickOrder = toTickOrderValue(tick.tickTime);
+          if (nextTickOrder > 0 && lastRealtimeTickOrderRef.current > nextTickOrder) {
+            return;
+          }
+          if (nextTickOrder > 0) {
+            lastRealtimeTickOrderRef.current = nextTickOrder;
+          }
+
+          setRealtimeError(null);
+          setLastRealtimeTickAt(Date.now());
+          setRealtimeTickCount((prev) => prev + 1);
+          setRealtimeCandles((prev) => appendRealtimeTick(prev, tick.point));
+
+          // 실시간 체결가를 카드 현재가/등락/거래량에도 반영합니다.
+          setSelectedStock((prev) => {
+            if (!prev || prev.symbol !== symbol) return prev;
+
+            const nextPrice = tick.price;
+            const nextChange = nextPrice - prev.prevClose;
+            const nextChangeRate = prev.prevClose > 0 ? (nextChange / prev.prevClose) * 100 : prev.changeRate;
+            const nextHigh = prev.high > 0 ? Math.max(prev.high, nextPrice) : nextPrice;
+            const nextLow = prev.low > 0 ? Math.min(prev.low, nextPrice) : nextPrice;
+
+            return {
+              ...prev,
+              currentPrice: nextPrice,
+              change: nextChange,
+              changeRate: nextChangeRate,
+              high: nextHigh,
+              low: nextLow,
+              volume: tick.accumulatedVolume > 0 ? tick.accumulatedVolume : prev.volume,
+            };
+          });
+        };
+
+        socket.onerror = () => {
+          if (disposed) return;
+          setIsRealtimeConnected(false);
+          setRealtimeError("실시간 연결 중 오류가 발생했습니다.");
+        };
+
+        socket.onclose = () => {
+          if (disposed) return;
+          setIsRealtimeConnected(false);
+        };
+      } catch (error) {
+        if (disposed) return;
+        const message =
+          error instanceof Error ? error.message : "실시간 웹소켓 초기화 중 오류가 발생했습니다.";
+        setRealtimeError(message);
+        setIsRealtimeConnected(false);
+      }
+    };
+
+    void connectKisRealtimePrice();
+
+    return () => {
+      disposed = true;
+      setIsRealtimeConnected(false);
+
+      const approvalKey = realtimeApprovalKeyRef.current;
+      if (socket?.readyState === WebSocket.OPEN && approvalKey) {
+        const unsubscribeMessage = buildKisRealtimeMessage(approvalKey, symbol, realtimeTrId, "2");
+        socket.send(JSON.stringify(unsubscribeMessage));
+      }
+
+      socket?.close();
+      if (realtimeSocketRef.current === socket) {
+        realtimeSocketRef.current = null;
+      }
+      realtimeApprovalKeyRef.current = null;
+    };
+  }, [
+    isKisVerified,
+    selectedStock?.symbol,
+    verifiedCredentials,
+  ]);
+
+  const loadOverview = useCallback(
+    async (symbol: string, credentials: KisRuntimeCredentials) => {
+      try {
+        setOverviewError(null);
+
+        const data = await fetchStockOverview(symbol, credentials);
+        setSelectedStock(data.stock);
+        setSelectedOverviewMeta({
+          priceSource: data.priceSource,
+          marketPhase: data.marketPhase,
+          fetchedAt: data.fetchedAt,
+        });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "종목 조회 중 오류가 발생했습니다.";
+        setOverviewError(message);
+        setSelectedOverviewMeta(null);
+      }
+    },
+    [],
+  );
+
+  const loadSearch = useCallback(
+    async (nextKeyword: string, credentials: KisRuntimeCredentials, pickFirst = false) => {
+      try {
+        setSearchError(null);
+
+        const data = await fetchStockSearch(nextKeyword);
+        setSearchResults(data.items);
+
+        if (pickFirst && data.items[0]) {
+          await loadOverview(data.items[0].symbol, credentials);
+        }
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "종목 검색 중 오류가 발생했습니다.";
+        setSearchError(message);
+      }
+    },
+    [loadOverview],
+  );
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (!isKisVerified || !verifiedCredentials) {
+      setSearchError("상단에서 API 키 검증을 먼저 완료해 주세요.");
+      return;
+    }
+
+    startSearchTransition(() => {
+      void loadSearch(keyword, verifiedCredentials, true);
+    });
+  }
+
+  function handlePickStock(item: DashboardStockSearchItem) {
+    if (!isKisVerified || !verifiedCredentials) {
+      setSearchError("상단에서 API 키 검증을 먼저 완료해 주세요.");
+      return;
+    }
+
+    setKeyword(item.name);
+
+    startOverviewTransition(() => {
+      void loadOverview(item.symbol, verifiedCredentials);
+    });
+  }
+
+  function handleValidateKis() {
+    startValidateTransition(() => {
+      void (async () => {
+        try {
+          setKisStatusError(null);
+          setKisStatusMessage(null);
+
+          const trimmedAppKey = kisAppKeyInput.trim();
+          const trimmedAppSecret = kisAppSecretInput.trim();
+
+          if (!trimmedAppKey || !trimmedAppSecret) {
+            throw new Error("앱 키와 앱 시크릿을 모두 입력해 주세요.");
+          }
+
+          const credentials: KisRuntimeCredentials = {
+            appKey: trimmedAppKey,
+            appSecret: trimmedAppSecret,
+            tradingEnv: kisTradingEnvInput,
+          };
+
+          const result = await validateKisCredentials(credentials);
+
+          setVerifiedKisSession(credentials, result.tradingEnv);
+          setKisStatusMessage(
+            `${result.message} (${result.tradingEnv === "real" ? "실전" : "모의"} 모드)`,
+          );
+
+          startSearchTransition(() => {
+            void loadSearch(keyword || "삼성전자", credentials, true);
+          });
+        } catch (error) {
+          const message = error instanceof Error ? error.message : "API 키 검증 중 오류가 발생했습니다.";
+
+          invalidateKisVerification();
+          setSearchResults([]);
+          setSelectedStock(null);
+          setSelectedOverviewMeta(null);
+          setKisStatusError(message);
+        }
+      })();
+    });
+  }
+
+  function handleRevokeKis() {
+    if (!verifiedCredentials) {
+      setKisStatusError("먼저 API 키 검증을 완료해 주세요.");
+      return;
+    }
+
+    startRevokeTransition(() => {
+      void (async () => {
+        try {
+          // 접근 폐기 전, 화면 상태 메시지를 초기화합니다.
+          setKisStatusError(null);
+          setKisStatusMessage(null);
+
+          const result = await revokeKisCredentials(verifiedCredentials);
+
+          // 로그아웃처럼 검증/조회 상태를 초기화합니다.
+          clearKisRuntimeSession(result.tradingEnv);
+          setSearchResults([]);
+          setSelectedStock(null);
+          setSelectedOverviewMeta(null);
+          setSearchError(null);
+          setOverviewError(null);
+          setKisStatusMessage(`${result.message} (${result.tradingEnv === "real" ? "실전" : "모의"} 모드)`);
+        } catch (error) {
+          const message = error instanceof Error ? error.message : "API 키 접근 폐기 중 오류가 발생했습니다.";
+          setKisStatusError(message);
+        }
+      })();
+    });
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* ========== KIS KEY VERIFY SECTION ========== */}
+      <section>
+        <Card className="border-brand-200 bg-gradient-to-r from-brand-50/60 to-background">
+          <CardHeader>
+            <CardTitle>KIS API 키 연결</CardTitle>
+            <CardDescription>
+              대시보드 사용 전, 개인 API 키를 입력하고 검증해 주세요. 검증에 성공해야 시세 조회가 동작합니다.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-3 md:grid-cols-3">
+              <div className="md:col-span-1">
+                <label className="mb-1 block text-xs text-muted-foreground">거래 모드</label>
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    variant={kisTradingEnvInput === "real" ? "default" : "outline"}
+                    className={cn("flex-1", kisTradingEnvInput === "real" ? "bg-brand-600 hover:bg-brand-700" : "")}
+                    onClick={() => setKisTradingEnvInput("real")}
+                  >
+                    실전
+                  </Button>
+                  <Button
+                    type="button"
+                    variant={kisTradingEnvInput === "mock" ? "default" : "outline"}
+                    className={cn("flex-1", kisTradingEnvInput === "mock" ? "bg-brand-600 hover:bg-brand-700" : "")}
+                    onClick={() => setKisTradingEnvInput("mock")}
+                  >
+                    모의
+                  </Button>
+                </div>
+              </div>
+
+              <div className="md:col-span-1">
+                <label className="mb-1 block text-xs text-muted-foreground">KIS App Key</label>
+                <Input
+                  type="password"
+                  value={kisAppKeyInput}
+                  onChange={(event) => setKisAppKeyInput(event.target.value)}
+                  placeholder="앱 키 입력"
+                  autoComplete="off"
+                />
+              </div>
+
+              <div className="md:col-span-1">
+                <label className="mb-1 block text-xs text-muted-foreground">KIS App Secret</label>
+                <Input
+                  type="password"
+                  value={kisAppSecretInput}
+                  onChange={(event) => setKisAppSecretInput(event.target.value)}
+                  placeholder="앱 시크릿 입력"
+                  autoComplete="off"
+                />
+              </div>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-3">
+              <Button
+                type="button"
+                onClick={handleValidateKis}
+                disabled={isValidatingKis || !kisAppKeyInput.trim() || !kisAppSecretInput.trim()}
+                className="bg-brand-600 hover:bg-brand-700"
+              >
+                {isValidatingKis ? "검증 중..." : "API 키 검증"}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleRevokeKis}
+                disabled={isRevokingKis || !isKisVerified || !verifiedCredentials}
+                className="border-brand-200 text-brand-700 hover:bg-brand-50 hover:text-brand-800"
+              >
+                {isRevokingKis ? "폐기 중..." : "접근 폐기"}
+              </Button>
+
+              {isKisVerified ? (
+                <span className="rounded-full bg-brand-100 px-3 py-1 text-xs font-semibold text-brand-700">
+                  검증 완료 ({tradingEnv === "real" ? "실전" : "모의"})
+                </span>
+              ) : (
+                <span className="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground">미검증</span>
+              )}
+            </div>
+
+            {kisStatusError ? <p className="text-sm text-red-600">{kisStatusError}</p> : null}
+            {kisStatusMessage ? <p className="text-sm text-brand-700">{kisStatusMessage}</p> : null}
+
+            <div className="rounded-lg border border-brand-200 bg-brand-50/70 px-3 py-2 text-xs text-brand-800">
+              입력한 API 키는 새로고침 유지를 위해 현재 브라우저 저장소(zustand persist)에만 보관되며, 접근 폐기를 누르면 즉시 초기화됩니다.
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* ========== DASHBOARD TITLE SECTION ========== */}
+      <section>
+        <h2 className="text-3xl font-bold tracking-tight">국내주식 대시보드</h2>
+        <p className="mt-2 text-sm text-muted-foreground">
+          종목명 검색, 현재가, 일자별 차트를 한 화면에서 확인합니다.
+        </p>
+      </section>
+
+      {/* ========== STOCK SEARCH SECTION ========== */}
+      <section>
+        <Card>
+          <CardHeader>
+            <CardTitle>종목 검색</CardTitle>
+            <CardDescription>종목명 또는 종목코드(예: 삼성전자, 005930)로 검색할 수 있습니다.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <form onSubmit={handleSubmit} className="flex flex-col gap-3 md:flex-row">
+              <div className="relative flex-1">
+                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={keyword}
+                  onChange={(event) => setKeyword(event.target.value)}
+                  placeholder="종목명 / 종목코드 검색"
+                  className="pl-9"
+                  disabled={!isKisVerified}
+                />
+              </div>
+              <Button type="submit" className="md:min-w-28" disabled={!isKisVerified || isSearching || !keyword.trim()}>
+                {isSearching ? "검색 중..." : "검색"}
+              </Button>
+            </form>
+
+            {!isKisVerified ? (
+              <p className="text-xs text-muted-foreground">상단에서 API 키 검증을 완료해야 검색/시세 기능이 동작합니다.</p>
+            ) : searchError ? (
+              <p className="text-sm text-red-600">{searchError}</p>
+            ) : (
+              <p className="text-xs text-muted-foreground">
+                {searchResults.length > 0
+                  ? `검색 결과 ${searchResults.length}개`
+                  : "검색어를 입력하고 엔터를 누르면 종목이 표시됩니다."}
+              </p>
+            )}
+
+            <div className="grid gap-2 md:grid-cols-2 xl:grid-cols-5">
+              {searchResults.map((item) => {
+                const active = item.symbol === selectedStock?.symbol;
+
+                return (
+                  <button
+                    key={`${item.symbol}-${item.market}`}
+                    type="button"
+                    onClick={() => handlePickStock(item)}
+                    className={cn(
+                      "rounded-lg border px-3 py-2 text-left transition-colors",
+                      active
+                        ? "border-brand-500 bg-brand-50 text-brand-700 dark:bg-brand-900/30 dark:text-brand-300"
+                        : "border-border bg-background hover:bg-muted/60",
+                    )}
+                    disabled={!isKisVerified}
+                  >
+                    <p className="text-sm font-semibold">{item.name}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {item.symbol} · {item.market}
+                    </p>
+                  </button>
+                );
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      </section>
+
+      {/* ========== STOCK OVERVIEW SECTION ========== */}
+      <section className="grid gap-4 xl:grid-cols-3">
+        <Card className="xl:col-span-2">
+          <CardHeader className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+            <div>
+              <CardTitle className="text-xl">{selectedStock?.name ?? "종목을 선택해 주세요"}</CardTitle>
+              <CardDescription>
+                {selectedStock ? `${selectedStock.symbol} · ${selectedStock.market}` : "선택된 종목이 없습니다."}
+              </CardDescription>
+            </div>
+
+            {selectedStock && (
+              <div
+                className={cn(
+                  "inline-flex items-center gap-1 rounded-full px-3 py-1 text-sm font-semibold",
+                  isPositive
+                    ? "bg-brand-50 text-brand-700 dark:bg-brand-900/35 dark:text-brand-300"
+                    : "bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-300",
+                )}
+              >
+                {isPositive ? <TrendingUp className="h-4 w-4" /> : <TrendingDown className="h-4 w-4" />}
+                {isPositive ? "+" : ""}
+                {selectedStock.change.toLocaleString()} ({isPositive ? "+" : ""}
+                {selectedStock.changeRate.toFixed(2)}%)
+              </div>
+            )}
+          </CardHeader>
+          <CardContent>
+            {overviewError ? (
+              <p className="text-sm text-red-600">{overviewError}</p>
+            ) : !isKisVerified ? (
+              <p className="text-sm text-muted-foreground">상단에서 API 키 검증을 완료해 주세요.</p>
+            ) : isLoadingOverview && !selectedStock ? (
+              <p className="text-sm text-muted-foreground">종목 데이터를 불러오는 중입니다...</p>
+            ) : selectedStock ? (
+              <>
+                <p className="mb-4 text-3xl font-extrabold tracking-tight">{formatPrice(selectedStock.currentPrice)}</p>
+                {effectivePriceSourceLabel && selectedOverviewMeta ? (
+                  <div className="mb-4 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+                    <span className="rounded-full border border-brand-200 bg-brand-50 px-2 py-1 text-brand-700">
+                      현재가 소스: {effectivePriceSourceLabel}
+                    </span>
+                    <span className="rounded-full border border-border px-2 py-1">
+                      구간: {getMarketPhaseLabel(selectedOverviewMeta.marketPhase)}
+                    </span>
+                    <span className="rounded-full border border-border px-2 py-1">
+                      조회시각: {new Date(selectedOverviewMeta.fetchedAt).toLocaleTimeString("ko-KR")}
+                    </span>
+                  </div>
+                ) : null}
+                <StockLineChart candles={chartCandles} />
+                {realtimeError ? <p className="mt-3 text-xs text-red-600">{realtimeError}</p> : null}
+              </>
+            ) : (
+              <p className="text-sm text-muted-foreground">종목을 선택하면 시세와 차트가 표시됩니다.</p>
+            )}
+          </CardContent>
+        </Card>
+
+        <div className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">핵심 지표</CardTitle>
+            </CardHeader>
+            <CardContent className="grid gap-2">
+              <PriceStat label="시가" value={formatPrice(selectedStock?.open ?? 0)} />
+              <PriceStat label="고가" value={formatPrice(selectedStock?.high ?? 0)} />
+              <PriceStat label="저가" value={formatPrice(selectedStock?.low ?? 0)} />
+              <PriceStat label="전일 종가" value={formatPrice(selectedStock?.prevClose ?? 0)} />
+              <PriceStat label="누적 거래량" value={formatVolume(selectedStock?.volume ?? 0)} />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">연동 상태</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-3 text-sm text-muted-foreground">
+              <div className="flex items-center gap-2">
+                <ShieldCheck className="h-4 w-4 text-brand-500" />
+                <p>국내주식 {tradingEnv === "real" ? "실전" : "모의"}투자 API 연결 완료</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <Activity className={cn("h-4 w-4", isRealtimeConnected ? "text-brand-500" : "text-muted-foreground")} />
+                <p>
+                  실시간 체결가 연결 상태:{" "}
+                  {isRealtimeConnected ? "연결됨 (WebSocket)" : "대기 중 (일봉 차트 표시)"}
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <Activity className="h-4 w-4 text-muted-foreground" />
+                <p>마지막 실시간 수신: {lastRealtimeTickAt ? new Date(lastRealtimeTickAt).toLocaleTimeString("ko-KR") : "수신 전"}</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <Activity className="h-4 w-4 text-muted-foreground" />
+                <p>실시간 틱 수신 수: {realtimeTickCount.toLocaleString("ko-KR")}건</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <Activity className="h-4 w-4 text-brand-500" />
+                <p>다음 단계: 주문/리스크 제어 API 연결</p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+    </div>
+  );
+}