TOC h1 ~ h3까지만 생성되도록 변경 (10.12)

TOC h1 ~ h3까지만 생성되도록 변경 (10.12)

src/components/ui/Markdown/overrides/headings/headings.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 
+import { removeSpecialCharacters } from "@utils/getToc";
 import { getChildrenText } from "@utils/getChildrenText";
 
 interface IProps {
@@ -9,7 +10,7 @@ interface IProps {
 
 const Heading = ({ children, tagname }: IProps) => {
   const text = getChildrenText(children);
-  const id = `${tagname}_${text.replace(/\s/g, "_").trim()}`;
+  const id = removeSpecialCharacters(text);
 
   return React.createElement(tagname, { id }, children);
 };

src/components/ui/client/post/PostContent/Toc/item.tsx

@@ -1,5 +1,7 @@
 import React, { memo } from "react";
 
+import NextLink from "next/link";
+
 import { IToc } from "@/types/base";
 
 interface IProps {
@@ -18,14 +20,15 @@ const TocItem = ({ item, isActive, onClick }: IProps) => {
       style={{ paddingLeft: `${level * 0.8}rem` }}
       className={`${className} w-full [&.active>a]:text-effect1`}
     >
-      <a
+      <NextLink
         id={id}
-        href={`#${text}`}
+        href={`#${id}`}
+        scroll={false}
         onClick={onClick}
         className="text-slate-400 transition-all hover:text-primary dark:text-slate-400"
       >
         {text}
-      </a>
+      </NextLink>
     </li>
   );
 };

src/hooks/useIntersectionObserver.ts

@@ -1,5 +1,7 @@
 import { useEffect, useRef } from "react";
 
+import { MARKDOWN_HEADING_SELECTOR } from "@utils/constant/toc";
+
 interface IHeadingElement {
   [key: string]: IntersectionObserverEntry;
 }
@@ -44,7 +46,7 @@ export const useIntersectionObserver = <T>(
 
     const observer = new IntersectionObserver(callback, { rootMargin: "-72px 0px -90% 0px" });
 
-    const headingElements = Array.from(document.querySelectorAll("h1, h2, h3, h4, h5, h6"));
+    const headingElements = Array.from(document.querySelectorAll(MARKDOWN_HEADING_SELECTOR));
 
     headingElements.forEach((element) => observer.observe(element));
 

src/hooks/useTocEvent.ts

@@ -1,20 +1,21 @@
 import { useEffect } from "react";
 
+import { MARKDOWN_HEADING_SELECTOR } from "@utils/constant/toc";
 import { IToc } from "@/types/base";
 
 const useTocEvent = (toc: IToc[]) => {
   const scroll = (id: string, behavior: ScrollBehavior = "smooth") => {
-    const targetHeading = document.getElementById(id);
+    const headingElements = Array.from(document.querySelectorAll(MARKDOWN_HEADING_SELECTOR));
+
+    if (!headingElements.length) return;
+
+    const targetHeading = headingElements.find((heading) => heading.id === id);
 
     if (!targetHeading) return;
 
     const scrollY = window.scrollY + targetHeading.getBoundingClientRect().top - 80;
 
-    window.scrollTo({
-      top: scrollY,
-      behavior,
-      left: 0,
-    });
+    window.scrollTo({ top: scrollY, behavior, left: 0 });
   };
 
   const scrollToTargetItem: React.MouseEventHandler<HTMLDivElement> = (e) => {
@@ -34,7 +35,7 @@ const useTocEvent = (toc: IToc[]) => {
 
     if (!decodedHash) return;
 
-    const item = toc.find((item) => item.text === decodedHash);
+    const item = toc.find((item) => item.id === decodedHash);
 
     if (!item) return;
 

src/styles/globals.css

@@ -151,7 +151,7 @@
     }
 
     & td {
-      @apply border-[1px] border-solid border-gray-500;
+      @apply border border-solid border-gray-300 !transition-[border-color,color] dark:border-gray-700;
     }
 
     & pre {

src/utils/constant/toc.ts

@@ -0,0 +1,3 @@
+const MARKDOWN_HEADING_SELECTOR = ".markdown > h1,.markdown > h2,.markdown > h3";
+
+export { MARKDOWN_HEADING_SELECTOR };

src/utils/getToc.ts

@@ -3,6 +3,15 @@ import { ReactNode, JSX } from "react";
 import { getChildrenText } from "@utils/getChildrenText";
 import { IToc } from "@/types/base";
 
+const removeSpecialCharacters = (text: string) => {
+  return text
+    .replace(/[^a-zA-Z0-9가-힣\s]/g, "")
+    .replace(/\s+/g, " ")
+    .replace(/\s/g, "-")
+    .toLowerCase()
+    .trim();
+};
+
 const getToc = (markdown: ReactNode) => {
   const toc: IToc[] = [];
 
@@ -16,13 +25,15 @@ const getToc = (markdown: ReactNode) => {
     const children = el?.props?.children;
 
     const text = getChildrenText(children);
-    const id = `${tagname}_${text.replace(/\s/g, "_").trim()}`;
+    const id = removeSpecialCharacters(text);
     const level = Number(tagname.replace("h", "")) - 1;
 
+    if (level > 2) return;
+
     toc.push({ text, id, level });
   });
 
   return toc;
 };
 
-export { getToc };
+export { getToc, removeSpecialCharacters };