7.1 게시글 CRUD API 및 페이지 연동 o

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

@@ -0,0 +1,51 @@
+"use client";
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useToast } from "@/app/components/ui/ToastProvider";
+
+export default function EditPostPage() {
+  const params = useParams<{ id: string }>();
+  const id = params?.id as string;
+  const router = useRouter();
+  const { show } = useToast();
+  const [form, setForm] = useState<{ title: string; content: string } | null>(null);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    (async () => {
+      const r = await fetch(`/api/posts/${id}`);
+      if (!r.ok) return;
+      const { post } = await r.json();
+      setForm({ title: post.title, content: post.content });
+    })();
+  }, [id]);
+  async function submit() {
+    if (!form) return;
+    try {
+      setLoading(true);
+      const r = await fetch(`/api/posts/${id}`, {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(form),
+      });
+      const data = await r.json();
+      if (!r.ok) throw new Error(JSON.stringify(data));
+      show("수정되었습니다");
+      router.push(`/posts/${id}`);
+    } catch (e) {
+      show("수정 실패");
+    } finally {
+      setLoading(false);
+    }
+  }
+  if (!form) return <div>불러오는 중...</div>;
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <h1>글 수정</h1>
+      <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={10} />
+      <button disabled={loading} onClick={submit}>{loading ? "저장 중..." : "저장"}</button>
+    </div>
+  );
+}
+
+

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

@@ -0,0 +1,15 @@
+import { notFound } from "next/navigation";
+
+export default async function PostDetail({ params }: { params: { id: string } }) {
+  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL ?? ""}/api/posts/${params.id}`, { cache: "no-store" });
+  if (!res.ok) return notFound();
+  const { post } = await res.json();
+  return (
+    <div>
+      <h1>{post.title}</h1>
+      <p style={{ whiteSpace: "pre-wrap" }}>{post.content}</p>
+    </div>
+  );
+}
+
+