9.1 에디터(Tiptap/Quill 중 택1) 통합 o

src/app/components/Editor.tsx

@@ -0,0 +1,28 @@
+"use client";
+import { useEffect, useRef } from "react";
+
+export function Editor({ value, onChange, placeholder }: { value: string; onChange: (v: string) => void; placeholder?: string }) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (el.innerHTML !== value) el.innerHTML = value || "";
+  }, [value]);
+  return (
+    <div
+      ref={ref}
+      contentEditable
+      onInput={(e) => onChange((e.target as HTMLDivElement).innerHTML)}
+      data-placeholder={placeholder}
+      style={{
+        minHeight: 160,
+        border: "1px solid #ddd",
+        borderRadius: 6,
+        padding: 12,
+      }}
+      suppressContentEditableWarning
+    />
+  );
+}
+
+

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

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 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";
 
 export default function EditPostPage() {
   const params = useParams<{ id: string }>();
@@ -43,7 +44,7 @@ export default function EditPostPage() {
     <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} />
+      <Editor value={form.content} onChange={(v) => setForm({ ...form, content: v })} placeholder="내용을 입력하세요" />
       <UploadButton onUploaded={(url) => setForm((f) => (!f ? f : { ...f, content: `${f.content}\n![image](${url})` }))} />
       <button disabled={loading} onClick={submit}>{loading ? "저장 중..." : "저장"}</button>
     </div>

src/app/posts/new/page.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useToast } from "@/app/components/ui/ToastProvider";
 import { UploadButton } from "@/app/components/UploadButton";
+import { Editor } from "@/app/components/Editor";
 
 export default function NewPostPage({ searchParams }: { searchParams?: { boardId?: string } }) {
   const router = useRouter();
@@ -32,7 +33,7 @@ export default function NewPostPage({ searchParams }: { searchParams?: { boardId
       <h1>새 글</h1>
       <input placeholder="boardId" value={form.boardId} onChange={(e) => setForm({ ...form, boardId: e.target.value })} />
       <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} />
+      <Editor value={form.content} onChange={(v) => setForm({ ...form, content: v })} placeholder="내용을 입력하세요" />
       <UploadButton multiple onUploaded={(url) => setForm((f) => ({ ...f, content: `${f.content}\n![image](${url})` }))} />
       <button disabled={loading} onClick={submit}>{loading ? "저장 중..." : "등록"}</button>
     </div>