feat. ScrollTop 버튼 추가

layers/templates/GrBoard01/index.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { SplideSlide } from '@splidejs/vue-splide'
+import {
+  getComponentContainer,
+  getComponentGroup,
+} from '#layers/utils/dataUtil'
+import type { Splide as SplideType } from '@splidejs/splide'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+import type { OperateGroupItem } from '#layers/types/api/resourcesData'
+
+interface Props {
+  components: PageDataTemplateComponents
+  pageVerTmplSeq: number
+}
+
+const props = defineProps<Props>()
+
+const pageDataStore = usePageDataStore()
+const { getResourcesData } = useResourcesData()
+const { locale } = useI18n()
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+
+const { pageData } = storeToRefs(pageDataStore)
+
+const backgroundData = computed(() =>
+  getComponentGroup(props.components, 'background')
+)
+const mainTitleData = computed(() =>
+  getComponentGroup(props.components, 'mainTitle')
+)
+
+// const buttonListData = ref(
+//   getComponentGroupAry(slideData?.value[0], 'buttonList')
+// )
+
+const { data: slideData } = await useAsyncData(
+  `gr-board-01-resources-${pageData.value?.page_seq}-${pageData.value?.page_ver}-${props.pageVerTmplSeq}`,
+  async () => {
+    if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
+      return []
+    }
+
+    const operateGroupList = await getResourcesData({
+      pageSeq: pageData.value.page_seq,
+      pageVer: pageData.value.page_ver,
+      pageVerTmplSeq: props.pageVerTmplSeq,
+      langCode: locale.value,
+    })
+
+    console.log('operateGroupList', operateGroupList)
+
+    const bannerList = getComponentContainer(operateGroupList, 'bannerList', {
+      hasGroup: true,
+      minLength: 4,
+    }) as OperateGroupItem[]
+
+    return bannerList
+  },
+  {
+    default: () => [],
+    server: false,
+  }
+)
+
+const onArrowClick = (direction, targetIndex) => {
+  const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
+  const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
+  sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
+}
+</script>
+
+<template>
+  <section class="relative py-[80px] md:py-[120px]">
+    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
+    <div class="section-content px-0">
+      <WidgetsMainTitle
+        v-if="mainTitleData"
+        :resources-data="mainTitleData"
+        class="title-md"
+      />
+      <BlocksSlideDefault
+        v-if="slideData"
+        :slide-item-length="slideData?.length"
+        :pagination="false"
+        class="mt-[24px] md:mt-[48px]"
+        @arrow-click="onArrowClick"
+      >
+        <SplideSlide v-for="(item, index) in slideData" :key="index">
+          <div class="slide-inner border-line">
+            <BlocksVisualContent
+              :resources-data="getComponentGroup(item, 'imgList')"
+              :page-ver-tmpl-seq="props.pageVerTmplSeq"
+              object-fit="cover"
+              :alt="getComponentGroup(item, 'subTitle')?.display?.text"
+            />
+          </div>
+        </SplideSlide>
+      </BlocksSlideDefault>
+      <!-- <WidgetsButtonList
+        v-if="buttonListData"
+        :resources-data="buttonListData"
+        :page-ver-tmpl-seq="props.pageVerTmplSeq"
+        class="mt-[40px] md:mt-[56px]"
+      /> -->
+    </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/GrDetail01/index.vue

@@ -115,7 +115,7 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
 
 <style scoped>
 .splide-pagination {
-  @apply flex items-center absolute bottom-10 left-1/2 -translate-x-1/2 z-10 md:bottom-[96px];
+  @apply flex items-center absolute bottom-10 left-1/2 -translate-x-1/2 z-[5] md:bottom-[96px];
 }
 .btn-pagination {
   @apply relative;