web-temp/layers/components/blocks/slide/Thumbnail.vue

<script setup lang="ts">
import { Splide, SplideSlide } from '@splidejs/vue-splide'
import { getComponentGroup, isTypeVideo } from '#layers/utils/dataUtil'
import {
  getMediaSrc,
  getYouTubeEmbedUrl,
  getMediaImgSrc,
} from '#layers/utils/youtube'
import type { Splide as SplideType, Options } from '@splidejs/splide'
import type {
  PageDataTemplateComponentSet,
  PageDataResourceGroup,
} from '#layers/types/api/pageData'

interface Props {
  slideData: PageDataTemplateComponentSet[]
  videoPlay?: PageDataResourceGroup
  arrows?: boolean
  pagination?: boolean
  class?: string
  style?: Record<string, string>
}

const props = defineProps<Props>()

let mainInst: SplideType | null = null
let thumbsInst: SplideType | null = null

const mainRef = ref<InstanceType<typeof Splide> | null>(null)
const thumbsRef = ref<InstanceType<typeof Splide> | null>(null)
const playingSlideIndex = ref<number | null>(null)

const mainOptions = computed<Options>(() => ({
  type: 'fade',
  rewind: true,
  perPage: 1,
  perMove: 1,
  speed: 600,
  arrows: false,
  pagination: false,
  drag: false,
}))

const thumbOptions = computed<Options>(() => ({
  type: 'slide',
  rewind: true,
  // focus: 'center',
  autoWidth: true,
  perMove: 1,
  arrows: true,
  pagination: false,
  isNavigation: true,
  updateOnMove: true,
  classes: {
    arrows: 'splide-arrows',
    arrow: 'splide-arrow',
    prev: 'arrow-prev',
    next: 'arrow-next',
  },
}))

const getMediaComponent = (item: PageDataTemplateComponentSet) => {
  return getComponentGroup(item, 'media')
}

const getMediaImgSrcFromItem = (item: PageDataTemplateComponentSet) => {
  const mediaComponent = getMediaComponent(item)
  return mediaComponent ? getMediaImgSrc(mediaComponent) : ''
}

const getYouTubeEmbedUrlFromMedia = (item: PageDataTemplateComponentSet) => {
  const mediaComponent = getMediaComponent(item)
  if (!mediaComponent) return ''
  const mediaSrc = getMediaSrc(mediaComponent)
  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
}

const stopVideo = () => {
  playingSlideIndex.value = null
}

onMounted(() => {
  mainInst = mainRef.value?.splide ?? null
  thumbsInst = thumbsRef.value?.splide ?? null

  if (mainInst && thumbsInst) {
    mainInst.sync(thumbsInst)
    mainInst.on('moved', stopVideo)
  }
})

onBeforeUnmount(() => {
  mainInst?.destroy?.()
  thumbsInst?.destroy?.()
})
</script>

<template>
  <div :class="`thumbnail-carousel ${props.class || ''}`" :style="props.style">
    <!-- 메인 슬라이드 -->
    <Splide ref="mainRef" :options="mainOptions" class="main-splide">
      <SplideSlide
        v-for="(item, index) in props.slideData"
        :key="item.set_order || 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)"
          :resources-data="videoPlay"
          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
        />
      </SplideSlide>
    </Splide>

    <!-- 썸네일 슬라이드 -->
    <Splide ref="thumbsRef" :options="thumbOptions" class="thumbnail-splide">
      <SplideSlide
        v-for="(item, index) in props.slideData"
        :key="item.set_order || index"
        class="thumbnail-slide"
      >
        <img
          :src="getMediaImgSrcFromItem(item)"
          alt="thumbnail image"
          class="slide-image"
        />
      </SplideSlide>
    </Splide>
  </div>
</template>

<style scoped>
.thumbnail-carousel {
  @apply w-full md:max-w-[944px];
}

.main-splide {
  @apply overflow-hidden mx-auto rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
}
.main-slide {
  @apply relative aspect-[16/9];
}
.slide-image {
  @apply w-full h-full object-cover;
}
.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;
}

.thumbnail-splide {
  @apply overflow-hidden flex justify-center w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:max-w-[100%] md:w-fit md:mx-auto md:px-[120px] md:mt-[28px];
}
.thumbnail-splide:deep(.splide__track) {
  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
}
.thumbnail-slide {
  @apply overflow-hidden relative w-[92px] h-[52px] mr-[12px] !border-none rounded-[4px] md:w-[128px] md:h-[72px] md:mr-[16px]
  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
  after:border after:border-white/60 after:rounded-[4px];
}
.thumbnail-slide:hover,
.thumbnail-slide.is-active {
  @apply after:border-[var(--primary)];
}
.thumbnail-splide:deep(.arrow-prev) {
  @apply left-[48px];
}
.thumbnail-splide:deep(.arrow-next) {
  @apply right-[48px];
}
</style>