페이지 섹션·공개 목록 설정 누적 변경 일괄 반영

페이지 섹션 관리와 홈 Pages 진열장 연동, 공개 목록 표시개수 설정 관련 누적 로컬 변경을 기능 단위로 정리해 반영한다.
문서 이력과 패키지 버전을 v1.9.23으로 맞춰 코드와 문서 상태를 동기화한다.

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

pages/tag/[slug].vue

@@ -1,4 +1,10 @@
 <script setup>
+import {
+  DEFAULT_TAG_POST_LIST_PAGE_SIZE,
+  normalizeDisplayCount,
+  normalizeListPage
+} from '~/lib/display-count-settings.js'
+
 const route = useRoute()
 const slug = computed(() => String(route.params.slug || ''))
 
@@ -6,8 +12,40 @@ const { data: tags } = await useFetch('/api/tags?tagType=all', {
   default: () => []
 })
 
-const { data: posts } = await useFetch('/api/posts', {
-  default: () => []
+const { data: siteSettings } = await useFetch('/api/site-settings', {
+  default: () => ({})
+})
+
+const currentPage = computed(() => normalizeListPage(route.query.page))
+const tagPostListPageSize = computed(() => normalizeDisplayCount(siteSettings.value?.tagPostListPageSize, DEFAULT_TAG_POST_LIST_PAGE_SIZE))
+
+watch(currentPage, () => {
+  if (!import.meta.client) {
+    return
+  }
+
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth'
+  })
+})
+
+const { data: postsResponse } = await useFetch('/api/posts', {
+  query: computed(() => ({
+    paginated: '1',
+    tag: slug.value,
+    page: currentPage.value,
+    limit: tagPostListPageSize.value
+  })),
+  default: () => ({
+    items: [],
+    pagination: {
+      page: 1,
+      limit: DEFAULT_TAG_POST_LIST_PAGE_SIZE,
+      total: 0,
+      totalPages: 1
+    }
+  })
 })
 
 const tag = computed(() => tags.value.find((item) => item.slug === slug.value))
@@ -20,8 +58,14 @@ const hasTagHeaderImage = computed(() => Boolean(tag.value?.headerImageUrl))
  */
 const findTagMeta = (tagSlug) => tags.value.find((item) => item.slug === tagSlug) || null
 
-const tagPosts = computed(() => posts.value
-  .filter((post) => post.tags.includes(slug.value))
+const pagination = computed(() => postsResponse.value?.pagination || {
+  page: 1,
+  limit: tagPostListPageSize.value,
+  total: 0,
+  totalPages: 1
+})
+
+const tagPosts = computed(() => (postsResponse.value?.items || [])
   .map((post) => {
     const primaryTagSlug = post.tags?.[0] || slug.value
     const primaryTag = findTagMeta(primaryTagSlug)
@@ -44,6 +88,16 @@ const tagPosts = computed(() => posts.value
       to: `/post/${post.slug}`
     }
   }))
+
+/**
+ * 태그 게시물 목록 페이지 링크를 만든다.
+ * @param {number} page - 페이지 번호
+ * @returns {Object} Nuxt 링크 대상
+ */
+const getTagPageTo = (page) => ({
+  path: `/tag/${slug.value}`,
+  query: page > 1 ? { page } : {}
+})
 </script>
 
 <template>
@@ -148,6 +202,34 @@ const tagPosts = computed(() => posts.value
       </div>
     </section>
 
+    <nav
+      v-if="pagination.totalPages > 1"
+      class="tag-posts-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="getTagPageTo(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="getTagPageTo(Math.min(pagination.totalPages, pagination.page + 1))"
+          :aria-disabled="pagination.page >= pagination.totalPages"
+        >
+          다음
+        </NuxtLink>
+      </div>
+    </nav>
+
     <section v-if="tagPosts.length === 0" class="tag-posts-empty site-section">
       <div class="tag-posts-empty__body site-section-body mx-auto max-w-[720px] text-sm site-muted">
         이 태그에 연결된 글이 없습니다.