From c712a8b6e2b54510eca472dc06f401c76d36ef32 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Wed, 12 Aug 2026 17:25:33 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EA=B8=B0=EB=B3=B8=20=ED=8B=80:=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=C2=B7=EC=BD=98=ED=85=90=EC=B8=A0=20=EC=B9=B4=EB=93=9C?=
 =?UTF-8?q?=C2=B7=ED=91=B8=ED=84=B0=20+=20DB=20=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/app/page.tsx            | 60 +++++++++++++++++++++++++++++--------
 src/components/DbStatus.tsx | 33 ++++++++++++++++++++
 2 files changed, 81 insertions(+), 12 deletions(-)
 create mode 100644 src/components/DbStatus.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1d88f1c..66c27a8 100644
--- a/src/app/page.tsx
+++ b/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>
   );
 }
diff --git a/src/components/DbStatus.tsx b/src/components/DbStatus.tsx
new file mode 100644
index 0000000..75fe6a0
--- /dev/null
+++ b/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>
+  );
+}