정리

features/trade/components/guards/TradeAccessGate.tsx

@@ -0,0 +1,36 @@
+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>
+  );
+}