테마 적용

features/dashboard/components/DashboardContainer.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { useKisRuntimeStore } from "@/features/dashboard/store/use-kis-runtime-store";
 import { KisAuthForm } from "@/features/dashboard/components/auth/KisAuthForm";
 import { StockSearchForm } from "@/features/dashboard/components/search/StockSearchForm";
+import { StockSearchHistory } from "@/features/dashboard/components/search/StockSearchHistory";
 import { StockSearchResults } from "@/features/dashboard/components/search/StockSearchResults";
 import { useStockSearch } from "@/features/dashboard/hooks/useStockSearch";
 import { useOrderBook } from "@/features/dashboard/hooks/useOrderBook";
@@ -20,7 +21,6 @@ import { OrderBook } from "@/features/dashboard/components/orderbook/OrderBook";
 import { OrderForm } from "@/features/dashboard/components/order/OrderForm";
 import { StockLineChart } from "@/features/dashboard/components/chart/StockLineChart";
 import type {
-  DashboardStockItem,
   DashboardStockOrderBookResponse,
   DashboardStockSearchItem,
 } from "@/features/dashboard/types/dashboard.types";
@@ -28,16 +28,18 @@ import type {
 /**
  * @description 대시보드 메인 컨테이너
  * @see app/(main)/dashboard/page.tsx 로그인 완료 후 이 컴포넌트를 렌더링합니다.
- * @see features/dashboard/hooks/useStockSearch.ts 검색 입력/요청 상태를 관리합니다.
+ * @see features/dashboard/hooks/useStockSearch.ts 검색 입력/요청/히스토리 상태를 관리합니다.
  * @see features/dashboard/hooks/useStockOverview.ts 선택 종목 상세 상태를 관리합니다.
  */
 export function DashboardContainer() {
   const skipNextAutoSearchRef = useRef(false);
   const hasInitializedAuthPanelRef = useRef(false);
+  const searchShellRef = useRef<HTMLDivElement | null>(null);
 
-  // 모바일에서는 초기 진입 시 API 키 패널을 접어서 본문(차트/호가)을 먼저 보이게 합니다.
+  // 모바일에서는 초기 진입 시 API 패널을 접어 본문(차트/호가)을 먼저 보이게 합니다.
   const [isMobileViewport, setIsMobileViewport] = useState(false);
   const [isAuthPanelExpanded, setIsAuthPanelExpanded] = useState(true);
+  const [isSearchPanelOpen, setIsSearchPanelOpen] = useState(false);
 
   const { verifiedCredentials, isKisVerified } = useKisRuntimeStore(
     useShallow((state) => ({
@@ -50,11 +52,14 @@ export function DashboardContainer() {
     keyword,
     setKeyword,
     searchResults,
-    setSearchResults,
-    setError: setSearchError,
+    setSearchError,
     isSearching,
     search,
     clearSearch,
+    searchHistory,
+    appendSearchHistory,
+    removeSearchHistory,
+    clearSearchHistory,
   } = useStockSearch();
 
   const { selectedStock, loadOverview, updateRealtimeTradeTick } =
@@ -107,6 +112,49 @@ export function DashboardContainer() {
     orderBook,
   });
 
+  const canSearch = isKisVerified && !!verifiedCredentials;
+
+  /**
+   * @description 검색 전 API 인증 여부를 확인합니다.
+   * @see features/dashboard/components/search/StockSearchForm.tsx 검색 제출 전 공통 가드로 사용합니다.
+   */
+  const ensureSearchReady = useCallback(() => {
+    if (canSearch) return true;
+    setSearchError("API 키 검증을 먼저 완료해 주세요.");
+    return false;
+  }, [canSearch, setSearchError]);
+
+  const closeSearchPanel = useCallback(() => {
+    setIsSearchPanelOpen(false);
+  }, []);
+
+  const openSearchPanel = useCallback(() => {
+    if (!canSearch) return;
+    setIsSearchPanelOpen(true);
+  }, [canSearch]);
+
+  /**
+   * @description 검색 영역 포커스가 완전히 빠지면 드롭다운(검색결과/히스토리)을 닫습니다.
+   * @see features/dashboard/components/search/StockSearchForm.tsx 입력 포커스 이벤트에서 열림 제어를 함께 사용합니다.
+   */
+  const handleSearchShellBlur = useCallback(
+    (event: React.FocusEvent<HTMLDivElement>) => {
+      const nextTarget = event.relatedTarget as Node | null;
+      if (nextTarget && searchShellRef.current?.contains(nextTarget)) return;
+      closeSearchPanel();
+    },
+    [closeSearchPanel],
+  );
+
+  const handleSearchShellKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== "Escape") return;
+      closeSearchPanel();
+      (event.target as HTMLElement | null)?.blur?.();
+    },
+    [closeSearchPanel],
+  );
+
   useEffect(() => {
     const mediaQuery = window.matchMedia("(max-width: 767px)");
 
@@ -142,7 +190,7 @@ export function DashboardContainer() {
       return;
     }
 
-    if (!isKisVerified || !verifiedCredentials) {
+    if (!canSearch) {
       clearSearch();
       return;
     }
@@ -158,52 +206,72 @@ export function DashboardContainer() {
     }, 220);
 
     return () => window.clearTimeout(timer);
-  }, [keyword, isKisVerified, verifiedCredentials, search, clearSearch]);
+  }, [canSearch, keyword, verifiedCredentials, search, clearSearch]);
 
-  function handleSearchSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (!isKisVerified || !verifiedCredentials) {
-      setSearchError("API 키 검증을 먼저 완료해 주세요.");
-      return;
-    }
-    search(keyword, verifiedCredentials);
-  }
+  /**
+   * @description 수동 검색 버튼(엔터 포함) 제출 이벤트를 처리합니다.
+   * @see features/dashboard/components/search/StockSearchForm.tsx onSubmit 이벤트로 호출됩니다.
+   */
+  const handleSearchSubmit = useCallback(
+    (event: React.FormEvent) => {
+      event.preventDefault();
+      if (!ensureSearchReady() || !verifiedCredentials) return;
+      search(keyword, verifiedCredentials);
+    },
+    [ensureSearchReady, keyword, search, verifiedCredentials],
+  );
 
