feat(extra) : add branded export background

components/public/structured-guide.tsx

@@ -305,7 +305,7 @@ function GuideSection({
     return <ConstellationSection guide={guide} />;
   if (section === "team") return <TeamSection guide={guide} />;
   const extra = guide.extras.find((item) => item.slug === section);
-  return extra ? <ExtraSection extra={extra} /> : null;
+  return extra ? <ExtraSection guide={guide} extra={extra} /> : null;
 }
 
 function metric(value: string | null) {
@@ -1179,13 +1179,20 @@ function TeamSection({ guide }: { guide: PublicGuide }) {
   );
 }
 
-function ExtraSection({ extra }: { extra: PublicGuide["extras"][number] }) {
+function ExtraSection({
+  guide,
+  extra,
+}: {
+  guide: PublicGuide;
+  extra: PublicGuide["extras"][number];
+}) {
   return (
     <ExtraSectionContent
+      guide={guide}
       extra={extra}
       action={
         <GuideImageExport fileName={`${extra.title}.png`} captureClassName="p-0">
-          <ExtraSectionContent extra={extra} exporting />
+          <ExtraSectionContent guide={guide} extra={extra} exporting />
         </GuideImageExport>
       }
     />
@@ -1193,22 +1200,45 @@ function ExtraSection({ extra }: { extra: PublicGuide["extras"][number] }) {
 }
 
 function ExtraSectionContent({
+  guide,
   extra,
   action,
   exporting = false,
 }: {
+  guide: PublicGuide;
   extra: PublicGuide["extras"][number];
   action?: React.ReactNode;
   exporting?: boolean;
 }) {
   return (
-    <section className={cn("flex flex-col gap-6", exporting && "bg-background p-10")}>
+    <section className={cn("flex flex-col gap-6", exporting && "relative isolate overflow-hidden bg-[#070b20] p-10 text-white")}>
-      <header className="flex flex-col items-center gap-3 text-center">
+      {exporting ? (
+        <>
+          <Image
+            src={guide.character.splashImageUrl ?? guide.coverUrl}
+            alt=""
+            fill
+            loading="eager"
+            sizes="1200px"
+            className="object-cover"
+          />
+          <div className="absolute inset-0 bg-[#050817]/65" />
+          <Image
+            src="/icon/Watermark.png"
+            alt=""
+            width={180}
+            height={101}
+            loading="eager"
+            className="absolute top-4 right-4 z-30 h-auto w-[180px] object-contain drop-shadow-[0_4px_3px_rgba(0,0,0,0.8)]"
+          />
+        </>
+      ) : null}
+      <header className="relative z-10 flex flex-col items-center gap-3 text-center">
         <p className="text-sm font-medium text-primary">คู่มือเสริม</p>
         <h1 className="font-heading text-4xl font-semibold">{extra.title}</h1>
         {action}
       </header>
-      <div className={cn("grid gap-5 md:grid-cols-2", exporting && "grid-cols-2")}>
+      <div className={cn("relative z-10 grid gap-5 md:grid-cols-2", exporting && "grid-cols-2")}>
         {extra.rows.map((row) => (
           <Card
             key={row.id}