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

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