112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
|
|
|
|
interface Props {
|
|
components: Record<string, any>
|
|
pageVerTmplSeq: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const pageDataStore = usePageDataStore()
|
|
const { getResourcesData } = useResourcesData()
|
|
|
|
const { pageData } = storeToRefs(pageDataStore)
|
|
|
|
const backgroundData = computed(() =>
|
|
getComponentGroup(props.components, 'background')
|
|
)
|
|
const mainTitleData = computed(() =>
|
|
getComponentGroup(props.components, 'mainTitle')
|
|
)
|
|
const descriptionData = computed(() =>
|
|
getComponentGroup(props.components, 'description')
|
|
)
|
|
const videoPlayData = computed(() =>
|
|
getComponentGroup(props.components, 'videoPlay')
|
|
)
|
|
const buttonListData = computed(() =>
|
|
getComponentGroupAry(props.components, 'buttonList')
|
|
)
|
|
|
|
// 비동기 데이터 로딩
|
|
const { data: resourcesData } = await useLazyAsyncData(
|
|
'gr-visual-02-resources',
|
|
async () => {
|
|
if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
|
|
return null
|
|
}
|
|
|
|
return await getResourcesData({
|
|
pageSeq: pageData.value.page_seq,
|
|
pageVer: pageData.value.page_ver,
|
|
pageVerTmplSeq: props.pageVerTmplSeq,
|
|
langCode: 'ko',
|
|
})
|
|
}
|
|
)
|
|
|
|
// 배너 리스트 데이터 추출
|
|
const bannerListData = computed(() => {
|
|
const operateComponents = resourcesData.value?.operate_components
|
|
|
|
if (!operateComponents) {
|
|
return []
|
|
}
|
|
|
|
const firstKey = Object.keys(operateComponents)[0]
|
|
return operateComponents[firstKey]?.list_operate_groups || []
|
|
})
|
|
|
|
const bannerSize = {
|
|
mo: {
|
|
width: 293,
|
|
height: 185,
|
|
gap: 12,
|
|
},
|
|
pc: {
|
|
width: 455,
|
|
height: 287,
|
|
gap: 32,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="relative h-[640px] md:h-[1000px]">
|
|
<WidgetsBackground
|
|
v-if="backgroundData"
|
|
:resources-data="backgroundData"
|
|
:gradient="true"
|
|
/>
|
|
<div
|
|
class="relative h-full flex flex-col items-center justify-center gap-4 md:gap-5"
|
|
>
|
|
<WidgetsMainTitle
|
|
v-if="mainTitleData"
|
|
:resources-data="mainTitleData"
|
|
class="w-[355px] md:w-[944px]"
|
|
/>
|
|
<WidgetsDescription
|
|
v-if="descriptionData"
|
|
:resources-data="descriptionData"
|
|
class="w-[355px] md:w-[944px]"
|
|
/>
|
|
<WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
|
|
<WidgetsButtonList
|
|
v-if="buttonListData.length > 0"
|
|
:groups-data="buttonListData"
|
|
class="mt-[48px] md:mt-[72px]"
|
|
/>
|
|
<WidgetsBannerList
|
|
:slide-item-list="bannerListData"
|
|
:slide-item-size="bannerSize"
|
|
:arrows="true"
|
|
:pagination="false"
|
|
class="mt-[36px] md:mt-[60px]"
|
|
/>
|
|
</div>
|
|
</section>
|
|
</template>
|