fix. scrollTop 버튼 수정

layers/templates/GrContents01/index.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { SplideSlide } from '@splidejs/vue-splide'
-import {
-  getComponentContainer,
-  getComponentGroup,
-} from '#layers/utils/dataUtil'
+import { getComponentGroup } from '#layers/utils/dataUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+import AtomsImg from '#layers/components/atoms/Img.vue'
 
 interface Props {
   components: PageDataTemplateComponents
@@ -13,9 +10,6 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { locale } = useI18n()
-const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
-
 const backgroundData = computed(() =>
   getComponentGroup(props.components, 'background')
 )
@@ -28,21 +22,12 @@ const subTitleData = computed(() =>
 const descriptionData = computed(() =>
   getComponentGroup(props.components, 'description')
 )
-const slideData = computed(() => {
-  return getComponentContainer(props.components, 'group_sets')
+const imgListData = computed(() => {
+  return getComponentGroupAry(props.components, 'imgList')
 })
 const buttonListData = computed(() => {
   return getComponentGroupAry(props.components, 'buttonList')
 })
-const paginationData = computed(() => {
-  return getComponentGroupAry(props.components, 'pagination')
-})
-
-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>
@@ -59,51 +44,15 @@ const onArrowClick = (direction, targetIndex) => {
         :resources-data="subTitleData"
         class="title-sm mt-2 mx-[20px] sm:mx-[40px]"
       />
-      <template v-if="slideData">
-        <div v-if="slideData.length <= 2" class="img-container">
-          <div
-            v-for="(item, index) in slideData"
-            :key="index"
-            :class="[{ 'slide-2': slideData.length === 2 }]"
-          >
-            <AtomsImg
-              :resources-data="getComponentGroup(item, 'imgList')"
-              :page-ver-tmpl-seq="props.pageVerTmplSeq"
-              :alt="getComponentGroup(item, 'subTitle')?.display?.text"
-            />
-          </div>
+      <div v-if="imgListData" class="img-container">
+        <div v-for="(item, index) in imgListData" :key="index" class="img-item">
+          <AtomsImg
+            :resources-data="item"
+            object-fit="contain"
+            :alt="item?.group_label"
+          />
         </div>
-        <BlocksSlideDefault
-          v-else
-          :type="slideData.length === 3 ? 'slide' : 'loop'"
-          :slide-item-length="slideData?.length"
-          :arrows="slideData.length === 3 ? false : true"
-          :pagination="slideData.length === 3 ? false : true"
-          :pagination-data="paginationData"
-          :breakpoints="{
-            1023: {
-              type: 'loop',
-              pagination: false,
-            },
-          }"
-          class="mt-[32px]"
-          @arrow-click="onArrowClick"
-        >
-          <SplideSlide
-            v-for="(item, index) in slideData"
-            :key="index"
-            class="mr-4"
-          >
-            <div class="slide-inner w-[295px] sm:w-[304px]">
-              <AtomsImg
-                :resources-data="getComponentGroup(item, 'imgList')"
-                :page-ver-tmpl-seq="props.pageVerTmplSeq"
-                :alt="getComponentGroup(item, 'subTitle')?.display?.text"
-              />
-            </div>
-          </SplideSlide>
-        </BlocksSlideDefault>
-      </template>
+      </div>
       <WidgetsButtonList
         v-if="buttonListData"
         :resources-data="buttonListData"
@@ -121,26 +70,8 @@ const onArrowClick = (direction, targetIndex) => {
 
 <style scoped>
 .img-container {
-  @apply flex flex-wrap justify-center gap-4 box-content mx-auto mt-[32px]
+  @apply flex flex-wrap items-center justify-center gap-4 box-content mx-auto mt-[32px]
   max-w-[688px] px-[20px] 
   md:max-w-[944px] md:px-[40px];
 }
-.splide {
-  @apply md:max-w-[1088px];
-}
-.splide:deep(.splide__track) {
-  @apply md:w-[944px] md:mx-auto;
-}
-.splide:deep(.splide__track) {
-  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
-}
-.splide:deep(.arrow-next) {
-  @apply md:-right-[0];
-}
-.splide:deep(.arrow-prev) {
-  @apply md:-left-[0];
-}
-.slide-2 {
-  @apply max-w-[335px] md:max-w-[464px];
-}
 </style>