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

layers/templates/GrDetail02/index.vue

@@ -16,6 +16,9 @@ const props = defineProps<Props>()
 const slideData = computed(() => {
   return getComponentContainer(props.components, 'group_sets', { maxLength: 7 })
 })
+const thumbnailData = computed(() => {
+  return slideData.value.map(item => item.pagenaviThumbnail?.groups?.[0])
+})
 const paginationData = computed(() => {
   return getComponentGroupAry(props.components, 'pagination')
 })
@@ -24,7 +27,7 @@ const paginationData = computed(() => {
 <template>
   <section class="section-standard">
     <BlocksSlideThumbnail
-      :slide-data="slideData"
+      :thumbnail-data="thumbnailData"
       :pagination-data="paginationData"
     >
       <SplideSlide v-for="(item, index) in slideData" :key="index">

layers/templates/GrDetail03/index.vue

@@ -28,13 +28,16 @@ const slideData = computed(() => {
     maxLength: 10,
   })
 })
+const thumbnailData = computed(() => {
+  return slideData.value.map(item => item.pagenaviThumbnail?.groups?.[0])
+})
 const paginationData = computed(() => {
   return getComponentGroupAry(props.components, 'pagination')
 })
 
 const videoSrc = (item: PageDataTemplateComponent) => {
   const src = getComponentGroup(item, 'video')?.res_path
-  return getCurrentSrc(src, { resourcesType: 'video' })
+  return getCurrentSrc(src)
 }
 
 const handleSplideMove = (_splide: SplideType, newIndex: number) => {
@@ -45,7 +48,7 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
 <template>
   <section class="section-standard">
     <BlocksSlideThumbnail
-      :slide-data="slideData"
+      :thumbnail-data="thumbnailData"
       :pagination-data="paginationData"
       @move="handleSplideMove"
     >

layers/templates/GrGallery01/index.vue

@@ -6,11 +6,7 @@ import {
   getComponentGroup,
   isTypeVideo,
 } from '#layers/utils/dataUtil'
-import { getMediaImgSrc } from '#layers/utils/styleUtil'
-import type {
-  PageDataTemplateComponents,
-  PageDataTemplateComponentSet,
-} from '#layers/types/api/pageData'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {
   components: PageDataTemplateComponents
@@ -32,39 +28,18 @@ const backgroundData = computed(() =>
 const mainTitleData = computed(() =>
   getComponentGroup(props.components, 'mainTitle')
 )
-const slideData = computed(() =>
-  getComponentContainer(props.components, 'group_sets')
-)
+const slideData = computed(() => {
+  const list = getComponentContainer(props.components, 'group_sets')
+  if (!list) return []
+
+  return list
+    .map(item => item.media?.groups?.[0])
+    .filter((group): group is NonNullable<typeof group> => group != null)
+})
 const paginationData = computed(() => {
   return getComponentGroupAry(props.components, 'pagination')
 })
 
-const getMediaComponent = (item: PageDataTemplateComponentSet) => {
-  return getComponentGroup(item, 'media')
-}
-
-const getMediaImgSrcFromItem = (item: PageDataTemplateComponentSet) => {
-  const mediaComponent = getMediaComponent(item)
-  return mediaComponent ? getMediaImgSrc(mediaComponent, 'maxres') : ''
-}
-
-const getYouTubeEmbedUrlFromMedia = (item: PageDataTemplateComponentSet) => {
-  const mediaComponent = getMediaComponent(item)
-  if (!mediaComponent) return ''
-
-  const mediaSrc = mediaComponent.display?.text
-  return mediaSrc ? getYouTubeEmbedUrl(mediaSrc, true) : ''
-}
-
-const isPassVideo = (item: PageDataTemplateComponentSet, index: number) => {
-  const mediaComponent = getMediaComponent(item)
-  const isNotPlaying = index !== playingSlideIndex.value
-  const isVideoType =
-    mediaComponent && isTypeVideo(mediaComponent?.resource_type)
-
-  return isVideoType && isNotPlaying
-}
-
 const handleVideoClick = (index: number) => {
   playingSlideIndex.value = index
 
@@ -100,7 +75,13 @@ const stopVideo = () => {
   stopVideoTimeoutId = setTimeout(() => {
     playingSlideIndex.value = null
     stopVideoTimeoutId = null
-  }, 400)
+  }, 600)
+}
+
+const onArrowClick = (direction, targetIndex) => {
+  const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
+  const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
+  sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
 }
 
 onBeforeUnmount(() => {
@@ -110,12 +91,6 @@ onBeforeUnmount(() => {
     stopVideoTimeoutId = null
   }
 })
-
-const onArrowClick = (direction, targetIndex) => {
-  const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
-  const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
-  sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
-}
 </script>
 
 <template>
@@ -129,7 +104,7 @@ const onArrowClick = (direction, targetIndex) => {
       />
       <BlocksSlideThumbnail
         ref="slideThumbnailRef"
-        :slide-data="slideData"
+        :thumbnail-data="slideData"
         variant="media"
         class="mt-[24px] md:mt-[32px]"
         :pagination-data="paginationData"
@@ -139,30 +114,33 @@ const onArrowClick = (direction, targetIndex) => {
       >
         <SplideSlide
           v-for="(item, index) in slideData"
-          :key="item.set_order || index"
+          :key="index"
           class="main-slide"
         >
-          <img
-            :src="getMediaImgSrcFromItem(item)"
-            alt="main image"
-            class="slide-image"
-            :class="{
-              'opacity-0': playingSlideIndex === index,
-            }"
-          />
-          <AtomsButtonPlay
-            v-if="isPassVideo(item, index)"
-            class="btn-play"
-            @click="handleVideoClick(index)"
-          />
-          <iframe
-            v-if="playingSlideIndex === index"
-            :src="getYouTubeEmbedUrlFromMedia(item)"
-            class="video-iframe"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-          />
+          <template v-if="isTypeImage(item?.resource_type)">
+            <AtomsImg :src="getResourceSrc(item)" alt="main image" />
+          </template>
+          <template v-if="isTypeVideo(item?.resource_type)">
+            <img
+              :src="getYouTubeThumbnail(item.display?.text, 'maxres')"
+              alt="main image"
+            />
+            <AtomsButtonPlay
+              v-if="playingSlideIndex !== index"
+              class="btn-play"
+              @click="handleVideoClick(index)"
+            />
+            <transition name="fade">
+              <iframe
+                v-if="playingSlideIndex === index"
+                :src="getYouTubeEmbedUrl(item.display?.text, true)"
+                class="video-iframe"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen
+              />
+            </transition>
+          </template>
         </SplideSlide>
       </BlocksSlideThumbnail>
     </div>