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

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;
+}

features/settings/apis/kis-auth.api.ts

@@ -1,5 +1,6 @@
 import type { KisRuntimeCredentials } from "@/features/settings/store/use-kis-runtime-store";
 import type {
+  DashboardKisProfileValidateResponse,
   DashboardKisRevokeResponse,
   DashboardKisValidateResponse,
   DashboardKisWsApprovalResponse,
@@ -43,7 +44,7 @@ export async function validateKisCredentials(
   return postKisAuthApi<DashboardKisValidateResponse>(
     "/api/kis/validate",
     credentials,
-    "API 키 검증에 실패했습니다.",
+    "앱키 검증에 실패했습니다.",
   );
 }
 
@@ -80,3 +81,17 @@ export async function fetchKisWebSocketApproval(
 
   return payload;
 }
+
+/**
+ * @description 계좌번호를 검증합니다.
+ * @see app/api/kis/validate-profile/route.ts
+ */
+export async function validateKisProfile(
+  credentials: KisRuntimeCredentials,
+): Promise<DashboardKisProfileValidateResponse> {
+  return postKisAuthApi<DashboardKisProfileValidateResponse>(
+    "/api/kis/validate-profile",
+    credentials,
+    "계좌 검증에 실패했습니다.",
+  );
+}

features/settings/components/KisAuthForm.tsx

@@ -14,7 +14,6 @@ import {
   CheckCircle2,
   XCircle,
   Lock,
-  CreditCard,
   Sparkles,
   Zap,
   Activity,
@@ -22,23 +21,22 @@ import {
 import { InlineSpinner } from "@/components/ui/loading-spinner";
 
 /**
- * @description KIS 인증 입력 폼 (Minimal Redesign v4)
- * - User Feedback: "입력창이 너무 길어", "파란색/하늘색 제거해"
- * - Compact Width: max-w-lg + mx-auto
- * - Monochrome Mock Mode: Blue -> Zinc/Gray
+ * @description 한국투자증권 앱키/앱시크릿키 인증 폼입니다.
+ * @remarks UI 흐름: /settings -> 앱키/앱시크릿키 입력 -> 연결 확인 버튼 -> /api/kis/validate -> 연결 상태 반영
+ * @see app/api/kis/validate/route.ts 앱키 검증 API
+ * @see features/settings/store/use-kis-runtime-store.ts 인증 상태 저장소
  */
 export function KisAuthForm() {
   const {
     kisTradingEnvInput,
     kisAppKeyInput,
     kisAppSecretInput,
-    kisAccountNoInput,
+    verifiedAccountNo,
     verifiedCredentials,
     isKisVerified,
     setKisTradingEnvInput,
     setKisAppKeyInput,
     setKisAppSecretInput,
-    setKisAccountNoInput,
     setVerifiedKisSession,
     invalidateKisVerification,
     clearKisRuntimeSession,
@@ -47,13 +45,12 @@ export function KisAuthForm() {
       kisTradingEnvInput: state.kisTradingEnvInput,
       kisAppKeyInput: state.kisAppKeyInput,
       kisAppSecretInput: state.kisAppSecretInput,
-      kisAccountNoInput: state.kisAccountNoInput,
+      verifiedAccountNo: state.verifiedAccountNo,
       verifiedCredentials: state.verifiedCredentials,
       isKisVerified: state.isKisVerified,
       setKisTradingEnvInput: state.setKisTradingEnvInput,
       setKisAppKeyInput: state.setKisAppKeyInput,
       setKisAppSecretInput: state.setKisAppSecretInput,
-      setKisAccountNoInput: state.setKisAccountNoInput,
       setVerifiedKisSession: state.setVerifiedKisSession,
       invalidateKisVerification: state.invalidateKisVerification,
       clearKisRuntimeSession: state.clearKisRuntimeSession,
@@ -66,9 +63,7 @@ export function KisAuthForm() {
   const [isRevoking, startRevokeTransition] = useTransition();
 
   // 입력 필드 Focus 상태 관리를 위한 State
-  const [focusedField, setFocusedField] = useState<
-    "appKey" | "appSecret" | "accountNo" | null
-  >(null);
+  const [focusedField, setFocusedField] = useState<"appKey" | "appSecret" | null>(null);
 
   function handleValidate() {
     startValidateTransition(async () => {
@@ -78,23 +73,15 @@ export function KisAuthForm() {
 
         const appKey = kisAppKeyInput.trim();
         const appSecret = kisAppSecretInput.trim();
-        const accountNo = kisAccountNoInput.trim();
-
         if (!appKey || !appSecret) {
-          throw new Error("App Key와 App Secret을 모두 입력해 주세요.");
-        }
-
-        if (accountNo && !isValidAccountNo(accountNo)) {
-          throw new Error(
-            "계좌번호 형식이 올바르지 않습니다. 8-2 형식(예: 12345678-01)으로 입력해 주세요.",
-          );
+          throw new Error("앱키와 앱시크릿키를 모두 입력해 주세요.");
         }
 
         const credentials = {
           appKey,
           appSecret,
           tradingEnv: kisTradingEnvInput,
-          accountNo,
+          accountNo: verifiedAccountNo ?? "",
         };
 
         const result = await validateKisCredentials(credentials);
@@ -107,7 +94,7 @@ export function KisAuthForm() {
         setErrorMessage(
           err instanceof Error
             ? err.message
-            : "API 키 검증 중 오류가 발생했습니다.",
+            : "앱키 확인 중 오류가 발생했습니다.",
         );
       }
     });
@@ -136,7 +123,7 @@ export function KisAuthForm() {
   }
 
   return (
-    <div className="group relative mx-auto w-full max-w-lg overflow-hidden rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm transition-all hover:border-brand-200 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/50 dark:hover:border-brand-800 dark:hover:shadow-brand-900/10">
+    <div className="group relative w-full overflow-hidden rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm transition-all hover:border-brand-200 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/50 dark:hover:border-brand-800 dark:hover:shadow-brand-900/10">
       {/* Inner Content Container - Compact spacing */}
       <div className="flex flex-col gap-4">
         {/* Header Section */}
@@ -147,16 +134,16 @@ export function KisAuthForm() {
             </div>
             <div>
               <h2 className="flex items-center gap-2 text-base font-bold tracking-tight text-zinc-800 dark:text-zinc-100">
-                KIS API Key Connection
+                한국투자증권 앱키 연결
                 {isKisVerified && (
                   <span className="inline-flex items-center gap-1 rounded-full bg-green-50 px-1.5 py-0.5 text-[10px] font-medium text-green-600 ring-1 ring-green-600/10 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/30">
                     <CheckCircle2 className="h-3 w-3" />
-                    Connected
+                    연결됨
                   </span>
                 )}
               </h2>
               <p className="text-[11px] font-medium text-zinc-500 dark:text-zinc-400">
-                한국투자증권에서 발급받은 API 키를 입력해 주세요.
+                한국투자증권 Open API에서 발급받은 앱키/앱시크릿키를 입력해 주세요.
               </p>
             </div>
           </div>
@@ -206,7 +193,7 @@ export function KisAuthForm() {
 
         {/* Input Fields Section (Compact Stacked Layout) */}
         <div className="flex flex-col gap-2">
-          {/* App Key Input */}
+          {/* ========== APP KEY INPUT ========== */}
           <div
             className={cn(
               "group/input relative flex items-center overflow-hidden rounded-lg border bg-white transition-all duration-200 dark:bg-zinc-900/30",
@@ -218,49 +205,22 @@ export function KisAuthForm() {
             <div className="hidden h-9 w-9 items-center justify-center border-r border-zinc-100 bg-zinc-50 text-zinc-400 transition-colors group-focus-within/input:text-brand-500 dark:border-zinc-800 dark:bg-zinc-800/50 dark:text-zinc-500 dark:group-focus-within/input:text-brand-400 sm:flex">
               <Shield className="h-3.5 w-3.5" />
             </div>
-            <div className="flex h-9 min-w-[70px] items-center justify-center bg-zinc-50 px-2 text-[11px] font-semibold text-zinc-500 border-r border-zinc-100 sm:hidden dark:bg-zinc-800/50 dark:text-zinc-500 dark:border-zinc-800">
-              App Key
-            </div>
-            <Input
-              type="password"
+              <div className="flex h-9 min-w-[70px] items-center justify-center bg-zinc-50 px-2 text-[11px] font-semibold text-zinc-500 border-r border-zinc-100 sm:hidden dark:bg-zinc-800/50 dark:text-zinc-500 dark:border-zinc-800">
+               앱키
+              </div>
+              <Input
+                type="password"
               value={kisAppKeyInput}
               onChange={(e) => setKisAppKeyInput(e.target.value)}
-              onFocus={() => setFocusedField("appKey")}
-              onBlur={() => setFocusedField(null)}
-              placeholder="App Key 입력"
-              className="h-9 flex-1 border-none bg-transparent px-3 text-xs text-zinc-900 placeholder:text-zinc-400 focus-visible:ring-0 dark:text-zinc-100 dark:placeholder:text-zinc-600"
-              autoComplete="off"
-            />
+                onFocus={() => setFocusedField("appKey")}
+                onBlur={() => setFocusedField(null)}
+                placeholder="한국투자증권 앱키 입력"
+                className="h-9 flex-1 border-none bg-transparent px-3 text-xs text-zinc-900 placeholder:text-zinc-400 focus-visible:ring-0 dark:text-zinc-100 dark:placeholder:text-zinc-600"
+                autoComplete="off"
+              />
           </div>
 
-          {/* Account No Input */}
-          <div
-            className={cn(
-              "group/input relative flex items-center overflow-hidden rounded-lg border bg-white transition-all duration-200 dark:bg-zinc-900/30",
-              focusedField === "accountNo"
-                ? "border-brand-500 ring-1 ring-brand-500"
-                : "border-zinc-200 hover:border-zinc-300 dark:border-zinc-700 dark:hover:border-zinc-600",
-            )}
-          >
-            <div className="hidden h-9 w-9 items-center justify-center border-r border-zinc-100 bg-zinc-50 text-zinc-400 transition-colors group-focus-within/input:text-brand-500 dark:border-zinc-800 dark:bg-zinc-800/50 dark:text-zinc-500 dark:group-focus-within/input:text-brand-400 sm:flex">
-              <CreditCard className="h-3.5 w-3.5" />
-            </div>
-            <div className="flex h-9 min-w-[70px] items-center justify-center border-r border-zinc-100 bg-zinc-50 px-2 text-[11px] font-semibold text-zinc-500 sm:hidden dark:border-zinc-800 dark:bg-zinc-800/50 dark:text-zinc-500">
-              계좌번호
-            </div>
-            <Input
-              type="text"
-              value={kisAccountNoInput}
-              onChange={(e) => setKisAccountNoInput(e.target.value)}
-              onFocus={() => setFocusedField("accountNo")}
-              onBlur={() => setFocusedField(null)}
-              placeholder="12345678-01"
-              className="h-9 flex-1 border-none bg-transparent px-3 text-xs text-zinc-900 placeholder:text-zinc-400 focus-visible:ring-0 dark:text-zinc-100 dark:placeholder:text-zinc-600"
-              autoComplete="off"
-            />
-          </div>
-
-          {/* App Secret Input */}
+          {/* ========== APP SECRET INPUT ========== */}
           <div
             className={cn(
               "group/input relative flex items-center overflow-hidden rounded-lg border bg-white transition-all duration-200 dark:bg-zinc-900/30",
@@ -272,19 +232,19 @@ export function KisAuthForm() {
             <div className="hidden h-9 w-9 items-center justify-center border-r border-zinc-100 bg-zinc-50 text-zinc-400 transition-colors group-focus-within/input:text-brand-500 dark:border-zinc-800 dark:bg-zinc-800/50 dark:text-zinc-500 dark:group-focus-within/input:text-brand-400 sm:flex">
               <Lock className="h-3.5 w-3.5" />
             </div>
-            <div className="flex h-9 min-w-[70px] items-center justify-center bg-zinc-50 px-2 text-[11px] font-semibold text-zinc-500 border-r border-zinc-100 sm:hidden dark:bg-zinc-800/50 dark:text-zinc-500 dark:border-zinc-800">
-              Secret
-            </div>
-            <Input
-              type="password"
+              <div className="flex h-9 min-w-[70px] items-center justify-center bg-zinc-50 px-2 text-[11px] font-semibold text-zinc-500 border-r border-zinc-100 sm:hidden dark:bg-zinc-800/50 dark:text-zinc-500 dark:border-zinc-800">
+               시크릿키
+              </div>
+              <Input
+                type="password"
               value={kisAppSecretInput}
               onChange={(e) => setKisAppSecretInput(e.target.value)}
-              onFocus={() => setFocusedField("appSecret")}
-              onBlur={() => setFocusedField(null)}
-              placeholder="App Secret 입력"
-              className="h-9 flex-1 border-none bg-transparent px-3 text-xs text-zinc-900 placeholder:text-zinc-400 focus-visible:ring-0 dark:text-zinc-100 dark:placeholder:text-zinc-600"
-              autoComplete="off"
-            />
+                onFocus={() => setFocusedField("appSecret")}
+                onBlur={() => setFocusedField(null)}
+                placeholder="한국투자증권 앱시크릿키 입력"
+                className="h-9 flex-1 border-none bg-transparent px-3 text-xs text-zinc-900 placeholder:text-zinc-400 focus-visible:ring-0 dark:text-zinc-100 dark:placeholder:text-zinc-600"
+                autoComplete="off"
+              />
           </div>
         </div>
 
@@ -305,13 +265,13 @@ export function KisAuthForm() {
                   <InlineSpinner className="text-white h-3 w-3" />
                   검증 중
                 </span>
-              ) : (
-                <span className="flex items-center gap-1.5">
-                  <Sparkles className="h-3 w-3 fill-brand-200 text-brand-200" />
-                  API 키 연결
-                </span>
-              )}
-            </Button>
+                ) : (
+                  <span className="flex items-center gap-1.5">
+                    <Sparkles className="h-3 w-3 fill-brand-200 text-brand-200" />
+                    앱키 연결 확인
+                  </span>
+                )}
+              </Button>
 
             {isKisVerified && (
               <Button
@@ -351,14 +311,3 @@ export function KisAuthForm() {
     </div>
   );
 }
-
-/**
- * @description KIS 계좌번호(8-2) 입력 포맷을 검증합니다.
- * @param value 사용자 입력 계좌번호
- * @returns 형식 유효 여부
- * @see features/settings/components/KisAuthForm.tsx handleValidate 인증 전 계좌번호 검사
- */
-function isValidAccountNo(value: string) {
-  const digits = value.replace(/\D/g, "");
-  return digits.length === 10;
-}

features/settings/components/KisProfileForm.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { CreditCard, CheckCircle2, SearchCheck, ShieldOff, XCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { InlineSpinner } from "@/components/ui/loading-spinner";
+import { validateKisProfile } from "@/features/settings/apis/kis-auth.api";
+import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
+
+/**
+ * @description 한국투자증권 계좌번호 검증 폼입니다.
+ * @remarks UI 흐름: /settings -> 계좌번호 입력 -> 계좌 확인 버튼 -> validate-profile API -> store 반영 -> 대시보드 반영
+ * @see app/api/kis/validate-profile/route.ts 계좌번호 검증 서버 라우트
+ * @see features/settings/store/use-kis-runtime-store.ts 검증 성공값을 전역 상태에 저장합니다.
+ */
+export function KisProfileForm() {
+  const {
+    kisAccountNoInput,
+    verifiedCredentials,
+    isKisVerified,
+    isKisProfileVerified,
+    verifiedAccountNo,
+    setKisAccountNoInput,
+    setVerifiedKisProfile,
+    invalidateKisProfileVerification,
+  } = useKisRuntimeStore(
+    useShallow((state) => ({
+      kisAccountNoInput: state.kisAccountNoInput,
+      verifiedCredentials: state.verifiedCredentials,
+      isKisVerified: state.isKisVerified,
+      isKisProfileVerified: state.isKisProfileVerified,
+      verifiedAccountNo: state.verifiedAccountNo,
+      setKisAccountNoInput: state.setKisAccountNoInput,
+      setVerifiedKisProfile: state.setVerifiedKisProfile,
+      invalidateKisProfileVerification: state.invalidateKisProfileVerification,
+    })),
+  );
+
+  const [statusMessage, setStatusMessage] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isValidating, startValidateTransition] = useTransition();
+
+  /**
+   * @description 계좌번호 인증을 해제하고 입력값을 비웁니다.
+   * @see features/settings/store/use-kis-runtime-store.ts setKisAccountNoInput
+   * @see features/settings/store/use-kis-runtime-store.ts invalidateKisProfileVerification
+   */
+  function handleDisconnectAccount() {
+    setStatusMessage("계좌 인증을 해제했습니다.");
+    setErrorMessage(null);
+    setKisAccountNoInput("");
+    invalidateKisProfileVerification();
+  }
+
+  function handleValidateProfile() {
+    startValidateTransition(async () => {
+      try {
+        setStatusMessage(null);
+        setErrorMessage(null);
+
+        if (!verifiedCredentials || !isKisVerified) {
+          throw new Error("먼저 앱키 연결을 완료해 주세요.");
+        }
+
+        const accountNo = kisAccountNoInput.trim();
+
+        if (!accountNo) {
+          throw new Error("계좌번호를 입력해 주세요.");
+        }
+
+        if (!isValidAccountNo(accountNo)) {
+          throw new Error(
+            "계좌번호 형식이 올바르지 않습니다. 8-2 형식(예: 12345678-01)으로 입력해 주세요.",
+          );
+        }
+
+        const result = await validateKisProfile({
+          ...verifiedCredentials,
+          accountNo,
+        });
+
+        setVerifiedKisProfile({
+          accountNo: result.account.normalizedAccountNo,
+        });
+
+        setStatusMessage(result.message);
+      } catch (error) {
+        invalidateKisProfileVerification();
+        setErrorMessage(
+          error instanceof Error
+            ? error.message
+            : "계좌 확인 중 오류가 발생했습니다.",
+        );
+      }
+    });
+  }
+
+  return (
+    <div className="rounded-2xl border border-brand-200 bg-background p-4 shadow-sm dark:border-brand-800/45 dark:bg-brand-900/14">
+      {/* ========== HEADER ========== */}
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h2 className="text-sm font-semibold tracking-tight text-foreground">
+            한국투자증권 계좌 인증
+          </h2>
+          <p className="mt-1 text-xs text-muted-foreground">
+            앱키 연결 완료 후 계좌번호를 확인합니다.
+          </p>
+        </div>
+        <span className="inline-flex items-center rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground">
+          {isKisProfileVerified ? "인증 완료" : "미인증"}
+        </span>
+      </div>
+
+      {/* ========== INPUTS ========== */}
+      <div className="mt-4">
+        <div className="relative">
+          <CreditCard className="pointer-events-none absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
+          <Input
+            type="password"
+            value={kisAccountNoInput}
+            onChange={(event) => setKisAccountNoInput(event.target.value)}
+            placeholder="계좌번호 (예: 12345678-01)"
+            className="h-9 pl-8 text-xs"
+            autoComplete="off"
+          />
+        </div>
+      </div>
+
+      {/* ========== ACTION ========== */}
+      <div className="mt-4 flex items-center justify-between gap-3 border-t border-border/70 pt-4">
+        <Button
+          type="button"
+          onClick={handleValidateProfile}
+          disabled={
+            !isKisVerified ||
+            isValidating ||
+            !kisAccountNoInput.trim()
+          }
+          className="h-9 rounded-lg bg-brand-600 px-4 text-xs font-semibold text-white hover:bg-brand-700"
+        >
+          {isValidating ? (
+            <span className="flex items-center gap-1.5">
+              <InlineSpinner className="h-3 w-3 text-white" />
+              확인 중
+            </span>
+          ) : (
+            <span className="flex items-center gap-1.5">
+              <SearchCheck className="h-3.5 w-3.5" />
+              계좌 인증하기
+            </span>
+          )}
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          onClick={handleDisconnectAccount}
+          disabled={!isKisProfileVerified && !kisAccountNoInput.trim()}
+          className="h-9 rounded-lg text-xs"
+        >
+          <ShieldOff className="h-3.5 w-3.5" />
+          계좌 인증 해제
+        </Button>
+
+        <div className="flex-1 text-right">
+          {errorMessage && (
+            <p className="flex justify-end gap-1.5 text-[11px] font-medium text-red-500">
+              <XCircle className="h-3.5 w-3.5" />
+              {errorMessage}
+            </p>
+          )}
+          {statusMessage && (
+            <p className="flex justify-end gap-1.5 text-[11px] font-medium text-emerald-600 dark:text-emerald-400">
+              <CheckCircle2 className="h-3.5 w-3.5" />
+              {statusMessage}
+            </p>
+          )}
+          {!statusMessage && !errorMessage && !isKisVerified && (
+            <p className="text-[11px] text-muted-foreground">
+              먼저 앱키 연결을 완료해 주세요.
+            </p>
+          )}
+          {!statusMessage && !errorMessage && isKisProfileVerified && (
+            <p className="text-[11px] text-muted-foreground">
+              확인된 계좌: {maskAccountNo(verifiedAccountNo)}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * @description KIS 계좌번호(8-2) 입력 포맷을 검증합니다.
+ * @param value 사용자 입력 계좌번호
+ * @returns 형식 유효 여부
+ * @see features/settings/components/KisProfileForm.tsx handleValidateProfile
+ */
+function isValidAccountNo(value: string) {
+  const digits = value.replace(/\D/g, "");
+  return digits.length === 10;
+}
+
+/**
+ * @description 표시용 계좌번호를 마스킹 처리합니다.
+ * @param value 계좌번호(8-2)
+ * @returns 마스킹 계좌번호
+ * @see features/settings/components/KisProfileForm.tsx 확인된 값 표시
+ */
+function maskAccountNo(value: string | null) {
+  if (!value) return "-";
+  const digits = value.replace(/\D/g, "");
+  if (digits.length !== 10) return "********";
+  return "********-**";
+}

features/settings/components/SettingsContainer.tsx

@@ -1,7 +1,9 @@
 "use client";
 
+import { Info } from "lucide-react";
 import { useShallow } from "zustand/react/shallow";
 import { KisAuthForm } from "@/features/settings/components/KisAuthForm";
+import { KisProfileForm } from "@/features/settings/components/KisProfileForm";
 import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
 
 /**
@@ -11,10 +13,17 @@ import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-st
  */
 export function SettingsContainer() {
   // 상태 정의: 연결 상태 표시용 전역 인증 상태를 구독합니다.
-  const { verifiedCredentials, isKisVerified } = useKisRuntimeStore(
+  const {
+    verifiedCredentials,
+    isKisVerified,
+    isKisProfileVerified,
+    verifiedAccountNo,
+  } = useKisRuntimeStore(
     useShallow((state) => ({
       verifiedCredentials: state.verifiedCredentials,
       isKisVerified: state.isKisVerified,
+      isKisProfileVerified: state.isKisProfileVerified,
+      verifiedAccountNo: state.verifiedAccountNo,
     })),
   );
 
@@ -23,7 +32,7 @@ export function SettingsContainer() {
       {/* ========== STATUS CARD ========== */}
       <article className="rounded-2xl border border-brand-200 bg-muted/35 p-4 dark:border-brand-800/45 dark:bg-brand-900/20">
         <h1 className="text-xl font-semibold tracking-tight text-foreground">
-          KIS API 설정
+          한국투자증권 연결 설정
         </h1>
         <div className="mt-3 flex flex-wrap items-center gap-2 text-sm">
           <span className="font-medium text-foreground">연결 상태:</span>
@@ -39,13 +48,51 @@ export function SettingsContainer() {
             </span>
           )}
         </div>
+        <div className="mt-2 flex flex-wrap items-center gap-2 text-sm">
+          <span className="font-medium text-foreground">계좌 인증 상태:</span>
+          {isKisProfileVerified ? (
+            <span className="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-700 dark:bg-emerald-900/35 dark:text-emerald-200">
+              확인됨 ({maskAccountNo(verifiedAccountNo)})
+            </span>
+          ) : (
+            <span className="inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-1 text-xs font-semibold text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
+              미확인
+            </span>
+          )}
+        </div>
       </article>
 
-      {/* ========== AUTH FORM CARD ========== */}
-      <article className="rounded-2xl border border-brand-200 bg-background p-4 shadow-sm dark:border-brand-800/45 dark:bg-brand-900/14">
-        <KisAuthForm />
+      {/* ========== PRIVACY NOTICE ========== */}
+      <article className="rounded-2xl border border-amber-300 bg-amber-50/70 p-4 text-sm text-amber-900 dark:border-amber-700/60 dark:bg-amber-950/30 dark:text-amber-200">
+        <p className="flex items-start gap-2 font-medium">
+          <Info className="mt-0.5 h-4 w-4 shrink-0" />
+          입력 정보 보관 안내
+        </p>
+        <p className="mt-2 text-xs leading-relaxed text-amber-800/90 dark:text-amber-200/90">
+          이 화면에서 입력한 한국투자증권 앱키, 앱시크릿키, 계좌번호는 서버 DB에 저장하지 않습니다.
+          현재 사용 중인 브라우저(클라이언트)에서만 관리되며, 연결 해제 시 즉시 지울 수 있습니다.
+        </p>
       </article>
+
+      {/* ========== FORM GRID ========== */}
+      <div className="grid gap-4 lg:grid-cols-2">
+        <KisAuthForm />
+        <KisProfileForm />
+      </div>
     </section>
   );
 }
 
+/**
+ * @description 계좌번호 마스킹 문자열을 반환합니다.
+ * @param value 계좌번호(8-2)
+ * @returns 마스킹 계좌번호
+ * @see features/settings/components/SettingsContainer.tsx 프로필 상태 라벨 표시
+ */
+function maskAccountNo(value: string | null) {
+  if (!value) return "-";
+  const digits = value.replace(/\D/g, "");
+  if (digits.length !== 10) return "********";
+  return "********-**";
+}
+

features/settings/store/use-kis-runtime-store.ts

@@ -30,6 +30,8 @@ interface KisRuntimeStoreState {
 
   verifiedCredentials: KisRuntimeCredentials | null;
   isKisVerified: boolean;
+  isKisProfileVerified: boolean;
+  verifiedAccountNo: string | null;
   tradingEnv: KisTradingEnv;
 
   wsApprovalKey: string | null;
@@ -47,6 +49,10 @@ interface KisRuntimeStoreActions {
     credentials: KisRuntimeCredentials,
     tradingEnv: KisTradingEnv,
   ) => void;
+  setVerifiedKisProfile: (profile: {
+    accountNo: string;
+  }) => void;
+  invalidateKisProfileVerification: () => void;
   invalidateKisVerification: () => void;
   clearKisRuntimeSession: (tradingEnv: KisTradingEnv) => void;
   getOrFetchWsConnection: () => Promise<KisWsConnection | null>;
@@ -60,15 +66,23 @@ const INITIAL_STATE: KisRuntimeStoreState = {
   kisAccountNoInput: "",
   verifiedCredentials: null,
   isKisVerified: false,
+  isKisProfileVerified: false,
+  verifiedAccountNo: null,
   tradingEnv: "real",
   wsApprovalKey: null,
   wsUrl: null,
   _hasHydrated: false,
 };
 
+const RESET_PROFILE_STATE = {
+  isKisProfileVerified: false,
+  verifiedAccountNo: null,
+} as const;
+
 const RESET_VERIFICATION_STATE = {
   verifiedCredentials: null,
   isKisVerified: false,
+  ...RESET_PROFILE_STATE,
   wsApprovalKey: null,
   wsUrl: null,
 };
@@ -105,10 +119,16 @@ export const useKisRuntimeStore = create<
         }),
 
       setKisAccountNoInput: (accountNo) =>
-        set({
+        set((state) => ({
           kisAccountNoInput: accountNo,
-          ...RESET_VERIFICATION_STATE,
-        }),
+          ...RESET_PROFILE_STATE,
+          verifiedCredentials: state.verifiedCredentials
+            ? {
+                ...state.verifiedCredentials,
+                accountNo: "",
+              }
+            : null,
+        })),
 
       setVerifiedKisSession: (credentials, tradingEnv) =>
         set({
@@ -119,6 +139,33 @@ export const useKisRuntimeStore = create<
           wsUrl: null,
         }),
 
+      setVerifiedKisProfile: ({ accountNo }) =>
+        set((state) => ({
+          isKisProfileVerified: true,
+          verifiedAccountNo: accountNo,
+          verifiedCredentials: state.verifiedCredentials
+            ? {
+                ...state.verifiedCredentials,
+                accountNo,
+              }
+            : state.verifiedCredentials,
+          wsApprovalKey: null,
+          wsUrl: null,
+        })),
+
+      invalidateKisProfileVerification: () =>
+        set((state) => ({
+          ...RESET_PROFILE_STATE,
+          verifiedCredentials: state.verifiedCredentials
+            ? {
+                ...state.verifiedCredentials,
+                accountNo: "",
+              }
+            : state.verifiedCredentials,
+          wsApprovalKey: null,
+          wsUrl: null,
+        })),
+
       invalidateKisVerification: () =>
         set({
           ...RESET_VERIFICATION_STATE,
@@ -196,6 +243,8 @@ export const useKisRuntimeStore = create<
         kisAccountNoInput: state.kisAccountNoInput,
         verifiedCredentials: state.verifiedCredentials,
         isKisVerified: state.isKisVerified,
+        isKisProfileVerified: state.isKisProfileVerified,
+        verifiedAccountNo: state.verifiedAccountNo,
         tradingEnv: state.tradingEnv,
         // wsApprovalKey/wsUrl are kept in memory only (expiration-sensitive).
       }),

features/trade/components/guards/TradeAccessGate.tsx

@@ -18,10 +18,10 @@ export function TradeAccessGate({ canTrade }: TradeAccessGateProps) {
       <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/trade/types/trade.types.ts

@@ -220,3 +220,15 @@ export interface DashboardKisWsApprovalResponse {
   approvalKey?: string;
   wsUrl?: string;
 }
+
+/**
+ * KIS 계좌 검증 API 응답
+ */
+export interface DashboardKisProfileValidateResponse {
+  ok: boolean;
+  tradingEnv: KisTradingEnv;
+  message: string;
+  account: {
+    normalizedAccountNo: string;
+  };
+}