대시보드 추가기능 + 계좌인증

features/dashboard/apis/dashboard.api.ts

@@ -1,5 +1,6 @@
 import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
 import type {
+  DashboardActivityResponse,
   DashboardBalanceResponse,
   DashboardIndicesResponse,
 } from "@/features/dashboard/types/dashboard.types";
@@ -65,6 +66,34 @@ export async function fetchDashboardIndices(
   return payload as DashboardIndicesResponse;
 }
 
+/**
+ * 주문내역/매매일지(활동 데이터)를 조회합니다.
+ * @param credentials KIS 인증 정보
+ * @returns 활동 데이터 응답
+ * @see app/api/kis/domestic/activity/route.ts 서버 라우트
+ */
+export async function fetchDashboardActivity(
+  credentials: KisRuntimeCredentials,
+): Promise<DashboardActivityResponse> {
+  const response = await fetch("/api/kis/domestic/activity", {
+    method: "GET",
+    headers: buildKisRequestHeaders(credentials),
+    cache: "no-store",
+  });
+
+  const payload = (await response.json()) as
+    | DashboardActivityResponse
+    | { error?: string };
+
+  if (!response.ok) {
+    throw new Error(
+      "error" in payload ? payload.error : "활동 데이터 조회 중 오류가 발생했습니다.",
+    );
+  }
+
+  return payload as DashboardActivityResponse;
+}
+
 /**
  * 대시보드 API 공통 헤더를 구성합니다.
  * @param credentials KIS 인증 정보

features/dashboard/components/ActivitySection.tsx

@@ -0,0 +1,307 @@
+import { AlertCircle, ClipboardList, FileText } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type {
+  DashboardActivityResponse,
+  DashboardTradeSide,
+} from "@/features/dashboard/types/dashboard.types";
+import {
+  formatCurrency,
+  formatPercent,
+  getChangeToneClass,
+} from "@/features/dashboard/utils/dashboard-format";
+import { cn } from "@/lib/utils";
+
+interface ActivitySectionProps {
+  activity: DashboardActivityResponse | null;
+  isLoading: boolean;
+  error: string | null;
+}
+
+/**
+ * @description 대시보드 하단 주문내역/매매일지 섹션입니다.
+ * @remarks UI 흐름: DashboardContainer -> ActivitySection -> tabs(주문내역/매매일지) -> 리스트 렌더링
+ * @see features/dashboard/components/DashboardContainer.tsx 하단 영역에서 호출합니다.
+ * @see app/api/kis/domestic/activity/route.ts 주문내역/매매일지 데이터 소스
+ */
+export function ActivitySection({ activity, isLoading, error }: ActivitySectionProps) {
+  const orders = activity?.orders ?? [];
+  const journalRows = activity?.tradeJournal ?? [];
+  const summary = activity?.journalSummary;
+  const warnings = activity?.warnings ?? [];
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        {/* ========== TITLE ========== */}
+        <CardTitle className="flex items-center gap-2 text-base">
+          <ClipboardList className="h-4 w-4 text-brand-600 dark:text-brand-400" />
+          주문내역 · 매매일지
+        </CardTitle>
+        <CardDescription>
+          최근 주문 체결 내역과 실현손익 기록을 확인합니다.
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="space-y-3">
+        {isLoading && !activity && (
+          <p className="text-sm text-muted-foreground">
+            주문내역/매매일지를 불러오는 중입니다.
+          </p>
+        )}
+
+        {error && (
+          <p className="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>
+        )}
+
+        {warnings.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {warnings.map((warning) => (
+              <Badge
+                key={warning}
+                variant="outline"
+                className="border-amber-300 bg-amber-50 text-amber-700 dark:border-amber-700 dark:bg-amber-950/30 dark:text-amber-300"
+              >
+                <AlertCircle className="h-3 w-3" />
+                {warning}
+              </Badge>
+            ))}
+          </div>
+        )}
+
+        {/* ========== TABS ========== */}
+        <Tabs defaultValue="orders" className="gap-3">
+          <TabsList className="w-full justify-start">
+            <TabsTrigger value="orders">주문내역 {orders.length}건</TabsTrigger>
+            <TabsTrigger value="journal">매매일지 {journalRows.length}건</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="orders">
+            <div className="overflow-hidden rounded-xl border border-border/70">
+              <div className="grid grid-cols-[100px_1fr_140px_120px_120px_90px] gap-2 bg-muted/40 px-3 py-2 text-xs font-medium text-muted-foreground">
+                <span>일시</span>
+                <span>종목</span>
+                <span>주문</span>
+                <span>체결</span>
+                <span>평균체결가</span>
+                <span>상태</span>
+              </div>
+
+              <ScrollArea className="h-[280px]">
+                {orders.length === 0 ? (
+                  <p className="px-3 py-4 text-sm text-muted-foreground">
+                    표시할 주문내역이 없습니다.
+                  </p>
+                ) : (
+                  <div className="divide-y divide-border/60">
+                    {orders.map((order) => (
+                      <div
+                        key={`${order.orderNo}-${order.orderDate}-${order.orderTime}`}
+                        className="grid grid-cols-[100px_1fr_140px_120px_120px_90px] items-center gap-2 px-3 py-2 text-sm"
+                      >
+                        {/* ========== ORDER DATETIME ========== */}
+                        <div className="text-xs text-muted-foreground">
+                          <p>{order.orderDate}</p>
+                          <p>{order.orderTime}</p>
+                        </div>
+
+                        {/* ========== STOCK INFO ========== */}
+                        <div>
+                          <p className="font-medium text-foreground">{order.name}</p>
+                          <p className="text-xs text-muted-foreground">
+                            {order.symbol} · {getSideLabel(order.side)}
+                          </p>
+                        </div>
+
+                        {/* ========== ORDER INFO ========== */}
+                        <div className="text-xs">
+                          <p>수량 {order.orderQuantity.toLocaleString("ko-KR")}주</p>
+                          <p className="text-muted-foreground">
+                            {order.orderTypeName} · {formatCurrency(order.orderPrice)}원
+                          </p>
+                        </div>
+
+                        {/* ========== FILLED INFO ========== */}
+                        <div className="text-xs">
+                          <p>체결 {order.filledQuantity.toLocaleString("ko-KR")}주</p>
+                          <p className="text-muted-foreground">
+                            금액 {formatCurrency(order.filledAmount)}원
+                          </p>
+                        </div>
+
+                        {/* ========== AVG PRICE ========== */}
+                        <div className="text-xs font-medium text-foreground">
+                          {formatCurrency(order.averageFilledPrice)}원
+                        </div>
+
+                        {/* ========== STATUS ========== */}
+                        <div>
+                          <Badge
+                            variant="outline"
+                            className={cn(
+                              "text-[11px]",
+                              order.isCanceled
+                                ? "border-slate-300 text-slate-600 dark:border-slate-700 dark:text-slate-300"
+                                : order.remainingQuantity > 0
+                                  ? "border-amber-300 text-amber-700 dark:border-amber-700 dark:text-amber-300"
+                                  : "border-emerald-300 text-emerald-700 dark:border-emerald-700 dark:text-emerald-300",
+                            )}
+                          >
+                            {order.isCanceled
+                              ? "취소"
+                              : order.remainingQuantity > 0
+                                ? "미체결"
+                                : "체결완료"}
+                          </Badge>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </ScrollArea>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="journal" className="space-y-3">
+            {/* ========== JOURNAL SUMMARY ========== */}
+            <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
+              <SummaryMetric
+                label="총 실현손익"
+                value={summary ? `${formatCurrency(summary.totalRealizedProfit)}원` : "-"}
+                toneClass={summary ? getChangeToneClass(summary.totalRealizedProfit) : undefined}
+              />
+              <SummaryMetric
+                label="총 수익률"
+                value={summary ? formatPercent(summary.totalRealizedRate) : "-"}
+                toneClass={summary ? getChangeToneClass(summary.totalRealizedProfit) : undefined}
+              />
+              <SummaryMetric
+                label="총 매수금액"
+                value={summary ? `${formatCurrency(summary.totalBuyAmount)}원` : "-"}
+              />
+              <SummaryMetric
+                label="총 매도금액"
+                value={summary ? `${formatCurrency(summary.totalSellAmount)}원` : "-"}
+              />
+            </div>
+
+            <div className="overflow-hidden rounded-xl border border-border/70">
+              <div className="grid grid-cols-[100px_1fr_120px_130px_120px_110px] gap-2 bg-muted/40 px-3 py-2 text-xs font-medium text-muted-foreground">
+                <span>일자</span>
+                <span>종목</span>
+                <span>매매구분</span>
+                <span>매수/매도금액</span>
+                <span>실현손익(률)</span>
+                <span>비용</span>
+              </div>
+
+              <ScrollArea className="h-[280px]">
+                {journalRows.length === 0 ? (
+                  <p className="px-3 py-4 text-sm text-muted-foreground">
+                    표시할 매매일지가 없습니다.
+                  </p>
+                ) : (
+                  <div className="divide-y divide-border/60">
+                    {journalRows.map((row) => {
+                      const toneClass = getChangeToneClass(row.realizedProfit);
+                      return (
+                        <div
+                          key={`${row.tradeDate}-${row.symbol}-${row.realizedProfit}-${row.buyAmount}-${row.sellAmount}`}
+                          className="grid grid-cols-[100px_1fr_120px_130px_120px_110px] items-center gap-2 px-3 py-2 text-sm"
+                        >
+                          <p className="text-xs text-muted-foreground">{row.tradeDate}</p>
+                          <div>
+                            <p className="font-medium text-foreground">{row.name}</p>
+                            <p className="text-xs text-muted-foreground">{row.symbol}</p>
+                          </div>
+                          <p className={cn("text-xs font-medium", getSideToneClass(row.side))}>
+                            {getSideLabel(row.side)}
+                          </p>
+                          <p className="text-xs">
+                            매수 {formatCurrency(row.buyAmount)}원 / 매도 {formatCurrency(row.sellAmount)}원
+                          </p>
+                          <p className={cn("text-xs font-medium", toneClass)}>
+                            {formatCurrency(row.realizedProfit)}원 ({formatPercent(row.realizedRate)})
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            수수료 {formatCurrency(row.fee)}원
+                            <br />
+                            세금 {formatCurrency(row.tax)}원
+                          </p>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </ScrollArea>
+            </div>
+          </TabsContent>
+        </Tabs>
+
+        {!isLoading && !error && !activity && (
+          <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
+            <FileText className="h-4 w-4" />
+            활동 데이터가 없습니다.
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+interface SummaryMetricProps {
+  label: string;
+  value: string;
+  toneClass?: string;
+}
+
+/**
+ * @description 매매일지 요약 지표 카드입니다.
+ * @param label 지표명
+ * @param value 지표값
+ * @param toneClass 값 색상 클래스
+ * @see features/dashboard/components/ActivitySection.tsx 매매일지 상단 요약 표시
+ */
+function SummaryMetric({ label, value, toneClass }: SummaryMetricProps) {
+  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", toneClass)}>{value}</p>
+    </div>
+  );
+}
+
+/**
+ * @description 매수/매도 라벨 텍스트를 반환합니다.
+ * @param side 매수/매도 구분값
+ * @returns 라벨 문자열
+ * @see features/dashboard/components/ActivitySection.tsx 주문내역/매매일지 표시
+ */
+function getSideLabel(side: DashboardTradeSide) {
+  if (side === "buy") return "매수";
+  if (side === "sell") return "매도";
+  return "기타";
+}
+
+/**
+ * @description 매수/매도 라벨 색상 클래스를 반환합니다.
+ * @param side 매수/매도 구분값
+ * @returns Tailwind 텍스트 클래스
+ * @see features/dashboard/components/ActivitySection.tsx 매매구분 표시
+ */
+function getSideToneClass(side: DashboardTradeSide) {
+  if (side === "buy") return "text-red-600 dark:text-red-400";
+  if (side === "sell") return "text-blue-600 dark:text-blue-400";
+  return "text-muted-foreground";
+}

features/dashboard/components/DashboardAccessGate.tsx

@@ -18,11 +18,10 @@ export function DashboardAccessGate({ canAccess }: DashboardAccessGateProps) {
       <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 ========== */}

features/dashboard/components/DashboardContainer.tsx

@@ -3,6 +3,7 @@
 import { useMemo } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { LoadingSpinner } from "@/components/ui/loading-spinner";
+import { ActivitySection } from "@/features/dashboard/components/ActivitySection";
 import { DashboardAccessGate } from "@/features/dashboard/components/DashboardAccessGate";
 import { DashboardSkeleton } from "@/features/dashboard/components/DashboardSkeleton";
 import { HoldingsList } from "@/features/dashboard/components/HoldingsList";
@@ -22,6 +23,8 @@ export function DashboardContainer() {
   const {
     verifiedCredentials,
     isKisVerified,
+    isKisProfileVerified,
+    verifiedAccountNo,
     _hasHydrated,
     wsApprovalKey,
     wsUrl,
@@ -29,6 +32,8 @@ export function DashboardContainer() {
     useShallow((state) => ({
       verifiedCredentials: state.verifiedCredentials,
       isKisVerified: state.isKisVerified,
+      isKisProfileVerified: state.isKisProfileVerified,
+      verifiedAccountNo: state.verifiedAccountNo,
       _hasHydrated: state._hasHydrated,
       wsApprovalKey: state.wsApprovalKey,
       wsUrl: state.wsUrl,
@@ -38,6 +43,7 @@ export function DashboardContainer() {
   const canAccess = isKisVerified && Boolean(verifiedCredentials);
 
   const {
+    activity,
     balance,
     indices,
     selectedHolding,
@@ -45,6 +51,7 @@ export function DashboardContainer() {
     setSelectedSymbol,
     isLoading,
     isRefreshing,
+    activityError,
     balanceError,
     indicesError,
     lastUpdatedAt,
@@ -80,6 +87,8 @@ export function DashboardContainer() {
         summary={balance?.summary ?? null}
         isKisRestConnected={isKisRestConnected}
         isWebSocketReady={Boolean(wsApprovalKey && wsUrl)}
+        isProfileVerified={isKisProfileVerified}
+        verifiedAccountNo={verifiedAccountNo}
         isRefreshing={isRefreshing}
         lastUpdatedAt={lastUpdatedAt}
         onRefresh={() => {
@@ -110,6 +119,13 @@ export function DashboardContainer() {
           />
         </div>
       </div>
+
+      {/* ========== ACTIVITY SECTION ========== */}
+      <ActivitySection
+        activity={activity}
+        isLoading={isLoading}
+        error={activityError}
+      />
     </section>
   );
 }

features/dashboard/components/HoldingsList.tsx

@@ -103,12 +103,15 @@ export function HoldingsList({
                     </div>
 
                     {/* ========== ROW BOTTOM ========== */}
-                    <div className="mt-2 flex items-center justify-between text-xs">
+                    <div className="mt-2 grid grid-cols-3 gap-1 text-xs">
                       <span className="text-muted-foreground">
-                        평가금액 {formatCurrency(holding.evaluationAmount)}원
+                        평균 매수가 {formatCurrency(holding.averagePrice)}원
                       </span>
-                      <span className={cn("font-medium", toneClass)}>
-                        손익 {formatCurrency(holding.profitLoss)}원
+                      <span className="text-muted-foreground">
+                        현재 평가금액 {formatCurrency(holding.evaluationAmount)}원
+                      </span>
+                      <span className={cn("text-right font-medium", toneClass)}>
+                        현재 손익 {formatCurrency(holding.profitLoss)}원
                       </span>
                     </div>
                   </button>

features/dashboard/components/MarketSummary.tsx

@@ -32,10 +32,10 @@ export function MarketSummary({ items, isLoading, error }: MarketSummaryProps) {
         {/* ========== 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>
 

features/dashboard/components/StatusHeader.tsx

@@ -14,6 +14,8 @@ interface StatusHeaderProps {
   summary: DashboardBalanceSummary | null;
   isKisRestConnected: boolean;
   isWebSocketReady: boolean;
+  isProfileVerified: boolean;
+  verifiedAccountNo: string | null;
   isRefreshing: boolean;
   lastUpdatedAt: string | null;
   onRefresh: () => void;
@@ -27,6 +29,8 @@ export function StatusHeader({
   summary,
   isKisRestConnected,
   isWebSocketReady,
+  isProfileVerified,
+  verifiedAccountNo,
   isRefreshing,
   lastUpdatedAt,
   onRefresh,
@@ -53,22 +57,31 @@ export function StatusHeader({
           <p className="mt-1 text-xs text-muted-foreground">
             예수금 {summary ? `${formatCurrency(summary.cashBalance)}원` : "-"}
           </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            실제 자산 {summary ? `${formatCurrency(summary.netAssetAmount)}원` : "-"}
+          </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="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>
+          <p className="mt-1 text-xs text-muted-foreground">
+            현재 평가금액 {summary ? `${formatCurrency(summary.evaluationAmount)}원` : "-"}
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            총 매수금액 {summary ? `${formatCurrency(summary.purchaseAmount)}원` : "-"}
+          </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>
+          <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(
@@ -79,7 +92,7 @@ export function StatusHeader({
               )}
             >
               <Wifi className="h-3.5 w-3.5" />
-              REST {isKisRestConnected ? "연결됨" : "연결 끊김"}
+              서버 {isKisRestConnected ? "연결됨" : "연결 끊김"}
             </span>
             <span
               className={cn(
@@ -90,11 +103,28 @@ export function StatusHeader({
               )}
             >
               <Activity className="h-3.5 w-3.5" />
-              WS {isWebSocketReady ? "준비됨" : "미연결"}
+              실시간 시세 {isWebSocketReady ? "연결됨" : "미연결"}
+            </span>
+            <span
+              className={cn(
+                "inline-flex items-center gap-1 rounded-full px-2 py-1",
+                isProfileVerified
+                  ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+                  : "bg-amber-500/10 text-amber-700 dark:text-amber-400",
+              )}
+            >
+              <Activity className="h-3.5 w-3.5" />
+              계좌 인증 {isProfileVerified ? "완료" : "미완료"}
             </span>
           </div>
           <p className="mt-2 text-xs text-muted-foreground">
-            마지막 갱신 {updatedLabel}
+            마지막 업데이트 {updatedLabel}
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            계좌 {maskAccountNo(verifiedAccountNo)}
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            대출금 {summary ? `${formatCurrency(summary.loanAmount)}원` : "-"}
           </p>
         </div>
 
@@ -110,7 +140,7 @@ export function StatusHeader({
             <RefreshCcw
               className={cn("h-4 w-4", isRefreshing ? "animate-spin" : "")}
             />
-            새로고침
+            지금 다시 불러오기
           </Button>
           <Button
             asChild
@@ -118,7 +148,7 @@ export function StatusHeader({
           >
             <Link href="/settings">
               <Settings2 className="h-4 w-4" />
-              자동매매 설정
+              연결 설정
             </Link>
           </Button>
         </div>
@@ -126,3 +156,16 @@ export function StatusHeader({
     </Card>
   );
 }
+
+/**
+ * @description 계좌번호를 마스킹해 표시합니다.
+ * @param value 계좌번호(8-2)
+ * @returns 마스킹 문자열
+ * @see features/dashboard/components/StatusHeader.tsx 시스템 상태 영역 계좌 표시
+ */
+function maskAccountNo(value: string | null) {
+  if (!value) return "-";
+  const digits = value.replace(/\D/g, "");
+  if (digits.length !== 10) return "********";
+  return "********-**";
+}

features/dashboard/components/StockDetailPreview.tsx

@@ -33,10 +33,10 @@ export function StockDetailPreview({
         <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>
@@ -58,7 +58,7 @@ export function StockDetailPreview({
         {/* ========== 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}
@@ -77,7 +77,7 @@ export function StockDetailPreview({
             valueClassName={profitToneClass}
           />
           <Metric
-            label="평가손익"
+            label="현재 손익"
             value={`${formatCurrency(holding.profitLoss)}원`}
             valueClassName={profitToneClass}
           />
@@ -105,7 +105,7 @@ export function StockDetailPreview({
         <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">
             향후 이 영역에서 선택 종목의 빠른 매수/매도 기능을 제공합니다.

features/dashboard/hooks/use-dashboard-data.ts

@@ -3,16 +3,19 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
 import {
+  fetchDashboardActivity,
   fetchDashboardBalance,
   fetchDashboardIndices,
 } from "@/features/dashboard/apis/dashboard.api";
 import type {
+  DashboardActivityResponse,
   DashboardBalanceResponse,
   DashboardHoldingItem,
   DashboardIndicesResponse,
 } from "@/features/dashboard/types/dashboard.types";
 
 interface UseDashboardDataResult {
+  activity: DashboardActivityResponse | null;
   balance: DashboardBalanceResponse | null;
   indices: DashboardIndicesResponse["items"];
   selectedHolding: DashboardHoldingItem | null;
@@ -20,6 +23,7 @@ interface UseDashboardDataResult {
   setSelectedSymbol: (symbol: string) => void;
   isLoading: boolean;
   isRefreshing: boolean;
+  activityError: string | null;
   balanceError: string | null;
   indicesError: string | null;
   lastUpdatedAt: string | null;
@@ -39,11 +43,13 @@ const POLLING_INTERVAL_MS = 60_000;
 export function useDashboardData(
   credentials: KisRuntimeCredentials | null,
 ): UseDashboardDataResult {
+  const [activity, setActivity] = useState<DashboardActivityResponse | null>(null);
   const [balance, setBalance] = useState<DashboardBalanceResponse | null>(null);
   const [indices, setIndices] = useState<DashboardIndicesResponse["items"]>([]);
   const [selectedSymbol, setSelectedSymbolState] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [activityError, setActivityError] = useState<string | null>(null);
   const [balanceError, setBalanceError] = useState<string | null>(null);
   const [indicesError, setIndicesError] = useState<string | null>(null);
   const [lastUpdatedAt, setLastUpdatedAt] = useState<string | null>(null);
@@ -73,14 +79,18 @@ export function useDashboardData(
       const tasks: [
         Promise<DashboardBalanceResponse | null>,
         Promise<DashboardIndicesResponse>,
+        Promise<DashboardActivityResponse | null>,
       ] = [
         hasAccountNo
           ? fetchDashboardBalance(credentials)
           : Promise.resolve(null),
         fetchDashboardIndices(credentials),
+        hasAccountNo
+          ? fetchDashboardActivity(credentials)
+          : Promise.resolve(null),
       ];
 
-      const [balanceResult, indicesResult] = await Promise.allSettled(tasks);
+      const [balanceResult, indicesResult, activityResult] = await Promise.allSettled(tasks);
       if (requestSeq !== requestSeqRef.current) return;
 
       let hasAnySuccess = false;
@@ -90,6 +100,10 @@ export function useDashboardData(
         setBalanceError(
           "계좌번호가 없어 잔고를 조회할 수 없습니다. 설정에서 계좌번호(8-2)를 입력해 주세요.",
         );
+        setActivity(null);
+        setActivityError(
+          "계좌번호가 없어 주문내역/매매일지를 조회할 수 없습니다. 설정에서 계좌번호(8-2)를 입력해 주세요.",
+        );
         setSelectedSymbolState(null);
       } else if (balanceResult.status === "fulfilled") {
         hasAnySuccess = true;
@@ -108,6 +122,14 @@ export function useDashboardData(
         setBalanceError(balanceResult.reason instanceof Error ? balanceResult.reason.message : "잔고 조회에 실패했습니다.");
       }
 
+      if (hasAccountNo && activityResult.status === "fulfilled") {
+        hasAnySuccess = true;
+        setActivity(activityResult.value);
+        setActivityError(null);
+      } else if (hasAccountNo && activityResult.status === "rejected") {
+        setActivityError(activityResult.reason instanceof Error ? activityResult.reason.message : "주문내역/매매일지 조회에 실패했습니다.");
+      }
+
       if (indicesResult.status === "fulfilled") {
         hasAnySuccess = true;
         setIndices(indicesResult.value.items);
@@ -167,6 +189,7 @@ export function useDashboardData(
   }, []);
 
   return {
+    activity,
     balance,
     indices,
     selectedHolding,
@@ -174,6 +197,7 @@ export function useDashboardData(
     setSelectedSymbol,
     isLoading,
     isRefreshing,
+    activityError,
     balanceError,
     indicesError,
     lastUpdatedAt,

features/dashboard/types/dashboard.types.ts

@@ -15,6 +15,10 @@ export interface DashboardBalanceSummary {
   cashBalance: number;
   totalProfitLoss: number;
   totalProfitRate: number;
+  netAssetAmount: number;
+  evaluationAmount: number;
+  purchaseAmount: number;
+  loanAmount: number;
 }
 
 /**
@@ -32,6 +36,61 @@ export interface DashboardHoldingItem {
   profitRate: number;
 }
 
+/**
+ * 주문/매매 공통 매수/매도 구분
+ */
+export type DashboardTradeSide = "buy" | "sell" | "unknown";
+
+/**
+ * 대시보드 주문내역 항목
+ */
+export interface DashboardOrderHistoryItem {
+  orderDate: string;
+  orderTime: string;
+  orderNo: string;
+  symbol: string;
+  name: string;
+  side: DashboardTradeSide;
+  orderTypeName: string;
+  orderPrice: number;
+  orderQuantity: number;
+  filledQuantity: number;
+  filledAmount: number;
+  averageFilledPrice: number;
+  remainingQuantity: number;
+  isCanceled: boolean;
+}
+
+/**
+ * 대시보드 매매일지 항목
+ */
+export interface DashboardTradeJournalItem {
+  tradeDate: string;
+  symbol: string;
+  name: string;
+  side: DashboardTradeSide;
+  buyQuantity: number;
+  buyAmount: number;
+  sellQuantity: number;
+  sellAmount: number;
+  realizedProfit: number;
+  realizedRate: number;
+  fee: number;
+  tax: number;
+}
+
+/**
+ * 대시보드 매매일지 요약
+ */
+export interface DashboardTradeJournalSummary {
+  totalRealizedProfit: number;
+  totalRealizedRate: number;
+  totalBuyAmount: number;
+  totalSellAmount: number;
+  totalFee: number;
+  totalTax: number;
+}
+
 /**
  * 계좌 잔고 API 응답 모델
  */
@@ -64,3 +123,16 @@ export interface DashboardIndicesResponse {
   items: DashboardMarketIndexItem[];
   fetchedAt: string;
 }
+
+/**
+ * 주문내역/매매일지 API 응답 모델
+ */
+export interface DashboardActivityResponse {
+  source: "kis";
+  tradingEnv: KisTradingEnv;
+  orders: DashboardOrderHistoryItem[];
+  tradeJournal: DashboardTradeJournalItem[];
+  journalSummary: DashboardTradeJournalSummary;
+  warnings: string[];
+  fetchedAt: string;
+}