feat. GR_GALLERY_02 템플릿 제작

layers/templates/GrVisual02/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { SplideSlide } from '@splidejs/vue-splide'
 import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
 
 interface Props {
@@ -47,7 +48,7 @@ const { data: resourcesData } = await useLazyAsyncData(
 )
 
 // 배너 리스트 데이터 추출
-const bannerListData = computed(() => {
+const slideData = computed(() => {
   const operateComponents = resourcesData.value?.operate_components
 
   if (!operateComponents) {
@@ -55,10 +56,16 @@ const bannerListData = computed(() => {
   }
 
   const firstKey = Object.keys(operateComponents)[0]
-  return operateComponents[firstKey]?.list_operate_groups || []
+  const data = operateComponents[firstKey]?.list_operate_groups || []
+
+  if (data.length < 3) {
+    return [...data, ...data]
+  }
+
+  return data
 })
 
-const bannerSize = {
+const slideItemSize = {
   mo: {
     width: 276,
     height: 174,
@@ -100,14 +107,23 @@ const bannerSize = {
         :resources-data="buttonListData"
         class="mt-[48px] md:mt-[72px]"
       />
-      <WidgetsBannerList
-        v-if="bannerListData.length > 0"
-        :resources-data="bannerListData"
-        :slide-item-size="bannerSize"
-        :arrows="true"
+      <BlocksSlideCenterHighlight
+        :slide-item-size="slideItemSize"
+        :slide-item-length="slideData.length"
         :pagination="false"
         class="mt-[36px] md:mt-[60px]"
-      />
+      >
+        <SplideSlide v-for="(item, index) in slideData" :key="index">
+          <BlocksCardNews
+            :title="item.title"
+            :description="item.option01"
+            :img-path="getResolvedHost(item.img_path)"
+            :url="item.url"
+            :link-target="item.link_target"
+            class="slide-inner"
+          />
+        </SplideSlide>
+      </BlocksSlideCenterHighlight>
     </div>
   </section>
 </template>