feat: 게시글 프로그래스 바 생성

src/app/(root)/post/[slug]/ProgressBar.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function ProgressBar() {
+  const [currentProgress, setCurrentProgress] = useState('0');
+
+  const scrollEvent = () => {
+    const progressBar = document.querySelector('.bar');
+
+    if (progressBar === null) return;
+
+    let scrollNum = 0;
+    let documentHeight = 0;
+
+    const getPercent = (scroll: number, total: number) => {
+      return (scroll / total) * 100;
+    };
+
+    scrollNum = document.documentElement.scrollTop;
+
+    documentHeight =
+      document.documentElement.scrollHeight -
+      document.documentElement.clientHeight;
+
+    setCurrentProgress(() => {
+      return getPercent(scrollNum, documentHeight) + '%';
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', scrollEvent);
+    return () => window.removeEventListener('scroll', scrollEvent);
+  }, []);
+
+  return (
+    <div className="h-[4px] fixed top-0 left-0 w-full bg-white dark:bg-black">
+      <div
+        style={{ width: currentProgress }}
+        className="bar h-full absolute z-10 bg-RED_600 rounded-r-lg transition-width duration-30"
+      ></div>
+    </div>
+  );
+}

src/app/(root)/post/[slug]/page.tsx

@@ -1,3 +1,4 @@
+import ProgressBar from './ProgressBar';
 import { getPostBySlug, getPostDatas } from '@/app/utils';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import rehypePrettyCode from 'rehype-pretty-code';
@@ -8,8 +9,10 @@ import remarkToc from 'remark-toc';
 
 export default function Page({ params }: { params: { slug: string } }) {
   const mdxSource = getPostBySlug(params.slug).content;
+
   return (
     <div className="prose dark:text-white">
+      <ProgressBar />
       <MDXRemote
         source={mdxSource}
         options={{
@@ -18,7 +21,7 @@ export default function Page({ params }: { params: { slug: string } }) {
             remarkPlugins: [
               remarkGfm,
               remarkBreaks,
-              [remarkToc, { tight: true, maxDepth: 5 }],
+              [remarkToc, { tight: true, maxDepth: 3 }],
             ],
             rehypePlugins: [
               rehypeSlug,