fix. 공통 스타일 분리

layers/components/blocks/slide/Thumbnail.vue

@@ -16,7 +16,7 @@ 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 playingSlideIndex = ref<number | null>(null)
 
 const mainOptions = computed<Options>(() => ({
   type: 'fade',
@@ -26,6 +26,7 @@ const mainOptions = computed<Options>(() => ({
   speed: 600,
   arrows: false,
   pagination: false,
+  drag: false,
 }))
 const thumbOptions = computed<Options>(() => ({
   type: 'slide',
@@ -45,9 +46,8 @@ const thumbOptions = computed<Options>(() => ({
   },
 }))
 
-// 비디오 클릭 핸들러
-const handleVideoClick = () => {
-  isPlaying.value = true
+const handleVideoClick = (index: number) => {
+  playingSlideIndex.value = index
 }
 
 let mainInst: SplideType | null = null
@@ -58,6 +58,10 @@ onMounted(() => {
   thumbsInst = thumbsRef.value?.splide ?? null
   if (mainInst && thumbsInst) {
     mainInst.sync(thumbsInst)
+
+    mainInst.on('moved', () => {
+      playingSlideIndex.value = null
+    })
   }
 })
 
@@ -76,28 +80,28 @@ onBeforeUnmount(() => {
         :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>
+        <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>
 
@@ -122,14 +126,14 @@ onBeforeUnmount(() => {
 /* 비디오 iframe 전환 애니메이션 */
 
 .thumbnail-carousel {
-  @apply w-full px-[20px] sm:px-[40px] md:max-w-[1024px];
+  @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 aspect-[16/9];
+  @apply relative aspect-[16/9];
 }
 .slide-image {
   @apply w-full h-full object-cover;