#4 헤딩 링크 스타일 추가

Author: echoja

next.config.mjs

@@ -116,7 +116,51 @@ const withMDX = mdx({
       [remarkCodeHike, chConfig],
       [remarkToc, { heading: "목차" }],
     ],
-    rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
+    rehypePlugins: [
+      rehypeSlug,
+      [
+        rehypeAutolinkHeadings,
+        {
+          properties: {
+            ariaHidden: true,
+            tabIndex: -1,
+            className: "heading-anchor",
+          },
+          content: {
+            type: "element",
+            tagName: "svg",
+            properties: {
+              className: "icon-link",
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+            },
+            children: [
+              {
+                type: "element",
+                tagName: "path",
+                properties: {
+                  d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+                },
+              },
+              {
+                type: "element",
+                tagName: "path",
+                properties: {
+                  d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+                },
+              },
+            ],
+          },
+        },
+      ],
+    ],
   },
 });
 

src/common/globals.css

@@ -145,3 +145,23 @@
 .ch-scrollycoding-step-content {
   @apply border-gray-200;
 }
+
+article .heading-anchor {
+  @apply absolute text-gray-300 -left-6 sm:-left-7 top-1 w-6 h-6 p-1;
+}
+
+h2:has(.heading-anchor),
+h3:has(.heading-anchor),
+h4:has(.heading-anchor),
+h5:has(.heading-anchor),
+h6:has(.heading-anchor) {
+  @apply relative ml-2 sm:ml-0;
+}
+
+article .heading-anchor:hover {
+  @apply text-inherit;
+}
+
+article .heading-anchor svg {
+  @apply w-4 h-4;
+}

src/modules/article/format-components.tsx

@@ -136,15 +136,14 @@ export function Strong({ children }: { children?: React.ReactNode }) {
 export function Anchor({
   children,
   href,
-}: {
-  children?: React.ReactNode;
-  href?: string;
-}) {
+  ...restProps
+}: React.ComponentProps<"a">) {
   const isInternal = href?.startsWith("/article") || href?.startsWith("#");
 
   return (
     <Link
-      className={style.link}
+      {...restProps}
+      className={twMerge(restProps.className, style.link)}
       {...(!isInternal
         ? {
             target: "_blank",

src/modules/article/style.module.css

@@ -44,7 +44,7 @@
 }
 
 .heading {
-  @apply font-semibold mt-[1.5em] mb-[0.5em];
+  @apply font-semibold mt-[1.5em] mb-[0.5em] relative;
 }
 
 .heading1 {