feat: utterances 추가

src/components/Comments.tsx

@@ -0,0 +1,22 @@
+import React, { createRef, useEffect } from "react";
+
+export default function Comments() {
+  const containerRef = createRef<HTMLDivElement>();
+  useEffect(() => {
+    const utterances = document.createElement("script");
+    const attributes = {
+      src: "https://utteranc.es/client.js",
+      repo: "wish0ne/wish0ne.github.io",
+      "issue-term": "pathname",
+      label: "💬",
+      theme: "github-light",
+      crossOrigin: "anonymous",
+      async: "true",
+    };
+    Object.entries(attributes).forEach(([key, value]) => {
+      utterances.setAttribute(key, value);
+    });
+    containerRef.current?.appendChild(utterances);
+  }, []);
+  return <div id="comment" ref={containerRef} />;
+}

src/pages/posts/{mdx.frontmatter__slug}.tsx

@@ -4,6 +4,7 @@ import { graphql, PageProps } from "gatsby";
 import { GatsbyImage, getImage, IGatsbyImageData } from "gatsby-plugin-image";
 import { css } from "@emotion/react";
 import Toc from "../../components/Toc";
+import Comments from "../../components/Comments";
 
 interface toc {
   title: string;
@@ -206,6 +207,7 @@ const BlogPost = ({ data, children }: PageProps<DataProps>) => {
           >
             {children}
           </main>
+          <Comments />
         </div>
         <Toc tableOfContents={data.mdx.tableOfContents} />
       </div>