대시보드 실시간 기능 추가

features/settings/components/SettingsContainer.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { Info } from "lucide-react";
+import { type LucideIcon, Info, Link2, Wallet } 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";
+import { cn } from "@/lib/utils";
 
 /**
  * @description 설정 페이지 컨테이너입니다. KIS 연결 상태와 인증 폼을 카드 UI로 제공합니다.
@@ -28,54 +29,59 @@ export function SettingsContainer() {
   );
 
   return (
-    <section className="mx-auto flex w-full max-w-5xl flex-col gap-5 p-4 md:p-6">
-      {/* ========== 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">
-          한국투자증권 연결 설정
-        </h1>
-        <div className="mt-3 flex flex-wrap items-center gap-2 text-sm">
-          <span className="font-medium text-foreground">연결 상태:</span>
-          {isKisVerified ? (
-            <span className="inline-flex items-center rounded-full bg-brand-100 px-2.5 py-1 text-xs font-semibold text-brand-700 dark:bg-brand-900/45 dark:text-brand-200">
-              <span className="mr-1.5 h-2 w-2 rounded-full bg-brand-500" />
-              연결됨 ({verifiedCredentials?.tradingEnv === "real" ? "실전" : "모의"})
-            </span>
-          ) : (
-            <span className="inline-flex items-center rounded-full bg-brand-50 px-2.5 py-1 text-xs font-semibold text-brand-700 dark:bg-brand-900/30 dark:text-brand-200">
-              <span className="mr-1.5 h-2 w-2 rounded-full bg-brand-300 dark:bg-brand-500/70" />
-              미연결
-            </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>
+    <section className="mx-auto flex w-full max-w-[1400px] flex-col gap-6 px-4 py-4 md:px-8 md:py-8">
+      {/* ========== SETTINGS OVERVIEW ========== */}
+      <article className="rounded-2xl border border-brand-200 bg-gradient-to-br from-brand-50/80 via-background to-background p-5 dark:border-brand-800/45 dark:from-brand-900/30 dark:via-brand-950/10 dark:to-background md:p-6">
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)]">
+          <div className="space-y-3">
+            <h1 className="text-2xl font-semibold tracking-tight text-foreground">
+              한국투자증권 연결 센터
+            </h1>
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              앱키 연결과 계좌 확인을 한 화면에서 처리합니다. 아래 순서대로
+              진행하면 바로 대시보드/트레이드 화면에 반영됩니다.
+            </p>
+            <div className="rounded-xl border border-brand-200/70 bg-brand-50/70 p-3 dark:border-brand-800/60 dark:bg-brand-900/20">
+              <p className="text-xs font-semibold text-brand-700 dark:text-brand-200">
+                진행 순서: 1) 앱키 연결 확인 {"->"} 2) 계좌 인증 {"->"} 3)
+                거래 화면 사용
+              </p>
+            </div>
+          </div>
 
-      {/* ========== 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>
+          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
+            <StatusTile
+              icon={Link2}
+              title="앱키 연결"
+              value={
+                isKisVerified
+                  ? `연결됨 (${verifiedCredentials?.tradingEnv === "real" ? "실전" : "모의"})`
+                  : "미연결"
+              }
+              tone={isKisVerified ? "success" : "idle"}
+            />
+            <StatusTile
+              icon={Wallet}
+              title="계좌 인증"
+              value={
+                isKisProfileVerified
+                  ? `확인 완료 (${maskAccountNo(verifiedAccountNo)})`
+                  : "미확인"
+              }
+              tone={isKisProfileVerified ? "success" : "idle"}
+            />
+            <StatusTile
+              icon={Info}
+              title="입력 정보 보관"
+              value="서버 DB 저장 없음 · 현재 브라우저에서만 관리"
+              tone="notice"
+            />
+          </div>
+        </div>
       </article>
 
       {/* ========== FORM GRID ========== */}
-      <div className="grid gap-4 lg:grid-cols-2">
+      <div className="grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
         <KisAuthForm />
         <KisProfileForm />
       </div>
@@ -96,3 +102,40 @@ function maskAccountNo(value: string | null) {
   return "********-**";
 }
 
+type StatusTileTone = "success" | "idle" | "notice";
+
+/**
+ * @description 설정 페이지 상단 요약 상태 타일입니다.
+ * @see features/settings/components/SettingsContainer.tsx 상태 요약 렌더링
+ */
+function StatusTile({
+  icon: Icon,
+  title,
+  value,
+  tone,
+}: {
+  icon: LucideIcon;
+  title: string;
+  value: string;
+  tone: StatusTileTone;
+}) {
+  return (
+    <div
+      className={cn(
+        "rounded-xl border px-3 py-2.5",
+        tone === "success" &&
+          "border-emerald-200 bg-emerald-50/70 dark:border-emerald-800/45 dark:bg-emerald-900/15",
+        tone === "idle" &&
+          "border-zinc-200 bg-zinc-50/70 dark:border-zinc-800 dark:bg-zinc-900/30",
+        tone === "notice" &&
+          "border-amber-300 bg-amber-50/70 dark:border-amber-800/45 dark:bg-amber-900/20",
+      )}
+    >
+      <p className="flex items-center gap-1.5 text-[12px] font-semibold text-zinc-700 dark:text-zinc-200">
+        <Icon className="h-3.5 w-3.5" />
+        {title}
+      </p>
+      <p className="mt-1 text-xs text-zinc-600 dark:text-zinc-300">{value}</p>
+    </div>
+  );
+}