태그 없는 게시물에서 POST 더미 표시 제거(v1.1.2)

pages/index.vue

@@ -53,10 +53,17 @@ const onDocumentPointerDown = (event) => {
  * @returns {{name: string, color: string}} 태그 정보
  */
 const getTagMeta = (slug) => {
+  if (!slug) {
+    return {
+      name: '',
+      color: '#4d4d4d'
+    }
+  }
+
   const matchedTag = tags.value.find((item) => item.slug === slug)
 
   return {
-    name: matchedTag?.name || (slug ? slug.toUpperCase() : 'POST'),
+    name: matchedTag?.name || String(slug).toUpperCase(),
     color: matchedTag?.color || '#4d4d4d'
   }
 }
@@ -454,14 +461,16 @@ const scrollFeatured = (direction) => {
 
                   <div class="flex flex-wrap items-center gap-2 text-xs site-muted sm:gap-1.5">
                     <time v-if="post.publishedAt" :datetime="post.publishedAtIso">{{ post.publishedAt }}</time>
-                    <span class="text-[var(--site-line)]">/</span>
-                    <span
-                      class="rounded-md px-1.5 py-px font-medium text-[var(--site-text)]"
-                      :style="{ backgroundColor: `${post.tagColor}1a` }"
-                    >
-                      {{ post.tagName }}
-                    </span>
-                    <span class="text-[var(--site-line)]">/</span>
+                    <template v-if="post.tagName">
+                      <span v-if="post.publishedAt" class="text-[var(--site-line)]">/</span>
+                      <span
+                        class="rounded-md px-1.5 py-px font-medium text-[var(--site-text)]"
+                        :style="{ backgroundColor: `${post.tagColor}1a` }"
+                      >
+                        {{ post.tagName }}
+                      </span>
+                    </template>
+                    <span v-if="post.publishedAt || post.tagName" class="text-[var(--site-line)]">/</span>
                     <span class="flex items-center gap-1">
                       <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="-mt-px">
                         <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />

pages/post/[slug].vue

@@ -23,12 +23,22 @@ if (!post.value) {
 
 const primaryTagSlug = computed(() => post.value.tags?.[0] || '')
 const primaryTagMeta = computed(() => {
-  const matchedTag = tags.value.find((item) => item.slug === primaryTagSlug.value)
+  const slug = primaryTagSlug.value
+
+  if (!slug) {
+    return {
+      name: '',
+      color: '',
+      to: '/tags'
+    }
+  }
+
+  const matchedTag = tags.value.find((item) => item.slug === slug)
 
   return {
-    name: matchedTag?.name || (primaryTagSlug.value ? primaryTagSlug.value.toUpperCase() : 'POST'),
+    name: matchedTag?.name || slug.toUpperCase(),
     color: matchedTag?.color || '#4d4d4d',
-    to: primaryTagSlug.value ? `/tag/${primaryTagSlug.value}` : '/tags'
+    to: `/tag/${slug}`
   }
 })
 
@@ -228,8 +238,8 @@ useHead(() => ({
               {{ authorLabel }}
             </a>
 
-            <ul class="flex flex-wrap items-center font-medium">
-              <li v-if="primaryTagMeta.name" :style="{ '--color-accent': primaryTagMeta.color }">
+            <ul v-if="primaryTagSlug" class="flex flex-wrap items-center font-medium">
+              <li :style="{ '--color-accent': primaryTagMeta.color }">
                 <NuxtLink
                   class="rounded-sm px-1.5 py-px text-[var(--site-text)] hover:opacity-75"
                   :style="{ backgroundColor: `${primaryTagMeta.color}1a` }"

pages/posts/index.vue

@@ -7,7 +7,7 @@ const postCards = computed(() => posts.value.map((post) => ({
   title: post.title,
   excerpt: post.excerpt,
   featuredImage: post.featuredImage,
-  tag: post.tags?.[0]?.toUpperCase() || 'POST',
+  tag: post.tags?.[0] ? String(post.tags[0]).toUpperCase() : '',
   publishedAt: formatPostDate(post.publishedAt),
   to: `/post/${post.slug}`
 })))