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/app/pages/[d1]/[d2]/index.vue
+++ b/app/pages/[d1]/[d2]/index.vue
@@ -4,7 +4,6 @@ import { getLayoutType } from '#layers/utils/dataUtil'

 const pageDataStore = usePageDataStore()
 const { pageData } = storeToRefs(pageDataStore)
-console.log("🚀 d2 index ~ pageData:", pageData)

 const currentLayout = computed(() => getLayoutType(pageData.value))

--- a/layers/assets/css/components/_layout.css
+++ b/layers/assets/css/components/_layout.css
@@ -16,10 +16,10 @@

  /* Title Utility Classes */
  .title-lg {
-    @apply line-clamp-3 text-[24px] font-[700] leading-[34px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:text-[50px] md:leading-[70px];
+    @apply line-clamp-4 text-[24px] font-[700] leading-[34px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[50px] md:leading-[70px];
  }
  .title-md {
-    @apply line-clamp-2 text-[20px] font-[700] leading-[30px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-1 md:text-[42px] md:leading-[56px];
+    @apply line-clamp-4 text-[20px] font-[700] leading-[30px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3 md:text-[42px] md:leading-[56px];
  }
  .title-sm {
    @apply line-clamp-2 text-[16px] font-[500] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-1 md:text-[24px] md:leading-[34px];
@@ -29,6 +29,6 @@

  /* Description Utility Classes */
  .description-lg {
-    @apply line-clamp-3 text-[15px] font-[400] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:text-[20px] md:leading-[30px];
+    @apply line-clamp-4 text-[15px] font-[400] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-3  md:text-[20px] md:leading-[30px];
  }
 }
--- a/layers/components/atoms/Button/Play.vue
+++ b/layers/components/atoms/Button/Play.vue
@@ -12,7 +12,7 @@ const emit = defineEmits<{

 <style scoped>
 .btn-play {
-  @apply relative w-[66px] h-[66px] bg-[image:var(--video-play)] bg-cover bg-center bg-no-repeat md:w-[100px] md:h-[100px]
+  @apply relative w-[60px] h-[60px] bg-[image:var(--video-play)] bg-cover bg-center bg-no-repeat md:w-[80px] md:h-[80px]
  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-[50%] after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out
  hover:after:opacity-10;
 }
--- a/layers/components/atoms/Button/index.vue
+++ b/layers/components/atoms/Button/index.vue
@@ -14,7 +14,7 @@ interface props {

 const props = withDefaults(defineProps<props>(), {
  type: 'action',
-  buttonSize: 'size-extra-small md:size-large',
+  buttonSize: 'size-small md:size-large',
  backgroundColor: 'var(--primary)',
  textColor: 'var(--alternative-02)',
  disabled: false,
--- a/layers/components/blocks/ButtonLuncher.vue
+++ b/layers/components/blocks/ButtonLuncher.vue
@@ -10,8 +10,10 @@ const {

 <template>
  <AtomsButton
+    button-size="size-small md:size-small"
    :class="$attrs?.class"
    :disabled="isProcessing"
+    style="font-size: 16px"
    @click="validateLauncher"
  >
    <slot />
--- a/layers/components/blocks/slide/Fade.vue
+++ b/layers/components/blocks/slide/Fade.vue
@@ -16,11 +16,11 @@ const props = withDefaults(defineProps<Props>(), {
  pagination: true,
 })

-
 const emit = defineEmits(['mounted', 'move', 'moved', 'arrowClick'])

 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
+const splideRef = ref()

 const options = computed((): ResponsiveOptions => {
  return {
@@ -31,6 +31,8 @@ const options = computed((): ResponsiveOptions => {
    speed: 600,
    updateOnMove: true,
    autoplay: props.autoplay,
+    pauseOnHover: false,
+    pauseOnFocus: false,
    arrows: props.arrows,
    pagination: props.pagination,
    classes: {
@@ -44,11 +46,14 @@ const options = computed((): ResponsiveOptions => {
  }
 })

+defineExpose({
+  splide: computed(() => splideRef.value?.splide),
+})

 const handleSplideMounted = (splide: SplideType) => {
  emit('mounted', splide)
  splide.refresh()
-  
+
  // 화살표 버튼 클릭 이벤트 리스너 추가
  nextTick(() => {
    addArrowClickListeners(splide, (direction, targetIndex) => {
@@ -78,8 +83,9 @@ const handleMoved = (
 </script>

 <template>
-  <Splide 
-    :options="options" 
+  <Splide
+    ref="splideRef"
+    :options="options"
    class="h-full"
    @splide:mounted="handleSplideMounted"
    @splide:move="handleMove"
--- a/layers/components/blocks/slide/Thumbnail.vue
+++ b/layers/components/blocks/slide/Thumbnail.vue
@@ -1,43 +1,42 @@
 <script setup lang="ts">
 import { Splide, SplideSlide } from '@splidejs/vue-splide'
-import { getComponentGroup, isTypeVideo } from '#layers/utils/dataUtil'
-import {
-  getMediaSrc,
-  getYouTubeEmbedUrl,
-  getMediaImgSrc,
-} from '#layers/utils/youtube'
 import type { Splide as SplideType, Options } from '@splidejs/splide'
 import type {
  PageDataTemplateComponentSet,
-  PageDataResourceGroup,
+  PageDataResourceGroups,
 } from '#layers/types/api/pageData'
 import { useSplideArrow } from '#layers/composables/useSplideArrow'

 interface Props {
  slideData: PageDataTemplateComponentSet[]
-  videoPlay?: PageDataResourceGroup
-  arrows?: boolean
-  pagination?: boolean
-  class?: string
-  style?: Record<string, string>
+  paginationData?: PageDataResourceGroups
+  variant?: 'default' | 'media'
+  drag?: boolean
 }

-const {locale} = useI18n()
-const props = defineProps<Props>()
-const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()

 const emit = defineEmits(['arrowClick'])

 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()

+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  drag: true,
+})

 let mainInst: SplideType | null = null
 let thumbsInst: SplideType | null = null

+defineExpose({
+  mainInst: computed(() => mainInst),
+  thumbsInst: computed(() => thumbsInst),
+})
+
+const breakpoints = useResponsiveBreakpointsReliable()
+
 const mainRef = ref<InstanceType<typeof Splide> | null>(null)
 const thumbsRef = ref<InstanceType<typeof Splide> | null>(null)
-const playingSlideIndex = ref<number | null>(null)

 const mainOptions = computed<Options>(() => ({
  type: 'fade',
@@ -47,7 +46,7 @@ const mainOptions = computed<Options>(() => ({
  speed: 600,
  arrows: false,
  pagination: false,
-  drag: false,
+  drag: props.drag,
 }))

 const thumbOptions = computed<Options>(() => ({
@@ -68,49 +67,24 @@ const thumbOptions = computed<Options>(() => ({
  },
 }))

-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
-  
-  // tracking 데이터 수정
-  const modifiedTracking = {
-    ...props.videoPlay.tracking,
-    click_item: props.videoPlay.tracking.click_item + `_${index}`
+const getThumbnailSrc = (item: PageDataTemplateComponentSet) => {
+  if (props.variant === 'media') {
+    const mediaComponent = getComponentGroup(item, 'media')
+    return mediaComponent ? getMediaImgSrc(mediaComponent) : ''
  }
-  const trackingData = {
-    tracking: modifiedTracking
-  };
-  sendLog(locale.value, useAnalyticsLogDataDirect(trackingData, 1))
-}

-const stopVideo = () => {
-  playingSlideIndex.value = null
-}
+  const pagenaviThumbnailComponent = getComponentGroup(
+    item,
+    'pagenaviThumbnail'
+  )
+  const pagenaviThumbnailSrc = getResponsiveSrc(
+    pagenaviThumbnailComponent?.res_path
+  )

+  return breakpoints.value.isMobile
+    ? pagenaviThumbnailSrc?.mobileSrc
+    : pagenaviThumbnailSrc?.pcSrc || ''
+}

 onMounted(() => {
  mainInst = mainRef.value?.splide ?? null
@@ -118,7 +92,6 @@ onMounted(() => {

  if (mainInst && thumbsInst) {
    mainInst.sync(thumbsInst)
-    mainInst.on('moved', stopVideo)
    
    // 썸네일 슬라이드의 화살표 버튼에 이벤트 리스너 추가
    nextTick(() => {
@@ -136,47 +109,26 @@ onBeforeUnmount(() => {
 </script>

 <template>
-  <div :class="`thumbnail-carousel ${props.class || ''}`" :style="props.style">
+  <div :class="['thumbnail-carousel', $attrs?.class, `thumbnail-${variant}`]">
    <!-- 메인 슬라이드 -->
    <Splide ref="mainRef" :options="mainOptions" class="main-splide">
-      <SplideSlide
-        v-for="(item, index) in props.slideData"
-        :key="item.set_order || index"
-        class="main-slide"
-      >
-      {{ item }}
-        <img
-          :src="getMediaImgSrcFromItem(item)"
-          alt="main image"
-          class="slide-image"
-          :class="{ 'opacity-0': playingSlideIndex === index }"
-        />
-        <AtomsButtonPlay
-          v-if="isPassVideo(item, index)"
-          :resources-data="videoPlay"
-          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>
+      <slot />
    </Splide>
-
    <!-- 썸네일 슬라이드 -->
-    <Splide ref="thumbsRef" :options="thumbOptions" class="thumbnail-splide">
+    <Splide
+      v-if="props.slideData.length > 0"
+      ref="thumbsRef"
+      :options="thumbOptions"
+      class="thumbnail-splide"
+      :style="getPaginationClass(paginationData, { type: 'thumbnail' })"
+    >
      <SplideSlide
        v-for="(item, index) in props.slideData"
        :key="item.set_order || index"
        class="thumbnail-slide"
      >
        <img
-          :src="getMediaImgSrcFromItem(item)"
+          :src="getThumbnailSrc(item)"
          alt="thumbnail image"
          class="slide-image"
        />
@@ -187,44 +139,71 @@ onBeforeUnmount(() => {

 <style scoped>
 .thumbnail-carousel {
-  @apply w-full md:max-w-[944px];
 }
-
-.main-splide {
-  @apply overflow-hidden mx-auto rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
-}
-.main-slide {
-  @apply relative aspect-[16/9];
-}
-.slide-image {
+.thumbnail-carousel:deep(img) {
  @apply w-full h-full object-cover;
 }
-.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;
-}
-
 .thumbnail-splide {
-  @apply overflow-hidden flex justify-center w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-auto md:mx-0 md:px-[120px] md:mt-[28px];
-}
-.thumbnail-splide:deep(.splide__track) {
-  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
+  @apply overflow-hidden flex justify-center;
 }
 .thumbnail-slide {
-  @apply overflow-hidden relative w-[92px] h-[52px] mr-[12px] !border-none rounded-[4px] md:w-[128px] md:h-[72px] md:mr-[16px]
-  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
-  after:border after:border-white/60 after:rounded-[4px];
+  @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] md:mr-[16px]
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:rounded-[4px];
+  background-color: var(--pagination-disabled);
 }
 .thumbnail-slide:hover,
 .thumbnail-slide.is-active {
-  @apply after:border-[var(--primary)];
+  background-color: var(--pagination-active);
 }
-.thumbnail-splide:deep(.arrow-prev) {
+.thumbnail-slide::after {
+  border-color: var(--pagination-disabled);
+}
+.thumbnail-slide:hover::after,
+.thumbnail-slide.is-active::after {
+  border-color: var(--pagination-active);
+}
+
+/* 기본 버전 스타일 */
+.thumbnail-carousel.thumbnail-default,
+.thumbnail-carousel.thumbnail-default .main-splide,
+.thumbnail-carousel.thumbnail-default .main-splide:deep(.splide__track) {
+  @apply h-full;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-splide {
+  @apply absolute bottom-[32px] left-1/2 -translate-x-1/2 max-w-[100%] md:bottom-[48px] md:max-w-[896px] md:px-[72px];
+}
+.thumbnail-carousel.thumbnail-default:deep(.arrow-prev) {
+  @apply left-0;
+}
+.thumbnail-carousel.thumbnail-default:deep(.arrow-next) {
+  @apply right-0;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-slide {
+  @apply aspect-[1/1] w-[8px] md:w-[80px]
+  after:hidden md:after:block;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-slide:hover img,
+.thumbnail-carousel.thumbnail-default .thumbnail-slide.is-active img {
+  @apply md:grayscale-0 md:opacity-100;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-slide img {
+  @apply hidden md:block md:grayscale md:opacity-60;
+}
+
+/* 미디어 버전 스타일 */
+.thumbnail-carousel.thumbnail-media .thumbnail-splide {
+  @apply w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-fit md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[120px];
+}
+.thumbnail-carousel.thumbnail-media .thumbnail-splide:deep(.splide__track) {
+  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
+}
+.thumbnail-carousel.thumbnail-media:deep(.arrow-prev) {
  @apply left-[48px];
 }
-.thumbnail-splide:deep(.arrow-next) {
+.thumbnail-carousel.thumbnail-media:deep(.arrow-next) {
  @apply right-[48px];
 }
+.thumbnail-carousel.thumbnail-media .thumbnail-slide {
+  @apply aspect-[16/9] w-[92px] md:w-[128px];
+}
 </style>
--- a/layers/components/widgets/ButtonList.vue
+++ b/layers/components/widgets/ButtonList.vue
@@ -107,8 +107,8 @@ const handleButtonClick = (btnInfo: PageDataResourceGroupBtnInfo, index: any) =>

 <style scoped>
 :deep(.btn-market) {
-  @apply flex items-start bg-[16px_50%] bg-[length:auto_34px] bg-no-repeat
-  min-w-[113px] pt-[23px] pl-[44px] pr-[22px] text-[11px]
+  @apply flex items-start bg-[16px_50%] bg-[length:auto_28px] bg-no-repeat
+  min-w-[113px] pt-[22px] pl-[44px] pr-[22px] text-[11px]
  md:min-w-[150px] md:pt-[30px] md:pl-[64px] md:pr-[28px] md:text-[12px] md:bg-[20px_50%] md:bg-[length:auto_40px];
 }
 </style>
--- a/layers/composables/useTemplateRegistry.ts
+++ b/layers/composables/useTemplateRegistry.ts
@@ -4,6 +4,9 @@ import GrVisual03 from '#layers/templates/GrVisual03/index.vue'
 import GrGallery01 from '#layers/templates/GrGallery01/index.vue'
 import GrGallery02 from '#layers/templates/GrGallery02/index.vue'
 import GrGallery03 from '#layers/templates/GrGallery03/index.vue'
+import GrDetail01 from '#layers/templates/GrDetail01/index.vue'
+import GrDetail02 from '#layers/templates/GrDetail02/index.vue'
+import GrDetail03 from '#layers/templates/GrDetail03/index.vue'

 const templateRegistry = {
  GR_VISUAL_01: { component: GrVisual01 },
@@ -13,9 +16,9 @@ const templateRegistry = {
  GR_GALLERY_02: { component: GrGallery02 },
  GR_GALLERY_03: { component: GrGallery03 },
  // GR_BOARD_01: { component: GrBoard01 },
-  // GR_DETAIL_01: { component: GrDetail01 },
-  // GR_DETAIL_02: { component: GrDetail02 },
-  // GR_DETAIL_03: { component: GrDetail03 },
+  GR_DETAIL_01: { component: GrDetail01 },
+  GR_DETAIL_02: { component: GrDetail02 },
+  GR_DETAIL_03: { component: GrDetail03 },
  // GR_CONTENTS_01: { component: GrContents01 },
 } as const

--- a/layers/layouts/promotion.vue
+++ b/layers/layouts/promotion.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-console.log("🚀 ~ promotion 22222222")
+console.log('🚀 ~ promotion')
 </script>

 <template>
--- a/layers/middleware/init.route.global.ts
+++ b/layers/middleware/init.route.global.ts
@@ -19,11 +19,9 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
  const languagePattern = /^\/([a-z]{2})(?:\/|$)/
  const match = to.path.match(languagePattern)
  const currentLangCode = match ? match[1] : null
-  // console.log('🚀 3333~ currentLangCode:', currentLangCode)

  // 허용된 언어 코드 목록
  const allowedLangCodes = gameDataStore.gameData.lang_codes || []
-  // console.log('🚀 ~ allowedLangCodes:', allowedLangCodes)

  // 현재 언어가 허용된 언어 목록에 없으면 404로 리다이렉트
  if (currentLangCode && !allowedLangCodes.includes(currentLangCode)) {
--- a/layers/middleware/pageData.global.ts
+++ b/layers/middleware/pageData.global.ts
@@ -38,7 +38,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {

    if (response?.code === 0 && 'value' in response) {
      store.setPageData(response.value)
-      // console.log('🚀 ~ cleanData:', response.value)
+      console.log('🚀 ~ pageData:', response.value)
    } else {
      store.clearPageData()
    }
--- a/layers/server/middleware/gameData.ts
+++ b/layers/server/middleware/gameData.ts
@@ -66,6 +66,8 @@ export default defineEventHandler(async event => {
    if (response?.code === 0 && 'value' in response) {
      event.context.gameData = response.value
      event.context.googleAnalyticsId = response.value?.ga_code
+
+      console.log('🚀 ~ gameData:', response.value)
    }
  } catch (error) {
    console.error('gameData load error:', error)
--- 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')"
--- a/layers/utils/dataUtil.ts
+++ b/layers/utils/dataUtil.ts
@@ -65,13 +65,21 @@ export const isTypeButton = (type: PageDataResourceGroupType): boolean => {
 }

 /**
- * 그룹의 첫 번째 데이터를 반환합니다.
- * @param container 리소스 컨테이너
- * @returns 첫 번째 그룹 데이터 또는 null
+ * 컴포넌트 컨테이너를 반환합니다.
+ * @param components props.components
+ * @param componentName 컴포넌트 이름
+ * @param options 옵션 (maxLength: 최대 길이)
+ * @returns 컴포넌트 컨테이너
 */
-export const getFirstGroup = (container: PageDataResourceContainer) => {
-  if (!container) return null
-  return container.groups?.[0] || null
+export const getComponentContainer = (
+  components: PageDataTemplateComponents | OperateComponents,
+  componentName: string,
+  { maxLength }: { maxLength?: number } = {}
+) => {
+  if (!components) return []
+
+  const container = components[componentName] || []
+  return maxLength ? container.slice(0, maxLength) : container
 }

 /**
@@ -102,8 +110,7 @@ export const getComponentGroup = (
 ) => {
  if (!components) return null

-  const component = components[componentName] as PageDataResourceContainer
-  return getFirstGroup(component)
+  return components[componentName]?.groups?.[0] || null
 }

 /**
@@ -129,7 +136,7 @@ export const getComponentGroupAry = (
 */
 export const ensureMinimumSlideData = (
  components: PageDataTemplateComponents,
-  minCount: number = 3
+  minCount: number = 4
 ): PageDataTemplateComponentSet[] => {
  if (!components) return []

@@ -138,7 +145,7 @@ export const ensureMinimumSlideData = (
    : []

  // 빈 배열이거나 이미 최소 개수를 만족하면 그대로 반환
-  if (arrayData.length === 0 || arrayData.length >= minCount) {
+  if (arrayData.length <= 1 || arrayData.length >= minCount) {
    return arrayData
  }

@@ -155,10 +162,10 @@ export const ensureMinimumSlideData = (
 */
 export const ensureMinimumSlideOperateData = (
  data: OperateGroupItem[],
-  minCount: number = 3
+  minCount: number = 4
 ): OperateGroupItem[] => {
  // 빈 배열이거나 이미 최소 개수를 만족하면 그대로 반환
-  if (data.length === 0 || data.length >= minCount) {
+  if (data.length <= 1 || data.length >= minCount) {
    return data
  }

--- a/layers/utils/styleUtil.ts
+++ b/layers/utils/styleUtil.ts
@@ -3,7 +3,10 @@
 * @description 스타일 처리에 필요한 유틸리티 함수를 제공합니다.
 */

-import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'
+import type {
+  PageDataResourceGroups,
+  PageDataResourceGroupResPath,
+} from '#layers/types/api/pageData'

 /**
 * [TODO] 수정 필요
@@ -94,3 +97,45 @@ export const getColorCode = ({
    return colorCode
  }
 }
+
+/**
+ * pagination 활성화, 비활성화 style을 반환합니다.
+ * @param paginationGroups pagination groups 배열
+ * @param options type: 'thumbnail' | 'bullet' (기본값: 'thumbnail')
+ * @returns Record<string, string> CSS 변수 객체
+ */
+export const getPaginationClass = (
+  paginationGroups?: PageDataResourceGroups,
+  { type }: { type: 'thumbnail' | 'bullet' } = { type: 'bullet' }
+): Record<string, string> => {
+  // 기본 색상 상수
+  const DEFAULT_ACTIVE = 'var(--primary)'
+  const DEFAULT_DISABLED =
+    type === 'bullet' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.1)'
+
+  // Early return: 데이터가 없거나 충분하지 않은 경우
+  if (!paginationGroups || paginationGroups.length < 2) {
+    return {
+      '--pagination-active': DEFAULT_ACTIVE,
+      '--pagination-disabled': DEFAULT_DISABLED,
+    }
+  }
+
+  // 색상 추출 또는 기본값 사용
+  const paginationActive =
+    getColorCode({
+      colorName: paginationGroups[0]?.display?.color_name,
+      colorCode: paginationGroups[0]?.display?.color_code,
+    }) || DEFAULT_ACTIVE
+
+  const paginationDisabled =
+    getColorCode({
+      colorName: paginationGroups[1]?.display?.color_name,
+      colorCode: paginationGroups[1]?.display?.color_code,
+    }) || DEFAULT_DISABLED
+
+  return {
+    '--pagination-active': paginationActive,
+    '--pagination-disabled': paginationDisabled,
+  }
+}