fix. 템플릿 데이터 수정에 따른 fe 소스 수정

layers/components/blocks/slide/Thumbnail.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import { Splide, SplideSlide } from '@splidejs/vue-splide'
+import { getFirstGroup, isTypeVideo } from '#layers/utils/dataUtil'
+import { getMediaSrc, getYouTubeEmbedUrl } from '#layers/utils/youtube'
 import type { Splide as SplideType, Options } from '@splidejs/splide'
-import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+import type {
+  PageDataResourceGroups,
+  PageDataResourceGroup,
+} from '#layers/types/api/pageData'
 
 interface Props {
-  slideData: { media: any; set_order: number }[]
+  slideData: { media: PageDataResourceGroups; set_order: number }[]
   videoPlay?: PageDataResourceGroup
   arrows?: boolean
   pagination?: boolean
@@ -46,10 +51,27 @@ const thumbOptions = computed<Options>(() => ({
   },
 }))
 
+const isPassVideo = (groups: PageDataResourceGroups, index: number) => {
+  const firstGroup = getFirstGroup(groups)
+  return (
+    firstGroup &&
+    isTypeVideo(firstGroup?.resource_type) &&
+    index !== playingSlideIndex.value
+  )
+}
+
 const handleVideoClick = (index: number) => {
   playingSlideIndex.value = index
 }
 
+const getYouTubeEmbedUrlFromMedia = (
+  resourceGroups: PageDataResourceGroup[]
+) => {
+  const resourceGroup = getFirstGroup(resourceGroups)
+  const mediaSrc = getMediaSrc(resourceGroup)
+  return mediaSrc ? getYouTubeEmbedUrl(mediaSrc, true) : ''
+}
+
 let mainInst: SplideType | null = null
 let thumbsInst: SplideType | null = null
 
@@ -87,16 +109,14 @@ onBeforeUnmount(() => {
           :class="{ 'opacity-0': playingSlideIndex === index }"
         />
         <AtomsButtonPlay
-          v-if="
-            getMediaType(item.media) === 'video' && playingSlideIndex !== index
-          "
+          v-if="isPassVideo(item.media, index)"
           :resources-data="videoPlay"
           class="btn-play"
           @click="handleVideoClick(index)"
         />
         <iframe
           v-if="playingSlideIndex === index"
-          :src="getYouTubeEmbedUrl(getMediaText(item.media), true)"
+          :src="getYouTubeEmbedUrlFromMedia(item.media)"
           class="absolute top-0 left-0 w-full h-full"
           frameborder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"