52 lines
2.4 KiB
TypeScript
52 lines
2.4 KiB
TypeScript
|
"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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|