99 lines
4.5 KiB
TypeScript
99 lines
4.5 KiB
TypeScript
"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";
|
|
|
|
/**
|
|
* @description 설정 페이지 컨테이너입니다. KIS 연결 상태와 인증 폼을 카드 UI로 제공합니다.
|
|
* @see app/(main)/settings/page.tsx 로그인 확인 후 이 컴포넌트를 렌더링합니다.
|
|
* @see features/settings/components/KisAuthForm.tsx 실제 인증 입력/검증/해제를 담당합니다.
|
|
*/
|
|
export function SettingsContainer() {
|
|
// 상태 정의: 연결 상태 표시용 전역 인증 상태를 구독합니다.
|
|
const {
|
|
verifiedCredentials,
|
|
isKisVerified,
|
|
isKisProfileVerified,
|
|
verifiedAccountNo,
|
|
} = useKisRuntimeStore(
|
|
useShallow((state) => ({
|
|
verifiedCredentials: state.verifiedCredentials,
|
|
isKisVerified: state.isKisVerified,
|
|
isKisProfileVerified: state.isKisProfileVerified,
|
|
verifiedAccountNo: state.verifiedAccountNo,
|
|
})),
|
|
);
|
|
|
|
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>
|
|
|
|
{/* ========== 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 "********-**";
|
|
}
|
|
|