본문 이미지 최적화·라이트박스·번호형 페이지네이션 반영 (v1.10.3)

Co-authored-by: Cursor <cursoragent@cursor.com>

pages/posts/index.vue

@@ -95,15 +95,6 @@ const postCards = computed(() => (postsResponse.value?.items || []).map((post) =
   }
 }))
 
-/**
- * 게시물 목록 페이지 링크를 만든다.
- * @param {number} page - 페이지 번호
- * @returns {Object} Nuxt 링크 대상
- */
-const getPostsPageTo = (page) => ({
-  path: '/posts',
-  query: page > 1 ? { page } : {}
-})
 </script>
 
 <template>
@@ -121,32 +112,13 @@ const getPostsPageTo = (page) => ({
 
     <PostCard v-for="post in postCards" :key="post.to" :post="post" />
 
-    <nav
+    <SitePagination
       v-if="pagination.totalPages > 1"
-      class="posts-index__pagination site-section"
-      aria-label="게시물 페이지"
-    >
-      <div class="site-section-body mx-auto flex max-w-[720px] items-center justify-between gap-3 text-sm">
-        <NuxtLink
-          class="rounded border border-[var(--site-line)] px-3 py-2 font-semibold transition hover:bg-[var(--site-panel)]"
-          :class="pagination.page <= 1 ? 'pointer-events-none opacity-35' : ''"
-          :to="getPostsPageTo(Math.max(1, pagination.page - 1))"
-          :aria-disabled="pagination.page <= 1"
-        >
-          이전
-        </NuxtLink>
-        <span class="site-muted">
-          {{ pagination.page }} / {{ pagination.totalPages }}
-        </span>
-        <NuxtLink
-          class="rounded border border-[var(--site-line)] px-3 py-2 font-semibold transition hover:bg-[var(--site-panel)]"
-          :class="pagination.page >= pagination.totalPages ? 'pointer-events-none opacity-35' : ''"
-          :to="getPostsPageTo(Math.min(pagination.totalPages, pagination.page + 1))"
-          :aria-disabled="pagination.page >= pagination.totalPages"
-        >
-          다음
-        </NuxtLink>
-      </div>
-    </nav>
+      class="posts-index__pagination"
+      :page="pagination.page"
+      :total-pages="pagination.totalPages"
+      label="게시물 페이지"
+      base-path="/posts"
+    />
   </MainColumn>
 </template>