Add giscus

src/components/giscus.jsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useRef } from 'react'
+
+export default function Giscus() {
+  const containerRef = useRef(null)
+
+  useEffect(() => {
+    const script = document.createElement('script')
+    const giscusAttributes = {
+      src: "https://giscus.app/client.js",
+      "data-repo": "winterjung/blog",
+      "data-repo-id": "MDEwOlJlcG9zaXRvcnkyMzYyNTc3MDc=",
+      "data-category": "Comments",
+      "data-category-id": "DIC_kwDODhUBq84Cj2FN",
+      "data-mapping": "pathname",
+      "data-strict": "0",
+      "data-reactions-enabled": "1",
+      "data-emit-metadata": "0",
+      "data-input-position": "top",
+      "data-theme": "preferred_color_scheme",
+      "data-lang": "ko",
+      "data-loading": "lazy",
+      crossorigin: "anonymous",
+      async: true,
+    }
+
+    Object.entries(giscusAttributes).forEach(([key, value]) => {
+      script.setAttribute(key, value)
+    })
+
+    containerRef.current.appendChild(script)
+    return () => {
+      containerRef.current?.removeChild(script)
+    }
+  }, [])
+
+  return <div ref={containerRef} />
+}

src/templates/post.jsx

@@ -1,5 +1,6 @@
 import { graphql } from "gatsby"
 import React from "react"
+import Giscus from "../components/Giscus"
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 import "../utils/typography"
@@ -18,6 +19,7 @@ export default function Post({ data }) {
                 <h1>{post.frontmatter.title}</h1>
                 <div dangerouslySetInnerHTML={{ __html: post.html }}></div>
             </div>
+            <Giscus />
         </Layout>
     )
 }