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

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">
             향후 이 영역에서 선택 종목의 빠른 매수/매도 기능을 제공합니다.