블로그에 광고와 댓글 시스템 달기 — 수익화와 소통

// gatsby-ssr.js
import React from "react"

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="adsense"
      async
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
      crossOrigin="anonymous"
    />,
  ])
}

// src/components/AdSense.js
import React, { useEffect } from "react"

const AdSense = ({ slot, format = "auto", responsive = true }) => {
  useEffect(() => {
    try {
      ;(window.adsbygoogle = window.adsbygoogle || []).push({})
    } catch (e) {
      console.error("AdSense error:", e)
    }
  }, [])

  return (
    <div style={{ textAlign: "center", margin: "20px 0" }}>
      <ins
        className="adsbygoogle"
        style={{ display: "block" }}
        data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
        data-ad-slot={slot}
        data-ad-format={format}
        data-full-width-responsive={responsive}
      />
    </div>
  )
}

export default AdSense

// 포스팅 본문 아래에 삽입
<AdSense slot="1234567890" />

// src/components/CoupangAd.js
import React from "react"

const CoupangAd = ({ src, width = "100%", height = "100" }) => {
  return (
    <div style={{ margin: "20px 0", textAlign: "center" }}>
      <iframe
        src={src}
        width={width}
        height={height}
        frameBorder="0"
        scrolling="no"
        referrerPolicy="unsafe-url"
        title="쿠팡 파트너스"
        style={{ maxWidth: "100%" }}
      />
      <p style={{ fontSize: "11px", color: "#888", marginTop: "4px" }}>
        이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를
        제공받습니다.
      </p>
    </div>
  )
}

export default CoupangAd

개발에 사용 중인 키보드가 궁금하시다면, [제가 사용하는 키보드](쿠팡_파트너스_링크)를 참고해보세요.

// src/components/Utterances.js
import React, { useEffect, useRef } from "react"

const Utterances = ({ repo, theme = "github-light" }) => {
  const containerRef = useRef(null)

  useEffect(() => {
    if (!containerRef.current) return

    const script = document.createElement("script")
    script.src = "https://utteranc.es/client.js"
    script.async = true
    script.setAttribute("repo", repo)
    script.setAttribute("issue-term", "pathname")
    script.setAttribute("theme", theme)
    script.setAttribute("crossorigin", "anonymous")

    // 기존 스크립트가 있으면 제거
    const existingScript = containerRef.current.querySelector("script")
    if (existingScript) {
      existingScript.remove()
    }

    containerRef.current.appendChild(script)
  }, [repo, theme])

  return <div ref={containerRef} />
}

export default Utterances

// src/templates/blog-post.js (또는 해당 템플릿 파일)
import Utterances from "../components/Utterances"

// 본문 아래에 추가
<Utterances
  repo="javapark/javapark.github.io"
  theme="github-light"
/>

// src/components/Utterances.js (다크모드 대응 버전)
import React, { useEffect, useRef, useContext } from "react"
import { ThemeContext } from "../contexts/ThemeContext"

const Utterances = ({ repo }) => {
  const containerRef = useRef(null)
  const { isDarkMode } = useContext(ThemeContext)

  const theme = isDarkMode ? "github-dark" : "github-light"

  useEffect(() => {
    if (!containerRef.current) return

    // 기존 iframe 제거
    const existingIframe = containerRef.current.querySelector(
      ".utterances"
    )
    if (existingIframe) {
      existingIframe.remove()
    }

    const script = document.createElement("script")
    script.src = "https://utteranc.es/client.js"
    script.async = true
    script.setAttribute("repo", repo)
    script.setAttribute("issue-term", "pathname")
    script.setAttribute("theme", theme)
    script.setAttribute("crossorigin", "anonymous")

    containerRef.current.appendChild(script)
  }, [repo, theme])

  return <div ref={containerRef} />
}

export default Utterances

useEffect(() => {
  const iframe = document.querySelector(".utterances-frame")
  if (iframe) {
    iframe.contentWindow.postMessage(
      { type: "set-theme", theme },
      "https://utteranc.es"
    )
  }
}, [theme])

[포스팅 제목]
[본문 시작]
...
(본문의 40~50% 지점)
--- 쿠팡 파트너스 배너 ---
...
[본문 끝]
--- AdSense 광고 ---
--- 댓글 시스템 ---