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

components/site/RightSidebar.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { getExternalFaviconUrl } from '~/lib/external-favicon-url.js'
 
+const route = useRoute()
+const postToc = useState('post-detail-toc', () => [])
+
 const followLinks = [
   { id: 'facebook', label: 'Facebook', href: 'https://facebook.com', icon: 'facebook' },
   { id: 'x', label: 'X', href: 'https://x.com', icon: 'x' },
@@ -39,6 +42,8 @@ const recommendedSites = computed(() => {
   }
   return list.filter((x) => x?.isVisible !== false)
 })
+const isPostDetailRoute = computed(() => route.path.startsWith('/post/'))
+const postTocItems = computed(() => Array.isArray(postToc.value) ? postToc.value : [])
 
 /**
  * 새 탭으로 열 외부 URL인지
@@ -202,7 +207,38 @@ const showAboutSection = false
       </div>
 
       <div
-        v-if="recommendedSites.length"
+        v-if="isPostDetailRoute"
+        class="right-sidebar__block right-sidebar__toc site-sidebar-section py-5 pl-5 pr-0"
+      >
+        <div class="right-sidebar__row flex items-center justify-between">
+          <p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
+            TOC
+          </p>
+        </div>
+        <nav class="right-sidebar__toc-nav mt-4" aria-label="게시글 목차">
+          <ul v-if="postTocItems.length" class="right-sidebar__toc-list list-none space-y-2 p-0">
+            <li v-for="item in postTocItems" :key="item.id">
+              <a
+                class="right-sidebar__toc-link site-interactive block rounded-md py-1.5 pr-3 text-sm leading-snug text-[var(--site-text)] hover:text-[var(--site-accent)]"
+                :class="{
+                  'pl-0 font-semibold': item.level === 1,
+                  'pl-3': item.level === 2,
+                  'pl-6 text-xs site-muted': item.level === 3
+                }"
+                :href="`#${item.id}`"
+              >
+                {{ item.text }}
+              </a>
+            </li>
+          </ul>
+          <p v-else class="right-sidebar__toc-empty text-sm site-muted">
+            목차로 표시할 제목이 없습니다.
+          </p>
+        </nav>
+      </div>
+
+      <div
+        v-else-if="recommendedSites.length"
         class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0"
       >
         <div class="right-sidebar__row flex items-center justify-between">