feat. GR_GALLERY_02 템플릿 제작

layers/templates/GrGallery01/index.vue

@@ -14,7 +14,13 @@ const backgroundData = computed(() =>
 const mainTitleData = computed(() =>
   getComponentGroup(props.components, 'mainTitle')
 )
-const slideThumbnailData = computed(() => props.components.group_sets)
+const slideData = computed(() => {
+  if (props.components.group_sets.length < 3) {
+    return [...props.components.group_sets, ...props.components.group_sets]
+  }
+
+  return props.components.group_sets
+})
 const videoPlayData = computed(() =>
   getComponentGroup(props.components, 'videoPlay')
 )
@@ -30,7 +36,7 @@ const videoPlayData = computed(() =>
         class="title-sm"
       />
       <BlocksSlideThumbnail
-        :slide-item-list="slideThumbnailData"
+        :slide-data="slideData"
         :video-play="videoPlayData"
         class="mt-[24px] md:mt-[32px]"
       />

layers/templates/GrGallery02/index.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { SplideSlide } from '@splidejs/vue-splide'
+import { getComponentGroup } from '#layers/utils/dataUtil'
+import type { Splide as SplideType } from '@splidejs/splide'
+
+interface Props {
+  components: Record<string, any>
+  pageVerTmplSeq: string
+}
+
+const props = defineProps<Props>()
+
+const backgroundData = computed(() =>
+  getComponentGroup(props.components, 'background')
+)
+const mainTitleData = computed(() =>
+  getComponentGroup(props.components, 'mainTitle')
+)
+const slideData = computed(() => {
+  if (props.components.group_sets.length < 3) {
+    return [...props.components.group_sets, ...props.components.group_sets]
+  }
+
+  return props.components.group_sets
+})
+const buttonListData = ref(
+  getComponentGroupAry(slideData?.value[0], 'buttonList')
+)
+
+const slideItemSize = {
+  mo: {
+    width: 295,
+    height: 384,
+    gap: 12,
+    scale: 1,
+  },
+  pc: {
+    width: 419,
+    height: 564,
+    gap: 20,
+    scale: 1.0979,
+  },
+}
+
+const handleChange = (
+  _splide: SplideType,
+  newIndex: number,
+  _oldIndex: number,
+  _destIndex: number
+) => {
+  buttonListData.value = getComponentGroupAry(
+    slideData.value[newIndex],
+    'buttonList'
+  )
+}
+</script>
+
+<template>
+  <section class="section-container">
+    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
+    <div class="section-content px-0">
+      <WidgetsMainTitle
+        v-if="mainTitleData"
+        :resources-data="mainTitleData"
+        class="title-sm"
+      />
+      <BlocksSlideCenterFocus
+        v-if="slideData"
+        :slide-item-size="slideItemSize"
+        :slide-item-length="slideData?.length"
+        :pagination="false"
+        class="mt-[24px] md:mt-[48px]"
+        @move="handleChange"
+      >
+        <SplideSlide v-for="(item, index) in slideData" :key="index">
+          <div class="slide-inner border-line mt-auto">
+            <BlocksVisualContent
+              :resources-data="getComponentGroup(item, 'imgList')"
+              object-fit="cover"
+              :alt="getComponentGroup(item, 'subTitle')?.display?.text"
+            />
+          </div>
+        </SplideSlide>
+      </BlocksSlideCenterFocus>
+      <WidgetsButtonList
+        v-if="buttonListData"
+        :resources-data="buttonListData"
+        class="mt-[40px] md:mt-[56px]"
+      />
+    </div>
+  </section>
+</template>

layers/templates/GrGallery03/index.vue

@@ -16,8 +16,13 @@ const backgroundData = computed(() =>
 const mainTitleData = computed(() =>
   getComponentGroup(props.components, 'mainTitle')
 )
-const slideData = computed(() => props.components.group_sets)
+const slideData = computed(() => {
+  if (props.components.group_sets.length < 3) {
+    return [...props.components.group_sets, ...props.components.group_sets]
+  }
 
+  return props.components.group_sets
+})
 const subTitleData = ref(getComponentGroup(slideData?.value[0], 'subTitle'))
 const descriptionData = ref(
   getComponentGroup(slideData?.value[0], 'description')

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>