게시글 상세 목차 사이드바 추가 v1.5.12

pages/post/[slug].vue

@@ -1,4 +1,6 @@
 <script setup>
+import { extractMarkdownToc } from '~/lib/markdown-toc.js'
+
 definePageMeta({
   layout: 'post'
 })
@@ -13,6 +15,7 @@ const { data: tags } = await useFetch('/api/tags', {
 const { data: posts } = await useFetch('/api/posts', {
   default: () => []
 })
+const postToc = useState('post-detail-toc', () => [])
 
 if (!post.value) {
   throw createError({
@@ -88,6 +91,7 @@ const shareMetadata = computed(() => ({
   image: post.value.featuredImage || '',
   url: pageUrl.value
 }))
+const tableOfContents = computed(() => extractMarkdownToc(post.value?.content || ''))
 
 const encodedShareText = computed(() => encodeURIComponent(shareMetadata.value.title))
 const encodedShareUrl = computed(() => encodeURIComponent(shareMetadata.value.url))
@@ -143,6 +147,14 @@ onMounted(() => {
   fetchCurrentViewer()
 })
 
+watchEffect(() => {
+  postToc.value = tableOfContents.value
+})
+
+onBeforeUnmount(() => {
+  postToc.value = []
+})
+
 /**
  * 절대 URL 생성
  * @param {string} value - 원본 URL