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

components/content/ProseHeading.vue

@@ -3,6 +3,10 @@ const props = defineProps({
   level: {
     type: Number,
     default: 2
+  },
+  id: {
+    type: String,
+    default: ''
   }
 })
 
@@ -12,7 +16,8 @@ const tagName = computed(() => `h${Math.min(Math.max(props.level, 1), 6)}`)
 <template>
   <component
     :is="tagName"
-    class="prose-heading mb-2.5 font-semibold leading-[1.25] tracking-normal first:mt-0"
+    :id="id || undefined"
+    class="prose-heading mb-2.5 scroll-mt-20 font-semibold leading-[1.25] tracking-normal first:mt-0"
     :class="{
       'text-[clamp(1.35rem,1.25rem+0.35vw,1.6rem)] leading-[1.15]': level === 1,
       'text-[clamp(1.2rem,1.15rem+0.3vw,1.4rem)]': level === 2,