From 5286c721451c60e8c81569f701db9eba5f21bf2b Mon Sep 17 00:00:00 2001
From: wish0ne <wish@khu.ac.kr>
Date: Sat, 9 Dec 2023 23:51:06 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20utterances=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comments.tsx                 | 22 +++++++++++++++++++++
 src/pages/posts/{mdx.frontmatter__slug}.tsx |  2 ++
 2 files changed, 24 insertions(+)
 create mode 100644 src/components/Comments.tsx

diff --git a/src/components/Comments.tsx b/src/components/Comments.tsx
new file mode 100644
index 0000000..0cd9b9e
--- /dev/null
+++ b/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} />;
+}
diff --git a/src/pages/posts/{mdx.frontmatter__slug}.tsx b/src/pages/posts/{mdx.frontmatter__slug}.tsx
index 78dbfc8..30d659d 100644
--- a/src/pages/posts/{mdx.frontmatter__slug}.tsx
+++ b/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>