메인 페이지 기본 틀: 헤더·콘텐츠 카드·푸터 + DB 상태 표시

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/DbStatus.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type Health = {
+  status: string;
+  db: { connected: boolean; now?: string; version?: string };
+};
+
+export default function DbStatus() {
+  const [health, setHealth] = useState<Health | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    fetch("/api/health")
+      .then((res) => res.json())
+      .then(setHealth)
+      .catch(() => setError(true));
+  }, []);
+
+  if (error)
+    return <span className="text-sm text-red-500">● API 응답 없음</span>;
+  if (!health)
+    return <span className="text-sm text-gray-400">● 확인 중…</span>;
+
+  return health.db.connected ? (
+    <span className="text-sm text-green-600 dark:text-green-400">
+      ● DB 연결됨 (PostgreSQL)
+    </span>
+  ) : (
+    <span className="text-sm text-red-500">● DB 연결 안 됨</span>
+  );
+}