feat. GR_GALLERY_03 템플릿 제작

layers/templates/GrGallery03/index.vue

@@ -0,0 +1,104 @@
+<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(() => props.components.group_sets)
+
+const subTitleData = ref(getComponentGroup(slideData?.value[0], 'subTitle'))
+const descriptionData = ref(
+  getComponentGroup(slideData?.value[0], 'description')
+)
+const buttonListData = ref(
+  getComponentGroupAry(slideData?.value[0], 'buttonList')
+)
+
+const slideItemSize = {
+  mo: {
+    width: 275,
+    height: 154,
+    gap: 12,
+  },
+  pc: {
+    width: 602,
+    height: 338,
+    gap: 32,
+  },
+}
+
+const handleChange = (
+  _splide: SplideType,
+  newIndex: number,
+  _oldIndex: number,
+  _destIndex: number
+) => {
+  subTitleData.value = getComponentGroup(slideData.value[newIndex], 'subTitle')
+  descriptionData.value = getComponentGroup(
+    slideData.value[newIndex],
+    'description'
+  )
+  buttonListData.value = getComponentGroupAry(
+    slideData.value[newIndex],
+    'buttonList'
+  )
+}
+</script>
+
+<template>
+  <section class="pt-[80px] pb-[100px] md:pt-[120px] md:pb-[140px]">
+    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
+    <div class="section-content px-0 max-w-[2043px] mx-auto">
+      <WidgetsMainTitle
+        v-if="mainTitleData"
+        :resources-data="mainTitleData"
+        class="title-sm"
+      />
+      <BlocksSlideCenterHighlight
+        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">
+            <BlocksVisualContent
+              :resources-data="getComponentGroup(item, 'imgList')"
+              object-fit="cover"
+              :alt="getComponentGroup(item, 'subTitle')?.display?.text"
+            />
+          </div>
+        </SplideSlide>
+      </BlocksSlideCenterHighlight>
+      <WidgetsSubTitle
+        v-if="subTitleData"
+        :resources-data="subTitleData"
+        class="title-md mt-[32px]"
+      />
+      <WidgetsDescription
+        v-if="descriptionData"
+        :resources-data="descriptionData"
+        class="mt-[8px] md:mt-[16px]"
+      />
+      <WidgetsButtonList
+        v-if="buttonListData"
+        :resources-data="buttonListData"
+        class="mt-[32px]"
+      />
+    </div>
+  </section>
+</template>