From c0c7c400014804f49d3f1c17581bf26c0b39ddd3 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Tue, 23 Sep 2025 21:33:11 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20=ED=83=80=EC=9E=85=20=EA=B2=BD=EA=B3=A0?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/layouts/Main.vue       |  2 +-
 layers/components/widgets/BannerList.vue | 18 +----
 layers/templates/GrVisual03/index.vue    | 83 +++++++++---------------
 layers/types/components/banner.ts        | 16 +++++
 layers/types/components/button.ts        |  9 ---
 5 files changed, 49 insertions(+), 79 deletions(-)
 create mode 100644 layers/types/components/banner.ts

diff --git a/layers/components/layouts/Main.vue b/layers/components/layouts/Main.vue
index 8c81326..72f5a4b 100644
--- a/layers/components/layouts/Main.vue
+++ b/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>
diff --git a/layers/components/widgets/BannerList.vue b/layers/components/widgets/BannerList.vue
index 671c405..32c95c2 100644
--- a/layers/components/widgets/BannerList.vue
+++ b/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 {
-  width: number
-  height: number
-  gap: number
-}
-
-interface BannerSize {
-  mo: BannerSizeItem
-  pc: BannerSizeItem
-}
-
-type BannerMode = 'auto' | 'fixed'
-
-interface Props {
+interface BannerListProps {
   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,
diff --git a/layers/templates/GrVisual03/index.vue b/layers/templates/GrVisual03/index.vue
index 6bf0bdb..63f8f95 100644
--- a/layers/templates/GrVisual03/index.vue
+++ b/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>
diff --git a/layers/types/components/banner.ts b/layers/types/components/banner.ts
new file mode 100644
index 0000000..c58832e
--- /dev/null
+++ b/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'
diff --git a/layers/types/components/button.ts b/layers/types/components/button.ts
index 88d0de7..be3a92c 100644
--- a/layers/types/components/button.ts
+++ b/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
-}