fix. 페이지네이션 스타일 적용

layers/templates/GrDetail03/index.vue

@@ -3,8 +3,14 @@ import { SplideSlide } from '@splidejs/vue-splide'
 import {
   getComponentContainer,
   getComponentGroupAry,
+  getComponentGroup,
+  hasComponentGroup,
 } from '#layers/utils/dataUtil'
-import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+import type { Splide as SplideType } from '@splidejs/splide'
+import type {
+  PageDataTemplateComponents,
+  PageDataTemplateComponent,
+} from '#layers/types/api/pageData'
 
 interface Props {
   components: PageDataTemplateComponents
@@ -13,6 +19,10 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const breakpoints = useResponsiveBreakpointsReliable()
+
+const currentSlideIndex = ref<number>(0)
+
 const slideData = computed(() => {
   return getComponentContainer(props.components, 'group_sets', {
     maxLength: 10,
@@ -21,6 +31,21 @@ const slideData = computed(() => {
 const paginationData = computed(() => {
   return getComponentGroupAry(props.components, 'pagination')
 })
+
+const currentVideoSrc = (item: PageDataTemplateComponent) => {
+  const videoSrc = getComponentGroup(item, 'video')?.res_path
+  const responsiveSrc = getResponsiveSrc(videoSrc, {
+    resourcesType: 'video',
+  })
+
+  return breakpoints.value.isMobile
+    ? responsiveSrc.mobileSrc
+    : responsiveSrc.pcSrc
+}
+
+const handleSplideMove = (_splide: SplideType, newIndex: number) => {
+  currentSlideIndex.value = newIndex
+}
 </script>
 
 <template>
@@ -28,17 +53,23 @@ const paginationData = computed(() => {
     <BlocksSlideThumbnail
       :slide-data="slideData"
       :pagination-data="paginationData"
+      @move="handleSplideMove"
     >
       <SplideSlide v-for="(item, index) in slideData" :key="index">
         <WidgetsBackground
           v-if="hasComponentGroup(item, 'background')"
           :resources-data="getComponentGroup(item, 'background')"
         />
+        <WidgetsBackground
+          v-if="hasComponentGroup(item, 'foreground')"
+          size="contain"
+          :resources-data="getComponentGroup(item, 'foreground')"
+        />
         <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"
+            class="title-xs mb-2 line-clamp-1 text-left md:mb-5"
           />
           <WidgetsMainTitle
             v-if="hasComponentGroup(item, 'mainTitle')"
@@ -48,12 +79,21 @@ const paginationData = computed(() => {
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
+            tag="p"
             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"
+            class="mt-2 text-left md:mt-5"
+          />
+          <video
+            v-if="hasComponentGroup(item, 'video')"
+            :src="currentVideoSrc(item)"
+            :autoplay="currentSlideIndex === index"
+            muted
+            loop
+            playsinline
           />
         </div>
       </SplideSlide>