feat. GR_DETAIL_02 템플릿 제작

layers/templates/GrDetail02/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { SplideSlide } from '@splidejs/vue-splide'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+
+interface Props {
+  components: PageDataTemplateComponents
+  pageVerTmplSeq: string
+}
+
+const props = defineProps<Props>()
+
+const slideData = computed(() => {
+  return getComponentContainer(props.components, 'group_sets', { maxLength: 7 })
+})
+</script>
+
+<template>
+  <section class="section-container relative">
+    <BlocksSlideThumbnail ref="slideThumbnailRef" :slide-data="slideData">
+      <SplideSlide v-for="(item, index) in slideData" :key="index">
+        <WidgetsBackground
+          v-if="hasComponentGroup(item, 'background')"
+          :resources-data="getComponentGroup(item, 'background')"
+        />
+        <div class="section-content">
+          <WidgetsMainTitle
+            v-if="hasComponentGroup(item, 'mainTitle')"
+            :resources-data="getComponentGroup(item, 'mainTitle')"
+            class="title-md"
+          />
+          <WidgetsSubTitle
+            v-if="hasComponentGroup(item, 'subTitle')"
+            :resources-data="getComponentGroup(item, 'subTitle')"
+            class="title-sm mt-0.5 md:mt-1"
+          />
+          <WidgetsDescription
+            v-if="hasComponentGroup(item, 'description')"
+            :resources-data="getComponentGroup(item, 'description')"
+            class="description-lg mt-4 md:mt-6"
+          />
+        </div>
+      </SplideSlide>
+    </BlocksSlideThumbnail>
+  </section>
+</template>