feat. GR_GALLERY_01 템플릿 제작

layers/components/blocks/slide/Thumbnail.vue

@@ -0,0 +1,162 @@
+<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 isPlaying = ref<boolean>(false)
+
+const mainOptions = computed<Options>(() => ({
+  type: 'fade',
+  rewind: true,
+  perPage: 1,
+  perMove: 1,
+  speed: 600,
+  arrows: false,
+  pagination: 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 = () => {
+  isPlaying.value = true
+}
+
+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)
+  }
+})
+
+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"
+      >
+        <template v-if="!isPlaying">
+          <img
+            :src="getMediaImgSrc(item.media)"
+            alt="main image"
+            class="slide-image"
+          />
+          <AtomsButtonPlay
+            v-if="getMediaType(item.media) === 'video'"
+            :resources-data="videoPlay"
+            class="btn-play"
+            @click="handleVideoClick()"
+          />
+        </template>
+        <template v-else>
+          <iframe
+            :src="getYouTubeEmbedUrl(getMediaText(item.media))"
+            class="absolute top-0 left-0 w-full h-full"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          />
+        </template>
+      </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 px-[20px] sm:px-[40px] md:max-w-[1024px];
+}
+
+.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 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>