222

src/app/posts/[id]/page.tsx

@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation";
 import { headers } from "next/headers";
+import { HeroBanner } from "@/app/components/HeroBanner";
 
 // 서버 전용 페이지: params가 Promise일 수 있어 안전 언랩 후 절대 URL로 fetch합니다.
 export default async function PostDetail({ params }: { params: any }) {
@@ -12,18 +13,34 @@ export default async function PostDetail({ params }: { params: any }) {
   const res = await fetch(new URL(`/api/posts/${id}`, base).toString(), { cache: "no-store" });
   if (!res.ok) return notFound();
   const { post } = await res.json();
+  const createdAt = post?.createdAt ? new Date(post.createdAt) : null;
   return (
-    <div>
-      <h1>{post.title}</h1>
-      <div style={{ display: "flex", gap: 8, margin: "8px 0" }}>
-        <form action={`/api/posts/${post.id}/recommend`} method="post">
-          <button type="submit">추천</button>
-        </form>
-        <form action={`/api/posts/${post.id}/report`} method="post">
-          <button type="submit">신고</button>
-        </form>
-      </div>
-      <p style={{ whiteSpace: "pre-wrap" }}>{post.content}</p>
+    <div className="space-y-6">
+      {/* 상단 배너 */}
+      <section>
+        <HeroBanner />
+      </section>
+
+      {/* 본문 카드 */}
+      <section className="rounded-xl overflow-hidden bg-white">
+        <header className="px-4 py-3 border-b border-neutral-200">
+          <h1 className="text-xl md:text-2xl font-bold text-neutral-900 break-words">{post.title}</h1>
+          {createdAt && (
+            <p className="mt-1 text-xs text-neutral-500">{createdAt.toLocaleString()}</p>
+          )}
+        </header>
+        <div className="p-4 md:p-6">
+          <div className="prose max-w-none whitespace-pre-wrap break-words">{post.content}</div>
+        </div>
+        <footer className="px-4 py-3 border-t border-neutral-200 flex gap-2">
+          <form action={`/api/posts/${post.id}/recommend`} method="post">
+            <button type="submit" className="h-9 px-4 rounded-md bg-neutral-900 text-white text-sm hover:bg-neutral-800">추천</button>
+          </form>
+          <form action={`/api/posts/${post.id}/report`} method="post">
+            <button type="submit" className="h-9 px-4 rounded-md border border-neutral-300 bg-white text-sm hover:bg-neutral-100">신고</button>
+          </form>
+        </footer>
+      </section>
     </div>
   );
 }