메인 페이지 기본 틀: 헤더·콘텐츠 카드·푸터 + 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">
-      <h1 className="text-4xl font-bold">jskim.vexplor.com</h1>
-      <p className="text-lg text-gray-500 dark:text-gray-400">
-        Next.js + PostgreSQL 프로젝트가 준비되었습니다.
-      </p>
-      <a
-        href="/api/health"
-        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"
-      >
-        DB 연결 상태 확인 → /api/health
-      </a>
-    </main>
+    <div className="flex min-h-screen flex-col">
+      {/* 헤더 */}
+      <header className="border-b border-gray-200 dark:border-gray-800">
+        <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>
+          <div className="mt-3">
+            <DbStatus />
+          </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"
+            >
+              <h2 className="mb-2 font-semibold">{title}</h2>
+              <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>
   );
 }