Fix. GR_VISUAL 템플릿 컴포넌트 정리

layers/templates/GrVisual03/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Splide, SplideSlide } from '@splidejs/vue-splide'
+import { SplideSlide } from '@splidejs/vue-splide'
 import {
   hasComponentGroup,
   getComponentGroup,
@@ -12,70 +12,48 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-
-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',
-    },
-  }
-})
 </script>
 
 <template>
   <section class="relative h-[640px] md:h-[1000px]">
-    <Splide :options="splideOptions" class="h-full">
+    <BlocksSlideFade
+      v-if="props.components?.group_sets"
+      :arrows="true"
+      :pagination="true"
+      class="h-full"
+    >
       <SplideSlide
-        v-for="group in props.components.group_sets"
-        :key="group.set_order"
-        class="bg-black"
+        v-for="(item, index) in props.components.group_sets"
+        :key="index"
       >
         <WidgetsBackground
-          v-if="hasComponentGroup(group, 'background')"
-          :resources-data="getComponentGroup(group, 'background')"
+          v-if="hasComponentGroup(item, 'background')"
+          :resources-data="getComponentGroup(item, 'background')"
         />
         <div
           class="relative h-full flex flex-col items-center justify-center gap-[14px] text-center md:gap-5"
         >
           <WidgetsSubTitle
-            v-if="hasComponentGroup(group, 'subTitle')"
-            :resources-data="getComponentGroup(group, 'subTitle')"
+            v-if="hasComponentGroup(item, 'subTitle')"
+            :resources-data="getComponentGroup(item, 'subTitle')"
             class="line-clamp-2 text-[16px] font-[500] leading-[24px] md:line-clamp-1 md:text-[24px] md:leading-[34px]"
           />
           <WidgetsMainTitle
-            v-if="hasComponentGroup(group, 'mainTitle')"
-            :resources-data="getComponentGroup(group, 'mainTitle')"
+            v-if="hasComponentGroup(item, 'mainTitle')"
+            :resources-data="getComponentGroup(item, 'mainTitle')"
             class="line-clamp-3 text-[24px] font-[700] leading-[34px] md:text-[50px] md:leading-[70px]"
           />
           <WidgetsDescription
-            v-if="hasComponentGroup(group, 'description')"
-            :resources-data="getComponentGroup(group, 'description')"
+            v-if="hasComponentGroup(item, 'description')"
+            :resources-data="getComponentGroup(item, 'description')"
             class="line-clamp-3 text-[15px] font-[400] leading-[24px] md:text-[20px] md:leading-[30px]"
           />
           <WidgetsButtonList
-            v-if="hasComponentGroup(group, 'buttonList')"
-            :groups-data="getComponentGroupAry(group, 'buttonList')"
+            v-if="hasComponentGroup(item, 'buttonList')"
+            :groups-data="getComponentGroupAry(item, 'buttonList')"
           />
         </div>
       </SplideSlide>
-    </Splide>
-    <div class="slide-pagination position-absolute" />
+    </BlocksSlideFade>
   </section>
 </template>
-
-<style scoped>
-.splide:deep(.splide__track) {
-  @apply h-full;
-}
-</style>