fix. 타입 경고 수정

layers/components/layouts/Main.vue

@@ -65,7 +65,7 @@ watchEffect(() => {
       <component
         :is="registry[template.template_code]?.component"
         :components="template.components"
-        :page-ver-tmpl-seq="template.page_ver_tmpl_seq"
+        :page-ver-tmpl-seq="template.page_ver_tmpl_seq.toString()"
       />
     </template>
   </main>

layers/components/widgets/BannerList.vue

@@ -2,21 +2,9 @@
 import { Splide, SplideSlide } from '@splidejs/vue-splide'
 import type { Splide as SplideType } from '@splidejs/splide'
 import type { ListOperateGroupItem } from '#layers/types/api/resourcesData'
+import type { BannerMode, BannerSize } from '#layers/types/components/banner'
 
-interface BannerSizeItem {
+interface BannerListProps {
-  width: number
-  height: number
-  gap: number
-}
-
-interface BannerSize {
-  mo: BannerSizeItem
-  pc: BannerSizeItem
-}
-
-type BannerMode = 'auto' | 'fixed'
-
-interface Props {
   bannerList: ListOperateGroupItem[]
   bannerMode?: BannerMode
   bannerSize?: BannerSize
@@ -28,7 +16,7 @@ interface Props {
   breakpoints?: Record<number, { perPage: number; gap?: string }>
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<BannerListProps>(), {
   bannerMode: 'fixed',
   arrows: true,
   pagination: true,

layers/templates/GrVisual03/index.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
-import { EffectFade, Navigation, Pagination } from 'swiper/modules'
 import {
-  getResponsiveClass,
-  getResponsiveSrc,
   hasComponentGroup,
   getComponentGroup,
   getComponentGroupAry,
@@ -16,32 +13,30 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const arrow = computed(() => {
+const splideOptions = computed(() => {
-  return getComponentGroupAry(props.components, 'arrow')
+  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">
+    <Splide :options="splideOptions" class="h-full">
-      <SwiperSlide
+      <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>
+      </SplideSlide>
-
+    </Splide>
     <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>
   </section>
 </template>
+
+<style scoped>
+.splide:deep(.splide__track) {
+  @apply h-full;
+}
+</style>

layers/types/components/banner.ts

@@ -0,0 +1,16 @@
+/**
+ * BannerList 컴포넌트 타입 정의
+ */
+
+export interface BannerSizeItem {
+  width: number
+  height: number
+  gap: number
+}
+
+export interface BannerSize {
+  mo: BannerSizeItem
+  pc: BannerSizeItem
+}
+
+export type BannerMode = 'auto' | 'fixed'

layers/types/components/button.ts

@@ -8,12 +8,3 @@ export interface ButtonConfig {
   text: string
   rounded: string
 }
-
-// Button 컴포넌트 Props 인터페이스
-export interface ButtonProps {
-  size?: ButtonSize
-  backgroundColor?: string
-  textColor?: string
-  icon?: string
-  disabled?: boolean
-}