giscus기반 blog 댓글 기능

[hyoseong1994]

개요

블로그 글 상세 페이지(src/routes/blog.$slug.tsx)에 giscus 기반 댓글 기능을 연동합니다.

giscus는 GitHub Discussions를 백엔드로 사용하는 댓글 위젯으로, 별도의 서버나 DB 없이 댓글/반응 기능을 제공합니다. 이미 블로그 콘텐츠를 GitHub Discussions와 연동하고 있으므로(sync github discussions), 댓글도 동일한 인프라로 자연스럽게 확장할 수 있습니다.

사전 준비 (저장소 설정)

giscus를 사용하려면 대상 저장소가 아래 조건을 만족해야 합니다.

• 저장소가 public일 것 (방문자가 Discussion을 조회할 수 있어야 함)
• giscus 앱이 저장소에 설치되어 있을 것
• 저장소에서 Discussions 기능 활성화
• 댓글이 생성될 카테고리 준비 (예: Comments — Announcements 유형 권장: giscus와 관리자만 새 Discussion 생성 가능)

작업 내용

• giscus.app/ko에서 설정값 발급 (repo, repo-id, category, category-id)
• 블로그 상세 페이지(blog.$slug.tsx)에 giscus 위젯 렌더링
  • SPA(React Router 7) 환경이므로 <script> 직접 삽입 대신 useEffect 기반 컴포넌트 또는 @giscus/react 사용
  • 페이지-Discussion 매핑은 pathname(또는 글 slug) 기준
  • 다크모드 토큰과 연동되도록 theme 설정
  • 언어는 ko로 설정
• 민감하지 않은 설정값(repo-id 등)은 공개되어도 무방하나, 환경변수/상수로 분리해 관리

설정 예시

<script src="https://giscus.app/client.js"
        data-repo="DaleStudy/daleui.com"
        data-repo-id="..."
        data-category="Comments"
        data-category-id="..."
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="ko"
        crossorigin="anonymous"
        async>
</script>

참고

• giscus 공식 문서: https://giscus.app/ko
• React 컴포넌트: https://github.com/giscus/giscus-component