예제 소스

AdBanner.tsx

"use client";

import Script from "next/script";
import { useEffect, useRef } from "react";
import styles from "./AdBanner.module.css";

const AD_CLIENT = "ca-pub-7604021418840473";
const AD_SLOT = "6883296528";

declare global {
  interface Window {
    adsbygoogle?: Record<string, unknown>[];
  }
}

/** Google AdSense 배너 — 대국장 등 콘텐츠 있는 페이지에서만 사용 */
export function AdBanner({ variant = "bottom" }: { variant?: "bottom" | "top" | "inline" | "panel" }) {
  const pushed = useRef(false);

  useEffect(() => {
    if (pushed.current) return;
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
      pushed.current = true;
    } catch {
      /* ignore */
    }
  }, []);

  const wrapClass =
    variant === "panel"
      ? styles.wrapPanel
      : variant === "top"
        ? styles.wrapTop
        : variant === "inline"
          ? styles.wrapInline
          : styles.wrap;

  const adClass = variant === "panel" ? `${styles.adLive} ${styles.adLivePanel}` : styles.adLive;
  const insClass = variant === "panel" ? `${styles.ins} ${styles.insPanel}` : styles.ins;

  return (
    <div className={wrapClass} aria-label="광고 영역">
      <Script
        async
        src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${AD_CLIENT}`}
        crossOrigin="anonymous"
        strategy="afterInteractive"
      />
      <div className={adClass} id={variant === "bottom" ? "mariago-ad-banner" : undefined}>
        <ins
          className={`adsbygoogle ${insClass}`}
          style={{ display: "block" }}
          data-ad-client={AD_CLIENT}
          data-ad-slot={AD_SLOT}
          data-ad-format={variant === "bottom" ? "auto" : "horizontal"}
          data-full-width-responsive="true"
        />
      </div>
    </div>
  );
}