55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
"use client";
|
|
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 }>();
|
|
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 })} />
|
|
<Editor value={form.content} onChange={(v) => setForm({ ...form, content: v })} placeholder="내용을 입력하세요" />
|
|
<UploadButton onUploaded={(url) => setForm((f) => (!f ? f : { ...f, content: `${f.content}\n` }))} />
|
|
<button disabled={loading} onClick={submit}>{loading ? "저장 중..." : "저장"}</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|