fix. 타입 경고 수정

layers/templates/GrVisual03/index.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { EffectFade, Navigation, Pagination } from 'swiper/modules'
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
 import {
-  getResponsiveClass,
-  getResponsiveSrc,
   hasComponentGroup,
   getComponentGroup,
   getComponentGroupAry,
@@ -16,32 +13,30 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const arrow = computed(() => {
-  return getComponentGroupAry(props.components, 'arrow')
+const splideOptions = computed(() => {
+  return {
+    type: 'fade',
+    rewind: true,
+    speed: 600,
+    updateOnMove: true,
+    arrows: true,
+    pagination: true,
+    classes: {
+      arrows: 'splide-arrows type-full',
+      arrow: 'splide-arrow',
+      prev: 'arrow-prev',
+      next: 'arrow-next',
+      pagination: 'splide-pagination-bullets type-full',
+      page: 'splide-pagination-bullet',
+    },
+  }
 })
-
-const modules = [EffectFade, Navigation, Pagination]
-
-const swiperOptions = computed(() => ({
-  modules,
-  loop: true,
-  effect: 'fade',
-  pagination: {
-    el: '.slide-pagination',
-    clickable: true,
-  } as any,
-  navigation: {
-    nextEl: '.slide-next',
-    prevEl: '.slide-prev',
-  } as any,
-  class: 'h-full',
-}))
 </script>
 
 <template>
   <section class="relative h-[640px] md:h-[1000px]">
-    <Swiper v-bind="swiperOptions">
-      <SwiperSlide
+    <Splide :options="splideOptions" class="h-full">
+      <SplideSlide
         v-for="group in props.components.group_sets"
         :key="group.set_order"
         class="bg-black"
@@ -73,34 +68,14 @@ const swiperOptions = computed(() => ({
             :groups-data="getComponentGroupAry(group, 'buttonList')"
           />
         </div>
-      </SwiperSlide>
-
-      <div class="slide-pagination position-absolute" />
-
-      <div
-        v-if="arrow.length > 0"
-        class="slide-prev hidden md:block"
-        :class="getResponsiveClass()"
-        :style="
-          getResponsiveSrc(arrow[0]?.res_path, {
-            resourcesType: 'bg',
-          })
-        "
-      >
-        <span class="sr-only">prev</span>
-      </div>
-      <div
-        v-if="arrow.length > 1"
-        class="slide-next hidden md:block"
-        :class="getResponsiveClass()"
-        :style="
-          getResponsiveSrc(arrow[1]?.res_path, {
-            resourcesType: 'bg',
-          })
-        "
-      >
-        <span class="sr-only">next</span>
-      </div>
-    </Swiper>
+      </SplideSlide>
+    </Splide>
+    <div class="slide-pagination position-absolute" />
   </section>
 </template>
+
+<style scoped>
+.splide:deep(.splide__track) {
+  @apply h-full;
+}
+</style>