web-temp/layers/templates/GrGallery01/index.vue

<script setup lang="ts">
import { SplideSlide } from '@splidejs/vue-splide'
import {
  getComponentContainer,
  getComponentGroupAry,
  getComponentGroup,
  isTypeVideo,
} from '#layers/utils/dataUtil'
import { getYouTubeUrl, getYouTubeThumbnail } from '#layers/utils/youtubeUtil'
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'

interface Props {
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
  pageVerTmplNameEn: string
}

const props = defineProps<Props>()

const playingSlideIndex = ref<number | null>(null)
let stopVideoTimeoutId: ReturnType<typeof setTimeout> | null = null

const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
  getComponentGroup(props.components, 'mainTitle')
)
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 arrowsData = computed(() => {
  return getComponentGroupAry(props.components, 'arrow')
})
const paginationData = computed(() => {
  return getComponentGroupAry(props.components, 'pagination')
})
const videoPlayData = computed(() => {
  return getComponentGroup(props.components, 'videoPlay')
})

const getVideoPlayTracking = (item: string) => {
  return {
    action_type: 'click',
    click_item: `${item}_영상재생`,
    click_sarea: props.pageVerTmplNameEn,
  }
}

const handleVideoClick = (index: number) => {
  playingSlideIndex.value = index

  const group = getComponentGroup(props.components, 'videoPlay')
  if (!group || !group.tracking) return
}

const handleSplideMove = () => {
  // 이전 타이머 정리
  if (stopVideoTimeoutId) {
    clearTimeout(stopVideoTimeoutId)
    stopVideoTimeoutId = null
  }

  // 전환 시간 후 완전히 제거
  stopVideoTimeoutId = setTimeout(() => {
    playingSlideIndex.value = null
    stopVideoTimeoutId = null
  }, 600)
}

onBeforeUnmount(() => {
  // 타이머 정리
  if (stopVideoTimeoutId) {
    clearTimeout(stopVideoTimeoutId)
    stopVideoTimeoutId = null
  }
})
</script>

<template>
  <section class="section-standard min-h-[700px]">
    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
    <div class="content-standard">
      <WidgetsMainTitle
        v-if="mainTitleData"
        :resources-data="mainTitleData"
        class="title-md max-w-[944px]"
      />
      <WidgetsSlideThumbnail
        v-motion-stagger
        :thumbnail-data="slideData"
        :pagination-data="paginationData"
        :drag="false"
        variant="media"
        class="mt-[24px] md:mt-[32px]"
        :arrows="slideData.length > 5"
        :arrows-data="arrowsData"
        :analytics-sarea="props.pageVerTmplNameEn"
        @move="handleSplideMove"
      >
        <SplideSlide
          v-for="(item, index) in slideData"
          :key="index"
          class="main-slide"
        >
          <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"
              :background-color="
                getColorCodeFromData(videoPlayData?.display, 'none')
              "
              :tracking="getVideoPlayTracking(item?.group_label)"
              @click="handleVideoClick(index)"
            />
            <transition name="fade">
              <iframe
                v-if="playingSlideIndex === index"
                :src="getYouTubeUrl(item.display?.text)"
                class="video-iframe"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen
              />
            </transition>
          </template>
        </SplideSlide>
      </WidgetsSlideThumbnail>
    </div>
  </section>
</template>

<style scoped>
.thumbnail-carousel {
  @apply w-full max-w-[944px];
}
.thumbnail-carousel:deep(.main-splide) {
  @apply overflow-hidden rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
}
.main-slide {
  @apply relative aspect-[16/9];
}
.thumbnail-carousel:deep(.thumbnail-splide .splide__track) {
  @apply md:max-w-[720px];
}
.btn-play {
  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}
.video-iframe {
  @apply absolute top-0 left-0 w-full h-full object-cover;
}
</style>