대시보드 구현

features/dashboard/components/DashboardAccessGate.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+interface DashboardAccessGateProps {
+  canAccess: boolean;
+}
+
+/**
+ * @description KIS 인증 여부에 따라 대시보드 접근 가이드를 렌더링합니다.
+ * @param canAccess 대시보드 접근 가능 여부
+ * @see features/dashboard/components/DashboardContainer.tsx 인증되지 않은 경우 이 컴포넌트를 렌더링합니다.
+ */
+export function DashboardAccessGate({ canAccess }: DashboardAccessGateProps) {
+  if (canAccess) 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>
+  );
+}