feat : 댓글 기능 추가

Author: pjj186

src/components/utterances.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useRef } from "react"
+
+const Utterances: React.FC = () => {
+  const commentsRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!commentsRef.current) return
+
+    // 현재 테마 감지
+    const isDark = document.documentElement.classList.contains("dark")
+    const theme = isDark ? "github-dark" : "github-light"
+
+    // 기존 스크립트 제거
+    commentsRef.current.innerHTML = ""
+
+    // Utterances 스크립트 생성
+    const script = document.createElement("script")
+    script.src = "https://utteranc.es/client.js"
+    script.setAttribute("repo", "pjj186/blog-comments")
+    script.setAttribute("issue-term", "pathname")
+    script.setAttribute("theme", theme)
+    script.setAttribute("crossorigin", "anonymous")
+    script.async = true
+
+    commentsRef.current.appendChild(script)
+
+    // 테마 변경 감지 함수
+    const handleThemeChange = () => {
+      const iframe =
+        document.querySelector<HTMLIFrameElement>(".utterances-frame")
+      if (iframe && iframe.contentWindow) {
+        const newTheme = document.documentElement.classList.contains("dark")
+          ? "github-dark"
+          : "github-light"
+
+        const message = {
+          type: "set-theme",
+          theme: newTheme,
+        }
+        iframe.contentWindow.postMessage(message, "https://utteranc.es")
+      }
+    }
+
+    // 테마 변경 감지를 위한 MutationObserver
+    const observer = new MutationObserver(handleThemeChange)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  return (
+    <div className="mt-16 pt-8 border-t">
+      <h3 className="text-xl font-semibold mb-6">댓글</h3>
+      <div ref={commentsRef} className="utterances-container" />
+    </div>
+  )
+}
+
+export default Utterances

src/style.css

@@ -265,6 +265,15 @@
   @apply bg-muted/30;
 }
 
+/* Utterances 댓글 스타일링 */
+.utterances-container {
+  @apply max-w-none;
+}
+
+.utterances {
+  @apply max-w-none;
+}
+
 /* 다크 모드 스타일 */
 .dark .markdown-content {
   @apply text-foreground;

src/templates/blog-post.tsx

@@ -6,6 +6,7 @@ import Layout from "@/components/layout"
 import Seo from "@/components/seo"
 import CategoryTag from "@/components/category-tag"
 import { ChevronLeft, ChevronRight, Calendar } from "lucide-react"
+import Utterances from "@/components/utterances"
 
 interface BlogPostTemplateProps {
   data: {
@@ -113,6 +114,9 @@ const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({
           <Bio />
         </div>
 
+        {/* 댓글 */}
+        <Utterances />
+
         {/* 이전/다음 포스트 네비게이션 */}
         <nav className="mt-16">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">