fix. [PWT-93] 이미지 타입형 컨텐츠 리스트 미노출 수정

layers/components/blocks/slide/Thumbnail.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { Splide, SplideSlide } from '@splidejs/vue-splide'
+import { useSplideArrow } from '#layers/composables/useSplideArrow'
 import type { Splide as SplideType, Options } from '@splidejs/splide'
 import type {
-  PageDataTemplateComponentSet,
   PageDataResourceGroups,
+  PageDataResourceGroup,
 } from '#layers/types/api/pageData'
-import { useSplideArrow } from '#layers/composables/useSplideArrow'
 
 interface Props {
-  slideData: PageDataTemplateComponentSet[]
+  thumbnailData: PageDataResourceGroup[]
   paginationData?: PageDataResourceGroups
   arrows?: boolean
   variant?: 'default' | 'media'
@@ -81,16 +81,12 @@ const thumbOptions = computed<Options>(() => ({
   },
 }))
 
-const getThumbnailSrc = (item: PageDataTemplateComponentSet) => {
-  if (props.variant === 'media') {
-    const mediaComponent = getComponentGroup(item, 'media')
-    return mediaComponent ? getMediaImgSrc(mediaComponent, 'high') : ''
+const getThumbnailSrc = (item: PageDataResourceGroup) => {
+  if (isTypeVideo(item?.resource_type)) {
+    return getYouTubeThumbnail(item?.display?.text, 'medium')
   }
 
-  const thumbnailComponent = getComponentGroup(item, 'pagenaviThumbnail')
-  const thumbnailPath = getDeviceSrc(thumbnailComponent?.res_path)
-
-  return thumbnailPath?.pcSrc
+  return getResourceSrc(item)
 }
 
 const handleMove = (
@@ -153,18 +149,18 @@ onBeforeUnmount(() => {
     </Splide>
     <!-- 썸네일 슬라이드 -->
     <Splide
-      v-if="props.slideData.length > 1"
+      v-if="props.thumbnailData.length > 1"
       ref="thumbsRef"
       :options="thumbOptions"
       class="thumbnail-splide"
       :style="getPaginationClass(paginationData)"
     >
       <SplideSlide
-        v-for="(item, index) in props.slideData"
-        :key="item.set_order || index"
+        v-for="(item, index) in props.thumbnailData"
+        :key="index"
         class="thumbnail-slide"
       >
-        <img
+        <AtomsImg
           :src="getThumbnailSrc(item)"
           alt="thumbnail image"
           class="slide-image"
@@ -200,10 +196,13 @@ onBeforeUnmount(() => {
   @apply border-[var(--pagination-active)];
 }
 .thumbnail-slide:hover img,
-.thumbnail-slide.is-active img {
+.thumbnail-slide:hover picture,
+.thumbnail-slide.is-active img,
+.thumbnail-slide.is-active picture {
   @apply opacity-100;
 }
-.thumbnail-slide img {
+.thumbnail-slide img,
+.thumbnail-slide picture {
   @apply opacity-50 transition-opacity duration-200 ease-in-out;
 }