37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
|
import Link from "next/link";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
|
||
|
|
interface TradeAccessGateProps {
|
||
|
|
canTrade: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @description KIS 인증 여부에 따라 트레이드 화면 접근 가이드를 렌더링합니다.
|
||
|
|
* @see features/trade/components/TradeContainer.tsx TradeContainer의 인증 가드 UI를 분리합니다.
|
||
|
|
* @see app/(main)/settings/page.tsx 미인증 사용자를 설정 페이지로 이동시킵니다.
|
||
|
|
*/
|
||
|
|
export function TradeAccessGate({ canTrade }: TradeAccessGateProps) {
|
||
|
|
if (canTrade) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full items-center justify-center p-6">
|
||
|
|
<section className="w-full max-w-xl rounded-2xl border border-brand-200 bg-background p-6 shadow-sm dark:border-brand-800/45 dark:bg-brand-900/18">
|
||
|
|
{/* ========== UNVERIFIED NOTICE ========== */}
|
||
|
|
<h2 className="text-lg font-semibold text-foreground">
|
||
|
|
트레이딩을 시작하려면 KIS API 인증이 필요합니다.
|
||
|
|
</h2>
|
||
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
||
|
|
설정 페이지에서 App Key/App Secret을 입력하고 연결 상태를 확인해 주세요.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* ========== ACTION ========== */}
|
||
|
|
<div className="mt-4">
|
||
|
|
<Button asChild className="bg-brand-600 hover:bg-brand-700">
|
||
|
|
<Link href="/settings">설정 페이지로 이동</Link>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|