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

import { notFound } from "next/navigation";
import { useToast } from "@/app/components/ui/ToastProvider";
import { useEffect } from "react";

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 (
    <ClientPostDetail post={post} />
  );
}

function ClientPostDetail({ post }: { post: { id: string; title: string; content: string } }) {
  // client only
  // @ts-expect-error react client hook use
  const { show } = useToast();
  // @ts-expect-error react client hook use
  useEffect(() => {
    fetch(`/api/posts/${post.id}/view`, { method: "POST" });
  }, [post.id]);
  return (
    <div>
      <h1>{post.title}</h1>
      <div style={{ display: "flex", gap: 8, margin: "8px 0" }}>
        <button onClick={async () => { await fetch(`/api/posts/${post.id}/recommend`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ clientHash: "anon" }) }); show("추천했습니다"); }}>추천</button>
        <button onClick={async () => { const reason = prompt("신고 사유?") || ""; if(!reason) return; await fetch(`/api/posts/${post.id}/report`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ reason }) }); show("신고되었습니다"); }}>신고</button>
      </div>
      <p style={{ whiteSpace: "pre-wrap" }}>{post.content}</p>
    </div>
  );
}