feat. GR_DETAIL_01 템플릿 제작

layers/templates/GrDetail01/index.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { SplideSlide } from '@splidejs/vue-splide'
+import { hasComponentGroup, getComponentGroup } from '#layers/utils/dataUtil'
+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')
+})
+
+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 md:mt-1"
+          />
+          <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">
+      <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, 'naviTitle')?.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 bg-white/30 transition-all duration-300;
+}
+.item-title {
+  @apply hidden absolute -bottom-[46px] left-1/2 -translate-x-1/2 whitespace-nowrap text-sm font-medium text-white/30 md:block;
+}
+.progress-bar {
+  @apply relative w-[68px] h-0.5 bg-white/30 overflow-hidden md:w-[184px];
+}
+.progress-fill {
+  @apply absolute inset-y-0 left-0 bg-white;
+  width: 0;
+}
+
+/* 활성화 상태 (현재 슬라이드) */
+.is-active .item-bullet {
+  @apply bg-white;
+}
+.is-active .item-title {
+  @apply text-white;
+}
+.is-active .progress-fill {
+  animation: progressFill 5000ms linear forwards;
+}
+
+/* 완료 상태 (지나간 슬라이드) */
+.is-completed .item-bullet {
+  @apply bg-white;
+}
+.is-completed .progress-fill {
+  width: 100%;
+}
+
+@keyframes progressFill {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
+</style>

layers/templates/GrGallery01/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {
+  getComponentContainer,
   getComponentGroup,
-  ensureMinimumSlideData,
 } from '#layers/utils/dataUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
@@ -18,9 +18,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')
+)
 const videoPlayData = computed(() =>
   getComponentGroup(props.components, 'videoPlay')
 )

layers/templates/GrVisual03/index.vue

@@ -13,20 +13,21 @@ interface Props {
 }
 
 const props = defineProps<Props>()
+
+const slideData = computed(() => {
+  return getComponentContainer(props.components, 'group_sets')
+})
 </script>
 
 <template>
   <section class="section-container">
     <BlocksSlideFade
-      v-if="props.components?.group_sets"
+      v-if="slideData"
       :arrows="true"
       :pagination="true"
       class="h-full"
     >
-      <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')"