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

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