feat: giscus (#74)

* chore: install @giscus/react

@giscus/react 패키지 설치.

* feat: create Giscus.jsx component

Giscus.jsx 컴포넌트 제작.

* rename: move Giscus component from main to section

Giscus 컴포넌트를 main에서 section으로 이동.

* feat: create layouts/Section.jsx component

layouts/Section.jsx 컴포넌트 제작.

* feat: create app/docs/[...categories]/layout.jsx

layout.jsx 제작.

package.json

@@ -22,6 +22,7 @@
     "count-docs": "ls -R src/posts/docs | grep .md | wc -l"
   },
   "dependencies": {
+    "@giscus/react": "^3.0.0",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "github-markdown-css": "^5.6.1",

src/app/docs/[...categories]/layout.jsx

@@ -0,0 +1,13 @@
+import Section from '@/components/layouts/Section/Section';
+import Giscus from '@/components/section/Giscus';
+
+export default function Layout({ children }) {
+  return (
+    <>
+      {children}
+      <Section>
+        <Giscus />
+      </Section>
+    </>
+  );
+}

src/components/layouts/Section/Section.jsx

@@ -0,0 +1,5 @@
+import styles from './Section.module.scss';
+
+export default function Section({ children }) {
+  return <section className={styles.section}>{children}</section>;
+}

src/components/layouts/Section/Section.module.scss

@@ -0,0 +1,3 @@
+.section {
+  margin: 50px 0;
+}

src/components/layouts/Section/index.js

@@ -0,0 +1,3 @@
+import Section from './Section';
+
+export default Section;

src/components/section/Giscus/Giscus.jsx

@@ -0,0 +1,24 @@
+'use client';
+
+import GiscusOriginal from '@giscus/react';
+
+import { REPOSITORY } from '@/constants/github';
+
+export default function Giscus() {
+  return (
+    <GiscusOriginal
+      repo={REPOSITORY.fullName}
+      repoId="R_kgDOLa_QgA"
+      category="comments"
+      categoryId="DIC_kwDOLa_QgM4ChivI"
+      mapping="pathname"
+      strict="0"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="top"
+      theme="preferred_color_scheme"
+      lang="ko"
+      loading="lazy"
+    />
+  );
+}

src/components/section/Giscus/index.js

@@ -0,0 +1,3 @@
+import Giscus from './Giscus';
+
+export default Giscus;