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;
 }
 

layers/composables/useBreakpoints.ts

@@ -1,6 +1,5 @@
 import { useBreakpoints } from '@vueuse/core'
-import { getDeviceSrc } from '#layers/utils/styleUtil'
-import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 export const BREAKPOINTS = {
   xs: 360,
@@ -36,15 +35,17 @@ export const useResponsiveSrc = () => {
   const breakpoints = useResponsiveBreakpoints()
 
   const getCurrentSrc = (
-    path: PageDataResourceGroupResPath,
+    resourcesData: PageDataResourceGroup,
     options?: {
-      resourcesType?: 'image' | 'video'
       imageType?: 'game' | 'common'
+      resourcesType?: 'IMG' | 'VID'
     }
   ) => {
-    const result = getDeviceSrc(path, options)
+    const result = getResourceSrc(resourcesData, options?.resourcesType)
     if (!result) return ''
-    return breakpoints.value.isMobile ? result.mobileSrc : result.pcSrc
+    return breakpoints.value.isMobile
+      ? formatPathHost(result.mo, { imageType: options?.imageType })
+      : formatPathHost(result.pc, { imageType: options?.imageType })
   }
 
   return { getCurrentSrc }

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>

layers/types/api/pageData.ts

@@ -74,6 +74,7 @@ export type PageDataResourceGroupType =
   | 'IMG_COMM'
   | 'IMG_LANG'
   | 'IMG_COMM_GLOBAL'
+  | 'IMG'
 
 export interface PageDataResourceGroupResPath {
   path_mo: string