feat : create share function for comment

app/[character]/comment/page.tsx

@@ -1,18 +1,11 @@
 import { Suspense } from "react";
 import type { Metadata } from "next";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { connection } from "next/server";
-import Image from "@/components/ui/resilient-image";
-import { SiteHeader } from "@/components/public/site-header";
-import { SiteFooter } from "@/components/public/site-footer";
-import { ScrollableNav } from "@/components/public/scrollable-nav";
+import { GuidePageShell } from "@/components/public/guide-page-shell";
 import { CommentBoardContent } from "@/components/comments/comment-board-content";
 import { CommentBoardSkeleton } from "@/components/comments/comment-skeleton";
 import { getCachedPublicGuideSummary } from "@/lib/cache/public";
-import { commentNavigationSection } from "@/lib/comments/navigation";
-import { navigationIconPath } from "@/lib/navigation";
-import { cn } from "@/lib/utils";
 
 export const instant = false;
 type Props = { params: Promise<{ character: string }> };
@@ -25,22 +18,11 @@ export default async function GuideCommentPage({ params }: Props) {
   const guide = await getCachedPublicGuideSummary((await params).character);
   if (!guide) notFound();
   const target = `guide:${guide.id}`;
-  const sections = [{ id: "overview", slug: "", title: "Overview" }, ...guide.sections, commentNavigationSection(guide.id)];
-  return <div className="flex min-h-svh flex-col bg-background">
-    <SiteHeader editHref={`/admin/${guide.characterKey}`} guideId={guide.id} />
-    <main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-10">
-      <header className="flex items-center gap-3"><Image src={guide.coverUrl} alt="" width={64} height={64} className="size-16 rounded-lg object-cover" />
-        <div><p className="text-sm text-muted-foreground">{guide.name}</p><h1 className="font-heading text-3xl font-semibold">ความคิดเห็น</h1></div>
-      </header>
-      <ScrollableNav ariaLabel={`เมนูคู่มือ ${guide.name}`} activeKey="comment" className="min-h-11 w-full rounded-xl border bg-card p-1 sm:p-2">
-        {sections.map((section) => <Link key={section.id} href={`/${guide.slug}${section.slug ? `/${section.slug}` : ""}`} prefetch={false}
-          aria-current={section.slug === "comment" ? "page" : undefined}
-          className={cn("flex min-h-11 shrink-0 items-center gap-2 rounded-md px-3 text-sm", section.slug === "comment" ? "bg-primary/15 font-semibold text-primary" : "text-muted-foreground hover:bg-muted")}>
-          {navigationIconPath(section.slug || "overview") && <Image src={navigationIconPath(section.slug || "overview")!} alt="" width={20} height={20} className="size-5 object-contain" />}
-          {section.title}
-        </Link>)}
-      </ScrollableNav>
-      <Suspense fallback={<CommentBoardSkeleton />}><CommentBoardContent target={target} /></Suspense>
-    </main><SiteFooter />
-  </div>;
+  return (
+    <GuidePageShell guide={guide} sections={guide.sections} section="comment">
+      <Suspense fallback={<CommentBoardSkeleton />}>
+        <CommentBoardContent target={target} />
+      </Suspense>
+    </GuidePageShell>
+  );
 }