fix: [디자인QA] 슬라이드 인덱스 전환 시 영상이 처음부터 재생되도록 적용

layers/templates/GrDetail03/index.vue

@@ -6,7 +6,6 @@ import {
   getComponentGroup,
   hasComponentGroup,
 } from '#layers/utils/dataUtil'
-import type { Splide as SplideType } from '@splidejs/splide'
 import type {
   PageDataTemplateComponents,
   PageDataTemplateComponent,
@@ -21,7 +20,7 @@ const props = defineProps<Props>()
 
 const { getCurrentSrc } = useResponsiveSrc()
 
-const currentSlideIndex = ref<number>(0)
+const currentSlideIndex = ref<number | null>(null)
 
 const slideData = computed(() => {
   return getComponentContainer(props.components, 'group_sets', {
@@ -37,27 +36,24 @@ const paginationData = computed(() => {
   return getComponentGroupAry(props.components, 'pagination')
 })
 
-const videoSrc = (item: PageDataTemplateComponent) => {
+const getVideoSrc = (item: PageDataTemplateComponent) => {
   const videoData = getComponentGroup(item, 'video')
   return getCurrentSrc(videoData)
 }
-
-const handleSplideMove = (_splide: SplideType, newIndex: number) => {
-  currentSlideIndex.value = newIndex
-}
 </script>
 
 <template>
   <section class="section-standard">
     <BlocksSlideThumbnail
+      v-model:index="currentSlideIndex"
       :thumbnail-data="thumbnailData"
       :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')"
+          :video-play="currentSlideIndex === index"
         />
         <WidgetsBackground
           v-if="hasComponentGroup(item, 'foreground')"
@@ -89,12 +85,8 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
           />
           <AtomsVideo
             v-if="hasComponentGroup(item, 'video')"
-            :src="videoSrc(item)"
+            :src="getVideoSrc(item)"
             :play="currentSlideIndex === index"
-            autoplay
-            muted
-            loop
-            playsinline
             class="aspect-[16/10] w-[258px] mt-8 md:w-[496px] md:mt-10"
           />
         </div>