feat: post detail의 heading 태그에 autolink 추가

metacode22 · metacode22 · commit cf22b93fc05f · 2023-09-24T23:56:26.000+09:00
diff --git a/app/globals.css b/app/globals.css
@@ -1,3 +1,25 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.prose .autolink-header {
+  text-decoration: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  &::after {
+    align-self: flex-end;
+    content: url('/icons/autolink-icon.svg');
+    width: 24px;
+    height: 24px;
+    display: none;
+  }
+
+  &:hover {
+    &::after {
+      display: inline;
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.11.0",
+    "rehype-autolink-headings": "^7.0.0",
+    "rehype-slug": "^6.0.0",
     "sharp": "^0.32.6",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },
diff --git a/public/icons/autolink-icon.svg b/public/icons/autolink-icon.svg
@@ -0,0 +1 @@
+<svg class="autolink-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20"><path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>
diff --git a/src/services/post.ts b/src/services/post.ts
