게시글 목차 스크롤 위치 보정 v1.5.13

components/content/ProseHeading.vue

@@ -17,7 +17,8 @@ const tagName = computed(() => `h${Math.min(Math.max(props.level, 1), 6)}`)
   <component
     :is="tagName"
     :id="id || undefined"
-    class="prose-heading mb-2.5 scroll-mt-20 font-semibold leading-[1.25] tracking-normal first:mt-0"
+    class="prose-heading mb-2.5 font-semibold leading-[1.25] tracking-normal first:mt-0"
+    style="scroll-margin-top: calc(var(--site-top-chrome-height, 57px) + 24px)"
     :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,

components/site/RightSidebar.vue

@@ -71,6 +71,31 @@ const getRecommendedImageUrl = (item) => {
   return thumbnailUrl || getExternalFaviconUrl(item?.url, 64)
 }
 
+/**
+ * 게시글 목차 링크를 부드럽게 이동한다.
+ * @param {MouseEvent} event - 클릭 이벤트
+ * @param {string} id - 이동할 제목 ID
+ * @returns {void}
+ */
+const scrollToTocItem = (event, id) => {
+  if (!import.meta.client) {
+    return
+  }
+
+  const target = document.getElementById(id)
+
+  if (!target) {
+    return
+  }
+
+  event.preventDefault()
+  target.scrollIntoView({
+    behavior: 'smooth',
+    block: 'start'
+  })
+  window.history.replaceState(null, '', `${route.path}#${id}`)
+}
+
 /** 소개 영역 공개 여부 */
 const showAboutSection = false
 </script>
@@ -226,6 +251,7 @@ const showAboutSection = false
                   'pl-6 text-xs site-muted': item.level === 3
                 }"
                 :href="`#${item.id}`"
+                @click="scrollToTocItem($event, item.id)"
               >
                 {{ item.text }}
               </a>