222

src/app/components/PostList.tsx

@@ -43,16 +43,20 @@ export function PostList({ boardId, sort = "recent", q, tag, author, start, end
   return (
     <div className="w-full">
       {/* 정렬 스위치 */}
-      <div className="mb-2 flex items-center gap-3 text-sm">
+      <div className="px-4 py-2 border-b border-neutral-200 mb-2 flex items-center gap-2">
-        <span className="text-neutral-500">정렬</span>
+        <span className="text-xs text-neutral-500 mr-1">정렬</span>
         <a
-          className={sort === "recent" ? "underline" : "hover:underline"}
+          className={`text-xs px-3 py-1 rounded-full border transition-colors ${
+            sort === "recent" ? "bg-neutral-900 text-white border-neutral-900" : "bg-white text-neutral-700 border-neutral-300 hover:bg-neutral-100"
+          }`}
           href={`${q ? "/search" : "/"}?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); if (boardId) p.set("boardId", boardId); p.set("sort", "recent"); return p.toString(); })()}`}
         >
           최신
         </a>
         <a
-          className={sort === "popular" ? "underline" : "hover:underline"}
+          className={`text-xs px-3 py-1 rounded-full border transition-colors ${
+            sort === "popular" ? "bg-neutral-900 text-white border-neutral-900" : "bg-white text-neutral-700 border-neutral-300 hover:bg-neutral-100"
+          }`}
           href={`${q ? "/search" : "/"}?${(() => { const p = new URLSearchParams(); if (q) p.set("q", q); if (boardId) p.set("boardId", boardId); p.set("sort", "popular"); return p.toString(); })()}`}
         >
           인기

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

@@ -4,6 +4,7 @@ import { useParams, useRouter } from "next/navigation";
 import { useToast } from "@/app/components/ui/ToastProvider";
 import { UploadButton } from "@/app/components/UploadButton";
 import { Editor } from "@/app/components/Editor";
+import { HeroBanner } from "@/app/components/HeroBanner";
 
 export default function EditPostPage() {
   const params = useParams<{ id: string }>();
@@ -39,14 +40,48 @@ export default function EditPostPage() {
       setLoading(false);
     }
   }
-  if (!form) return <div>불러오는 중...</div>;
+  if (!form) return <div className="text-sm text-neutral-600">불러오는 중...</div>;
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+    <div className="space-y-6">
-      <h1>글 수정</h1>
+      {/* 상단 배너 */}
-      <input placeholder="제목" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
+      <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">글 수정</h1>
+        </header>
+        <div className="p-4 md:p-6 space-y-3">
+          <input
+            className="h-10 w-full rounded-md border border-neutral-300 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-neutral-400"
+            placeholder="제목"
+            value={form.title}
+            onChange={(e) => setForm({ ...form, title: e.target.value })}
+          />
           <Editor value={form.content} onChange={(v) => setForm({ ...form, content: v })} placeholder="내용을 입력하세요" />
+          <div className="pt-1">
             <UploadButton onUploaded={(url) => setForm((f) => (!f ? f : { ...f, content: `${f.content}\n![image](${url})` }))} />
-      <button disabled={loading} onClick={submit}>{loading ? "저장 중..." : "저장"}</button>
+          </div>
+        </div>
+        <footer className="px-4 py-3 border-t border-neutral-200 flex items-center justify-end gap-2">
+          <button
+            type="button"
+            className="h-9 px-4 rounded-md border border-neutral-300 bg-white text-sm hover:bg-neutral-100"
+            onClick={() => router.back()}
+          >
+            취소
+          </button>
+          <button
+            disabled={loading}
+            onClick={submit}
+            className="h-9 px-4 rounded-md bg-neutral-900 text-white text-sm hover:bg-neutral-800 disabled:opacity-60"
+          >
+            {loading ? "저장 중..." : "저장"}
+          </button>
+        </footer>
+      </section>
     </div>
   );
 }

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>
+    <div className="space-y-6">
-      <h1>{post.title}</h1>
+      {/* 상단 배너 */}
-      <div style={{ display: "flex", gap: 8, margin: "8px 0" }}>
+      <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">추천</button>
+            <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">신고</button>
+            <button type="submit" className="h-9 px-4 rounded-md border border-neutral-300 bg-white text-sm hover:bg-neutral-100">신고</button>
           </form>
-      </div>
+        </footer>
-      <p style={{ whiteSpace: "pre-wrap" }}>{post.content}</p>
+      </section>
     </div>
   );
 }

src/app/posts/new/page.tsx

@@ -5,6 +5,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { useToast } from "@/app/components/ui/ToastProvider";
 import { UploadButton } from "@/app/components/UploadButton";
 import { Editor } from "@/app/components/Editor";
+import { HeroBanner } from "@/app/components/HeroBanner";
 
 export default function NewPostPage() {
   const router = useRouter();
@@ -49,17 +50,56 @@ export default function NewPostPage() {
     }
   }
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+    <div className="space-y-6">
-      <h1>새 글</h1>
+      {/* 상단 배너 */}
-      <input placeholder="boardId" value={form.boardId} onChange={(e) => setForm({ ...form, boardId: e.target.value })} />
+      <section>
-      <input placeholder="제목" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
+        <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">새 글</h1>
+        </header>
+        <div className="p-4 md:p-6 space-y-3">
+          <input
+            className="h-10 w-full rounded-md border border-neutral-300 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-neutral-400"
+            placeholder="boardId"
+            value={form.boardId}
+            onChange={(e) => setForm({ ...form, boardId: e.target.value })}
+          />
+          <input
+            className="h-10 w-full rounded-md border border-neutral-300 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-neutral-400"
+            placeholder="제목"
+            value={form.title}
+            onChange={(e) => setForm({ ...form, title: e.target.value })}
+          />
           <Editor value={form.content} onChange={(v) => setForm({ ...form, content: v })} placeholder="내용을 입력하세요" />
+          <div className="pt-1">
             <UploadButton
               multiple
               onUploaded={(url) => setForm((f) => ({ ...f, content: `${f.content}\n![image](${url})` }))}
               {...(boardSlug ? require("@/lib/photoPresets").getPhotoPresetBySlug(boardSlug) : {})}
             />
-      <button disabled={loading} onClick={submit}>{loading ? "저장 중..." : "등록"}</button>
+          </div>
+        </div>
+        <footer className="px-4 py-3 border-t border-neutral-200 flex items-center justify-end gap-2">
+          <button
+            type="button"
+            className="h-9 px-4 rounded-md border border-neutral-300 bg-white text-sm hover:bg-neutral-100"
+            onClick={() => router.back()}
+          >
+            취소
+          </button>
+          <button
+            disabled={loading}
+            onClick={submit}
+            className="h-9 px-4 rounded-md bg-neutral-900 text-white text-sm hover:bg-neutral-800 disabled:opacity-60"
+          >
+            {loading ? "저장 중..." : "등록"}
+          </button>
+        </footer>
+      </section>
     </div>
   );
 }