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

<script setup lang="ts">
import { Splide, SplideSlide } from '@splidejs/vue-splide'
import type { Splide as SplideType, Options } from '@splidejs/splide'
import type { PageDataResourceGroup } from '#layers/types/api/pageData'

interface Props {
  slideItemList: { media: any; set_order: number }[]
  videoPlay?: PageDataResourceGroup
  arrows?: boolean
  pagination?: boolean
  class?: string
  style?: Record<string, string>
}

const props = defineProps<Props>()

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 handleVideoClick = (index: number) => {
  playingSlideIndex.value = index
}

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

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

    mainInst.on('moved', () => {
      playingSlideIndex.value = null
    })
  }
})

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.slideItemList"
        :key="item.set_order || index"
        class="main-slide"
      >
        <img
          :src="getMediaImgSrc(item.media)"
          alt="main image"
          class="slide-image"
          :class="{ 'opacity-0': playingSlideIndex === index }"
        />
        <AtomsButtonPlay
          v-if="
            getMediaType(item.media) === 'video' && playingSlideIndex !== index
          "
          :resources-data="videoPlay"
          class="btn-play"
          @click="handleVideoClick(index)"
        />
        <iframe
          v-if="playingSlideIndex === index"
          :src="getYouTubeEmbedUrl(getMediaText(item.media), true)"
          class="absolute top-0 left-0 w-full h-full"
          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.slideItemList"
        :key="item.set_order || index"
        class="thumbnail-slide"
      >
        <img
          :src="getMediaImgSrc(item.media)"
          alt="thumbnail image"
          class="slide-image"
        />
      </SplideSlide>
    </Splide>
  </div>
</template>

<style scoped>
/* 비디오 iframe 전환 애니메이션 */

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

.thumbnail-splide {
  @apply overflow-hidden flex justify-center w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-auto md:mx-0 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>