디자인디테일

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

@@ -1,5 +1,6 @@
 import { PostList } from "@/app/components/PostList";
 import { HeroBanner } from "@/app/components/HeroBanner";
+import { BoardToolbar } from "@/app/components/BoardToolbar";
 import { headers } from "next/headers";
 
 // Next 15: params/searchParams가 Promise가 될 수 있어 안전 언랩 처리합니다.
@@ -20,44 +21,24 @@ export default async function BoardDetail({ params, searchParams }: { params: an
   const categoryName = board?.category?.name ?? "";
   return (
     <div className="space-y-6">
-      {/* 상단 배너 (홈과 동일) */}
+      {/* 상단 배너 (서브카테고리 표시) */}
       <section>
-        <HeroBanner />
+        <HeroBanner
+          subItems={siblingBoards.map((b: any) => ({ id: b.id, name: b.name, href: `/boards/${b.id}` }))}
+          activeSubId={id}
+        />
       </section>
 
-      {/* 보드 탭 + 리스트 카드 */}
-      <section className="rounded-xl overflow-hidden bg-white">
-        {/* 상단 탭 영역 */}
-        <div className="px-4 py-2 border-b border-neutral-200">
-          <div className="flex items-center justify-between gap-3">
-            <div className="flex items-center gap-2 overflow-x-auto flex-1">
-              <span className="shrink-0 text-sm text-neutral-500">{categoryName}</span>
-              {siblingBoards.map((b: any) => (
-                <a
-                  key={b.id}
-                  href={`/boards/${b.id}`}
-                  className={`shrink-0 whitespace-nowrap text-xs px-3 py-1 rounded-full border transition-colors ${
-                    b.id === id
-                      ? "bg-neutral-900 text-white border-neutral-900"
-                      : "bg-white text-neutral-700 border-neutral-300 hover:bg-neutral-100"
-                  }`}
-                >
-                  {b.name}
-                </a>
-              ))}
-            </div>
-            <a
-              href={`/posts/new?boardId=${id}${board?.slug ? `&boardSlug=${board.slug}` : ""}`}
-              className="shrink-0"
-            >
-              <button className="h-9 px-4 rounded-md bg-neutral-900 text-white text-sm hover:bg-neutral-800">새 글</button>
-            </a>
-          </div>
-        </div>
-
-        {/* 리스트 */}
+      {/* 검색/필터 툴바 + 리스트 */}
+      <section>
+        <BoardToolbar boardId={id} />
         <div className="p-0">
-          <PostList boardId={id} sort={sort} />
+          <PostList
+            boardId={id}
+            sort={sort}
+            variant="board"
+            newPostHref={`/posts/new?boardId=${id}${board?.slug ? `&boardSlug=${board.slug}` : ""}`}
+          />
         </div>
       </section>
     </div>