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>
     <!-- 썸네일 슬라이드 -->