대시보드 구현

features/dashboard/components/DashboardAccessGate.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+interface DashboardAccessGateProps {
+  canAccess: boolean;
+}
+
+/**
+ * @description KIS 인증 여부에 따라 대시보드 접근 가이드를 렌더링합니다.
+ * @param canAccess 대시보드 접근 가능 여부
+ * @see features/dashboard/components/DashboardContainer.tsx 인증되지 않은 경우 이 컴포넌트를 렌더링합니다.
+ */
+export function DashboardAccessGate({ canAccess }: DashboardAccessGateProps) {
+  if (canAccess) return null;
+
+  return (
+    <div className="flex h-full items-center justify-center p-6">
+      <section className="w-full max-w-xl rounded-2xl border border-brand-200 bg-background p-6 shadow-sm dark:border-brand-800/45 dark:bg-brand-900/18">
+        {/* ========== UNVERIFIED NOTICE ========== */}
+        <h2 className="text-lg font-semibold text-foreground">
+          대시보드를 보려면 KIS API 인증이 필요합니다.
+        </h2>
+        <p className="mt-2 text-sm text-muted-foreground">
+          설정 페이지에서 App Key/App Secret(그리고 계좌번호)을 입력하고 연결을
+          완료해 주세요.
+        </p>
+
+        {/* ========== ACTION ========== */}
+        <div className="mt-4">
+          <Button asChild className="bg-brand-600 hover:bg-brand-700">
+            <Link href="/settings">설정 페이지로 이동</Link>
+          </Button>
+        </div>
+      </section>
+    </div>
+  );
+}

