임시커밋

features/settings/components/KisAuthForm.tsx

@@ -0,0 +1,314 @@
+import { useState, useTransition } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
+import {
+  revokeKisCredentials,
+  validateKisCredentials,
+} from "@/features/settings/apis/kis-auth.api";
+import {
+  KeyRound,
+  Shield,
+  CheckCircle2,
+  XCircle,
+  Lock,
+  Sparkles,
+  Zap,
+  Activity,
+} from "lucide-react";
+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
+ */
+export function KisAuthForm() {
+  const {
+    kisTradingEnvInput,
+    kisAppKeyInput,
+    kisAppSecretInput,
+    verifiedCredentials,
+    isKisVerified,
+    setKisTradingEnvInput,
+    setKisAppKeyInput,
+    setKisAppSecretInput,
+    setVerifiedKisSession,
+    invalidateKisVerification,
+    clearKisRuntimeSession,
+  } = useKisRuntimeStore(
+    useShallow((state) => ({
+      kisTradingEnvInput: state.kisTradingEnvInput,
+      kisAppKeyInput: state.kisAppKeyInput,
+      kisAppSecretInput: state.kisAppSecretInput,
+      verifiedCredentials: state.verifiedCredentials,
+      isKisVerified: state.isKisVerified,
+      setKisTradingEnvInput: state.setKisTradingEnvInput,
+      setKisAppKeyInput: state.setKisAppKeyInput,
+      setKisAppSecretInput: state.setKisAppSecretInput,
+      setVerifiedKisSession: state.setVerifiedKisSession,
+      invalidateKisVerification: state.invalidateKisVerification,
+      clearKisRuntimeSession: state.clearKisRuntimeSession,
+    })),
+  );
+
+  const [statusMessage, setStatusMessage] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isValidating, startValidateTransition] = useTransition();
+  const [isRevoking, startRevokeTransition] = useTransition();
+
+  // 입력 필드 Focus 상태 관리를 위한 State
+  const [focusedField, setFocusedField] = useState<
+    "appKey" | "appSecret" | null
+  >(null);
+
+  function handleValidate() {
+    startValidateTransition(async () => {
+      try {
+        setErrorMessage(null);
+        setStatusMessage(null);
+
+        const appKey = kisAppKeyInput.trim();
+        const appSecret = kisAppSecretInput.trim();
+
+        if (!appKey || !appSecret) {
+          throw new Error("App Key와 App Secret을 모두 입력해 주세요.");
+        }
+
+        const credentials = {
+          appKey,
+          appSecret,
+          tradingEnv: kisTradingEnvInput,
+          accountNo: verifiedCredentials?.accountNo ?? "",
+        };
+
+        const result = await validateKisCredentials(credentials);
+        setVerifiedKisSession(credentials, result.tradingEnv);
+        setStatusMessage(
+          `${result.message} (${result.tradingEnv === "real" ? "실전" : "모의"})`,
+        );
+      } catch (err) {
+        invalidateKisVerification();
+        setErrorMessage(
+          err instanceof Error
+            ? err.message
+            : "API 키 검증 중 오류가 발생했습니다.",
+        );
+      }
+    });
+  }
+
+  function handleRevoke() {
+    if (!verifiedCredentials) return;
+
+    startRevokeTransition(async () => {
+      try {
+        setErrorMessage(null);
+        setStatusMessage(null);
+        const result = await revokeKisCredentials(verifiedCredentials);
+        clearKisRuntimeSession(result.tradingEnv);
+        setStatusMessage(
+          `${result.message} (${result.tradingEnv === "real" ? "실전" : "모의"})`,
+        );
+      } catch (err) {
+        setErrorMessage(
+          err instanceof Error
+            ? err.message
+            : "연결 해제 중 오류가 발생했습니다.",
+        );
+      }
+    });
+  }
+
+  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">
+      {/* Inner Content Container - Compact spacing */}
+      <div className="flex flex-col gap-4">
+        {/* Header Section */}
+        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-brand-50 text-brand-600 ring-1 ring-brand-100 dark:bg-brand-900/20 dark:text-brand-400 dark:ring-brand-800/50">
+              <KeyRound className="h-4.5 w-4.5" />
+            </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 키를 입력해 주세요.
+              </p>
+            </div>
+          </div>
+
+          {/* Trading Mode Switch (Segmented Control - Compact) */}
+          <div className="flex shrink-0 items-center rounded-md bg-zinc-100 p-0.5 ring-1 ring-zinc-200 dark:bg-zinc-800 dark:ring-zinc-700">
+            <button
+              onClick={() => setKisTradingEnvInput("real")}
+              className={cn(
+                "relative flex items-center gap-1.5 rounded-[5px] px-2.5 py-1 text-[11px] font-semibold transition-all duration-200",
+                kisTradingEnvInput === "real"
+                  ? "bg-white text-brand-600 shadow-sm ring-1 ring-black/5 dark:bg-brand-500 dark:text-white dark:ring-brand-400"
+                  : "text-zinc-500 hover:text-zinc-700 hover:bg-black/5 dark:text-zinc-400 dark:hover:text-zinc-200 dark:hover:bg-white/5",
+              )}
+            >
+              <Zap
+                className={cn(
+                  "h-3 w-3",
+                  kisTradingEnvInput === "real"
+                    ? "text-brand-500 dark:text-white"
+                    : "text-zinc-400",
+                )}
+              />
+              실전 투자
+            </button>
+            <button
+              onClick={() => setKisTradingEnvInput("mock")}
+              className={cn(
+                "relative flex items-center gap-1.5 rounded-[5px] px-2.5 py-1 text-[11px] font-semibold transition-all duration-200",
+                kisTradingEnvInput === "mock"
+                  ? "bg-white text-zinc-800 shadow-sm ring-1 ring-black/5 dark:bg-zinc-600 dark:text-white dark:ring-zinc-500"
+                  : "text-zinc-500 hover:text-zinc-700 hover:bg-black/5 dark:text-zinc-400 dark:hover:text-zinc-200 dark:hover:bg-white/5",
+              )}
+            >
+              <Activity
+                className={cn(
+                  "h-3 w-3",
+                  kisTradingEnvInput === "mock"
+                    ? "text-zinc-800 dark:text-zinc-200"
+                    : "text-zinc-400",
+                )}
+              />
+              모의 투자
+            </button>
+          </div>
+        </div>
+
+        {/* Input Fields Section (Compact Stacked Layout) */}
+        <div className="flex flex-col gap-2">
+          {/* 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",
+              focusedField === "appKey"
+                ? "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">
+              <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"
+              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"
+            />
+          </div>
+
+          {/* 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",
+              focusedField === "appSecret"
+                ? "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">
+              <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"
+              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"
+            />
+          </div>
+        </div>
+
+        {/* Action & Status Section */}
+        <div className="flex items-center justify-between border-t border-zinc-100 pt-4 dark:border-zinc-800/50">
+          <div className="flex gap-2">
+            <Button
+              onClick={handleValidate}
+              disabled={
+                isValidating ||
+                !kisAppKeyInput.trim() ||
+                !kisAppSecretInput.trim()
+              }
+              className="h-9 rounded-lg bg-brand-600 px-4 text-xs font-semibold text-white shadow-sm transition-all hover:bg-brand-700 hover:shadow disabled:opacity-50 disabled:shadow-none dark:bg-brand-600 dark:hover:bg-brand-500"
+            >
+              {isValidating ? (
+                <span className="flex items-center gap-1.5">
+                  <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>
+
+            {isKisVerified && (
+              <Button
+                variant="outline"
+                onClick={handleRevoke}
+                disabled={isRevoking}
+                className="h-9 rounded-lg border-zinc-200 bg-white text-xs text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+              >
+                {isRevoking ? "해제 중" : "연결 해제"}
+              </Button>
+            )}
+          </div>
+
+          {/* Status Messages - Compact */}
+          <div className="flex-1 text-right">
+            {errorMessage && (
+              <p className="animate-in fade-in slide-in-from-right-4 flex justify-end gap-1.5 text-[11px] font-semibold text-red-500">
+                <XCircle className="h-3.5 w-3.5" />
+                {errorMessage}
+              </p>
+            )}
+            {statusMessage && (
+              <p className="animate-in fade-in slide-in-from-right-4 flex justify-end gap-1.5 text-[11px] font-semibold text-brand-600 dark:text-brand-400">
+                <CheckCircle2 className="h-3.5 w-3.5" />
+                {statusMessage}
+              </p>
+            )}
+            {!errorMessage && !statusMessage && !isKisVerified && (
+              <p className="flex justify-end gap-1.5 text-[11px] text-zinc-400 dark:text-zinc-600">
+                <span className="h-1.5 w-1.5 translate-y-1.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />
+                미연결
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

features/settings/components/SettingsContainer.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useShallow } from "zustand/react/shallow";
+import { KisAuthForm } from "@/features/settings/components/KisAuthForm";
+import { useKisRuntimeStore } from "@/features/settings/store/use-kis-runtime-store";
+
+/**
+ * @description 설정 페이지 컨테이너입니다. KIS 연결 상태와 인증 폼을 카드 UI로 제공합니다.
+ * @see app/(main)/settings/page.tsx 로그인 확인 후 이 컴포넌트를 렌더링합니다.
+ * @see features/settings/components/KisAuthForm.tsx 실제 인증 입력/검증/해제를 담당합니다.
+ */
+export function SettingsContainer() {
+  // 상태 정의: 연결 상태 표시용 전역 인증 상태를 구독합니다.
+  const { verifiedCredentials, isKisVerified } = useKisRuntimeStore(
+    useShallow((state) => ({
+      verifiedCredentials: state.verifiedCredentials,
+      isKisVerified: state.isKisVerified,
+    })),
+  );
+
+  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">
+          KIS API 설정
+        </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>
+      </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 />
+      </article>
+    </section>
+  );
+}
+