123

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

@@ -1,6 +1,13 @@
 import { notFound } from "next/navigation";
 import { headers } from "next/headers";
 import { HeroBanner } from "@/app/components/HeroBanner";
+import Link from "next/link";
+import prisma from "@/lib/prisma";
+
+function stripHtml(html: string | null | undefined): string {
+  if (!html) return "";
+  return html.replace(/<[^>]*>/g, "").trim();
+}
 
 // 서버 전용 페이지: params가 Promise일 수 있어 안전 언랩 후 절대 URL로 fetch합니다.
 export default async function PostDetail({ params }: { params: any }) {
@@ -14,6 +21,27 @@ export default async function PostDetail({ params }: { params: any }) {
   if (!res.ok) return notFound();
   const { post } = await res.json();
   const createdAt = post?.createdAt ? new Date(post.createdAt) : null;
+
+  // 같은 게시판의 다른 게시글 10개 가져오기 (현재 게시글 제외)
+  const relatedPosts = post?.boardId
+    ? await prisma.post.findMany({
+        where: {
+          boardId: post.boardId,
+          id: { not: id },
+          status: { not: "deleted" },
+        },
+        orderBy: { createdAt: "desc" },
+        take: 10,
+        select: {
+          id: true,
+          title: true,
+          createdAt: true,
+          author: { select: { nickname: true } },
+          stat: { select: { views: true, recommendCount: true, commentsCount: true } },
+        },
+      })
+    : [];
+
   return (
     <div className="space-y-6">
       {/* 상단 배너 */}
@@ -30,7 +58,13 @@ export default async function PostDetail({ params }: { params: any }) {
           )}
         </header>
         <div className="p-4 md:p-6">
-          <div className="prose max-w-none whitespace-pre-wrap break-words">{post.content}</div>
+          <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">
@@ -41,6 +75,46 @@ export default async function PostDetail({ params }: { params: any }) {
           </form>
         </footer>
       </section>
+
+      {/* 같은 게시판 게시글 목록 */}
+      {relatedPosts.length > 0 && (
+        <section className="rounded-xl overflow-hidden bg-white">
+          <header className="px-4 py-3 border-b border-neutral-200">
+            <h2 className="text-lg font-bold text-neutral-900">같은 게시판 게시글</h2>
+          </header>
+          <div>
+            <ul className="divide-y divide-[#ececec]">
+              {relatedPosts.map((p) => {
+                const postDate = new Date(p.createdAt);
+                return (
+                  <li key={p.id} className="px-4 py-2.5 hover:bg-neutral-50 transition-colors">
+                    <Link href={`/posts/${p.id}`} className="block">
+                      <div className="grid grid-cols-1 md:grid-cols-[1fr_120px_120px_80px] items-center gap-2">
+                        <div className="min-w-0">
+                          <div className="truncate text-[15px] md:text-base text-neutral-900">
+                            {stripHtml(p.title)}
+                          </div>
+                        </div>
+                        <div className="md:w-[120px] text-xs text-neutral-600 text-center hidden md:flex items-center justify-center gap-2">
+                          <span className="truncate max-w-[84px]">{p.author?.nickname ?? "익명"}</span>
+                        </div>
+                        <div className="md:w-[120px] text-[11px] text-[#8c8c8c] text-center flex items-center justify-center gap-3">
+                          <span>조회 {p.stat?.views ?? 0}</span>
+                          <span>추천 {p.stat?.recommendCount ?? 0}</span>
+                          <span>댓글 {p.stat?.commentsCount ?? 0}</span>
+                        </div>
+                        <div className="md:w-[80px] text-[11px] text-neutral-500 text-right hidden md:block">
+                          {postDate.toLocaleDateString()}
+                        </div>
+                      </div>
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </section>
+      )}
     </div>
   );
 }