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

113 lines
4.1 KiB
TypeScript
Raw Normal View History

import { notFound } from "next/navigation";
2025-10-10 14:39:22 +09:00
import { headers } from "next/headers";
2025-10-24 21:40:16 +09:00
import { HeroBanner } from "@/app/components/HeroBanner";
2025-11-02 15:13:03 +09:00
import { RelatedPosts } from "./RelatedPosts";
2025-11-02 13:32:19 +09:00
import prisma from "@/lib/prisma";
2025-11-02 15:13:03 +09:00
import { CommentSection } from "@/app/components/CommentSection";
// 서버 전용 페이지: params가 Promise일 수 있어 안전 언랩 후 절대 URL로 fetch합니다.
export default async function PostDetail({ params }: { params: any }) {
const p = params?.then ? await params : params;
2025-11-02 04:39:28 +09:00
const id = p.id as string; // slug 값이 들어옴
2025-10-10 14:39:22 +09:00
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();
2025-10-24 21:40:16 +09:00
const createdAt = post?.createdAt ? new Date(post.createdAt) : null;
2025-11-02 15:13:03 +09:00
// 메인배너 표시 설정
const SETTINGS_KEY = "mainpage_settings" as const;
const settingRow = await prisma.setting.findUnique({ where: { key: SETTINGS_KEY } });
const parsed = settingRow ? JSON.parse(settingRow.value as string) : {};
const showBanner: boolean = parsed.showBanner ?? true;
2025-11-02 13:32:19 +09:00
2025-11-09 19:53:42 +09:00
// 현재 게시글이 속한 카테고리의 보드들을 서브카테고리로 구성
let subItems:
| { id: string; name: string; href: string }[]
| undefined = undefined;
if (post?.boardId) {
const categories = await prisma.boardCategory.findMany({
where: { status: "active" },
orderBy: [{ sortOrder: "asc" }, { createdAt: "asc" }],
include: {
boards: {
where: { status: "active" },
orderBy: [{ sortOrder: "asc" }, { createdAt: "asc" }],
select: { id: true, name: true, slug: true },
},
},
});
const categoryOfPost = categories.find((c) =>
c.boards.some((b) => b.id === post.boardId)
);
if (categoryOfPost) {
subItems = categoryOfPost.boards.map((b) => ({
id: b.id,
name: b.name,
href: `/boards/${b.slug}`,
}));
}
}
return (
2025-10-24 21:40:16 +09:00
<div className="space-y-6">
{/* 상단 배너 */}
2025-11-02 15:13:03 +09:00
{showBanner && (
<section>
2025-11-09 19:53:42 +09:00
<HeroBanner
subItems={subItems}
activeSubId={post?.boardId}
showPartnerCats={false}
/>
2025-11-02 15:13:03 +09:00
</section>
)}
2025-10-24 21:40:16 +09:00
{/* 본문 카드 */}
<section className="rounded-xl overflow-hidden bg-white">
<header className="px-4 py-3 border-b border-neutral-200">
<h1 className="text-xl md:text-2xl font-bold text-neutral-900 break-words">{post.title}</h1>
{createdAt && (
<p className="mt-1 text-xs text-neutral-500">{createdAt.toLocaleString()}</p>
)}
</header>
<div className="p-4 md:p-6">
2025-11-02 13:32:19 +09:00
<div
className="prose max-w-none break-words"
dangerouslySetInnerHTML={{ __html: post.content || "" }}
style={{
wordBreak: "break-word",
}}
/>
2025-10-24 21:40:16 +09:00
</div>
<footer className="px-4 py-3 border-t border-neutral-200 flex gap-2">
<form action={`/api/posts/${post.id}/recommend`} method="post">
<button type="submit" className="h-9 px-4 rounded-md bg-neutral-900 text-white text-sm hover:bg-neutral-800"></button>
</form>
<form action={`/api/posts/${post.id}/report`} method="post">
<button type="submit" className="h-9 px-4 rounded-md border border-neutral-300 bg-white text-sm hover:bg-neutral-100"></button>
</form>
</footer>
</section>
2025-11-02 13:32:19 +09:00
2025-11-02 15:13:03 +09:00
{/* 댓글 섹션 */}
<CommentSection postId={id} />
2025-11-02 13:32:19 +09:00
{/* 같은 게시판 게시글 목록 */}
2025-11-02 15:13:03 +09:00
{post?.boardId && post?.board && (
2025-11-08 01:21:44 +09:00
<section className="px-[0px] md:px-[30px]">
<RelatedPosts
boardId={post.boardId}
boardName={post.board.name}
currentPostId={id}
pageSize={10}
/>
</section>
2025-11-02 13:32:19 +09:00
)}
</div>
);
}