Next.js 블로그 만들기 — giscus로 댓글 기능 추가

gh repo edit terajh/tera-log --enable-discussions

gh api graphql -f query='{
  repository(owner: "terajh", name: "tera-log") {
    id
    discussionCategories(first: 10) {
      nodes { id name }
    }
  }
}'

'use client'
 
import { useEffect, useRef } from 'react'
import { useTheme } from 'next-themes'
 
export default function Comments() {
  const containerRef = useRef<HTMLDivElement>(null)
  const { resolvedTheme } = useTheme()
 
  useEffect(() => {
    const container = containerRef.current
    if (!container) return
 
    // 이미 로드된 경우 — 테마만 변경
    const existingIframe = container.querySelector<HTMLIFrameElement>(
      'iframe.giscus-frame'
    )
 
    if (existingIframe) {
      existingIframe.contentWindow?.postMessage(
        {
          giscus: {
            setConfig: {
              theme: resolvedTheme === 'dark'
                ? 'dark_dimmed'
                : 'light',
            },
          },
        },
        'https://giscus.app'
      )
      return
    }
 
    // 최초 로드
    const script = document.createElement('script')
    script.src = 'https://giscus.app/client.js'
    script.setAttribute('data-repo', 'terajh/tera-log')
    script.setAttribute('data-repo-id', 'YOUR_REPO_ID')
    script.setAttribute('data-category', 'General')
    script.setAttribute('data-category-id', 'YOUR_CATEGORY_ID')
    script.setAttribute('data-mapping', 'pathname')
    script.setAttribute('data-reactions-enabled', '1')
    script.setAttribute('data-input-position', 'bottom')
    script.setAttribute(
      'data-theme',
      resolvedTheme === 'dark' ? 'dark_dimmed' : 'light'
    )
    script.setAttribute('data-lang', 'ko')
    script.crossOrigin = 'anonymous'
    script.async = true
    container.appendChild(script)
  }, [resolvedTheme])
 
  return <div ref={containerRef} className="mt-16" />
}

export default async function PostPage({ params }) {
  // ... post, content 로딩
  return (
    <article>
      <header>...</header>
      <PostContent>{content}</PostContent>
      <div className="mx-auto max-w-3xl px-4">
        <Comments />
      </div>
    </article>
  )
}