무한로드제거

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

@@ -1,18 +1,26 @@
 import { PostList } from "@/app/components/PostList";
+import { headers } from "next/headers";
+import React, { use } from "react";
 
-export default async function BoardDetail({ params, searchParams }: { params: { id: string }; searchParams?: { sort?: "recent" | "popular" } }) {
-  const sort = searchParams?.sort ?? "recent";
+export default async function BoardDetail({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<{ sort?: "recent" | "popular" }> }) {
+  const { id } = use(params);
+  const sp = use(searchParams);
+  const sort = sp?.sort ?? "recent";
   // 보드 slug 조회 (새 글 페이지 프리셋 전달)
-  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL ?? ""}/api/boards`, { cache: "no-store" });
+  const h = await headers();
+  const host = h.get("host") ?? "localhost:3000";
+  const proto = h.get("x-forwarded-proto") ?? "http";
+  const base = process.env.NEXT_PUBLIC_BASE_URL || `${proto}://${host}`;
+  const res = await fetch(new URL("/api/boards", base).toString(), { cache: "no-store" });
   const { boards } = await res.json();
-  const board = (boards || []).find((b: any) => b.id === params.id);
+  const board = (boards || []).find((b: any) => b.id === id);
   return (
     <div>
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
         <h1>게시판</h1>
-        <a href={`/posts/new?boardId=${params.id}${board?.slug ? `&boardSlug=${board.slug}` : ""}`}><button>새 글</button></a>
+        <a href={`/posts/new?boardId=${id}${board?.slug ? `&boardSlug=${board.slug}` : ""}`}><button>새 글</button></a>
       </div>
-      <PostList boardId={params.id} sort={sort} />
+      <PostList boardId={id} sort={sort} />
     </div>
   );
 }

src/app/boards/page.tsx

@@ -1,5 +1,12 @@
+import { headers } from "next/headers";
+
 export default async function BoardsPage() {
-  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL ?? ""}/api/boards`, { cache: "no-store" });
+  const h = await headers();
+  const host = h.get("host") ?? "localhost:3000";
+  const proto = h.get("x-forwarded-proto") ?? "http";
+  const base = process.env.NEXT_PUBLIC_BASE_URL || `${proto}://${host}`;
+  const url = new URL("/api/boards", base).toString();
+  const res = await fetch(url, { cache: "no-store" });
   const { boards } = await res.json();
   return (
     <div>

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

@@ -1,30 +1,26 @@
 import { notFound } from "next/navigation";
-import { useToast } from "@/app/components/ui/ToastProvider";
-import { useEffect } from "react";
+import { headers } from "next/headers";
+import React, { use } 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" });
+export default async function PostDetail({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const h = await headers();
+  const host = h.get("host") ?? "localhost:3000";
+  const proto = h.get("x-forwarded-proto") ?? "http";
+  const base = process.env.NEXT_PUBLIC_BASE_URL || `${proto}://${host}`;
+  const res = await fetch(new URL(`/api/posts/${id}`, base).toString(), { 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>
+        <form action={`/api/posts/${post.id}/recommend`} method="post">
+          <button type="submit">추천</button>
+        </form>
+        <form action={`/api/posts/${post.id}/report`} method="post">
+          <button type="submit">신고</button>
+        </form>
       </div>
       <p style={{ whiteSpace: "pre-wrap" }}>{post.content}</p>
     </div>