fix. 코드 리팩토링

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