예제 소스

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>[];
  }
}

export function AdBanner({ variant = "bottom" }: { variant?: "bottom" | "inline" }) {
  const pushed = useRef(false);

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

  const wrapClass = variant === "inline" ? styles.wrapInline : styles.wrap;

  return (
    <div className={wrapClass} aria-label="광고 영역">
      <Script
        async
        src={`https://pagead2.googlesyndication.com/adsbygoogle.js?client=${AD_CLIENT}`}
        crossOrigin="anonymous"
        strategy="afterInteractive"
      />
      <div className={styles.adLive} id={variant === "bottom" ? "janggy-ad-banner" : undefined}>
        <ins
          className={`adsbygoogle ${styles.ins}`}
          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>
  );
}