Merge branch 'feature/20250910-all' into feature/20251001-gil

2025-10-21 13:53:22 +09:00
parent a36489c264 d8ee0ed926
commit c1e18d6ca9
22 changed files with 619 additions and 181 deletions
--- a/layers/templates/GrDetail01/index.vue
+++ b/layers/templates/GrDetail01/index.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { SplideSlide } from '@splidejs/vue-splide'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+
+interface Props {
+  components: PageDataTemplateComponents
+  pageVerTmplSeq: string
+}
+
+const props = defineProps<Props>()
+
+const splideRef = ref<SplideSlide | null>(null)
+const currentSlide = ref<number | null>(null)
+
+const slideData = computed(() => {
+  return getComponentContainer(props.components, 'group_sets', { maxLength: 5 })
+})
+const paginationData = computed(() => {
+  return getComponentGroupAry(props.components, 'pagination')
+})
+
+const goToSlide = (index: number) => {
+  const splide = splideRef.value?.splide
+  if (splide) {
+    splide.go(index)
+  }
+}
+
+onMounted(() => {
+  nextTick(() => {
+    const splide = splideRef.value?.splide
+    if (splide) {
+      currentSlide.value = splide.index
+
+      splide.on('move', (newIndex: number) => {
+        currentSlide.value = newIndex
+      })
+    }
+  })
+})
+</script>
+
+<template>
+  <section class="section-container relative">
+    <BlocksSlideFade
+      v-if="slideData"
+      ref="splideRef"
+      :autoplay="true"
+      :interval="5000"
+      :arrows="false"
+      :pagination="false"
+      class="h-full"
+    >
+      <SplideSlide v-for="(item, index) in slideData" :key="index">
+        <WidgetsBackground
+          v-if="hasComponentGroup(item, 'background')"
+          :resources-data="getComponentGroup(item, 'background')"
+        />
+        <div class="section-content">
+          <WidgetsMainTitle
+            v-if="hasComponentGroup(item, 'mainTitle')"
+            :resources-data="getComponentGroup(item, 'mainTitle')"
+            class="title-md"
+          />
+          <WidgetsSubTitle
+            v-if="hasComponentGroup(item, 'subTitle')"
+            :resources-data="getComponentGroup(item, 'subTitle')"
+            class="title-sm mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
+          />
+          <WidgetsDescription
+            v-if="hasComponentGroup(item, 'description')"
+            :resources-data="getComponentGroup(item, 'description')"
+            class="description-lg mt-4 md:mt-6"
+          />
+        </div>
+      </SplideSlide>
+    </BlocksSlideFade>
+    <div
+      v-if="slideData && slideData.length > 1"
+      class="splide-pagination"
+      :style="getPaginationClass(paginationData)"
+    >
+      <div
+        v-for="(item, index) in slideData"
+        :key="index"
+        :class="[
+          'pagination-item',
+          {
+            'is-active': currentSlide === index,
+            'is-completed': index < currentSlide,
+          },
+        ]"
+      >
+        <button
+          :class="['btn-pagination', { 'is-active': currentSlide === index }]"
+          @click="goToSlide(index)"
+        >
+          <span class="item-bullet"></span>
+          <span class="item-title">
+            {{ getComponentGroup(item, 'pagenaviTitle')?.display?.text || '' }}
+          </span>
+        </button>
+        <div v-if="index !== slideData.length - 1" class="progress-bar">
+          <span class="progress-fill"></span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.splide-pagination {
+  @apply flex items-center absolute bottom-10 left-1/2 -translate-x-1/2 z-10 md:bottom-[96px];
+}
+.btn-pagination {
+  @apply relative;
+}
+.pagination-item {
+  @apply flex items-center;
+}
+.item-bullet {
+  @apply block w-3 h-3 rounded-full transition-all duration-300;
+  background-color: var(--pagination-disabled);
+}
+.item-title {
+  @apply hidden absolute -bottom-[46px] left-1/2 -translate-x-1/2 whitespace-nowrap text-sm font-medium md:block;
+  color: var(--pagination-disabled);
+}
+.progress-bar {
+  @apply relative w-[68px] h-0.5 overflow-hidden md:w-[184px];
+  background-color: var(--pagination-disabled);
+}
+.progress-fill {
+  @apply absolute inset-y-0 left-0 w-[0];
+  background-color: var(--pagination-active);
+}
+
+/* 활성화 상태 (현재 슬라이드) */
+.is-active .item-bullet {
+  background-color: var(--pagination-active);
+}
+.is-active .item-title {
+  color: var(--pagination-active);
+}
+.is-active .progress-fill {
+  animation: progressFill 5000ms linear forwards;
+}
+
+/* 완료 상태 (지나간 슬라이드) */
+.is-completed .item-bullet {
+  background-color: var(--pagination-active);
+}
+.is-completed .progress-fill {
+  width: 100%;
+}
+
+@keyframes progressFill {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
+</style>
--- a/layers/templates/GrDetail02/index.vue
+++ b/layers/templates/GrDetail02/index.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { SplideSlide } from '@splidejs/vue-splide'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+
+interface Props {
+  components: PageDataTemplateComponents
+  pageVerTmplSeq: string
+}
+
+const props = defineProps<Props>()
+
+const slideData = computed(() => {
+  return getComponentContainer(props.components, 'group_sets', { maxLength: 7 })
+})
+const paginationData = computed(() => {
+  return getComponentGroupAry(props.components, 'pagination')
+})
+</script>
+
+<template>
+  <section class="section-container relative">
+    <BlocksSlideThumbnail
+      :slide-data="slideData"
+      :pagination-data="paginationData"
+    >
+      <SplideSlide v-for="(item, index) in slideData" :key="index">
+        <WidgetsBackground
+          v-if="hasComponentGroup(item, 'background')"
+          :resources-data="getComponentGroup(item, 'background')"
+        />
+        <div class="section-content">
+          <WidgetsMainTitle
+            v-if="hasComponentGroup(item, 'mainTitle')"
+            :resources-data="getComponentGroup(item, 'mainTitle')"
+            class="title-md"
+          />
+          <WidgetsSubTitle
+            v-if="hasComponentGroup(item, 'subTitle')"
+            :resources-data="getComponentGroup(item, 'subTitle')"
+            class="title-sm mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
+          />
+          <WidgetsDescription
+            v-if="hasComponentGroup(item, 'description')"
+            :resources-data="getComponentGroup(item, 'description')"
+            class="description-lg mt-4 md:mt-6"
+          />
+        </div>
+      </SplideSlide>
+    </BlocksSlideThumbnail>
+  </section>
+</template>
--- a/layers/templates/GrDetail03/index.vue
+++ b/layers/templates/GrDetail03/index.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { SplideSlide } from '@splidejs/vue-splide'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+
+interface Props {
+  components: PageDataTemplateComponents
+  pageVerTmplSeq: string
+}
+
+const props = defineProps<Props>()
+
+const slideData = computed(() => {
+  return getComponentContainer(props.components, 'group_sets', {
+    maxLength: 10,
+  })
+})
+const paginationData = computed(() => {
+  return getComponentGroupAry(props.components, 'pagination')
+})
+</script>
+
+<template>
+  <section class="section-container relative">
+    <BlocksSlideThumbnail
+      :slide-data="slideData"
+      :pagination-data="paginationData"
+    >
+      <SplideSlide v-for="(item, index) in slideData" :key="index">
+        <WidgetsBackground
+          v-if="hasComponentGroup(item, 'background')"
+          :resources-data="getComponentGroup(item, 'background')"
+        />
+        <div class="section-content max-w-[1024px] mx-auto items-start">
+          <WidgetsSubTitle
+            v-if="hasComponentGroup(item, 'category')"
+            :resources-data="getComponentGroup(item, 'category')"
+            class="title-sm mb-2 line-clamp-1 text-left md:mb-5"
+          />
+          <WidgetsMainTitle
+            v-if="hasComponentGroup(item, 'mainTitle')"
+            :resources-data="getComponentGroup(item, 'mainTitle')"
+            class="title-md line-clamp-1 text-left"
+          />
+          <WidgetsSubTitle
+            v-if="hasComponentGroup(item, 'subTitle')"
+            :resources-data="getComponentGroup(item, 'subTitle')"
+            class="title-sm mt-1 line-clamp-1 text-left"
+          />
+          <WidgetsDescription
+            v-if="hasComponentGroup(item, 'description')"
+            :resources-data="getComponentGroup(item, 'description')"
+            class="description-lg mt-2 text-left md:mt-5"
+          />
+        </div>
+      </SplideSlide>
+    </BlocksSlideThumbnail>
+  </section>
+</template>
--- a/layers/templates/GrGallery01/index.vue
+++ b/layers/templates/GrGallery01/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import {
-  getComponentGroup,
-  ensureMinimumSlideData,
-} from '#layers/utils/dataUtil'
-import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+import { SplideSlide } from '@splidejs/vue-splide'
+import type {
+  PageDataTemplateComponents,
+  PageDataTemplateComponentSet,
+} from '#layers/types/api/pageData'

 interface Props {
  components: PageDataTemplateComponents
@@ -12,42 +12,156 @@ interface Props {

 const props = defineProps<Props>()

+const { locale } = useI18n()
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+
+const slideThumbnailRef = ref<any>(null)
+const playingSlideIndex = ref<number | null>(null)
+
 const backgroundData = computed(() =>
  getComponentGroup(props.components, 'background')
 )
 const mainTitleData = computed(() =>
  getComponentGroup(props.components, 'mainTitle')
 )
-const slideData = computed(() => {
-  return ensureMinimumSlideData(props.components)
-})
-const videoPlayData = computed(() =>
+const slideData = computed(() =>
+  getComponentContainer(props.components, 'group_sets')
+)
+const _videoPlayData = computed(() =>
  getComponentGroup(props.components, 'videoPlay')
 )

-const {locale} = useI18n()
-const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+const getMediaComponent = (item: PageDataTemplateComponentSet) => {
+  return getComponentGroup(item, 'media')
+}
+
+const getMediaImgSrcFromItem = (item: PageDataTemplateComponentSet) => {
+  const mediaComponent = getMediaComponent(item)
+  return mediaComponent ? getMediaImgSrc(mediaComponent) : ''
+}
+
+const getYouTubeEmbedUrlFromMedia = (item: PageDataTemplateComponentSet) => {
+  const mediaComponent = getMediaComponent(item)
+  if (!mediaComponent) return ''
+  const mediaSrc = getMediaSrc(mediaComponent)
+  return mediaSrc ? getYouTubeEmbedUrl(mediaSrc, true) : ''
+}
+
+const isPassVideo = (item: PageDataTemplateComponentSet, index: number) => {
+  const mediaComponent = getMediaComponent(item)
+  const isNotPlaying = index !== playingSlideIndex.value
+  const isVideoType =
+    mediaComponent && isTypeVideo(mediaComponent?.resource_type)
+
+  return isVideoType && isNotPlaying
+}
+
+const handleVideoClick = (index: number) => {
+  playingSlideIndex.value = index
+
+  const group = getComponentGroup(props.components, 'videoPlay')
+  const base = group?.tracking?.click_item || ''
+  const next = base
+    ? base.replace(/(^.*_)(\d+)$/, `$1${index}`) === base
+      ? `${base}_${index}`
+      : base.replace(/(^.*_)(\d+)$/, `$1${index}`)
+    : `${index}`
+
+  const sendingGroup = group
+    ? { ...group, tracking: { ...group.tracking, click_item: next } }
+    : group
+
+  sendLog(
+    locale.value,
+    useAnalyticsLogDataDirect(
+      (sendingGroup as any) || getComponentGroup(props.components, 'videoPlay'),
+      1
+    )
+  )
+}
+
+const stopVideo = () => {
+  playingSlideIndex.value = null
+}
+
 const onArrowClick = (direction, targetIndex) => {
-  const logTraking = direction == 'prev' ? props.components.arrow.groups[0] : props.components.arrow.groups[1];
+  const logTraking = direction == 'prev' ? 
+  getComponentGroupAry(props.components, 'arrow')[0] :
+  getComponentGroupAry(props.components, 'arrow')[1];
  sendLog(locale.value, useAnalyticsLogDataDirect(logTraking, 1))
 }
+
+onMounted(() => {
+  nextTick(() => {
+    const mainInst = slideThumbnailRef.value?.mainInst
+    if (mainInst) {
+      mainInst.on('moved', stopVideo)
+    }
+  })
+})
 </script>

 <template>
-  <section class="section-container">
+  <section class="section-container min-h-[700px]">
    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
    <div class="section-content">
-      <WidgetsMainTitle 
+      <WidgetsMainTitle
        v-if="mainTitleData"
        :resources-data="mainTitleData"
        class="title-sm"
      />
      <BlocksSlideThumbnail
+        ref="slideThumbnailRef"
        :slide-data="slideData"
-        :video-play="videoPlayData"
+        variant="media"
+        :drag="false"
        class="mt-[24px] md:mt-[32px]"
        @arrow-click="onArrowClick"
-      />
+      >
+        <SplideSlide
+          v-for="(item, index) in slideData"
+          :key="item.set_order || index"
+          class="main-slide"
+        >
+          <img
+            :src="getMediaImgSrcFromItem(item)"
+            alt="main image"
+            class="slide-image"
+            :class="{ 'opacity-0': playingSlideIndex === index }"
+          />
+          <AtomsButtonPlay
+            v-if="isPassVideo(item, index)"
+            class="btn-play"
+            @click="handleVideoClick(index)"
+          />
+          <iframe
+            v-if="playingSlideIndex === index"
+            :src="getYouTubeEmbedUrlFromMedia(item)"
+            class="video-iframe"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          />
+        </SplideSlide>
+      </BlocksSlideThumbnail>
    </div>
  </section>
 </template>
+
+<style scoped>
+.thumbnail-carousel {
+  @apply w-full md:max-w-[944px];
+}
+.thumbnail-carousel:deep(.main-splide) {
+  @apply overflow-hidden rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
+}
+.main-slide {
+  @apply relative aspect-[16/9];
+}
+.btn-play {
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+.video-iframe {
+  @apply absolute top-0 left-0 w-full h-full object-cover;
+}
+</style>
--- a/layers/templates/GrGallery02/index.vue
+++ b/layers/templates/GrGallery02/index.vue
@@ -54,10 +54,13 @@ const handleChange = (
    'buttonList'
  )
 }
-const {locale} = useI18n()
+const { locale } = useI18n()
 const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
 const onArrowClick = (direction, targetIndex) => {
-  const logTraking = direction == 'prev' ? props.components.arrow.groups[0] : props.components.arrow.groups[1];
+  const logTraking =
+    direction == 'prev'
+      ? getComponentGroupAry(props.components, 'arrow')?.groups[0]
+      : getComponentGroupAry(props.components, 'arrow')?.groups[1]
  sendLog(locale.value, useAnalyticsLogDataDirect(logTraking, 1))
 }
 </script>
--- a/layers/templates/GrGallery03/index.vue
+++ b/layers/templates/GrGallery03/index.vue
@@ -23,7 +23,7 @@ const mainTitleData = computed(() =>
 const slideData = computed(() => {
  return ensureMinimumSlideData(props.components)
 })
-const subTitleData = ref(getComponentGroup(slideData?.value[0], 'subTitle'))
+const imgTitleData = ref(getComponentGroup(slideData?.value[0], 'imgTitle'))
 const descriptionData = ref(
  getComponentGroup(slideData?.value[0], 'description')
 )
@@ -50,7 +50,7 @@ const handleChange = (
  _oldIndex: number,
  _destIndex: number
 ) => {
-  subTitleData.value = getComponentGroup(slideData.value[newIndex], 'subTitle')
+  imgTitleData.value = getComponentGroup(slideData.value[newIndex], 'imgTitle')
  descriptionData.value = getComponentGroup(
    slideData.value[newIndex],
    'description'
@@ -91,15 +91,15 @@ const onArrowClick = (direction, targetIndex) => {
            <BlocksVisualContent
              :resources-data="getComponentGroup(item, 'imgList')"
              object-fit="cover"
-              :alt="getComponentGroup(item, 'subTitle')?.display?.text"
+              :alt="getComponentGroup(item, 'imgTitle')?.display?.text"
            />
          </div>
        </SplideSlide>
      </BlocksSlideCenterHighlight>
      <WidgetsSubTitle
-        v-if="subTitleData"
-        :resources-data="subTitleData"
-        class="title-md mt-[32px]"
+        v-if="imgTitleData"
+        :resources-data="imgTitleData"
+        class="title-md mt-[32px] line-clamp-2 md:line-clamp-1"
      />
      <WidgetsDescription
        v-if="descriptionData"
--- a/layers/templates/GrVisual03/index.vue
+++ b/layers/templates/GrVisual03/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { SplideSlide } from '@splidejs/vue-splide'
 import {
-  hasComponentGroup,
-  getComponentGroup,
+  getComponentContainer,
  getComponentGroupAry,
+  getComponentGroup,
+  hasComponentGroup,
 } from '#layers/utils/dataUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'

@@ -12,13 +13,21 @@ interface Props {
  pageVerTmplSeq: string
 }

-const {locale} = useI18n()
+const { locale } = useI18n()

 const props = defineProps<Props>()

 const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
-const onArrowClick = (direction, targetIndex) => {
-  const logTraking = direction == 'prev' ? props.components.arrow.groups[0] : props.components.arrow.groups[1];
+
+const slideData = computed(() => {
+  return getComponentContainer(props.components, 'group_sets')
+})
+
+const onArrowClick = direction => {
+  const logTraking =
+    direction == 'prev'
+      ? getComponentGroupAry(props.components, 'arrow')?.groups[0]
+      : getComponentGroupAry(props.components, 'arrow')?.groups[1]
  sendLog(locale.value, useAnalyticsLogDataDirect(logTraking, 1))
 }
 </script>
@@ -26,16 +35,13 @@ const onArrowClick = (direction, targetIndex) => {
 <template>
  <section class="section-container">
    <BlocksSlideFade
-      v-if="props.components?.group_sets"
+      v-if="slideData"
      :arrows="true"
      :pagination="true"
      class="h-full"
      @arrow-click="onArrowClick"
    >
-      <SplideSlide
-        v-for="(item, index) in props.components.group_sets"
-        :key="index"
-      >
+      <SplideSlide v-for="(item, index) in slideData" :key="index">
        <WidgetsBackground
          v-if="hasComponentGroup(item, 'background')"
          :resources-data="getComponentGroup(item, 'background')"