게시글 목차 스크롤 위치 보정 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>

docs/changelog.md

@@ -1,5 +1,10 @@
 # 업데이트 요약
 
+## v1.5.13
+
+- 게시글 목차 클릭 이동을 부드러운 스크롤로 바꿨다.
+- 목차 이동 시 제목이 고정 헤더에 걸리지 않도록 위치를 보정했다.
+
 ## v1.5.12
 
 - 게시글 상세 오른쪽 사이드바에서 추천 사이트 대신 본문 목차를 보여주도록 바꿨다.

docs/history.md

@@ -1,5 +1,9 @@
 # 의사결정 이력
 
+## 2026-05-27 v1.5.13 — TOC 이동감과 위치 보정
+
+목차 링크를 기본 해시 이동에 맡기면 브라우저가 즉시 점프하고, 고정 헤더와 제목의 위치 관계에 따라 제목이 화면 위쪽에 붙거나 일부 가려질 수 있다. 게시글 TOC는 읽는 흐름을 돕는 장치이므로 클릭 이벤트를 직접 처리해 부드러운 스크롤로 이동하고, 제목 요소 자체에는 상단 헤더 높이와 여백을 반영한 scroll margin을 둔다.
+
 ## 2026-05-27 v1.5.12 — 게시글 상세 오른쪽 사이드바 TOC 전환
 
 추천 사이트는 탐색 보조 영역이지만, 게시글을 읽는 순간에는 외부 이동보다 본문 안에서 빠르게 이동하는 편의가 더 중요하다. 따라서 게시글 상세에서는 오른쪽 사이드바의 Recommended 영역을 숨기고, 본문 H1~H3 제목에서 추출한 TOC를 같은 위치에 표시한다. 본문 렌더러와 TOC가 같은 앵커 ID 생성 규칙을 공유하도록 공통 유틸을 두어 제목 중복이나 한글 제목에서도 링크가 안정적으로 맞게 했다.

docs/spec.md

@@ -73,7 +73,7 @@
 - 댓글 정렬은 `Best`(좋아요 우선), `Latest`, `Oldest`를 제공한다.
 - 댓글 아바타 이미지 로드 실패 시 이니셜 아바타로 즉시 대체한다.
 - 공개 게시물 본문은 콘텐츠 타입별 컴포넌트로 분리해 추후 스타일 변경이 쉽도록 구성
-- 게시물 상세의 오른쪽 사이드바는 추천 사이트 대신 본문 H1~H3 제목 기반 TOC를 표시한다. TOC 링크는 본문 제목에 부여된 앵커 ID로 이동하며, 본문 제목이 없으면 목차 없음 문구를 표시한다.
+- 게시물 상세의 오른쪽 사이드바는 추천 사이트 대신 본문 H1~H3 제목 기반 TOC를 표시한다. TOC 링크는 본문 제목에 부여된 앵커 ID로 부드럽게 이동하며, 고정 상단 헤더 높이와 여백을 반영해 제목이 화면 밖에 걸리지 않게 한다. 본문 제목이 없으면 목차 없음 문구를 표시한다.
 - 제목 우측 공유 버튼을 누르면 게시물 공유 모달을 연다.
 - 로그인 회원 ID가 게시물 `author_id`와 같으면 제목 우측 공유 버튼 옆에 수정 아이콘을 표시하며, 클릭 시 `/admin/posts/:id` 편집 화면을 새 탭으로 연다.
 - 공유 모달은 게시물 썸네일/제목/요약 미리보기, X/Bluesky/Facebook/LinkedIn/Email 링크, 링크 복사 액션을 제공한다.

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 이력
 
+## v1.5.13
+
+- 공개 게시글 TOC: 목차 클릭 시 기본 해시 점프 대신 부드러운 스크롤로 이동하도록 수정.
+- 공개 게시글 제목 앵커: 고정 상단 헤더 높이와 여백을 반영한 scroll margin으로 이동 위치를 안정화.
+
 ## v1.5.12
 
 - 공개 게시글 상세: 오른쪽 사이드바의 Recommended 영역을 숨기고, 같은 위치에 H1~H3 기반 TOC를 표시하도록 수정.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.5.12",
+  "version": "1.5.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.5.12",
+      "version": "1.5.13",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.5.12",
+  "version": "1.5.13",
   "private": true,
   "type": "module",
   "imports": {