feat(blog): giscus 기반 댓글 기능

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@giscus/react": "^3.1.0",
     "@mdx-js/react": "^3.1.1",
     "@react-router/node": "^7.15.1",
     "browserslist": "^4.28.2",

src/components/Giscus.tsx

@@ -0,0 +1,36 @@
+import GiscusWidget from "@giscus/react";
+import { useTheme } from "../hooks/useTheme";
+import { giscusConfig } from "../constants/giscus";
+
+interface GiscusProps {
+  /** 댓글을 붙일 글의 discussion 번호(= slug). */
+  term: string;
+}
+
+/**
+ * giscus 댓글 위젯.
+ *
+ * 스크립트 주입·iframe 생명주기·테마/글 변경 시 setConfig 전달은 공식
+ * `@giscus/react`가 맡는다. 여기서는 설정값(constants/giscus)과 현재 테마만 넘긴다.
+ *
+ * 블로그 글 slug가 곧 "블로그" 카테고리 Discussion 번호라 mapping=number로 연결한다.
+ */
+export function Giscus({ term }: GiscusProps) {
+  const { isDark } = useTheme();
+
+  return (
+    <GiscusWidget
+      repo={giscusConfig.repo}
+      repoId={giscusConfig.repoId}
+      category={giscusConfig.category}
+      categoryId={giscusConfig.categoryId}
+      mapping="number"
+      term={term}
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="bottom"
+      theme={isDark ? "dark" : "light"}
+      lang="ko"
+    />
+  );
+}

src/constants/giscus.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { giscusConfig } from "./giscus";
+
+describe("giscusConfig", () => {
+  it("repo·category 기본값을 노출한다", () => {
+    expect(giscusConfig.repo).toBe("DaleStudy/daleui");
+    expect(giscusConfig.category).toBe("블로그");
+  });
+
+  it("repo-id·category-id를 함께 노출한다", () => {
+    expect(giscusConfig.repoId).toBeTruthy();
+    expect(giscusConfig.categoryId).toBeTruthy();
+  });
+});

src/constants/giscus.ts

@@ -0,0 +1,9 @@
+// giscus 댓글 위젯 설정값. 모두 공개돼도 되는 값이라 그대로 하드코딩한다.
+// 블로그 글은 DaleStudy/daleui "블로그" 카테고리 Discussion에서 오고 slug가 곧
+// discussion 번호라, mapping=number로 글마다 원본 토론에 그대로 연결한다.
+export const giscusConfig = {
+  repo: "DaleStudy/daleui" as `${string}/${string}`,
+  repoId: "R_kgDOMovgOA",
+  category: "블로그",
+  categoryId: "DIC_kwDOMovgOM4CqB1o",
+} as const;

src/routes/blog.$slug.tsx

@@ -5,6 +5,7 @@ import type { Route } from "./+types/blog.$slug";
 import { css } from "../../styled-system/css";
 import { findBlog, listBlog } from "../content/blog/loader";
 import { UserProfile } from "../components/UserProfile";
+import { Giscus } from "../components/Giscus";
 import DirectionalLink from "../components/DirectionalLink";
 import { Navigation } from "../sections/blog/Navigation";
 
@@ -152,6 +153,10 @@ export default function BlogSlug({ loaderData }: Route.ComponentProps) {
               )}
             </div>
           </Box>
+
+          <Box as="section" aria-label="댓글" className={css({ mt: "48" })}>
+            <Giscus term={slug} />
+          </Box>
         </Box>
       </VStack>
     </>