fix. 코드 리팩토링

layers/components/blocks/slide/CenterFocus.vue

@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: true,
 })
 
-const emit = defineEmits(['mounted', 'move', 'moved', 'arrowClick'])
+const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()

layers/components/blocks/slide/CenterHighlight.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: true,
 })
 
-const emit = defineEmits(['mounted', 'move', 'moved', 'arrowClick'])
+const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
@@ -105,15 +105,6 @@ const handleMove = (
 ) => {
   emit('move', splide, newIndex, oldIndex, destIndex)
 }
-
-const handleMoved = (
-  splide: SplideType,
-  newIndex: number,
-  oldIndex: number,
-  destIndex: number
-) => {
-  emit('moved', splide, newIndex, oldIndex, destIndex)
-}
 </script>
 
 <template>
@@ -122,7 +113,6 @@ const handleMoved = (
       :options="options"
       @splide:mounted="handleSplideMounted"
       @splide:move="handleMove"
-      @splide:moved="handleMoved"
     >
       <slot />
     </Splide>

layers/components/blocks/slide/Fade.vue

@@ -16,7 +16,7 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: true,
 })
 
-const emit = defineEmits(['mounted', 'move', 'moved', 'arrowClick'])
+const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 
 const splideRef = ref()
 // Splide 화살표 로직을 위한 composable 사용
@@ -70,15 +70,6 @@ const handleMove = (
 ) => {
   emit('move', splide, newIndex, oldIndex, destIndex)
 }
-
-const handleMoved = (
-  splide: SplideType,
-  newIndex: number,
-  oldIndex: number,
-  destIndex: number
-) => {
-  emit('moved', splide, newIndex, oldIndex, destIndex)
-}
 </script>
 
 <template>
@@ -88,7 +79,6 @@ const handleMoved = (
     class="h-full"
     @splide:mounted="handleSplideMounted"
     @splide:move="handleMove"
-    @splide:moved="handleMoved"
   >
     <slot />
   </Splide>

layers/components/blocks/slide/Thumbnail.vue

@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   drag: true,
 })
 
-const emit = defineEmits(['arrowClick'])
+const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
@@ -85,6 +85,19 @@ const getThumbnailSrc = (item: PageDataTemplateComponentSet) => {
     : pagenaviThumbnailSrc?.pcSrc || ''
 }
 
+const handleMove = (
+  splide: SplideType,
+  newIndex: number,
+  oldIndex: number,
+  destIndex: number
+) => {
+  emit('move', splide, newIndex, oldIndex, destIndex)
+}
+
+const handleSplideMounted = (splide: SplideType) => {
+  emit('mounted', splide)
+}
+
 onMounted(() => {
   mainInst = mainRef.value?.splide ?? null
   thumbsInst = thumbsRef.value?.splide ?? null
@@ -110,7 +123,13 @@ onBeforeUnmount(() => {
 <template>
   <div :class="['thumbnail-carousel', $attrs?.class, `thumbnail-${variant}`]">
     <!-- 메인 슬라이드 -->
-    <Splide ref="mainRef" :options="mainOptions" class="main-splide">
+    <Splide
+      ref="mainRef"
+      :options="mainOptions"
+      class="main-splide"
+      @splide:move="handleMove"
+      @splide:mounted="handleSplideMounted"
+    >
       <slot />
     </Splide>
     <!-- 썸네일 슬라이드 -->

layers/templates/GrDetail01/index.vue

@@ -4,6 +4,7 @@ import {
   getComponentContainer,
   getComponentGroupAry,
 } from '#layers/utils/dataUtil'
+import type { Splide as SplideType } from '@splidejs/splide'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {
@@ -30,18 +31,13 @@ const goToSlide = (index: number) => {
   }
 }
 
-onMounted(() => {
-  nextTick(() => {
-    const splide = splideRef.value?.splide
-    if (splide) {
-      currentSlide.value = splide.index
+const handleSplideMounted = (splide: SplideType) => {
+  currentSlide.value = splide.index
+}
 
-      splide.on('move', (newIndex: number) => {
-        currentSlide.value = newIndex
-      })
-    }
-  })
-})
+const changeCurrentSlide = (_splide: SplideType, newIndex: number) => {
+  currentSlide.value = newIndex
+}
 </script>
 
 <template>
@@ -54,6 +50,8 @@ onMounted(() => {
       :arrows="false"
       :pagination="false"
       class="h-full"
+      @splide:move="changeCurrentSlide"
+      @splide:mounted="handleSplideMounted"
     >
       <SplideSlide v-for="(item, index) in slideData" :key="index">
         <WidgetsBackground

layers/templates/GrGallery01/index.vue

@@ -77,15 +77,6 @@ const onArrowClick = (direction, targetIndex) => {
   const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
   sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
 }
-
-onMounted(() => {
-  nextTick(() => {
-    const mainInst = slideThumbnailRef.value?.mainInst
-    if (mainInst) {
-      mainInst.on('move', stopVideo)
-    }
-  })
-})
 </script>
 
 <template>
@@ -103,6 +94,7 @@ onMounted(() => {
         variant="media"
         :drag="false"
         class="mt-[24px] md:mt-[32px]"
+        @move="stopVideo"
         @arrow-click="onArrowClick"
       >
         <SplideSlide