features/dashboard/components/DashboardContainer.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useMemo } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { DashboardAccessGate } from "@/features/dashboard/components/DashboardAccessGate";
+import { DashboardSkeleton } from "@/features/dashboard/components/DashboardSkeleton";
+import { HoldingsList } from "@/features/dashboard/components/HoldingsList";
+import { MarketSummary } from "@/features/dashboard/components/MarketSummary";
+import { StatusHeader } from "@/features/dashboard/components/StatusHeader";
+import { StockDetailPreview } from "@/features/dashboard/components/StockDetailPreview";
+import { useDashboardData } from "@/features/dashboard/hooks/use-dashboard-data";
+import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
+
+/**
+ * @description 대시보드 메인 컨테이너입니다.
+ * @remarks UI 흐름: 대시보드 진입 -> useDashboardData API 호출 -> StatusHeader/MarketSummary/HoldingsList/StockDetailPreview 순으로 렌더링
+ * @see app/(main)/dashboard/page.tsx 로그인 완료 후 이 컴포넌트를 렌더링합니다.
+ * @see features/dashboard/hooks/use-dashboard-data.ts 대시보드 데이터 조회/갱신 상태를 관리합니다.
+ */
+export function DashboardContainer() {
+  const {
+    verifiedCredentials,
+    isKisVerified,
+    _hasHydrated,
+    wsApprovalKey,
+    wsUrl,
+  } = useKisRuntimeStore(
+    useShallow((state) => ({
+      verifiedCredentials: state.verifiedCredentials,
+      isKisVerified: state.isKisVerified,
+      _hasHydrated: state._hasHydrated,
+      wsApprovalKey: state.wsApprovalKey,
+      wsUrl: state.wsUrl,
+    })),
+  );
+
+  const canAccess = isKisVerified && Boolean(verifiedCredentials);
+
+  const {
+    balance,
+    indices,
+    selectedHolding,
+    selectedSymbol,
+    setSelectedSymbol,
+    isLoading,
+    isRefreshing,
+    balanceError,
+    indicesError,
+    lastUpdatedAt,
+    refresh,
+  } = useDashboardData(canAccess ? verifiedCredentials : null);
+
+  const isKisRestConnected = useMemo(() => {
+    if (indices.length > 0) return true;
+    if (balance && !balanceError) return true;
+    return false;
+  }, [balance, balanceError, indices.length]);
+
+  if (!_hasHydrated) {
+    return (
+      <div className="flex h-full items-center justify-center p-6">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (!canAccess) {
+    return <DashboardAccessGate canAccess={canAccess} />;
+  }
+
+  if (isLoading && !balance && indices.length === 0) {
+    return <DashboardSkeleton />;
+  }
+
+  return (
+    <section className="mx-auto flex w-full max-w-7xl flex-col gap-4 p-4 md:p-6">
+      {/* ========== STATUS HEADER ========== */}
+      <StatusHeader
+        summary={balance?.summary ?? null}
+        isKisRestConnected={isKisRestConnected}
+        isWebSocketReady={Boolean(wsApprovalKey && wsUrl)}
+        isRefreshing={isRefreshing}
+        lastUpdatedAt={lastUpdatedAt}
+        onRefresh={() => {
+          void refresh();
+        }}
+      />
+
+      {/* ========== MAIN CONTENT GRID ========== */}
+      <div className="grid gap-4 lg:grid-cols-[1.15fr_1fr]">
+        <HoldingsList
+          holdings={balance?.holdings ?? []}
+          selectedSymbol={selectedSymbol}
+          isLoading={isLoading}
+          error={balanceError}
+          onSelect={setSelectedSymbol}
+        />
+
+        <div className="grid gap-4">
+          <MarketSummary
+            items={indices}
+            isLoading={isLoading}
+            error={indicesError}
+          />
+
+          <StockDetailPreview
+            holding={selectedHolding}
+            totalAmount={balance?.summary.totalAmount ?? 0}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}

features/dashboard/components/DashboardSkeleton.tsx

@@ -0,0 +1,59 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * @description 대시보드 초기 로딩 스켈레톤 UI입니다.
+ * @see features/dashboard/components/DashboardContainer.tsx isLoading 상태에서 렌더링합니다.
+ */
+export function DashboardSkeleton() {
+  return (
+    <div className="mx-auto flex w-full max-w-7xl flex-col gap-4 p-4 md:p-6">
+      {/* ========== HEADER SKELETON ========== */}
+      <Card className="border-brand-200 dark:border-brand-800/50">
+        <CardContent className="grid gap-3 p-4 md:grid-cols-4">
+          <Skeleton className="h-20 w-full" />
+          <Skeleton className="h-20 w-full" />
+          <Skeleton className="h-20 w-full" />
+          <Skeleton className="h-20 w-full" />
+        </CardContent>
+      </Card>
+
+      {/* ========== BODY SKELETON ========== */}
+      <div className="grid gap-4 lg:grid-cols-[1.15fr_1fr]">
+        <Card>
+          <CardHeader className="pb-2">
+            <Skeleton className="h-5 w-28" />
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <Skeleton key={index} className="h-14 w-full" />
+            ))}
+          </CardContent>
+        </Card>
+
+        <div className="grid gap-4">
+          <Card>
+            <CardHeader className="pb-2">
+              <Skeleton className="h-5 w-24" />
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <Skeleton className="h-16 w-full" />
+              <Skeleton className="h-16 w-full" />
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="pb-2">
+              <Skeleton className="h-5 w-40" />
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+              <Skeleton className="h-14 w-full" />
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}

features/dashboard/components/HoldingsList.tsx

@@ -0,0 +1,123 @@
+import { AlertCircle, Wallet2 } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { DashboardHoldingItem } from "@/features/dashboard/types/dashboard.types";
+import {
+  formatCurrency,
+  formatPercent,
+  getChangeToneClass,
+} from "@/features/dashboard/utils/dashboard-format";
+import { cn } from "@/lib/utils";
+
+interface HoldingsListProps {
+  holdings: DashboardHoldingItem[];
+  selectedSymbol: string | null;
+  isLoading: boolean;
+  error: string | null;
+  onSelect: (symbol: string) => void;
+}
+
+/**
+ * @description 보유 종목 리스트 카드입니다.
+ * @see features/dashboard/components/DashboardContainer.tsx 좌측 메인 영역에서 호출합니다.
+ */
+export function HoldingsList({
+  holdings,
+  selectedSymbol,
+  isLoading,
+  error,
+  onSelect,
+}: HoldingsListProps) {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        {/* ========== TITLE ========== */}
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Wallet2 className="h-4 w-4 text-brand-600 dark:text-brand-400" />
+          보유 종목
+        </CardTitle>
+        <CardDescription>
+          현재 보유 중인 종목을 선택하면 우측 상세가 갱신됩니다.
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        {isLoading && holdings.length === 0 && (
+          <p className="text-sm text-muted-foreground">보유 종목을 불러오는 중입니다.</p>
+        )}
+
+        {error && (
+          <p className="mb-2 flex items-start gap-1.5 text-sm text-red-600 dark:text-red-400">
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
+            <span>{error}</span>
+          </p>
+        )}
+
+        {!isLoading && holdings.length === 0 && !error && (
+          <p className="text-sm text-muted-foreground">보유 종목이 없습니다.</p>
+        )}
+
+        {holdings.length > 0 && (
+          <ScrollArea className="h-[420px] pr-3">
+            <div className="space-y-2">
+              {holdings.map((holding) => {
+                const isSelected = selectedSymbol === holding.symbol;
+                const toneClass = getChangeToneClass(holding.profitLoss);
+
+                return (
+                  <button
+                    key={holding.symbol}
+                    type="button"
+                    onClick={() => onSelect(holding.symbol)}
+                    className={cn(
+                      "w-full rounded-xl border px-3 py-3 text-left transition-all",
+                      isSelected
+                        ? "border-brand-400 bg-brand-50/60 ring-1 ring-brand-300 dark:border-brand-600 dark:bg-brand-900/20 dark:ring-brand-700"
+                        : "border-border/70 bg-background hover:border-brand-200 hover:bg-brand-50/30 dark:hover:border-brand-700 dark:hover:bg-brand-900/15",
+                    )}
+                  >
+                    {/* ========== ROW TOP ========== */}
+                    <div className="flex items-center justify-between gap-2">
+                      <div>
+                        <p className="text-sm font-semibold text-foreground">
+                          {holding.name}
+                        </p>
+                        <p className="text-xs text-muted-foreground">
+                          {holding.symbol} · {holding.market} · {holding.quantity}주
+                        </p>
+                      </div>
+                      <div className="text-right">
+                        <p className="text-sm font-semibold text-foreground">
+                          {formatCurrency(holding.currentPrice)}원
+                        </p>
+                        <p className={cn("text-xs font-medium", toneClass)}>
+                          {formatPercent(holding.profitRate)}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* ========== ROW BOTTOM ========== */}
+                    <div className="mt-2 flex items-center justify-between text-xs">
+                      <span className="text-muted-foreground">
+                        평가금액 {formatCurrency(holding.evaluationAmount)}원
+                      </span>
+                      <span className={cn("font-medium", toneClass)}>
+                        손익 {formatCurrency(holding.profitLoss)}원
+                      </span>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </ScrollArea>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

features/dashboard/components/MarketSummary.tsx

@@ -0,0 +1,85 @@
+import { AlertCircle, BarChart3 } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { DashboardMarketIndexItem } from "@/features/dashboard/types/dashboard.types";
+import {
+  formatCurrency,
+  formatSignedCurrency,
+  formatSignedPercent,
+  getChangeToneClass,
+} from "@/features/dashboard/utils/dashboard-format";
+import { cn } from "@/lib/utils";
+
+interface MarketSummaryProps {
+  items: DashboardMarketIndexItem[];
+  isLoading: boolean;
+  error: string | null;
+}
+
+/**
+ * @description 코스피/코스닥 지수 요약 카드입니다.
+ * @see features/dashboard/components/DashboardContainer.tsx 우측 상단 영역에서 호출합니다.
+ */
+export function MarketSummary({ items, isLoading, error }: MarketSummaryProps) {
+  return (
+    <Card className="border-brand-200/80 dark:border-brand-800/45">
+      <CardHeader className="pb-3">
+        {/* ========== TITLE ========== */}
+        <CardTitle className="flex items-center gap-2 text-base">
+          <BarChart3 className="h-4 w-4 text-brand-600 dark:text-brand-400" />
+          시장 요약
+        </CardTitle>
+        <CardDescription>
+          KOSPI/KOSDAQ 주요 지수 변동을 보여줍니다.
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="space-y-2">
+        {isLoading && items.length === 0 && (
+          <p className="text-sm text-muted-foreground">지수 데이터를 불러오는 중입니다.</p>
+        )}
+
+        {error && (
+          <p className="flex items-center gap-1.5 text-sm text-red-600 dark:text-red-400">
+            <AlertCircle className="h-4 w-4" />
+            {error}
+          </p>
+        )}
+
+        {items.map((item) => {
+          const toneClass = getChangeToneClass(item.change);
+
+          return (
+            <div
+              key={item.code}
+              className="rounded-xl border border-border/70 bg-background/70 px-3 py-2"
+            >
+              <div className="flex items-end justify-between">
+                <div>
+                  <p className="text-xs text-muted-foreground">{item.market}</p>
+                  <p className="text-sm font-semibold text-foreground">{item.name}</p>
+                </div>
+                <p className="text-lg font-semibold tracking-tight">
+                  {formatCurrency(item.price)}
+                </p>
+              </div>
+              <div className={cn("mt-1 flex items-center gap-2 text-xs font-medium", toneClass)}>
+                <span>{formatSignedCurrency(item.change)}</span>
+                <span>{formatSignedPercent(item.changeRate)}</span>
+              </div>
+            </div>
+          );
+        })}
+
+        {!isLoading && items.length === 0 && !error && (
+          <p className="text-sm text-muted-foreground">표시할 지수 데이터가 없습니다.</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

features/dashboard/components/StatusHeader.tsx

@@ -0,0 +1,128 @@
+import Link from "next/link";
+import { Activity, RefreshCcw, Settings2, Wifi } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import type { DashboardBalanceSummary } from "@/features/dashboard/types/dashboard.types";
+import {
+  formatCurrency,
+  formatPercent,
+  getChangeToneClass,
+} from "@/features/dashboard/utils/dashboard-format";
+import { cn } from "@/lib/utils";
+
+interface StatusHeaderProps {
+  summary: DashboardBalanceSummary | null;
+  isKisRestConnected: boolean;
+  isWebSocketReady: boolean;
+  isRefreshing: boolean;
+  lastUpdatedAt: string | null;
+  onRefresh: () => void;
+}
+
+/**
+ * @description 대시보드 상단 상태 헤더(총자산/손익/연결상태/빠른액션) 컴포넌트입니다.
+ * @see features/dashboard/components/DashboardContainer.tsx 대시보드 루트에서 상태 값을 전달받아 렌더링합니다.
+ */
+export function StatusHeader({
+  summary,
+  isKisRestConnected,
+  isWebSocketReady,
+  isRefreshing,
+  lastUpdatedAt,
+  onRefresh,
+}: StatusHeaderProps) {
+  const toneClass = getChangeToneClass(summary?.totalProfitLoss ?? 0);
+  const updatedLabel = lastUpdatedAt
+    ? new Date(lastUpdatedAt).toLocaleTimeString("ko-KR", {
+        hour12: false,
+      })
+    : "--:--:--";
+
+  return (
+    <Card className="relative overflow-hidden border-brand-200 shadow-sm dark:border-brand-800/50">
+      {/* ========== BACKGROUND DECORATION ========== */}
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-20 bg-linear-to-r from-brand-100/70 via-brand-50/50 to-transparent dark:from-brand-900/35 dark:via-brand-900/20" />
+
+      <CardContent className="relative grid gap-3 p-4 md:grid-cols-[1fr_1fr_1fr_auto]">
+        {/* ========== TOTAL ASSET ========== */}
+        <div className="rounded-xl border border-border/70 bg-background/90 px-4 py-3">
+          <p className="text-xs font-medium text-muted-foreground">총 자산</p>
+          <p className="mt-1 text-xl font-semibold tracking-tight">
+            {summary ? `${formatCurrency(summary.totalAmount)}원` : "-"}
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            예수금 {summary ? `${formatCurrency(summary.cashBalance)}원` : "-"}
+          </p>
+        </div>
+
+        {/* ========== PROFIT/LOSS ========== */}
+        <div className="rounded-xl border border-border/70 bg-background/90 px-4 py-3">
+          <p className="text-xs font-medium text-muted-foreground">실시간 손익</p>
+          <p className={cn("mt-1 text-xl font-semibold tracking-tight", toneClass)}>
+            {summary ? `${formatCurrency(summary.totalProfitLoss)}원` : "-"}
+          </p>
+          <p className={cn("mt-1 text-xs font-medium", toneClass)}>
+            {summary ? formatPercent(summary.totalProfitRate) : "-"}
+          </p>
+        </div>
+
+        {/* ========== CONNECTION STATUS ========== */}
+        <div className="rounded-xl border border-border/70 bg-background/90 px-4 py-3">
+          <p className="text-xs font-medium text-muted-foreground">시스템 상태</p>
+          <div className="mt-2 flex flex-wrap items-center gap-2 text-xs font-medium">
+            <span
+              className={cn(
+                "inline-flex items-center gap-1 rounded-full px-2 py-1",
+                isKisRestConnected
+                  ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                  : "bg-red-500/10 text-red-600 dark:text-red-400",
+              )}
+            >
+              <Wifi className="h-3.5 w-3.5" />
+              REST {isKisRestConnected ? "연결됨" : "연결 끊김"}
+            </span>
+            <span
+              className={cn(
+                "inline-flex items-center gap-1 rounded-full px-2 py-1",
+                isWebSocketReady
+                  ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                  : "bg-muted text-muted-foreground",
+              )}
+            >
+              <Activity className="h-3.5 w-3.5" />
+              WS {isWebSocketReady ? "준비됨" : "미연결"}
+            </span>
+          </div>
+          <p className="mt-2 text-xs text-muted-foreground">
+            마지막 갱신 {updatedLabel}
+          </p>
+        </div>
+
+        {/* ========== QUICK ACTIONS ========== */}
+        <div className="flex items-end gap-2 md:flex-col md:items-stretch md:justify-between">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={onRefresh}
+            disabled={isRefreshing}
+            className="w-full border-brand-200 text-brand-700 hover:bg-brand-50 dark:border-brand-700 dark:text-brand-300 dark:hover:bg-brand-900/30"
+          >
+            <RefreshCcw
+              className={cn("h-4 w-4", isRefreshing ? "animate-spin" : "")}
+            />
+            새로고침
+          </Button>
+          <Button
+            asChild
+            className="w-full bg-brand-600 text-white hover:bg-brand-700"
+          >
+            <Link href="/settings">
+              <Settings2 className="h-4 w-4" />
+              자동매매 설정
+            </Link>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

features/dashboard/components/StockDetailPreview.tsx

@@ -0,0 +1,141 @@
+import { BarChartBig, MousePointerClick } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import type { DashboardHoldingItem } from "@/features/dashboard/types/dashboard.types";
+import {
+  formatCurrency,
+  formatPercent,
+  getChangeToneClass,
+} from "@/features/dashboard/utils/dashboard-format";
+import { cn } from "@/lib/utils";
+
+interface StockDetailPreviewProps {
+  holding: DashboardHoldingItem | null;
+  totalAmount: number;
+}
+
+/**
+ * @description 선택 종목 상세 요약 카드입니다.
+ * @see features/dashboard/components/DashboardContainer.tsx HoldingsList 선택 결과를 전달받아 렌더링합니다.
+ */
+export function StockDetailPreview({
+  holding,
+  totalAmount,
+}: StockDetailPreviewProps) {
+  if (!holding) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <BarChartBig className="h-4 w-4 text-brand-600 dark:text-brand-400" />
+            종목 상세 미리보기
+          </CardTitle>
+          <CardDescription>
+            보유 종목을 선택하면 상세 요약이 표시됩니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            왼쪽 보유 종목 리스트에서 종목을 선택해 주세요.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const profitToneClass = getChangeToneClass(holding.profitLoss);
+  const allocationRate =
+    totalAmount > 0 ? Math.min((holding.evaluationAmount / totalAmount) * 100, 100) : 0;
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        {/* ========== TITLE ========== */}
+        <CardTitle className="flex items-center gap-2 text-base">
+          <BarChartBig className="h-4 w-4 text-brand-600 dark:text-brand-400" />
+          종목 상세 미리보기
+        </CardTitle>
+        <CardDescription>
+          {holding.name} ({holding.symbol}) · {holding.market}
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* ========== PRIMARY METRICS ========== */}
+        <div className="grid grid-cols-2 gap-2 text-sm">
+          <Metric label="보유 수량" value={`${holding.quantity.toLocaleString("ko-KR")}주`} />
+          <Metric label="매입 평균가" value={`${formatCurrency(holding.averagePrice)}원`} />
+          <Metric label="현재가" value={`${formatCurrency(holding.currentPrice)}원`} />
+          <Metric
+            label="수익률"
+            value={formatPercent(holding.profitRate)}
+            valueClassName={profitToneClass}
+          />
+          <Metric
+            label="평가손익"
+            value={`${formatCurrency(holding.profitLoss)}원`}
+            valueClassName={profitToneClass}
+          />
+          <Metric
+            label="평가금액"
+            value={`${formatCurrency(holding.evaluationAmount)}원`}
+          />
+        </div>
+
+        {/* ========== ALLOCATION BAR ========== */}
+        <div className="rounded-xl border border-border/70 bg-background/70 p-3">
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>총 자산 대비 비중</span>
+            <span>{formatPercent(allocationRate)}</span>
+          </div>
+          <div className="mt-2 h-2 rounded-full bg-muted">
+            <div
+              className="h-2 rounded-full bg-linear-to-r from-brand-500 to-brand-700"
+              style={{ width: `${allocationRate}%` }}
+            />
+          </div>
+        </div>
+
+        {/* ========== QUICK ORDER PLACEHOLDER ========== */}
+        <div className="rounded-xl border border-dashed border-border/80 bg-muted/30 p-3">
+          <p className="flex items-center gap-1.5 text-sm font-medium text-foreground/80">
+            <MousePointerClick className="h-4 w-4 text-brand-500" />
+            간편 주문(준비 중)
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            향후 이 영역에서 선택 종목의 빠른 매수/매도 기능을 제공합니다.
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface MetricProps {
+  label: string;
+  value: string;
+  valueClassName?: string;
+}
+
+/**
+ * @description 상세 카드에서 공통으로 사용하는 지표 행입니다.
+ * @param label 지표명
+ * @param value 지표값
+ * @param valueClassName 값 텍스트 색상 클래스
+ * @see features/dashboard/components/StockDetailPreview.tsx 종목 상세 지표 표시
+ */
+function Metric({ label, value, valueClassName }: MetricProps) {
+  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={cn("mt-1 text-sm font-semibold text-foreground", valueClassName)}>
+        {value}
+      </p>
+    </div>
+  );
+}