7.8 일반 게시판 공용 폼/라우트 템플릿 생성 o

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

@@ -0,0 +1,16 @@
+import { PostList } from "@/app/components/PostList";
+
+export default async function BoardDetail({ params, searchParams }: { params: { id: string }; searchParams?: { sort?: "recent" | "popular" } }) {
+  const sort = searchParams?.sort ?? "recent";
+  return (
+    <div>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <h1>게시판</h1>
+        <a href={`/posts/new?boardId=${params.id}`}><button>새 글</button></a>
+      </div>
+      <PostList boardId={params.id} sort={sort} />
+    </div>
+  );
+}
+
+

src/app/boards/page.tsx

@@ -0,0 +1,16 @@
+export default async function BoardsPage() {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL ?? ""}/api/boards`, { cache: "no-store" });
+  const { boards } = await res.json();
+  return (
+    <div>
+      <h1>게시판</h1>
+      <ul style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+        {boards?.map((b: any) => (
+          <li key={b.id}><a href={`/boards/${b.id}`}>{b.name}</a></li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+

src/app/components/PostForm.tsx

@@ -0,0 +1,44 @@
+"use client";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useToast } from "@/app/components/ui/ToastProvider";
+import { UploadButton } from "@/app/components/UploadButton";
+
+type Values = { title: string; content: string };
+
+export function PostForm({
+  initial,
+  onSubmit,
+  submitText = "등록",
+}: {
+  initial?: Partial<Values>;
+  onSubmit: (values: Values) => Promise<{ id: string } | void>;
+  submitText?: string;
+}) {
+  const router = useRouter();
+  const { show } = useToast();
+  const [form, setForm] = useState<Values>({ title: initial?.title ?? "", content: initial?.content ?? "" });
+  const [loading, setLoading] = useState(false);
+  async function handleSubmit() {
+    try {
+      setLoading(true);
+      const res = await onSubmit(form);
+      show("저장되었습니다");
+      if (res && res.id) router.push(`/posts/${res.id}`);
+    } catch (e) {
+      show("저장 실패");
+    } finally {
+      setLoading(false);
+    }
+  }
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <input placeholder="제목" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />
+      <textarea placeholder="내용" value={form.content} onChange={(e) => setForm({ ...form, content: e.target.value })} rows={12} />
+      <UploadButton onUploaded={(url) => setForm((f) => ({ ...f, content: `${f.content}\n![image](${url})` }))} />
+      <button disabled={loading} onClick={handleSubmit}>{loading ? "저장 중..." : submitText}</button>
+    </div>
+  );
+}
+
+

src/app/posts/new/page.tsx

@@ -4,10 +4,10 @@ import { useRouter } from "next/navigation";
 import { useToast } from "@/app/components/ui/ToastProvider";
 import { UploadButton } from "@/app/components/UploadButton";
 
-export default function NewPostPage() {
+export default function NewPostPage({ searchParams }: { searchParams?: { boardId?: string } }) {
   const router = useRouter();
   const { show } = useToast();
-  const [form, setForm] = useState({ boardId: "", title: "", content: "" });
+  const [form, setForm] = useState({ boardId: searchParams?.boardId ?? "", title: "", content: "" });
   const [loading, setLoading] = useState(false);
   async function submit() {
     try {