fix. 컴포넌트 dataUtil 통일

layers/templates/GrDetail01/index.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { SplideSlide } from '@splidejs/vue-splide'
+import {
+  getComponentContainer,
+  getComponentGroupAry,
+} from '#layers/utils/dataUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {

layers/templates/GrDetail02/index.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { SplideSlide } from '@splidejs/vue-splide'
+import {
+  getComponentContainer,
+  getComponentGroupAry,
+} from '#layers/utils/dataUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {

layers/templates/GrDetail03/index.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { SplideSlide } from '@splidejs/vue-splide'
+import {
+  getComponentContainer,
+  getComponentGroupAry,
+} from '#layers/utils/dataUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {

layers/templates/GrGallery01/index.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { SplideSlide } from '@splidejs/vue-splide'
+import {
+  getComponentContainer,
+  getComponentGroupAry,
+  getComponentGroup,
+} from '#layers/utils/dataUtil'
 import type {
   PageDataTemplateComponents,
   PageDataTemplateComponentSet,
@@ -61,7 +66,10 @@ const handleVideoClick = (index: number) => {
 }
 
 const stopVideo = () => {
-  playingSlideIndex.value = null
+  // 전환 시간 후 완전히 제거
+  setTimeout(() => {
+    playingSlideIndex.value = null
+  }, 400)
 }
 
 const onArrowClick = (direction, targetIndex) => {
@@ -74,7 +82,7 @@ onMounted(() => {
   nextTick(() => {
     const mainInst = slideThumbnailRef.value?.mainInst
     if (mainInst) {
-      mainInst.on('moved', stopVideo)
+      mainInst.on('move', stopVideo)
     }
   })
 })
@@ -106,7 +114,9 @@ onMounted(() => {
             :src="getMediaImgSrcFromItem(item)"
             alt="main image"
             class="slide-image"
-            :class="{ 'opacity-0': playingSlideIndex === index }"
+            :class="{
+              'opacity-0': playingSlideIndex === index,
+            }"
           />
           <AtomsButtonPlay
             v-if="isPassVideo(item, index)"
@@ -137,6 +147,9 @@ onMounted(() => {
 .main-slide {
   @apply relative aspect-[16/9];
 }
+.slide-image {
+  @apply transition-opacity duration-500 ease-in-out;
+}
 .btn-play {
   @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
 }

layers/templates/GrGallery02/index.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { SplideSlide } from '@splidejs/vue-splide'
-import {
-  getComponentGroup,
-  ensureMinimumSlideData,
-} from '#layers/utils/dataUtil'
+import { getComponentGroup } from '#layers/utils/dataUtil'
 import type { Splide as SplideType } from '@splidejs/splide'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
@@ -21,7 +18,7 @@ const mainTitleData = computed(() =>
   getComponentGroup(props.components, 'mainTitle')
 )
 const slideData = computed(() => {
-  return ensureMinimumSlideData(props.components)
+  return getComponentContainer(props.components, 'group_sets', { minLength: 4 })
 })
 
 const buttonListData = ref(
@@ -43,12 +40,7 @@ const slideItemSize = {
   },
 }
 
-const handleChange = (
-  _splide: SplideType,
-  newIndex: number,
-  _oldIndex: number,
-  _destIndex: number
-) => {
+const handleChange = (_splide: SplideType, newIndex: number) => {
   buttonListData.value = getComponentGroupAry(
     slideData.value[newIndex],
     'buttonList'

layers/templates/GrGallery03/index.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { SplideSlide } from '@splidejs/vue-splide'
-import {
-  getComponentGroup,
-  ensureMinimumSlideData,
-} from '#layers/utils/dataUtil'
+import { getComponentGroup } from '#layers/utils/dataUtil'
 import type { Splide as SplideType } from '@splidejs/splide'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
@@ -20,9 +17,9 @@ const backgroundData = computed(() =>
 const mainTitleData = computed(() =>
   getComponentGroup(props.components, 'mainTitle')
 )
-const slideData = computed(() => {
-  return ensureMinimumSlideData(props.components)
-})
+const slideData = computed(() =>
+  getComponentContainer(props.components, 'group_sets', { minLength: 4 })
+)
 const imgTitleData = ref(getComponentGroup(slideData?.value[0], 'imgTitle'))
 const descriptionData = ref(
   getComponentGroup(slideData?.value[0], 'description')

layers/templates/GrVisual01/index.vue

@@ -44,22 +44,18 @@ const buttonListData = computed(() =>
         :resources-data="descriptionData"
         class="w-full max-w-[355px] md:max-w-[944px]"
       />
-      <client-only>
-        <WidgetsVideoPlay
-          v-if="videoPlayData"
-          :resources-data="videoPlayData"
-          :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
-        />
-      </client-only>
-      <client-only>
-        <WidgetsButtonList
-          v-if="buttonListData.length > 0"
-          :resources-data="buttonListData"
-          :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
-          button-type="market"
-          class="mt-[22px] md:mt-[52px]"
-        />
-      </client-only>
+      <WidgetsVideoPlay
+        v-if="videoPlayData"
+        :resources-data="videoPlayData"
+        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
+      />
+      <WidgetsButtonList
+        v-if="buttonListData.length > 0"
+        button-type="market"
+        :resources-data="buttonListData"
+        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
+        class="mt-[22px] md:mt-[52px]"
+      />
     </div>
   </section>
 </template>

layers/templates/GrVisual02/index.vue

@@ -2,10 +2,12 @@
 import { SplideSlide } from '@splidejs/vue-splide'
 import {
   getComponentGroup,
-  getComponentGroupAry,
-  ensureMinimumSlideOperateData,
+  getComponentContainer,
 } from '#layers/utils/dataUtil'
+import { formatTimestamp } from '#layers/utils/formatUtil'
+import { getResolvedHost } from '#layers/utils/styleUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+import type { OperateGroupItem } from '#layers/types/api/resourcesData'
 
 interface Props {
   components: PageDataTemplateComponents
@@ -16,6 +18,8 @@ const props = defineProps<Props>()
 
 const pageDataStore = usePageDataStore()
 const { getResourcesData } = useResourcesData()
+const { locale } = useI18n()
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
 
 const { pageData } = storeToRefs(pageDataStore)
 
@@ -31,34 +35,35 @@ const descriptionData = computed(() =>
 const videoPlayData = computed(() =>
   getComponentGroup(props.components, 'videoPlay')
 )
-const buttonListData = computed(() =>
-  getComponentGroupAry(props.components, 'buttonList')
-)
 
-// 비동기 데이터 로딩
-const { data: resourcesData } = await useLazyAsyncData(
-  'gr-visual-02-resources',
+const { data: slideData } = await useAsyncData(
+  `gr-visual-02-resources-${pageData.value?.page_seq}-${pageData.value?.page_ver}-${props.pageVerTmplSeq}`,
   async () => {
     if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
-      return null
+      return []
     }
 
-    return await getResourcesData({
+    const operateGroupList = await getResourcesData({
       pageSeq: pageData.value.page_seq,
       pageVer: pageData.value.page_ver,
       pageVerTmplSeq: props.pageVerTmplSeq,
       langCode: 'ko',
     })
+
+    const bannerList = getComponentContainer(operateGroupList, 'bannerList', {
+      hasGroup: true,
+      minLength: 4,
+    }) as OperateGroupItem[]
+
+    console.log('bannerList', bannerList)
+    return bannerList
+  },
+  {
+    default: () => [],
+    server: false,
   }
 )
 
-const slideData = computed(() => {
-  if (!resourcesData.value) return []
-
-  const data = getComponentGroupAry(resourcesData.value, 'bannerList')
-  return ensureMinimumSlideOperateData(data)
-})
-
 const slideItemSize = {
   mo: {
     width: 276,
@@ -71,15 +76,12 @@ const slideItemSize = {
     gap: 32,
   },
 }
-const { locale } = useI18n()
-const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
-const onArrowClick = (direction, targetIndex) => {
+
+const onArrowClick = direction => {
   const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
   const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
   sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
 }
-
-console.log('resourcesData.value===', resourcesData.value)
 </script>
 
 <template>
@@ -105,17 +107,10 @@ console.log('resourcesData.value===', resourcesData.value)
         :resources-data="videoPlayData"
         :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
       />
-
-      <WidgetsButtonList
-        v-if="buttonListData.length > 0"
-        :resources-data="buttonListData"
-        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
-        class="mt-[48px] md:mt-[72px]"
-      />
       <BlocksSlideCenterHighlight
-        v-if="slideData"
+        v-if="slideData && slideData.length > 0"
         :slide-item-size="slideItemSize"
-        :slide-item-length="slideData?.length"
+        :slide-item-length="slideData.length"
         :pagination="false"
         class="mt-[36px] md:mt-[60px]"
         @arrow-click="onArrowClick"

layers/templates/GrVisual03/index.vue

@@ -13,10 +13,9 @@ interface Props {
   pageVerTmplSeq: string
 }
 
-const { locale } = useI18n()
-
 const props = defineProps<Props>()
 
+const { locale } = useI18n()
 const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
 
 const slideData = computed(() => {