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

import { notFound } from "next/navigation";
import { headers } from "next/headers";
import { HeroBanner } from "@/app/components/HeroBanner";
import { RelatedPosts } from "./RelatedPosts";
import prisma from "@/lib/prisma";
import Link from "next/link";
import { CommentSection } from "@/app/components/CommentSection";
import { UserNameMenu } from "@/app/components/UserNameMenu";
import { ViewTracker } from "./ViewTracker";
import ViewsIcon from "@/app/svgs/ViewsIcon";
import LikeIcon from "@/app/svgs/LikeIcon";

// 서버 전용 페이지: params가 Promise일 수 있어 안전 언랩 후 절대 URL로 fetch합니다.
export default async function PostDetail({ params }: { params: any }) {
  const p = params?.then ? await params : params;
  const id = p.id as string; // slug 값이 들어옴
  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();
  const createdAt = post?.createdAt ? new Date(post.createdAt) : null;
  // 메인배너 표시 설정
  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;

  // 현재 게시글이 속한 카테고리의 보드들을 서브카테고리로 구성
  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}`,
      }));
    }
  }

  const backHref = post?.board?.slug ? `/boards/${post.board.slug}` : "/";

  return (
    <div className="space-y-6">
      <ViewTracker postId={id} />
      {/* 상단 배너 */}
      {showBanner && (
        <section>
          <HeroBanner
            subItems={subItems}
            activeSubId={post?.boardId}
            showPartnerCats={false}
          />
        </section>
      )}

      {/* 목록으로 버튼 */}
      <div className="px-1">
        <Link
          href={backHref}
          className="inline-flex items-center gap-1 h-9 px-3 rounded-md border border-neutral-300 bg-white text-sm text-neutral-900 hover:bg-neutral-100"
        >
          ← 목록으로
        </Link>
      </div>

      {/* 본문 카드 */}
      <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>
          <div className="mt-1 text-xs text-neutral-500 flex items-center gap-2">
            <span>
              <UserNameMenu
                userId={post?.author?.userId ?? null}
                nickname={post?.author?.nickname ?? null}
                isAnonymous={post?.isAnonymous}
                underlineOnHover={false}
              />
            </span>
            {createdAt && <span aria-hidden>•</span>}
            {createdAt && <span>{createdAt.toLocaleString()}</span>}
            {/* 지표: 조회수 / 좋아요수 / 댓글수 */}
            {(() => {
              const views = post?.stat?.views ?? 0;
              const likes = post?.stat?.recommendCount ?? 0;
              const comments = post?.stat?.commentsCount ?? 0;
              return (
                <>
                  <span aria-hidden>•</span>
                  <span className="inline-flex items-center gap-1"><ViewsIcon width={14} height={14} />{views}</span>
                  <span className="inline-flex items-center gap-1"><LikeIcon width={14} height={14} />{likes}</span>
                  <span className="inline-flex items-center gap-1">댓글 {comments}</span>
                </>
              );
            })()}
          </div>
        </header>
        <div className="p-4 md:p-6">
          <div 
            className="prose max-w-none break-words" 
            dangerouslySetInnerHTML={{ __html: post.content || "" }}
            style={{
              wordBreak: "break-word",
            }}
          />
        </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>

      {/* 댓글 섹션 */}
      <CommentSection postId={id} />

      {/* 같은 게시판 게시글 목록 */}
      {post?.boardId && post?.board && (
        <section className="px-[0px] md:px-[30px]">
          <RelatedPosts
            boardId={post.boardId}
            boardName={post.board.name}
            currentPostId={id}
            pageSize={10}
          />
        </section>
      )}
    </div>
  );
}