일반 태그 상세 메타 표시 수정

pages/index.vue

@@ -3,7 +3,7 @@ const { data: posts } = await useFetch('/api/posts', {
   default: () => []
 })
 
-const { data: tags } = await useFetch('/api/tags', {
+const { data: tags } = await useFetch('/api/tags?tagType=all', {
   default: () => []
 })
 

pages/post/[slug].vue

@@ -9,7 +9,7 @@ const route = useRoute()
 const slug = computed(() => String(route.params.slug || ''))
 
 const { data: post } = await useFetch(() => `/api/posts/${slug.value}`)
-const { data: tags } = await useFetch('/api/tags', {
+const { data: tags } = await useFetch('/api/tags?tagType=all', {
   default: () => []
 })
 const { data: posts } = await useFetch('/api/posts', {

pages/posts/index.vue

@@ -3,6 +3,23 @@ const { data: posts } = await useFetch('/api/posts', {
   default: () => []
 })
 
+const { data: tags } = await useFetch('/api/tags?tagType=all', {
+  default: () => []
+})
+
+/**
+ * 태그 슬러그로 공개 태그 이름을 찾는다.
+ * @param {string | undefined} slug - 태그 슬러그
+ * @returns {string} 태그 이름
+ */
+const getTagName = (slug) => {
+  if (!slug) {
+    return ''
+  }
+
+  return tags.value.find((tag) => tag.slug === slug)?.name || String(slug).toUpperCase()
+}
+
 const postCards = computed(() => posts.value.map((post) => ({
   title: post.title,
   excerpt: createPostSummary(post.excerpt, post.content, {
@@ -11,7 +28,7 @@ const postCards = computed(() => posts.value.map((post) => ({
   }),
   featuredImage: post.featuredImage,
   featuredImageThumbnail: post.featuredImageThumbnail || '',
-  tag: post.tags?.[0] ? String(post.tags[0]).toUpperCase() : '',
+  tag: getTagName(post.tags?.[0]),
   publishedAt: formatPostDate(post.publishedAt),
   to: `/post/${post.slug}`
 })))

pages/tag/[slug].vue

@@ -2,7 +2,7 @@
 const route = useRoute()
 const slug = computed(() => String(route.params.slug || ''))
 
-const { data: tags } = await useFetch('/api/tags', {
+const { data: tags } = await useFetch('/api/tags?tagType=all', {
   default: () => []
 })
 
@@ -12,24 +12,36 @@ const { data: posts } = await useFetch('/api/posts', {
 
 const tag = computed(() => tags.value.find((item) => item.slug === slug.value))
 
+/**
+ * 태그 슬러그로 공개 태그 메타를 찾는다.
+ * @param {string} tagSlug - 태그 슬러그
+ * @returns {Object | null} 태그 메타
+ */
+const findTagMeta = (tagSlug) => tags.value.find((item) => item.slug === tagSlug) || null
+
 const tagPosts = computed(() => posts.value
   .filter((post) => post.tags.includes(slug.value))
-  .map((post) => ({
-    title: post.title,
-    excerpt: createPostSummary(post.excerpt, post.content, {
-      maxLength: 320,
-      appendEllipsis: false
-    }),
-    featuredImage: post.featuredImage,
-    featuredImageThumbnail: post.featuredImageThumbnail || '',
-    tag: tags.value.find((item) => item.slug === (post.tags?.[0] || slug.value))?.name || (post.tags?.[0] || slug.value).toUpperCase(),
-    tagColor: tags.value.find((item) => item.slug === (post.tags?.[0] || slug.value))?.color || '#4d4d4d',
-    isFeatured: Boolean(post.isFeatured),
-    commentCount: Number(post.commentCount || 0),
-    publishedAt: formatPostDate(post.publishedAt),
-    publishedAtIso: post.publishedAt || '',
-    to: `/post/${post.slug}`
-  })))
+  .map((post) => {
+    const primaryTagSlug = post.tags?.[0] || slug.value
+    const primaryTag = findTagMeta(primaryTagSlug)
+
+    return {
+      title: post.title,
+      excerpt: createPostSummary(post.excerpt, post.content, {
+        maxLength: 320,
+        appendEllipsis: false
+      }),
+      featuredImage: post.featuredImage,
+      featuredImageThumbnail: post.featuredImageThumbnail || '',
+      tag: primaryTag?.name || primaryTagSlug.toUpperCase(),
+      tagColor: primaryTag?.color || '#4d4d4d',
+      isFeatured: Boolean(post.isFeatured),
+      commentCount: Number(post.commentCount || 0),
+      publishedAt: formatPostDate(post.publishedAt),
+      publishedAtIso: post.publishedAt || '',
+      to: `/post/${post.slug}`
+    }
+  }))
 </script>
 
 <template>