Resolve merge conflicts in ButtonList.vue and pageData.ts

layers/templates/GrGallery01/index.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { getComponentGroup } from '#layers/utils/dataUtil'
+import {
+  getComponentGroup,
+  ensureMinimumSlideData,
+} from '#layers/utils/dataUtil'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {
-  components: Record<string, any>
+  components: PageDataTemplateComponents
   pageVerTmplSeq: string
 }
 
@@ -15,11 +19,7 @@ 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
+  return ensureMinimumSlideData(props.components)
 })
 const videoPlayData = computed(() =>
   getComponentGroup(props.components, 'videoPlay')

layers/templates/GrGallery02/index.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { SplideSlide } from '@splidejs/vue-splide'
-import { getComponentGroup } from '#layers/utils/dataUtil'
+import {
+  getComponentGroup,
+  ensureMinimumSlideData,
+} from '#layers/utils/dataUtil'
 import type { Splide as SplideType } from '@splidejs/splide'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {
-  components: Record<string, any>
+  components: PageDataTemplateComponents
   pageVerTmplSeq: string
 }
 
@@ -17,12 +21,9 @@ 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
+  return ensureMinimumSlideData(props.components)
 })
+
 const buttonListData = ref(
   getComponentGroupAry(slideData?.value[0], 'buttonList')
 )
@@ -91,3 +92,10 @@ const handleChange = (
     </div>
   </section>
 </template>
+
+<style scoped>
+.section-container {
+  @apply before:hidden md:before:block before:content-[''] before:absolute before:top-0 before:left-0 before:w-[104px] before:h-full before:bg-gradient-to-l from-transparent to-[rgba(0,0,0,0.7)] 
+  after:hidden md:after:block after:content-[''] after:absolute after:top-0 after:right-0 after:w-[104px] after:h-full after:bg-gradient-to-r from-transparent to-[rgba(0,0,0,0.7)];
+}
+</style>

layers/templates/GrGallery03/index.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { SplideSlide } from '@splidejs/vue-splide'
-import { getComponentGroup } from '#layers/utils/dataUtil'
+import {
+  getComponentGroup,
+  ensureMinimumSlideData,
+} from '#layers/utils/dataUtil'
 import type { Splide as SplideType } from '@splidejs/splide'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {
-  components: Record<string, any>
+  components: PageDataTemplateComponents
   pageVerTmplSeq: string
 }
 
@@ -17,11 +21,7 @@ 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
+  return ensureMinimumSlideData(props.components)
 })
 const subTitleData = ref(getComponentGroup(slideData?.value[0], 'subTitle'))
 const descriptionData = ref(

layers/templates/GrVisual01/index.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {
-  components: Record<string, any>
+  components: PageDataTemplateComponents
   pageVerTmplSeq: string
 }
 
@@ -36,12 +37,12 @@ const buttonListData = computed(() =>
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="w-[355px] md:w-[944px]"
+        class="w-full max-w-[355px] md:max-w-[944px]"
       />
       <WidgetsDescription
         v-if="descriptionData"
         :resources-data="descriptionData"
-        class="w-[355px] md:w-[944px]"
+        class="w-full max-w-[355px] md:max-w-[944px]"
       />
       <client-only>
         <WidgetsVideoPlay

layers/templates/GrVisual02/index.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
 import { SplideSlide } from '@splidejs/vue-splide'
-import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
+import {
+  getComponentGroup,
+  getComponentGroupAry,
+  ensureMinimumSlideOperateData,
+} from '#layers/utils/dataUtil'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {
-  components: Record<string, any>
+  components: PageDataTemplateComponents
   pageVerTmplSeq: string
 }
 
@@ -48,20 +53,10 @@ const { data: resourcesData } = await useLazyAsyncData(
 )
 
 const slideData = computed(() => {
-  const operateComponents = resourcesData.value?.operate_components
+  if (!resourcesData.value) return []
 
-  if (!operateComponents) {
-    return []
-  }
-
-  const firstKey = Object.keys(operateComponents)[0]
-  const data = operateComponents[firstKey]?.list_operate_groups || []
-
-  if (data.length < 3) {
-    return [...data, ...data]
-  }
-
-  return data
+  const data = getComponentGroupAry(resourcesData.value, 'bannerList')
+  return ensureMinimumSlideOperateData(data)
 })
 
 const slideItemSize = {
@@ -89,12 +84,12 @@ const slideItemSize = {
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="w-[355px] md:w-[944px]"
+        class="w-full max-w-[355px] md:max-w-[944px]"
       />
       <WidgetsDescription
         v-if="descriptionData"
         :resources-data="descriptionData"
-        class="w-[355px] md:w-[944px]"
+        class="w-full max-w-[355px] md:max-w-[944px]"
       />
       <WidgetsVideoPlay
         v-if="videoPlayData"

layers/templates/GrVisual03/index.vue

@@ -5,9 +5,10 @@ import {
   getComponentGroup,
   getComponentGroupAry,
 } from '#layers/utils/dataUtil'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {
-  components: Record<string, any>
+  components: PageDataTemplateComponents
   pageVerTmplSeq: string
 }