-  function handleSelectStock(item: DashboardStockSearchItem) {
-    if (!isKisVerified || !verifiedCredentials) {
-      setSearchError("API 키 검증을 먼저 완료해 주세요.");
-      return;
-    }
+  /**
+   * @description 검색 결과/히스토리에서 종목을 선택하면 종목 상세를 로드하고 히스토리를 갱신합니다.
+   * @see features/dashboard/components/search/StockSearchResults.tsx onSelect 이벤트
+   * @see features/dashboard/components/search/StockSearchHistory.tsx onSelect 이벤트
+   */
+  const handleSelectStock = useCallback(
+    (item: DashboardStockSearchItem) => {
+      if (!ensureSearchReady() || !verifiedCredentials) return;
 
-    // 이미 선택된 종목을 다시 누른 경우 불필요한 개요 API 재호출을 막습니다.
-    if (selectedStock?.symbol === item.symbol) {
-      setSearchResults([]);
-      return;
-    }
+      // 같은 종목 재선택 시 중복 overview 요청을 막고 검색 목록만 닫습니다.
+      if (selectedStock?.symbol === item.symbol) {
+        clearSearch();
+        closeSearchPanel();
+        return;
+      }
 
-    // 카드 선택으로 keyword가 바뀔 때 자동 검색이 다시 돌지 않도록 1회 건너뜁니다.
-    skipNextAutoSearchRef.current = true;
-    setKeyword(item.name);
-    setSearchResults([]);
-    loadOverview(item.symbol, verifiedCredentials, item.market);
-  }
+      // 카드 선택으로 keyword가 바뀔 때 자동 검색이 다시 실행되지 않게 한 번 건너뜁니다.
+      skipNextAutoSearchRef.current = true;
+      setKeyword(item.name);
+      clearSearch();
+      closeSearchPanel();
+      appendSearchHistory(item);
+      loadOverview(item.symbol, verifiedCredentials, item.market);
+    },
+    [
+      ensureSearchReady,
+      verifiedCredentials,
+      selectedStock?.symbol,
+      clearSearch,
+      closeSearchPanel,
+      setKeyword,
+      appendSearchHistory,
+      loadOverview,
+    ],
+  );
 
   return (
     <div className="relative h-full flex flex-col">
       {/* ========== AUTH STATUS ========== */}
-      <div className="flex-none border-b bg-muted/40 transition-all duration-300 ease-in-out">
+      <div className="flex-none border-b bg-muted/40 transition-all duration-300 ease-in-out dark:border-brand-800/45 dark:bg-brand-900/28">
         <div className="flex items-center justify-between gap-2 px-3 py-2 text-xs sm:px-4">
           <div className="flex items-center gap-2">
             <span className="font-semibold">KIS API 연결 상태:</span>
             {isKisVerified ? (
-              <span className="text-green-600 font-medium flex items-center">
-                <span className="mr-1.5 h-2 w-2 rounded-full bg-green-500 ring-2 ring-green-100" />
-                연결됨 (
-                {verifiedCredentials?.tradingEnv === "real" ? "실전" : "모의"})
+              <span className="flex items-center font-medium text-brand-700 dark:text-brand-200">
+                <span className="mr-1.5 h-2 w-2 rounded-full bg-brand-500 ring-2 ring-brand-100 dark:ring-brand-900" />
+                연결됨 ({verifiedCredentials?.tradingEnv === "real" ? "실전" : "모의"})
               </span>
             ) : (
               <span className="text-muted-foreground flex items-center">
-                <span className="mr-1.5 h-2 w-2 rounded-full bg-gray-300" />
+                <span className="mr-1.5 h-2 w-2 rounded-full bg-brand-200 dark:bg-brand-500/60" />
                 미연결
               </span>
             )}
@@ -216,8 +284,10 @@ export function DashboardContainer() {
             onClick={() => setIsAuthPanelExpanded((prev) => !prev)}
             className={cn(
               "h-8 shrink-0 gap-1.5 px-2.5 text-[11px] font-semibold",
-              "border-brand-200 bg-brand-50 text-brand-700 hover:bg-brand-100",
-              !isAuthPanelExpanded && isMobileViewport && "ring-2 ring-brand-200",
+              "border-brand-200 bg-brand-50 text-brand-700 hover:bg-brand-100 dark:border-brand-700/60 dark:bg-brand-900/30 dark:text-brand-200 dark:hover:bg-brand-900/45",
+              !isAuthPanelExpanded &&
+                isMobileViewport &&
+                "ring-2 ring-brand-200 dark:ring-brand-600/60",
             )}
           >
             {isAuthPanelExpanded ? (
@@ -237,36 +307,57 @@ export function DashboardContainer() {
         <div
           className={cn(
             "overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out",
-            isAuthPanelExpanded
-              ? "max-h-[560px] opacity-100"
-              : "max-h-0 opacity-0",
+            isAuthPanelExpanded ? "max-h-[560px] opacity-100" : "max-h-0 opacity-0",
           )}
         >
-          <div className="p-4 border-t bg-background">
+          <div className="border-t bg-background p-4 dark:border-brand-800/45 dark:bg-brand-900/14">
             <KisAuthForm />
           </div>
         </div>
       </div>
 
       {/* ========== SEARCH ========== */}
-      <div className="flex-none p-4 border-b bg-background/95 backdrop-blur-sm z-30">
-        <div className="max-w-2xl mx-auto space-y-2 relative">
+      <div className="z-30 flex-none border-b bg-background/95 p-4 backdrop-blur-sm dark:border-brand-800/45 dark:bg-brand-900/22">
+        <div
+          ref={searchShellRef}
+          onBlurCapture={handleSearchShellBlur}
+          onKeyDownCapture={handleSearchShellKeyDown}
+          className="relative mx-auto max-w-2xl"
+        >
           <StockSearchForm
             keyword={keyword}
             onKeywordChange={setKeyword}
             onSubmit={handleSearchSubmit}
-            disabled={!isKisVerified}
+            onInputFocus={openSearchPanel}
+            disabled={!canSearch}
             isLoading={isSearching}
           />
-          {searchResults.length > 0 && (
-            <div className="absolute top-full left-0 right-0 mt-1 z-50 bg-background border rounded-md shadow-lg max-h-80 overflow-y-auto overflow-x-hidden">
-              <StockSearchResults
-                items={searchResults}
-                onSelect={handleSelectStock}
-                selectedSymbol={
-                  (selectedStock as DashboardStockItem | null)?.symbol
-                }
-              />
+
+          {isSearchPanelOpen && canSearch && (
+            <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-80 overflow-x-hidden overflow-y-auto rounded-md border bg-background shadow-lg dark:border-brand-800/45 dark:bg-brand-950/95">
+              {searchResults.length > 0 ? (
+                <StockSearchResults
+                  items={searchResults}
+                  onSelect={handleSelectStock}
+                  selectedSymbol={selectedStock?.symbol}
+                />
+              ) : keyword.trim() ? (
+                <div className="px-3 py-2 text-sm text-muted-foreground">
+                  {isSearching ? "검색 중..." : "검색 결과가 없습니다."}
+                </div>
+              ) : searchHistory.length > 0 ? (
+                <StockSearchHistory
+                  items={searchHistory}
+                  onSelect={handleSelectStock}
+                  onRemove={removeSearchHistory}
+                  onClear={clearSearchHistory}
+                  selectedSymbol={selectedStock?.symbol}
+                />
+              ) : (
+                <div className="px-3 py-2 text-sm text-muted-foreground">
+                  최근 검색 종목이 없습니다.
+                </div>
+              )}
             </div>
           )}
         </div>
@@ -287,7 +378,7 @@ export function DashboardContainer() {
                 price={currentPrice?.toLocaleString() ?? "0"}
                 change={change?.toLocaleString() ?? "0"}
                 changeRate={changeRate?.toFixed(2) ?? "0.00"}
-                high={latestTick ? latestTick.high.toLocaleString() : undefined} // High/Low/Vol only from Tick or Static
+                high={latestTick ? latestTick.high.toLocaleString() : undefined}
                 low={latestTick ? latestTick.low.toLocaleString() : undefined}
                 volume={
                   latestTick

features/dashboard/components/auth/KisAuthForm.tsx

@@ -114,10 +114,10 @@ export function KisAuthForm() {
   }
 
   return (
-    <Card className="border-brand-200 bg-linear-to-r from-brand-50/60 to-background">
+    <Card className="border-brand-200 bg-linear-to-r from-brand-50/60 to-background dark:border-brand-700/50 dark:from-brand-900/35 dark:to-background">
       <CardHeader>
-        <CardTitle>KIS API 키 연결</CardTitle>
-        <CardDescription>
+        <CardTitle className="text-foreground dark:text-brand-50">KIS API 키 연결</CardTitle>
+        <CardDescription className="text-muted-foreground dark:text-brand-100/80">
           대시보드 사용 전, 개인 API 키를 입력하고 검증해 주세요.
           검증에 성공해야 시세 조회가 동작합니다.
         </CardDescription>
@@ -127,7 +127,7 @@ export function KisAuthForm() {
         {/* ========== CREDENTIAL INPUTS ========== */}
         <div className="grid gap-3 md:grid-cols-3">
           <div>
-            <label className="mb-1 block text-xs text-muted-foreground">
+            <label className="mb-1 block text-xs text-muted-foreground dark:text-brand-100/72">
               거래 모드
             </label>
             <div className="flex gap-2">
@@ -135,10 +135,11 @@ export function KisAuthForm() {
                 type="button"
                 variant={kisTradingEnvInput === "real" ? "default" : "outline"}
                 className={cn(
-                  "flex-1",
+                  "flex-1 border transition-all",
+                  "dark:border-brand-700/70 dark:bg-black/20 dark:text-brand-100/80 dark:hover:bg-brand-900/45",
                   kisTradingEnvInput === "real"
-                    ? "bg-brand-600 hover:bg-brand-700"
-                    : "",
+                    ? "bg-brand-600 text-white shadow-sm ring-2 ring-brand-300/45 hover:bg-brand-500 dark:bg-brand-500 dark:text-white dark:ring-brand-300/55"
+                    : "text-brand-700 hover:text-brand-800 dark:text-brand-100/80",
                 )}
                 onClick={() => setKisTradingEnvInput("real")}
               >
@@ -148,10 +149,11 @@ export function KisAuthForm() {
                 type="button"
                 variant={kisTradingEnvInput === "mock" ? "default" : "outline"}
                 className={cn(
-                  "flex-1",
+                  "flex-1 border transition-all",
+                  "dark:border-brand-700/70 dark:bg-black/20 dark:text-brand-100/80 dark:hover:bg-brand-900/45",
                   kisTradingEnvInput === "mock"
-                    ? "bg-brand-600 hover:bg-brand-700"
-                    : "",
+                    ? "bg-brand-600 text-white shadow-sm ring-2 ring-brand-300/45 hover:bg-brand-500 dark:bg-brand-500 dark:text-white dark:ring-brand-300/55"
+                    : "text-brand-700 hover:text-brand-800 dark:text-brand-100/80",
                 )}
                 onClick={() => setKisTradingEnvInput("mock")}
               >
@@ -166,6 +168,7 @@ export function KisAuthForm() {
             </label>
             <Input
               type="password"
+              className="dark:border-brand-700/60 dark:bg-black/20 dark:text-brand-50 dark:placeholder:text-brand-200/55"
               value={kisAppKeyInput}
               onChange={(e) => setKisAppKeyInput(e.target.value)}
               placeholder="App Key 입력"
@@ -179,6 +182,7 @@ export function KisAuthForm() {
             </label>
             <Input
               type="password"
+              className="dark:border-brand-700/60 dark:bg-black/20 dark:text-brand-50 dark:placeholder:text-brand-200/55"
               value={kisAppSecretInput}
               onChange={(e) => setKisAppSecretInput(e.target.value)}
               placeholder="App Secret 입력"
@@ -205,14 +209,14 @@ export function KisAuthForm() {
             variant="outline"
             onClick={handleRevoke}
             disabled={isRevoking || !isKisVerified || !verifiedCredentials}
-            className="border-brand-200 text-brand-700 hover:bg-brand-50 hover:text-brand-800"
+            className="border-brand-200 text-brand-700 hover:bg-brand-50 hover:text-brand-800 dark:border-brand-700/60 dark:text-brand-200 dark:hover:bg-brand-900/35 dark:hover:text-brand-100"
           >
             {isRevoking ? "해제 중..." : "연결 끊기"}
           </Button>
 
           {isKisVerified ? (
-            <span className="flex items-center text-sm font-medium text-green-600">
-              <span className="mr-1.5 h-2 w-2 rounded-full bg-green-500 ring-2 ring-green-100" />
+            <span className="flex items-center text-sm font-medium text-brand-700 dark:text-brand-200">
+              <span className="mr-1.5 h-2 w-2 rounded-full bg-brand-500 ring-2 ring-brand-100 dark:ring-brand-900" />
               연결됨 ({verifiedCredentials?.tradingEnv === "real" ? "실전" : "모의"})
             </span>
           ) : (
@@ -223,7 +227,9 @@ export function KisAuthForm() {
         {errorMessage && (
           <div className="text-sm font-medium text-destructive">{errorMessage}</div>
         )}
-        {statusMessage && <div className="text-sm text-blue-600">{statusMessage}</div>}
+        {statusMessage && (
+          <div className="text-sm text-brand-700 dark:text-brand-200">{statusMessage}</div>
+        )}
       </CardContent>
     </Card>
   );

features/dashboard/components/chart/StockLineChart.tsx

@@ -11,6 +11,7 @@ import {
   type Time,
 } from "lightweight-charts";
 import { ChevronDown } from "lucide-react";
+import { useTheme } from "next-themes";
 import { toast } from "sonner";
 import { fetchStockChart } from "@/features/dashboard/apis/kis-stock.api";
 import type { KisRuntimeCredentials } from "@/features/dashboard/store/use-kis-runtime-store";
@@ -34,10 +35,64 @@ import {
 } from "./chart-utils";
 
 const UP_COLOR = "#ef4444";
-const DOWN_COLOR = "#2563eb";
 const MINUTE_SYNC_INTERVAL_MS = 5000;
 const REALTIME_STALE_THRESHOLD_MS = 12000;
 
+interface ChartPalette {
+  backgroundColor: string;
+  downColor: string;
+  volumeDownColor: string;
+  textColor: string;
+  borderColor: string;
+  gridColor: string;
+  crosshairColor: string;
+}
+
+const DEFAULT_CHART_PALETTE: ChartPalette = {
+  backgroundColor: "#ffffff",
+  downColor: "#2563eb",
+  volumeDownColor: "rgba(37, 99, 235, 0.45)",
+  textColor: "#6d28d9",
+  borderColor: "#e9d5ff",
+  gridColor: "#f3e8ff",
+  crosshairColor: "#c084fc",
+};
+
+function readCssVar(name: string, fallback: string) {
+  if (typeof window === "undefined") return fallback;
+  const value = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
+function getChartPaletteFromCssVars(themeMode: "light" | "dark"): ChartPalette {
+  const isDark = themeMode === "dark";
+  const backgroundVar = isDark
+    ? "--brand-chart-background-dark"
+    : "--brand-chart-background-light";
+  const textVar = isDark ? "--brand-chart-text-dark" : "--brand-chart-text-light";
+  const borderVar = isDark ? "--brand-chart-border-dark" : "--brand-chart-border-light";
+  const gridVar = isDark ? "--brand-chart-grid-dark" : "--brand-chart-grid-light";
+  const crosshairVar = isDark
+    ? "--brand-chart-crosshair-dark"
+    : "--brand-chart-crosshair-light";
+
+  return {
+    backgroundColor: readCssVar(backgroundVar, DEFAULT_CHART_PALETTE.backgroundColor),
+    downColor: readCssVar("--brand-chart-down", DEFAULT_CHART_PALETTE.downColor),
+    volumeDownColor: readCssVar(
+      "--brand-chart-volume-down",
+      DEFAULT_CHART_PALETTE.volumeDownColor,
+    ),
+    textColor: readCssVar(textVar, DEFAULT_CHART_PALETTE.textColor),
+    borderColor: readCssVar(borderVar, DEFAULT_CHART_PALETTE.borderColor),
+    gridColor: readCssVar(gridVar, DEFAULT_CHART_PALETTE.gridColor),
+    crosshairColor: readCssVar(
+      crosshairVar,
+      DEFAULT_CHART_PALETTE.crosshairColor,
+    ),
+  };
+}
+
 const MINUTE_TIMEFRAMES: Array<{
   value: DashboardChartTimeframe;
   label: string;
@@ -73,6 +128,7 @@ export function StockLineChart({
   credentials,
   latestTick,
 }: StockLineChartProps) {
+  const { resolvedTheme } = useTheme();
   const containerRef = useRef<HTMLDivElement | null>(null);
   const chartRef = useRef<IChartApi | null>(null);
   const candleSeriesRef = useRef<ISeriesApi<"Candlestick", Time> | null>(null);
@@ -87,6 +143,18 @@ export function StockLineChart({
   const [isChartReady, setIsChartReady] = useState(false);
   const lastRealtimeKeyRef = useRef<string>("");
   const lastRealtimeAppliedAtRef = useRef(0);
+  const chartPaletteRef = useRef<ChartPalette>(DEFAULT_CHART_PALETTE);
+  const renderableBarsRef = useRef<ChartBar[]>([]);
+
+  const activeThemeMode: "light" | "dark" =
+    resolvedTheme === "dark"
+      ? "dark"
+      : resolvedTheme === "light"
+        ? "light"
+        : typeof document !== "undefined" &&
+            document.documentElement.classList.contains("dark")
+          ? "dark"
+          : "light";
 
   // 복수 이벤트에서 중복 로드를 막기 위한 ref 상태
   const loadingMoreRef = useRef(false);
@@ -125,6 +193,10 @@ export function StockLineChart({
     return [...dedup.values()].sort((a, b) => a.time - b.time);
   }, [bars]);
 
+  useEffect(() => {
+    renderableBarsRef.current = renderableBars;
+  }, [renderableBars]);
+
   /**
    * @description lightweight-charts 시리즈 데이터에 안전한 OHLCV 값을 주입합니다.
    * @see features/dashboard/components/chart/StockLineChart.tsx renderableBars useMemo
@@ -152,7 +224,7 @@ export function StockLineChart({
           color:
             bar.close >= bar.open
               ? "rgba(239,68,68,0.45)"
-              : "rgba(37,99,235,0.45)",
+              : chartPaletteRef.current.volumeDownColor,
         })),
       );
     } catch (error) {
@@ -206,12 +278,16 @@ export function StockLineChart({
     const container = containerRef.current;
     if (!container || chartRef.current) return;
 
+    // 브랜드 색상은 globals.css의 CSS 변수에서 읽어 차트(canvas)에도 동일하게 적용합니다.
+    const palette = getChartPaletteFromCssVars(activeThemeMode);
+    chartPaletteRef.current = palette;
+
     const chart = createChart(container, {
       width: Math.max(container.clientWidth, 320),
       height: Math.max(container.clientHeight, 340),
       layout: {
-        background: { type: ColorType.Solid, color: "#ffffff" },
-        textColor: "#475569",
+        background: { type: ColorType.Solid, color: palette.backgroundColor },
+        textColor: palette.textColor,
         attributionLogo: true,
       },
       localization: {
@@ -219,22 +295,22 @@ export function StockLineChart({
         timeFormatter: formatKstCrosshairTime,
       },
       rightPriceScale: {
-        borderColor: "#e2e8f0",
+        borderColor: palette.borderColor,
         scaleMargins: {
           top: 0.08,
           bottom: 0.24,
         },
       },
       grid: {
-        vertLines: { color: "#edf1f5" },
-        horzLines: { color: "#edf1f5" },
+        vertLines: { color: palette.gridColor },
+        horzLines: { color: palette.gridColor },
       },
       crosshair: {
-        vertLine: { color: "#94a3b8", width: 1, style: 2 },
-        horzLine: { color: "#94a3b8", width: 1, style: 2 },
+        vertLine: { color: palette.crosshairColor, width: 1, style: 2 },
+        horzLine: { color: palette.crosshairColor, width: 1, style: 2 },
       },
       timeScale: {
-        borderColor: "#e2e8f0",
+        borderColor: palette.borderColor,
         timeVisible: true,
         secondsVisible: false,
         rightOffset: 2,
@@ -253,11 +329,11 @@ export function StockLineChart({
 
     const candleSeries = chart.addSeries(CandlestickSeries, {
       upColor: UP_COLOR,
-      downColor: DOWN_COLOR,
+      downColor: palette.downColor,
       wickUpColor: UP_COLOR,
-      wickDownColor: DOWN_COLOR,
+      wickDownColor: palette.downColor,
       borderUpColor: UP_COLOR,
-      borderDownColor: DOWN_COLOR,
+      borderDownColor: palette.downColor,
       priceLineVisible: true,
       lastValueVisible: true,
     });
@@ -318,7 +394,41 @@ export function StockLineChart({
       volumeSeriesRef.current = null;
       setIsChartReady(false);
     };
-  }, []);
+  }, [activeThemeMode]);
+
+  useEffect(() => {
+    const chart = chartRef.current;
+    const candleSeries = candleSeriesRef.current;
+    if (!chart || !candleSeries) return;
+
+    const palette = getChartPaletteFromCssVars(activeThemeMode);
+    chartPaletteRef.current = palette;
+
+    chart.applyOptions({
+      layout: {
+        background: { type: ColorType.Solid, color: palette.backgroundColor },
+        textColor: palette.textColor,
+      },
+      rightPriceScale: { borderColor: palette.borderColor },
+      grid: {
+        vertLines: { color: palette.gridColor },
+        horzLines: { color: palette.gridColor },
+      },
+      crosshair: {
+        vertLine: { color: palette.crosshairColor, width: 1, style: 2 },
+        horzLine: { color: palette.crosshairColor, width: 1, style: 2 },
+      },
+      timeScale: { borderColor: palette.borderColor },
+    });
+
+    candleSeries.applyOptions({
+      downColor: palette.downColor,
+      wickDownColor: palette.downColor,
+      borderDownColor: palette.downColor,
+    });
+
+    setSeriesData(renderableBarsRef.current);
+  }, [activeThemeMode, setSeriesData]);
 
   useEffect(() => {
     if (symbol && credentials) return;
@@ -344,25 +454,33 @@ export function StockLineChart({
         let mergedBars = normalizeCandles(firstPage.candles, timeframe);
         let resolvedNextCursor = firstPage.hasMore ? firstPage.nextCursor : null;
 
-        // 분봉은 기본 2페이지를 붙여서 "당일만 보이는" 느낌을 줄입니다.
+        // 분봉은 기본 3페이지까지 순차 조회해 오전 구간 누락을 줄입니다.
         if (
           isMinuteTimeframe(timeframe) &&
           firstPage.hasMore &&
           firstPage.nextCursor
         ) {
-          try {
-            const secondPage = await fetchStockChart(
-              symbol,
-              timeframe,
-              credentials,
-              firstPage.nextCursor,
-            );
+          let minuteCursor: string | null = firstPage.nextCursor;
+          let extraPageCount = 0;
 
-            const olderBars = normalizeCandles(secondPage.candles, timeframe);
-            mergedBars = mergeBars(olderBars, mergedBars);
-            resolvedNextCursor = secondPage.hasMore ? secondPage.nextCursor : null;
-          } catch {
-            // 2페이지 실패는 치명적이지 않으므로 1페이지 데이터는 유지합니다.
+          while (minuteCursor && extraPageCount < 2) {
+            try {
+              const olderPage = await fetchStockChart(
+                symbol,
+                timeframe,
+                credentials,
+                minuteCursor,
+              );
+
+              const olderBars = normalizeCandles(olderPage.candles, timeframe);
+              mergedBars = mergeBars(olderBars, mergedBars);
+              resolvedNextCursor = olderPage.hasMore ? olderPage.nextCursor : null;
+              minuteCursor = olderPage.hasMore ? olderPage.nextCursor : null;
+              extraPageCount += 1;
+            } catch {
+              // 추가 페이지 실패는 치명적이지 않으므로 현재 데이터는 유지합니다.
+              minuteCursor = null;
+            }
           }
         }
 
@@ -479,9 +597,9 @@ export function StockLineChart({
   })();
 
   return (
-    <div className="flex h-full min-h-[340px] flex-col bg-white">
+    <div className="flex h-full min-h-[340px] flex-col bg-white dark:bg-brand-900/10">
       {/* ========== CHART TOOLBAR ========== */}
-      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200 px-2 py-2 sm:px-3">
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-brand-100 bg-muted/20 px-2 py-2 sm:px-3 dark:border-brand-800/45 dark:bg-brand-900/35">
         <div className="flex flex-wrap items-center gap-1 text-xs sm:text-sm">
           <div className="relative">
             <button
@@ -491,9 +609,9 @@ export function StockLineChart({
                 window.setTimeout(() => setIsMinuteDropdownOpen(false), 200)
               }
               className={cn(
-                "flex items-center gap-1 rounded px-2 py-1 text-slate-600 transition-colors hover:bg-slate-100",
+                "relative flex items-center gap-1 border-b-2 border-transparent px-2 py-1.5 text-muted-foreground transition-colors hover:text-foreground dark:text-brand-100/72 dark:hover:text-brand-50",
                 MINUTE_TIMEFRAMES.some((item) => item.value === timeframe) &&
-                  "bg-brand-100 font-semibold text-brand-700",
+                  "border-brand-400 font-semibold text-foreground dark:text-brand-50",
               )}
             >
               {MINUTE_TIMEFRAMES.find((item) => item.value === timeframe)
@@ -502,7 +620,7 @@ export function StockLineChart({
             </button>
 
             {isMinuteDropdownOpen && (
-              <div className="absolute left-0 top-full z-10 mt-1 rounded border border-slate-200 bg-white shadow-lg">
+              <div className="absolute left-0 top-full z-10 mt-1 rounded border border-brand-100 bg-white shadow-lg dark:border-brand-700/45 dark:bg-[#1a1624]">
                 {MINUTE_TIMEFRAMES.map((item) => (
                   <button
                     key={item.value}
@@ -512,9 +630,9 @@ export function StockLineChart({
                       setIsMinuteDropdownOpen(false);
                     }}
                     className={cn(
-                      "block w-full whitespace-nowrap px-3 py-1.5 text-left hover:bg-slate-100",
+                      "block w-full whitespace-nowrap px-3 py-1.5 text-left hover:bg-brand-50 dark:text-brand-100 dark:hover:bg-brand-800/35",
                       timeframe === item.value &&
-                        "bg-brand-50 font-semibold text-brand-700",
+                        "bg-brand-50 font-semibold text-brand-700 dark:bg-brand-700/30 dark:text-brand-100",
                     )}
                   >
                     {item.label}
@@ -530,9 +648,9 @@ export function StockLineChart({
               type="button"
               onClick={() => setTimeframe(item.value)}
               className={cn(
-                "rounded px-2 py-1 text-slate-600 transition-colors hover:bg-slate-100",
+                "relative border-b-2 border-transparent px-2 py-1.5 text-muted-foreground transition-colors hover:text-foreground dark:text-brand-100/72 dark:hover:text-brand-50",
                 timeframe === item.value &&
-                  "bg-brand-100 font-semibold text-brand-700",
+                  "border-brand-400 font-semibold text-foreground dark:text-brand-50",
               )}
             >
               {item.label}
@@ -540,16 +658,20 @@ export function StockLineChart({
           ))}
 
           {isLoadingMore && (
-            <span className="ml-2 text-[11px] text-muted-foreground">
+            <span className="ml-2 text-[11px] text-muted-foreground dark:text-brand-200/70">
               과거 데이터 로딩 중...
             </span>
           )}
         </div>
 
-        <div className="text-[11px] text-slate-600 sm:text-xs">
+        <div className="text-[11px] text-muted-foreground dark:text-brand-100/85 sm:text-xs">
           O {formatPrice(latest?.open ?? 0)} H {formatPrice(latest?.high ?? 0)} L{" "}
           {formatPrice(latest?.low ?? 0)} C{" "}
-          <span className={cn(change >= 0 ? "text-red-600" : "text-blue-600")}>
+          <span
+            className={cn(
+              change >= 0 ? "text-red-600" : "text-blue-600 dark:text-blue-400",
+            )}
+          >
             {formatPrice(latest?.close ?? 0)} ({formatSignedPercent(changeRate)})
           </span>
         </div>
@@ -560,7 +682,7 @@ export function StockLineChart({
         <div ref={containerRef} className="h-full w-full" />
 
         {statusMessage && (
-          <div className="absolute inset-0 flex items-center justify-center bg-white/80 text-sm text-muted-foreground">
+          <div className="absolute inset-0 flex items-center justify-center bg-white/80 text-sm text-muted-foreground dark:bg-background/90 dark:text-brand-100/80">
             {statusMessage}
           </div>
         )}

features/dashboard/components/details/StockOverviewCard.tsx

@@ -84,7 +84,7 @@ export function StockOverviewCard({
             <CardDescription className="mt-1 flex items-center gap-1.5">
               <span>{effectivePriceSourceLabel}</span>
               {isRealtimeConnected && (
-                <span className="inline-flex items-center gap-1 rounded bg-green-100 px-1.5 py-0.5 text-xs font-medium text-green-700">
+                <span className="inline-flex items-center gap-1 rounded bg-brand-100 px-1.5 py-0.5 text-xs font-medium text-brand-700">
                   <Activity className="h-3 w-3" />
                   실시간
                 </span>

features/dashboard/components/details/StockPriceBadge.tsx

@@ -19,7 +19,7 @@ export function StockPriceBadge({
 }: StockPriceBadgeProps) {
   const isPositive = change >= 0;
   const ChangeIcon = isPositive ? TrendingUp : TrendingDown;
-  const changeColor = isPositive ? "text-red-500" : "text-blue-500";
+  const changeColor = isPositive ? "text-red-500" : "text-brand-600";
   const changeSign = isPositive ? "+" : "";
 
   return (

features/dashboard/components/header/StockHeader.tsx

@@ -27,18 +27,18 @@ export function StockHeader({
   const colorClass = isRise
     ? "text-red-500"
     : isFall
-      ? "text-blue-500"
+      ? "text-blue-600 dark:text-blue-400"
       : "text-foreground";
 
   return (
-    <div className="px-3 py-2 sm:px-4 sm:py-3">
+    <div className="bg-white px-3 py-2 dark:bg-brand-900/22 sm:px-4 sm:py-3">
       {/* ========== STOCK SUMMARY ========== */}
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
-          <h1 className="truncate text-lg font-bold leading-tight sm:text-xl">
+          <h1 className="truncate text-lg font-bold leading-tight text-foreground dark:text-brand-50 sm:text-xl">
             {stock.name}
           </h1>
-          <span className="mt-0.5 block text-xs text-muted-foreground sm:text-sm">
+          <span className="mt-0.5 block text-xs text-muted-foreground dark:text-brand-100/70 sm:text-sm">
             {stock.symbol}/{stock.market}
           </span>
         </div>
@@ -53,16 +53,16 @@ export function StockHeader({
 
       {/* ========== STATS ========== */}
       <div className="mt-2 grid grid-cols-3 gap-2 text-xs md:hidden">
-        <div className="rounded-md bg-muted/40 px-2 py-1.5">
-          <p className="text-[11px] text-muted-foreground">고가</p>
+        <div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
+          <p className="text-[11px] text-muted-foreground dark:text-brand-100/70">고가</p>
           <p className="font-medium text-red-500">{high || "--"}</p>
         </div>
-        <div className="rounded-md bg-muted/40 px-2 py-1.5">
-          <p className="text-[11px] text-muted-foreground">저가</p>
-          <p className="font-medium text-blue-500">{low || "--"}</p>
+        <div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
+          <p className="text-[11px] text-muted-foreground dark:text-brand-100/70">저가</p>
+          <p className="font-medium text-blue-600 dark:text-blue-400">{low || "--"}</p>
         </div>
-        <div className="rounded-md bg-muted/40 px-2 py-1.5">
-          <p className="text-[11px] text-muted-foreground">거래량(24H)</p>
+        <div className="rounded-md bg-muted/40 px-2 py-1.5 dark:border dark:border-brand-800/45 dark:bg-brand-900/25">
+          <p className="text-[11px] text-muted-foreground dark:text-brand-100/70">거래량(24H)</p>
           <p className="font-medium">{volume || "--"}</p>
         </div>
       </div>
@@ -72,15 +72,15 @@ export function StockHeader({
       {/* ========== DESKTOP STATS ========== */}
       <div className="hidden items-center justify-end gap-6 pt-1 text-sm md:flex">
         <div className="flex flex-col items-end">
-          <span className="text-muted-foreground text-xs">고가</span>
+          <span className="text-muted-foreground text-xs dark:text-brand-100/70">고가</span>
           <span className="font-medium text-red-500">{high || "--"}</span>
         </div>
         <div className="flex flex-col items-end">
-          <span className="text-muted-foreground text-xs">저가</span>
-          <span className="font-medium text-blue-500">{low || "--"}</span>
+          <span className="text-muted-foreground text-xs dark:text-brand-100/70">저가</span>
+          <span className="font-medium text-blue-600 dark:text-blue-400">{low || "--"}</span>
         </div>
         <div className="flex flex-col items-end">
-          <span className="text-muted-foreground text-xs">거래량(24H)</span>
+          <span className="text-muted-foreground text-xs dark:text-brand-100/70">거래량(24H)</span>
           <span className="font-medium">{volume || "--"}</span>
         </div>
       </div>

features/dashboard/components/layout/DashboardLayout.tsx

@@ -19,7 +19,7 @@ export function DashboardLayout({
   return (
     <div
       className={cn(
-        "flex flex-col bg-background",
+        "flex flex-col bg-background dark:bg-[linear-gradient(135deg,rgba(53,35,86,0.18),rgba(13,13,20,0.98))]",
         // Mobile: Scrollable page height
         "min-h-[calc(100vh-64px)]",
         // Desktop: Fixed height, no window scroll
@@ -28,7 +28,7 @@ export function DashboardLayout({
       )}
     >
       {/* 1. Header Area */}
-      <div className="flex-none border-b border-border bg-background">
+      <div className="flex-none border-b border-brand-100 bg-white dark:border-brand-800/45 dark:bg-brand-900/22">
         {header}
       </div>
 
@@ -45,7 +45,7 @@ export function DashboardLayout({
         {/* Left Column: Chart & Info */}
         <div
           className={cn(
-            "flex flex-col border-border",
+            "flex flex-col border-border dark:border-brand-800/45",
             // Mobile: Fixed height for chart to ensure visibility
             "h-[320px] flex-none border-b sm:h-[360px]",
             // Desktop: Fill remaining space, remove bottom border, add right border
@@ -57,9 +57,9 @@ export function DashboardLayout({
         </div>
 
         {/* Right Column: Order Book & Order Form */}
-        <div className="flex min-h-0 w-full flex-none flex-col bg-background xl:w-[460px] xl:pr-2 2xl:w-[500px]">
+        <div className="flex min-h-0 w-full flex-none flex-col bg-background dark:bg-brand-900/12 xl:w-[460px] xl:pr-2 2xl:w-[500px]">
           {/* Top: Order Book (Hoga) */}
-          <div className="h-[390px] flex-none overflow-hidden border-t border-border sm:h-[430px] xl:min-h-0 xl:flex-1 xl:h-auto xl:border-t-0 xl:border-b">
+          <div className="h-[390px] flex-none overflow-hidden border-t border-border dark:border-brand-800/45 sm:h-[430px] xl:min-h-0 xl:flex-1 xl:h-auto xl:border-t-0 xl:border-b">
             {orderBook}
           </div>
           {/* Bottom: Order Form */}

features/dashboard/components/order/OrderForm.tsx

@@ -1,71 +1,70 @@
 import { useState } from "react";
+import { Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import type {
-  DashboardStockItem,
-  DashboardOrderSide,
-} from "@/features/dashboard/types/dashboard.types";
 import { useOrder } from "@/features/dashboard/hooks/useOrder";
 import { useKisRuntimeStore } from "@/features/dashboard/store/use-kis-runtime-store";
-import { Loader2 } from "lucide-react";
+import type {
+  DashboardOrderSide,
+  DashboardStockItem,
+} from "@/features/dashboard/types/dashboard.types";
 
 interface OrderFormProps {
   stock?: DashboardStockItem;
 }
 
+/**
+ * @description 대시보드 주문 패널에서 매수/매도 주문을 입력하고 전송합니다.
+ * @see features/dashboard/hooks/useOrder.ts placeOrder - 주문 API 호출
+ * @see features/dashboard/components/DashboardContainer.tsx OrderForm - 우측 주문 패널 렌더링
+ */
 export function OrderForm({ stock }: OrderFormProps) {
   const verifiedCredentials = useKisRuntimeStore(
     (state) => state.verifiedCredentials,
   );
-
   const { placeOrder, isLoading, error } = useOrder();
 
-  // Form State
-  // Initial price set from stock current price if available, relying on component remount (key) for updates
-  const [price, setPrice] = useState<string>(
-    stock?.currentPrice.toString() || "",
-  );
+  // ========== FORM STATE ==========
+  const [price, setPrice] = useState<string>(stock?.currentPrice.toString() || "");
   const [quantity, setQuantity] = useState<string>("");
-  const [activeTab, setActiveTab] = useState("buy");
+  const [activeTab, setActiveTab] = useState<"buy" | "sell">("buy");
 
+  // ========== ORDER HANDLER ==========
   const handleOrder = async (side: DashboardOrderSide) => {
     if (!stock || !verifiedCredentials) return;
 
     const priceNum = parseInt(price.replace(/,/g, ""), 10);
     const qtyNum = parseInt(quantity.replace(/,/g, ""), 10);
 
-    if (isNaN(priceNum) || priceNum <= 0) {
-      alert("가격을 올바르게 입력해주세요.");
+    if (Number.isNaN(priceNum) || priceNum <= 0) {
+      alert("가격을 올바르게 입력해 주세요.");
       return;
     }
-    if (isNaN(qtyNum) || qtyNum <= 0) {
-      alert("수량을 올바르게 입력해주세요.");
+    if (Number.isNaN(qtyNum) || qtyNum <= 0) {
+      alert("수량을 올바르게 입력해 주세요.");
       return;
     }
-
     if (!verifiedCredentials.accountNo) {
-      alert(
-        "계좌번호가 설정되지 않았습니다. 설정에서 계좌번호를 입력해주세요.",
-      );
+      alert("계좌번호가 없습니다. 설정에서 계좌번호를 입력해 주세요.");
       return;
     }
 
     const response = await placeOrder(
       {
         symbol: stock.symbol,
-        side: side,
-        orderType: "limit", // 지정가 고정
+        side,
+        orderType: "limit",
         price: priceNum,
         quantity: qtyNum,
         accountNo: verifiedCredentials.accountNo,
-        accountProductCode: "01", // Default to '01' (위탁)
+        accountProductCode: "01",
       },
       verifiedCredentials,
     );
 
-    if (response && response.orderNo) {
-      alert(`주문 전송 완료! 주문번호: ${response.orderNo}`);
+    if (response?.orderNo) {
+      alert(`주문 전송 완료: ${response.orderNo}`);
       setQuantity("");
     }
   };
@@ -75,34 +74,36 @@ export function OrderForm({ stock }: OrderFormProps) {
     parseInt(quantity.replace(/,/g, "") || "0", 10);
 
   const setPercent = (pct: string) => {
-    // Placeholder logic for percent click
+    // TODO: 계좌 잔고 연동 시 퍼센트 자동 계산으로 교체
     console.log("Percent clicked:", pct);
   };
 
-  const isMarketDataAvailable = !!stock;
+  const isMarketDataAvailable = Boolean(stock);
 
   return (
-    <div className="h-full border-l border-border bg-background p-3 sm:p-4">
+    <div className="h-full border-l border-border bg-background p-3 dark:border-brand-800/45 dark:bg-brand-950/55 sm:p-4">
       <Tabs
         value={activeTab}
-        onValueChange={setActiveTab}
-        className="w-full h-full flex flex-col"
+        onValueChange={(value) => setActiveTab(value as "buy" | "sell")}
+        className="flex h-full w-full flex-col"
       >
-        <TabsList className="mb-3 grid w-full grid-cols-2 sm:mb-4">
+        {/* ========== ORDER SIDE TABS ========== */}
+        <TabsList className="mb-3 grid h-10 w-full grid-cols-2 gap-1 border border-brand-200/70 bg-muted/35 p-1 dark:border-brand-700/50 dark:bg-brand-900/28 sm:mb-4">
           <TabsTrigger
             value="buy"
-            className="data-[state=active]:bg-red-600 data-[state=active]:text-white transition-colors"
+            className="!h-full rounded-md border border-transparent text-foreground/75 transition-colors dark:text-brand-100/75 data-[state=active]:border-red-400/60 data-[state=active]:bg-red-600 data-[state=active]:text-white data-[state=active]:shadow-[0_0_0_1px_rgba(248,113,113,0.45)]"
           >
             매수
           </TabsTrigger>
           <TabsTrigger
             value="sell"
-            className="data-[state=active]:bg-blue-600 data-[state=active]:text-white transition-colors"
+            className="!h-full rounded-md border border-transparent text-foreground/75 transition-colors dark:text-brand-100/75 data-[state=active]:border-blue-400/65 data-[state=active]:bg-blue-600 data-[state=active]:text-white data-[state=active]:shadow-[0_0_0_1px_rgba(96,165,250,0.45)]"
           >
             매도
           </TabsTrigger>
         </TabsList>
 
+        {/* ========== BUY TAB ========== */}
         <TabsContent
           value="buy"
           className="flex flex-1 flex-col space-y-3 data-[state=inactive]:hidden sm:space-y-4"
@@ -115,21 +116,20 @@ export function OrderForm({ stock }: OrderFormProps) {
             setQuantity={setQuantity}
             totalPrice={totalPrice}
             disabled={!isMarketDataAvailable}
-            hasError={!!error}
+            hasError={Boolean(error)}
             errorMessage={error}
           />
-
           <PercentButtons onSelect={setPercent} />
-
           <Button
-            className="mt-auto h-11 w-full bg-red-600 text-base hover:bg-red-700 sm:h-12 sm:text-lg"
+            className="mt-auto h-11 w-full bg-red-600 text-base text-white shadow-sm ring-1 ring-red-300/35 hover:bg-red-700 dark:bg-red-500 dark:ring-red-300/45 dark:hover:bg-red-400 sm:h-12 sm:text-lg"
             disabled={isLoading || !isMarketDataAvailable}
             onClick={() => handleOrder("buy")}
           >
-            {isLoading ? <Loader2 className="animate-spin mr-2" /> : "매수하기"}
+            {isLoading ? <Loader2 className="mr-2 animate-spin" /> : "매수하기"}
           </Button>
         </TabsContent>
 
+        {/* ========== SELL TAB ========== */}
         <TabsContent
           value="sell"
           className="flex flex-1 flex-col space-y-3 data-[state=inactive]:hidden sm:space-y-4"
@@ -142,18 +142,16 @@ export function OrderForm({ stock }: OrderFormProps) {
             setQuantity={setQuantity}
             totalPrice={totalPrice}
             disabled={!isMarketDataAvailable}
-            hasError={!!error}
+            hasError={Boolean(error)}
             errorMessage={error}
           />
-
           <PercentButtons onSelect={setPercent} />
-
           <Button
-            className="mt-auto h-11 w-full bg-blue-600 text-base hover:bg-blue-700 sm:h-12 sm:text-lg"
+            className="mt-auto h-11 w-full bg-blue-600 text-base text-white shadow-sm ring-1 ring-blue-300/35 hover:bg-blue-700 dark:bg-blue-500 dark:ring-blue-300/45 dark:hover:bg-blue-400 sm:h-12 sm:text-lg"
             disabled={isLoading || !isMarketDataAvailable}
             onClick={() => handleOrder("sell")}
           >
-            {isLoading ? <Loader2 className="animate-spin mr-2" /> : "매도하기"}
+            {isLoading ? <Loader2 className="mr-2 animate-spin" /> : "매도하기"}
           </Button>
         </TabsContent>
       </Tabs>
@@ -161,6 +159,10 @@ export function OrderForm({ stock }: OrderFormProps) {
   );
 }
 
+/**
+ * @description 주문 입력 영역(가격/수량/총액)을 렌더링합니다.
+ * @see features/dashboard/components/order/OrderForm.tsx OrderForm - 매수/매도 탭에서 공용 호출
+ */
 function OrderInputs({
   type,
   price,
@@ -190,7 +192,7 @@ function OrderInputs({
       </div>
 
       {hasError && (
-        <div className="p-2 bg-destructive/10 text-destructive text-xs rounded break-keep">
+        <div className="rounded bg-destructive/10 p-2 text-xs text-destructive break-keep">
           {errorMessage}
         </div>
       )}
@@ -200,27 +202,29 @@ function OrderInputs({
           {type === "buy" ? "매수가격" : "매도가격"}
         </span>
         <Input
-          className="col-span-3 text-right font-mono"
+          className="col-span-3 text-right font-mono dark:border-brand-700/55 dark:bg-black/25 dark:text-brand-100"
           placeholder="0"
           value={price}
           onChange={(e) => setPrice(e.target.value)}
           disabled={disabled}
         />
       </div>
+
       <div className="grid grid-cols-4 items-center gap-2">
         <span className="text-xs font-medium sm:text-sm">주문수량</span>
         <Input
-          className="col-span-3 text-right font-mono"
+          className="col-span-3 text-right font-mono dark:border-brand-700/55 dark:bg-black/25 dark:text-brand-100"
           placeholder="0"
           value={quantity}
           onChange={(e) => setQuantity(e.target.value)}
           disabled={disabled}
         />
       </div>
+
       <div className="grid grid-cols-4 items-center gap-2">
         <span className="text-xs font-medium sm:text-sm">주문총액</span>
         <Input
-          className="col-span-3 text-right font-mono bg-muted/50"
+          className="col-span-3 bg-muted/50 text-right font-mono dark:border-brand-700/55 dark:bg-black/20 dark:text-brand-100"
           value={totalPrice.toLocaleString()}
           readOnly
           disabled={disabled}
@@ -230,9 +234,13 @@ function OrderInputs({
   );
 }
 
+/**
+ * @description 주문 비율(10/25/50/100%) 단축 버튼을 표시합니다.
+ * @see features/dashboard/components/order/OrderForm.tsx setPercent - 버튼 클릭 이벤트 처리
+ */
 function PercentButtons({ onSelect }: { onSelect: (pct: string) => void }) {
   return (
-    <div className="grid grid-cols-4 gap-2 mt-2">
+    <div className="mt-2 grid grid-cols-4 gap-2">
       {["10%", "25%", "50%", "100%"].map((pct) => (
         <Button
           key={pct}

features/dashboard/components/orderbook/AnimatedQuantity.tsx

@@ -59,7 +59,7 @@ export function AnimatedQuantity({
             transition={{ duration: 1 }}
             className={cn(
               "absolute inset-0 z-0 rounded-sm",
-              flash === "up" ? "bg-red-200/50" : "bg-blue-200/50",
+              flash === "up" ? "bg-red-200/50" : "bg-brand-200/50",
             )}
           />
         )}
@@ -78,7 +78,7 @@ export function AnimatedQuantity({
             transition={{ duration: 1.2, ease: "easeOut" }}
             className={cn(
               "relative z-20 whitespace-nowrap text-[9px] font-bold leading-none",
-              diff > 0 ? "text-red-500" : "text-blue-500",
+              diff > 0 ? "text-red-500" : "text-brand-600",
             )}
           >
             {diff > 0 ? `+${diff.toLocaleString()}` : diff.toLocaleString()}

features/dashboard/components/orderbook/OrderBook.tsx

@@ -145,10 +145,10 @@ export function OrderBook({
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-background">
+    <div className="flex h-full min-h-0 flex-col bg-white dark:bg-brand-900/10">
       <Tabs defaultValue="normal" className="h-full min-h-0">
         {/* 탭 헤더 */}
-        <div className="border-b px-2 pt-2">
+        <div className="border-b px-2 pt-2 dark:border-brand-800/45 dark:bg-brand-900/28">
           <TabsList variant="line" className="w-full justify-start">
             <TabsTrigger value="normal" className="px-3">
               일반호가
@@ -164,10 +164,10 @@ export function OrderBook({
 
         {/* ── 일반호가 탭 ── */}
         <TabsContent value="normal" className="min-h-0 flex-1">
-          <div className="block h-full min-h-0 border-t xl:grid xl:grid-rows-[1fr_190px] xl:overflow-hidden">
+          <div className="block h-full min-h-0 border-t dark:border-brand-800/45 xl:grid xl:grid-rows-[1fr_190px] xl:overflow-hidden">
             <div className="block min-h-0 xl:grid xl:grid-cols-[minmax(0,1fr)_168px] xl:overflow-hidden">
               {/* 호가 테이블 */}
-              <div className="min-h-0 xl:border-r">
+              <div className="min-h-0 xl:border-r dark:border-brand-800/45">
                 <BookHeader />
                 <ScrollArea className="h-[320px] sm:h-[360px] xl:h-[calc(100%-32px)] [&>[data-slot=scroll-area-scrollbar]]:hidden xl:[&>[data-slot=scroll-area-scrollbar]]:flex">
                   {/* 매도호가 */}
@@ -175,7 +175,7 @@ export function OrderBook({
 
                   {/* 중앙 바: 현재 체결가 */}
                   <div className="grid h-8 grid-cols-3 items-center border-y-2 border-amber-400 bg-amber-50/80 dark:bg-amber-900/30 xl:h-9">
-                    <div className="px-2 text-right text-[10px] font-medium text-muted-foreground">
+                    <div className="px-2 text-right text-[10px] font-medium text-muted-foreground dark:text-brand-100/72">
                       {totalAsk > 0 ? fmt(totalAsk) : ""}
                     </div>
                     <div className="flex items-center justify-center gap-1">
@@ -192,14 +192,14 @@ export function OrderBook({
                             "text-[10px] font-medium",
                             latestPrice >= basePrice
                               ? "text-red-500"
-                              : "text-blue-500",
+                              : "text-blue-600 dark:text-blue-400",
                           )}
                         >
                           {fmtPct(pctChange(latestPrice, basePrice))}
                         </span>
                       )}
                     </div>
-                    <div className="px-2 text-left text-[10px] font-medium text-muted-foreground">
+                    <div className="px-2 text-left text-[10px] font-medium text-muted-foreground dark:text-brand-100/72">
                       {totalBid > 0 ? fmt(totalBid) : ""}
                     </div>
                   </div>
@@ -231,7 +231,7 @@ export function OrderBook({
 
         {/* ── 누적호가 탭 ── */}
         <TabsContent value="cumulative" className="min-h-0 flex-1">
-          <ScrollArea className="h-full border-t">
+          <ScrollArea className="h-full border-t dark:border-brand-800/45">
             <div className="p-3">
               <div className="mb-2 grid grid-cols-3 text-[11px] font-medium text-muted-foreground">
                 <span>매도누적</span>
@@ -245,7 +245,7 @@ export function OrderBook({
 
         {/* ── 호가주문 탭 ── */}
         <TabsContent value="order" className="min-h-0 flex-1">
-          <div className="flex h-full items-center justify-center border-t px-4 text-sm text-muted-foreground">
+          <div className="flex h-full items-center justify-center border-t px-4 text-sm text-muted-foreground dark:border-brand-800/45 dark:text-brand-100/75">
             호가주문 탭은 주문 입력 패널과 연동해 확장할 수 있습니다.
           </div>
         </TabsContent>
@@ -259,7 +259,7 @@ export function OrderBook({
 /** 호가 표 헤더 */
 function BookHeader() {
   return (
-    <div className="grid h-8 grid-cols-3 border-b bg-muted/20 text-[11px] font-medium text-muted-foreground">
+    <div className="grid h-8 grid-cols-3 border-b bg-muted/20 text-[11px] font-medium text-muted-foreground dark:border-brand-800/45 dark:bg-brand-900/35 dark:text-brand-100/78">
       <div className="flex items-center justify-end px-2">매도잔량</div>
       <div className="flex items-center justify-center border-x">호가</div>
       <div className="flex items-center justify-start px-2">매수잔량</div>
@@ -280,7 +280,13 @@ function BookSideRows({
   const isAsk = side === "ask";
 
   return (
-    <div className={isAsk ? "bg-red-50/15" : "bg-blue-50/15"}>
+    <div
+      className={cn(
+        isAsk
+          ? "bg-red-50/20 dark:bg-red-950/18"
+          : "bg-blue-50/55 dark:bg-blue-950/22",
+      )}
+    >
       {rows.map((row, i) => {
         const ratio =
           maxSize > 0 ? Math.min((row.size / maxSize) * 100, 100) : 0;
@@ -289,9 +295,9 @@ function BookSideRows({
           <div
             key={`${side}-${row.price}-${i}`}
             className={cn(
-              "grid h-7 grid-cols-3 border-b border-border/40 text-[11px] xl:h-8 xl:text-xs",
+              "grid h-7 grid-cols-3 border-b border-border/40 text-[11px] xl:h-8 xl:text-xs dark:border-brand-800/35",
               row.isHighlighted &&
-                "ring-1 ring-inset ring-amber-400 bg-amber-100/50 dark:bg-amber-900/30",
+                "ring-1 ring-inset ring-amber-400 bg-amber-100/50 dark:bg-amber-800/30",
             )}
           >
             {/* 매도잔량 (좌측) */}
@@ -314,10 +320,10 @@ function BookSideRows({
               className={cn(
                 "flex items-center justify-center border-x font-medium tabular-nums gap-1",
                 row.isHighlighted &&
-                  "border-x-amber-400 bg-amber-50/70 dark:bg-amber-900/25",
+                  "border-x-amber-400 bg-amber-50/70 dark:bg-amber-800/20",
               )}
             >
-              <span className={isAsk ? "text-red-600" : "text-blue-600"}>
+              <span className={isAsk ? "text-red-600" : "text-blue-600 dark:text-blue-400"}>
                 {row.price > 0 ? fmt(row.price) : "-"}
               </span>
               <span
@@ -326,7 +332,7 @@ function BookSideRows({
                   row.changePercent !== null
                     ? row.changePercent >= 0
                       ? "text-red-500"
-                      : "text-blue-500"
+                      : "text-blue-600 dark:text-blue-400"
                     : "text-muted-foreground",
                 )}
               >
@@ -372,7 +378,7 @@ function SummaryPanel({
   totalBid: number;
 }) {
   return (
-    <div className="min-w-0 border-l bg-muted/15 p-2 text-[11px]">
+    <div className="min-w-0 border-l bg-muted/10 p-2 text-[11px] dark:border-brand-800/45 dark:bg-brand-900/30">
       <Row
         label="실시간"
         value={orderBook ? "연결됨" : "끊김"}
@@ -444,13 +450,13 @@ function Row({
   tone?: "ask" | "bid";
 }) {
   return (
-    <div className="mb-1.5 flex items-center justify-between gap-2 rounded border bg-background px-2 py-1">
-      <span className="min-w-0 truncate text-muted-foreground">{label}</span>
+    <div className="mb-1.5 flex items-center justify-between gap-2 rounded border bg-background px-2 py-1 dark:border-brand-800/45 dark:bg-black/20">
+      <span className="min-w-0 truncate text-muted-foreground dark:text-brand-100/70">{label}</span>
       <span
         className={cn(
           "shrink-0 font-medium tabular-nums",
           tone === "ask" && "text-red-600",
-          tone === "bid" && "text-blue-600",
+          tone === "bid" && "text-blue-600 dark:text-blue-400",
         )}
       >
         {value}
@@ -466,7 +472,9 @@ function DepthBar({ ratio, side }: { ratio: number; side: "ask" | "bid" }) {
     <div
       className={cn(
         "absolute inset-y-1 z-0 rounded-sm",
-        side === "ask" ? "right-1 bg-red-200/50" : "left-1 bg-blue-200/50",
+        side === "ask"
+          ? "right-1 bg-red-200/50 dark:bg-red-800/40"
+          : "left-1 bg-blue-200/55 dark:bg-blue-500/35",
       )}
       style={{ width: `${ratio}%` }}
     />
@@ -476,8 +484,8 @@ function DepthBar({ ratio, side }: { ratio: number; side: "ask" | "bid" }) {
 /** 체결 목록 (Trade Tape) */
 function TradeTape({ ticks }: { ticks: DashboardRealtimeTradeTick[] }) {
   return (
-    <div className="border-t bg-background">
-      <div className="grid h-7 grid-cols-4 border-b bg-muted/20 px-2 text-[11px] font-medium text-muted-foreground">
+    <div className="border-t bg-background dark:border-brand-800/45 dark:bg-brand-900/20">
+      <div className="grid h-7 grid-cols-4 border-b bg-muted/20 px-2 text-[11px] font-medium text-muted-foreground dark:border-brand-800/45 dark:bg-brand-900/35 dark:text-brand-100/78">
         <div className="flex items-center">체결시각</div>
         <div className="flex items-center justify-end">체결가</div>
         <div className="flex items-center justify-end">체결량</div>
@@ -486,14 +494,14 @@ function TradeTape({ ticks }: { ticks: DashboardRealtimeTradeTick[] }) {
       <ScrollArea className="h-[162px]">
         <div>
           {ticks.length === 0 && (
-            <div className="flex h-[160px] items-center justify-center text-xs text-muted-foreground">
+            <div className="flex h-[160px] items-center justify-center text-xs text-muted-foreground dark:text-brand-100/70">
               체결 데이터가 아직 없습니다.
             </div>
           )}
           {ticks.map((t, i) => (
             <div
               key={`${t.tickTime}-${t.price}-${i}`}
-              className="grid h-8 grid-cols-4 border-b border-border/40 px-2 text-xs"
+              className="grid h-8 grid-cols-4 border-b border-border/40 px-2 text-xs dark:border-brand-800/35"
             >
               <div className="flex items-center tabular-nums">
                 {fmtTime(t.tickTime)}
@@ -501,7 +509,7 @@ function TradeTape({ ticks }: { ticks: DashboardRealtimeTradeTick[] }) {
               <div className="flex items-center justify-end tabular-nums text-red-600">
                 {fmt(t.price)}
               </div>
-              <div className="flex items-center justify-end tabular-nums text-blue-600">
+              <div className="flex items-center justify-end tabular-nums text-blue-600 dark:text-blue-400">
                 {fmt(t.tradeVolume)}
               </div>
               <div className="flex items-center justify-end tabular-nums">
@@ -537,13 +545,13 @@ function CumulativeRows({ asks, bids }: { asks: BookRow[]; bids: BookRow[] }) {
       {rows.map((r, i) => (
         <div
           key={i}
-          className="grid h-7 grid-cols-3 items-center rounded border bg-background px-2 text-xs"
+          className="grid h-7 grid-cols-3 items-center rounded border bg-background px-2 text-xs dark:border-brand-800/45 dark:bg-black/20"
         >
           <span className="tabular-nums text-red-600">{fmt(r.askAcc)}</span>
           <span className="text-center font-medium tabular-nums">
             {fmt(r.price)}
           </span>
-          <span className="text-right tabular-nums text-blue-600">
+          <span className="text-right tabular-nums text-blue-600 dark:text-blue-400">
             {fmt(r.bidAcc)}
           </span>
         </div>

features/dashboard/components/search/StockSearchForm.tsx

@@ -1,34 +1,45 @@
 import type { FormEvent } from "react";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 import { Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 interface StockSearchFormProps {
   keyword: string;
   onKeywordChange: (value: string) => void;
-  onSubmit: (e: FormEvent) => void;
+  onSubmit: (event: FormEvent) => void;
+  onInputFocus?: () => void;
   disabled?: boolean;
   isLoading?: boolean;
 }
 
+/**
+ * @description 종목 검색 입력/제출 폼을 렌더링합니다.
+ * @see features/dashboard/components/DashboardContainer.tsx 검색 패널에서 키워드 입력 이벤트를 전달합니다.
+ */
 export function StockSearchForm({
   keyword,
   onKeywordChange,
   onSubmit,
+  onInputFocus,
   disabled,
   isLoading,
 }: StockSearchFormProps) {
   return (
     <form onSubmit={onSubmit} className="flex gap-2">
+      {/* ========== SEARCH INPUT ========== */}
       <div className="relative flex-1">
-        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground dark:text-brand-100/65" />
         <Input
-          placeholder="종목명 또는 코드(6자리) 입력..."
-          className="pl-9"
           value={keyword}
           onChange={(e) => onKeywordChange(e.target.value)}
+          onFocus={onInputFocus}
+          placeholder="종목명 또는 종목코드(6자리)를 입력하세요."
+          autoComplete="off"
+          className="pl-9 dark:border-brand-700/55 dark:bg-brand-900/28 dark:text-brand-100 dark:placeholder:text-brand-100/55"
         />
       </div>
+
+      {/* ========== SUBMIT BUTTON ========== */}
       <Button type="submit" disabled={disabled || isLoading}>
         {isLoading ? "검색 중..." : "검색"}
       </Button>

features/dashboard/components/search/StockSearchHistory.tsx

@@ -0,0 +1,88 @@
+import { Clock3, Trash2, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { DashboardStockSearchHistoryItem } from "@/features/dashboard/types/dashboard.types";
+
+interface StockSearchHistoryProps {
+  items: DashboardStockSearchHistoryItem[];
+  selectedSymbol?: string;
+  onSelect: (item: DashboardStockSearchHistoryItem) => void;
+  onRemove: (symbol: string) => void;
+  onClear: () => void;
+}
+
+/**
+ * @description 최근 검색 종목 목록을 보여주고, 재검색/개별삭제/전체삭제를 제공합니다.
+ * @see features/dashboard/components/DashboardContainer.tsx 검색 패널에서 종목 재선택 UI로 사용합니다.
+ * @see features/dashboard/hooks/useStockSearch.ts searchHistory 상태를 화면에 렌더링합니다.
+ */
+export function StockSearchHistory({
+  items,
+  selectedSymbol,
+  onSelect,
+  onRemove,
+  onClear,
+}: StockSearchHistoryProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <section className="rounded-md border border-brand-200/80 bg-brand-50/45 p-2 dark:border-brand-700/50 dark:bg-brand-900/26">
+      {/* ========== HISTORY HEADER ========== */}
+      <div className="mb-1.5 flex items-center justify-between gap-2 px-1">
+        <div className="flex items-center gap-1.5 text-xs font-semibold text-brand-700 dark:text-brand-200">
+          <Clock3 className="h-3.5 w-3.5" />
+          최근 검색 종목
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={onClear}
+          className="h-7 px-2 text-[11px] text-muted-foreground hover:text-foreground dark:text-brand-100/75 dark:hover:text-brand-50"
+        >
+          <Trash2 className="mr-1 h-3.5 w-3.5" />
+          전체 삭제
+        </Button>
+      </div>
+
+      {/* ========== HISTORY LIST ========== */}
+      <div className="max-h-36 space-y-1 overflow-y-auto pr-1">
+        {items.map((item) => {
+          const isSelected = item.symbol === selectedSymbol;
+
+          return (
+            <div key={item.symbol} className="flex items-center gap-1">
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => onSelect(item)}
+                className={cn(
+                  "h-8 flex-1 justify-between rounded-md border border-transparent px-2.5",
+                  "text-left hover:bg-white/80 dark:hover:bg-brand-800/35",
+                  isSelected &&
+                    "border-brand-300 bg-white text-brand-700 dark:border-brand-500/55 dark:bg-brand-800/40 dark:text-brand-100",
+                )}
+              >
+                <span className="truncate text-sm font-medium">{item.name}</span>
+                <span className="ml-2 shrink-0 text-[11px] text-muted-foreground dark:text-brand-100/70">
+                  {item.symbol}
+                </span>
+              </Button>
+
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => onRemove(item.symbol)}
+                aria-label={`${item.name} 히스토리 삭제`}
+                className="h-8 w-8 shrink-0 text-muted-foreground hover:bg-white/80 hover:text-foreground dark:text-brand-100/70 dark:hover:bg-brand-800/35 dark:hover:text-brand-50"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}