jihoon87/auto-trade
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jihoon87.lee
2026-02-12 17:16:41 +09:00
parent 434a814246
commit 12feeb2775
20 changed files with 1847 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
features/settings/components/KisAuthForm.tsx
View File

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