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

layers/components/blocks/VisualContent.vue

@@ -27,6 +27,7 @@ const colorCode = computed(() => {
 })
 const currentImageSrc = computed(() => {
   if (!imageSrc.value) return ''
+
   return breakpoints.value.isMobile
     ? imageSrc.value.mobileSrc || ''
     : imageSrc.value.pcSrc || ''
@@ -36,25 +37,20 @@ const currentImageSrc = computed(() => {
 const sanitizedContent = computed(() => {
   return displayText.value?.replace(/\n/g, '<br/>') || ''
 })
-// 이미지가 있는지 확인
-const hasImage = computed(() => {
-  return imageSrc.value && (imageSrc.value.mobileSrc || imageSrc.value.pcSrc)
-})
 </script>
 
 <template>
   <!-- 이미지 -->
   <img
-    v-if="hasImage && currentImageSrc"
+    v-if="isTypeImage(resourcesData?.resource_type) && currentImageSrc"
     :src="currentImageSrc"
     :alt="alt || displayText"
     :class="`w-full h-full object-${objectFit}`"
     loading="lazy"
   />
-
   <!-- 텍스트 -->
   <span
-    v-else-if="displayText"
+    v-else-if="isTypeText(resourcesData?.resource_type)"
     v-dompurify-html="sanitizedContent"
     :style="{ color: getColorCode({ colorName, colorCode }) }"
     class="block"

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"

layers/components/widgets/Background.vue

@@ -46,7 +46,7 @@ const currentPosterSrc = computed(() => {
   <div class="absolute inset-0 w-full h-full">
     <!-- 이미지 타입-->
     <div
-      v-if="resourcesData?.group_type === 'image'"
+      v-if="isTypeImage(resourcesData?.resource_type)"
       class="w-full h-full bg-cover bg-center bg-no-repeat"
       :class="getResponsiveClass()"
       :style="bgStyles"
@@ -54,7 +54,7 @@ const currentPosterSrc = computed(() => {
 
     <!-- 비디오 타입 -->
     <video
-      v-else-if="resourcesData?.group_type === 'video' && currentVideoSrc"
+      v-else-if="isTypeVideo(resourcesData?.resource_type) && currentVideoSrc"
       class="w-full h-full object-cover"
       :poster="currentPosterSrc"
       autoplay

layers/components/widgets/ButtonList.vue

@@ -61,7 +61,7 @@ const getButtonProps = (button: PageDataResourceGroup) => ({
   >
     <AtomsButton
       v-for="(button, index) in props.resourcesData"
-      :key="`${button.group_code}-${index}`"
+      :key="index"
       v-bind="getButtonProps(button)"
       class="size-extra-small md:size-medium"
     >