fix. slideThumbnail 컴포넌트 수정

layers/templates/GrDetail01/index.vue

@@ -1,6 +1,5 @@
 <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 {
@@ -16,6 +15,9 @@ 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
@@ -73,7 +75,11 @@ onMounted(() => {
         </div>
       </SplideSlide>
     </BlocksSlideFade>
-    <div v-if="slideData && slideData.length > 1" class="splide-pagination">
+    <div
+      v-if="slideData && slideData.length > 1"
+      class="splide-pagination"
+      :style="getPaginationClass(paginationData)"
+    >
       <div
         v-for="(item, index) in slideData"
         :key="index"
@@ -113,25 +119,28 @@ onMounted(() => {
   @apply flex items-center;
 }
 .item-bullet {
-  @apply block w-3 h-3 rounded-full bg-white/30 transition-all duration-300;
+  @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 text-white/30 md:block;
+  @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 bg-white/30 overflow-hidden md:w-[184px];
+  @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 bg-white;
-  width: 0;
+  @apply absolute inset-y-0 left-0 w-[0];
+  background-color: var(--pagination-active);
 }
 
 /* 활성화 상태 (현재 슬라이드) */
 .is-active .item-bullet {
-  @apply bg-white;
+  background-color: var(--pagination-active);
 }
 .is-active .item-title {
-  @apply text-white;
+  color: var(--pagination-active);
 }
 .is-active .progress-fill {
   animation: progressFill 5000ms linear forwards;
@@ -139,7 +148,7 @@ onMounted(() => {
 
 /* 완료 상태 (지나간 슬라이드) */
 .is-completed .item-bullet {
-  @apply bg-white;
+  background-color: var(--pagination-active);
 }
 .is-completed .progress-fill {
   width: 100%;

layers/templates/GrDetail02/index.vue

@@ -12,11 +12,17 @@ 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 ref="slideThumbnailRef" :slide-data="slideData">
+    <BlocksSlideThumbnail
+      :slide-data="slideData"
+      :pagination-data="paginationData"
+    >
       <SplideSlide v-for="(item, index) in slideData" :key="index">
         <WidgetsBackground
           v-if="hasComponentGroup(item, 'background')"

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>