게시물 목록 카드 썸네일 생성 추가

pages/index.vue

@@ -154,6 +154,7 @@ const mapLatestPost = (post) => {
       appendEllipsis: false
     }),
     featuredImage: post.featuredImage,
+    featuredImageThumbnail: post.featuredImageThumbnail || '',
     tagName: tagMeta.name,
     tagColor: tagMeta.color,
     publishedAt: formatPostDate(post.publishedAt),
@@ -354,7 +355,7 @@ watch([latestPosts, hasHomeInfeedAd], () => {
           >
             <img
               v-if="post.featuredImage"
-              :src="post.featuredImage"
+              :src="post.featuredImageThumbnail || post.featuredImage"
               :alt="post.title"
               class="h-full w-full object-cover brightness-75 contrast-125 transition-all duration-200 group-hover:brightness-90 group-hover:contrast-110"
               loading="lazy"
@@ -505,6 +506,7 @@ watch([latestPosts, hasHomeInfeedAd], () => {
                   :to="post.to"
                   :title="post.title"
                   :featured-image="post.featuredImage"
+                  :thumbnail-image="post.featuredImageThumbnail"
                   :link-class="isPostFeedCards ? 'post-feed__media post-feed__media--cards mb-3 block aspect-video w-full' : 'post-feed__media post-feed__media--list relative h-20 w-20 shrink-0 self-start aspect-square sm:h-auto sm:w-auto sm:flex-1 sm:shrink sm:self-auto sm:min-w-16 sm:aspect-video'"
                   :aspect-class="isPostFeedCards ? 'aspect-video' : 'aspect-square sm:aspect-video'"
                 />

pages/posts/index.vue

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

pages/tag/[slug].vue

@@ -21,6 +21,7 @@ const tagPosts = computed(() => posts.value
       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),
@@ -59,6 +60,7 @@ const tagPosts = computed(() => posts.value
                 :to="post.to"
                 :title="post.title"
                 :featured-image="post.featuredImage"
+                :thumbnail-image="post.featuredImageThumbnail"
                 link-class="relative aspect-square min-w-16 flex-1 sm:aspect-video"
                 aspect-class="aspect-square w-full sm:aspect-video"
               />