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
}

const props = defineProps<Props>()

const { locale } = useI18n()
const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()

const slideThumbnailRef = ref<any>(null)
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 paginationData = computed(() => {
  return getComponentGroupAry(props.components, 'pagination')
})

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

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

  const base = group.tracking.click_item || ''
  const next = base
    ? base.replace(/(^.*_)(\d+)$/, `$1${index}`) === base
      ? `${base}_${index}`
      : base.replace(/(^.*_)(\d+)$/, `$1${index}`)
    : `${index}`

  const sendingGroup = {
    ...group,
    tracking: { ...group.tracking, click_item: next },
  }

  sendLog(
    locale.value,
    useAnalyticsLogDataDirect(sendingGroup, props.pageVerTmplSeq)
  )
}

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

  // 전환 시간 후 완전히 제거
  stopVideoTimeoutId = setTimeout(() => {
    playingSlideIndex.value = null
    stopVideoTimeoutId = null
  }, 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(() => {
  // 타이머 정리
  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]"
      />
      <BlocksSlideThumbnail
        ref="slideThumbnailRef"
        :thumbnail-data="slideData"
        variant="media"
        class="mt-[24px] md:mt-[32px]"
        :pagination-data="paginationData"
        :arrows="slideData.length > 5"
        @move="stopVideo"
        @arrow-click="onArrowClick"
      >
        <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"
              @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>
      </BlocksSlideThumbnail>
    </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>