공개 상세 경로와 새 글 에디터 보정

pages/tag/[slug].vue

@@ -0,0 +1,57 @@
+<script setup>
+const route = useRoute()
+const slug = computed(() => String(route.params.slug || ''))
+
+const { data: tags } = await useFetch('/api/tags', {
+  default: () => []
+})
+
+const { data: posts } = await useFetch('/api/posts', {
+  default: () => []
+})
+
+/**
+ * 날짜 표시 형식 변환
+ * @param {string | null} value - ISO 날짜 문자열
+ * @returns {string} 화면 표시 날짜
+ */
+const formatPostDate = (value) => {
+  if (!value) {
+    return ''
+  }
+
+  const date = new Date(value)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+
+  return `${year}.${month}.${day}`
+}
+
+const tag = computed(() => tags.value.find((item) => item.slug === slug.value))
+
+const tagPosts = computed(() => posts.value
+  .filter((post) => post.tags.includes(slug.value))
+  .map((post) => ({
+    title: post.title,
+    excerpt: post.excerpt,
+    tag: tag.value?.name || slug.value.toUpperCase(),
+    publishedAt: formatPostDate(post.publishedAt),
+    to: `/post/${post.slug}`
+  })))
+</script>
+
+<template>
+  <MainColumn>
+    <TagHeader
+      :title="tag?.name || slug.toUpperCase()"
+      :description="tag?.description || ''"
+    />
+    <PostCard v-for="post in tagPosts" :key="post.to" :post="post" />
+    <section v-if="tagPosts.length === 0" class="tag-posts site-section">
+      <div class="tag-posts__empty site-section-body text-sm text-muted">
+        이 태그에 연결된 글이 없습니다.
+      </div>
+    </section>
+  </MainColumn>
+</template>