태그 헤더 이미지 설정 추가

pages/tag/[slug].vue

@@ -11,6 +11,7 @@ const { data: posts } = await useFetch('/api/posts', {
 })
 
 const tag = computed(() => tags.value.find((item) => item.slug === slug.value))
+const hasTagHeaderImage = computed(() => Boolean(tag.value?.headerImageUrl))
 
 /**
  * 태그 슬러그로 공개 태그 메타를 찾는다.
@@ -48,7 +49,13 @@ const tagPosts = computed(() => posts.value
   <MainColumn>
     <section class="tag-posts-header site-section">
       <div class="tag-posts-header__inner site-section-header mx-auto flex max-w-[720px] flex-col gap-4">
-        <div class="flex flex-col gap-1">
+        <HomeHero
+          v-if="hasTagHeaderImage"
+          :image-url="tag.headerImageUrl"
+          :title="tag.headerTitle"
+          :text="tag.headerText"
+        />
+        <div v-else class="flex flex-col gap-1">
           <h1 class="text-lg font-medium leading-tight sm:text-xl">
             {{ tag?.name || slug.toUpperCase() }}
           </h1>