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

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

src/app/page.tsx

@@ -1,16 +1,52 @@
+import DbStatus from "@/components/DbStatus";
+
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center gap-4 p-8">
+    <div className="flex min-h-screen flex-col">
-      <h1 className="text-4xl font-bold">jskim.vexplor.com</h1>
+      {/* 헤더 */}
-      <p className="text-lg text-gray-500 dark:text-gray-400">
+      <header className="border-b border-gray-200 dark:border-gray-800">
-        Next.js + PostgreSQL 프로젝트가 준비되었습니다.
+        <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
+          <span className="text-lg font-bold">jskim</span>
+          <nav className="flex gap-6 text-sm text-gray-600 dark:text-gray-300">
+            <a href="/" className="hover:text-black dark:hover:text-white">홈</a>
+            <a href="#" className="hover:text-black dark:hover:text-white">메뉴1</a>
+            <a href="#" className="hover:text-black dark:hover:text-white">메뉴2</a>
+          </nav>
+        </div>
+      </header>
+
+      {/* 메인 */}
+      <main className="mx-auto w-full max-w-5xl flex-1 px-6 py-12">
+        <section className="mb-12">
+          <h1 className="mb-2 text-3xl font-bold">메인 페이지</h1>
+          <p className="text-gray-500 dark:text-gray-400">
+            jskim.vexplor.com — Next.js + PostgreSQL 기본 틀
           </p>
-      <a
+          <div className="mt-3">
-        href="/api/health"
+            <DbStatus />
-        className="mt-4 rounded-lg border border-gray-300 px-4 py-2 text-sm hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-800"
+          </div>
+        </section>
+
+        {/* 콘텐츠 카드 자리 */}
+        <section className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {["섹션 A", "섹션 B", "섹션 C"].map((title) => (
+            <div
+              key={title}
+              className="rounded-xl border border-gray-200 p-6 dark:border-gray-800"
             >
-        DB 연결 상태 확인 → /api/health
+              <h2 className="mb-2 font-semibold">{title}</h2>
-      </a>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                콘텐츠가 들어갈 자리입니다.
+              </p>
+            </div>
+          ))}
+        </section>
       </main>
+
+      {/* 푸터 */}
+      <footer className="border-t border-gray-200 py-6 text-center text-sm text-gray-400 dark:border-gray-800">
+        jskim.vexplor.com · dev-pilots
+      </footer>
+    </div>
   );
 }

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>
+  );
+}