From fd479483bbaae891d74d23c6d4bc687090d4597e Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 3 Dec 2025 15:43:21 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[=EB=94=94=EC=9E=90=EC=9D=B8QA]=20?=
 =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20=EC=9D=B8=EB=8D=B1?=
 =?UTF-8?q?=EC=8A=A4=20=EC=A0=84=ED=99=98=20=EC=8B=9C=20=EC=98=81=EC=83=81?=
 =?UTF-8?q?=EC=9D=B4=20=EC=B2=98=EC=9D=8C=EB=B6=80=ED=84=B0=20=EC=9E=AC?=
 =?UTF-8?q?=EC=83=9D=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/app.vue                                   |   2 +-
 layers/components/atoms/Video.vue             | 144 +++++++++++-------
 .../components/blocks/slide/CenterFocus.vue   |  10 ++
 .../blocks/slide/CenterHighlight.vue          |  10 ++
 layers/components/blocks/slide/Default.vue    |  10 ++
 layers/components/blocks/slide/Fade.vue       |  18 ++-
 layers/components/blocks/slide/Thumbnail.vue  |  18 ++-
 layers/components/widgets/Background.vue      |  41 +----
 layers/middleware/init.route.global.ts        |   7 +-
 layers/templates/FxVideo01/index.vue          |  12 +-
 layers/templates/GrDetail01/index.vue         |  13 +-
 layers/templates/GrDetail02/index.vue         |   4 +
 layers/templates/GrDetail03/index.vue         |  18 +--
 layers/templates/GrGallery01/index.vue        |   6 +-
 layers/templates/GrVisual03/index.vue         |   4 +
 15 files changed, 179 insertions(+), 138 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index f35d064..05edb22 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -126,7 +126,7 @@ let stopWatch: (() => void) | null = null
 onMounted(() => {
   if (!import.meta.client) return
 
-  useEventListener('scroll', scrollStore.updateScrollValue)
+  useEventListener('scroll', scrollStore.updateScrollValue, { passive: true })
 
   stopWatch = watch(
     scrollGnbPosition,
diff --git a/layers/components/atoms/Video.vue b/layers/components/atoms/Video.vue
index 0ae60e0..141c36f 100644
--- a/layers/components/atoms/Video.vue
+++ b/layers/components/atoms/Video.vue
@@ -1,92 +1,123 @@
 <script setup lang="ts">
+import type { ClassType } from '#layers/types/Common'
+
 interface Props {
   src: string
   type?: 'mp4' | 'webm'
+  poster?: string
   play?: boolean
-  autoplay?: boolean
   muted?: boolean
   loop?: boolean
-  playsinline?: boolean
+  bordered?: boolean
   class?: ClassType
 }
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'mp4',
-  play: false,
+  play: true,
   muted: true,
   loop: true,
-  playsinline: true,
+  bordered: true,
 })
 
 const videoRef = ref<HTMLVideoElement | null>(null)
-let pauseTimeoutId: ReturnType<typeof setTimeout> | null = null
+const pauseTimer = ref<ReturnType<typeof setTimeout> | null>(null)
 
-// autoplay prop 변경 시 재생/정지 제어
-watch(
-  () => props.play,
-  shouldPlay => {
-    if (!videoRef.value) return
-
-    // 이전 타이머 정리
-    if (pauseTimeoutId) {
-      clearTimeout(pauseTimeoutId)
-      pauseTimeoutId = null
-    }
-
-    if (shouldPlay) {
-      videoRef.value.play().catch(err => {
-        console.warn('Video play failed:', err)
-      })
-    } else {
-      pauseTimeoutId = setTimeout(() => {
-        if (videoRef.value) {
-          videoRef.value.pause()
-          videoRef.value.currentTime = 0
-        }
-        pauseTimeoutId = null
-      }, 200)
-    }
+const clearPauseTimer = () => {
+  if (pauseTimer.value) {
+    clearTimeout(pauseTimer.value)
+    pauseTimer.value = null
   }
-)
+}
 
-onBeforeUnmount(() => {
-  // 타이머 정리
-  if (pauseTimeoutId) {
-    clearTimeout(pauseTimeoutId)
-    pauseTimeoutId = null
+const playVideo = async () => {
+  if (!videoRef.value) return
+
+  clearPauseTimer()
+
+  try {
+    await videoRef.value.play()
+  } catch (e) {
+    console.warn('Video play failed:', e)
   }
-})
+}
+
+const pauseVideo = () => {
+  if (!videoRef.value) return
+
+  clearPauseTimer()
+
+  // 새 타이머 설정
+  pauseTimer.value = setTimeout(() => {
+    if (videoRef.value) {
+      videoRef.value.pause()
+      videoRef.value.currentTime = 0
+    }
+    pauseTimer.value = null
+  }, 500)
+}
+
+const reloadVideo = async () => {
+  if (!videoRef.value) return
+
+  clearPauseTimer()
+
+  videoRef.value.currentTime = 0
+  videoRef.value.load()
+
+  if (props.play) {
+    await playVideo()
+  }
+}
+
+const syncPlayState = (shouldPlay: boolean) => {
+  if (shouldPlay) {
+    void playVideo()
+  } else {
+    pauseVideo()
+  }
+}
 
 // src 변경 시 비디오 다시 로드
 watch(
   () => props.src,
   () => {
-    if (!videoRef.value) return
-
-    // 비디오 시간 초기화 및 새 소스 로드
-    videoRef.value.currentTime = 0
-    videoRef.value.load()
-
-    // 재생 중이었다면 다시 재생
-    if (props.play) {
-      nextTick(() => {
-        videoRef.value?.play().catch(err => {
-          console.warn('Video play failed:', err)
-        })
-      })
-    }
+    void reloadVideo()
   }
 )
+
+// play 상태 변경 시 재생/일시정지
+watch(
+  () => props.play,
+  shouldPlay => {
+    syncPlayState(!!shouldPlay)
+  }
+)
+
+onMounted(() => {
+  nextTick(() => {
+    if (props.play) {
+      playVideo()
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  clearPauseTimer()
+})
 </script>
 
 <template>
-  <div v-if="props.src" :class="['video-box', props.class]">
+  <div
+    v-if="props.src"
+    :class="['video-box', { 'has-bordered': props.bordered }, props.class]"
+  >
     <video
       ref="videoRef"
-      :autoplay="props.autoplay"
+      :poster="props.poster"
       :muted="props.muted"
       :loop="props.loop"
-      :playsinline="props.playsinline"
+      playsinline
     >
       <source :src="props.src" :type="`video/${props.type}`" />
     </video>
@@ -95,7 +126,10 @@ watch(
 
 <style scoped>
 .video-box {
-  @apply overflow-hidden relative rounded-[4px] md:rounded-[8px]
+  @apply overflow-hidden;
+}
+.video-box.has-bordered {
+  @apply relative rounded-[4px] md:rounded-[8px]
   after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:border-white after:opacity-10 after:rounded-[4px] after:md:rounded-[8px];
 }
 .video-box video {
diff --git a/layers/components/blocks/slide/CenterFocus.vue b/layers/components/blocks/slide/CenterFocus.vue
index f859fdf..302d997 100644
--- a/layers/components/blocks/slide/CenterFocus.vue
+++ b/layers/components/blocks/slide/CenterFocus.vue
@@ -23,6 +23,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 
+const splideIndex = defineModel<number>('index', { required: false })
+
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
 
@@ -90,6 +92,10 @@ const handleSplideMounted = (splide: SplideType) => {
   emit('mounted', splide)
   splide.refresh()
 
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = splide.index
+  }
+
   // 화살표 버튼 클릭 이벤트 리스너 추가
   nextTick(() => {
     addArrowClickListeners(splide, (direction, targetIndex) => {
@@ -105,6 +111,10 @@ const handleMove = (
   destIndex: number
 ) => {
   emit('move', splide, newIndex, oldIndex, destIndex)
+
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = newIndex
+  }
 }
 </script>
 
diff --git a/layers/components/blocks/slide/CenterHighlight.vue b/layers/components/blocks/slide/CenterHighlight.vue
index d5dfd5c..46f9d5a 100644
--- a/layers/components/blocks/slide/CenterHighlight.vue
+++ b/layers/components/blocks/slide/CenterHighlight.vue
@@ -22,6 +22,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 
+const splideIndex = defineModel<number>('index', { required: false })
+
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
 
@@ -92,6 +94,10 @@ const handleSplideMounted = (splide: SplideType) => {
   emit('mounted', splide)
   splide.refresh()
 
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = splide.index
+  }
+
   // 화살표 버튼 클릭 이벤트 리스너 추가
   nextTick(() => {
     addArrowClickListeners(splide, (direction, targetIndex) => {
@@ -107,6 +113,10 @@ const handleMove = (
   destIndex: number
 ) => {
   emit('move', splide, newIndex, oldIndex, destIndex)
+
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = newIndex
+  }
 }
 </script>
 
diff --git a/layers/components/blocks/slide/Default.vue b/layers/components/blocks/slide/Default.vue
index 49ce530..723cfde 100644
--- a/layers/components/blocks/slide/Default.vue
+++ b/layers/components/blocks/slide/Default.vue
@@ -31,6 +31,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 
+const splideIndex = defineModel<number>('index', { required: false })
+
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
 
@@ -72,6 +74,10 @@ const options = computed((): ResponsiveOptions => {
 const handleSplideMounted = (splide: SplideType) => {
   emit('mounted', splide)
 
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = splide.index
+  }
+
   // 화살표 버튼 클릭 이벤트 리스너 추가
   nextTick(() => {
     addArrowClickListeners(splide, (direction, targetIndex) => {
@@ -87,6 +93,10 @@ const handleMove = (
   destIndex: number
 ) => {
   emit('move', splide, newIndex, oldIndex, destIndex)
+
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = newIndex
+  }
 }
 </script>
 
diff --git a/layers/components/blocks/slide/Fade.vue b/layers/components/blocks/slide/Fade.vue
index 3127797..73724de 100644
--- a/layers/components/blocks/slide/Fade.vue
+++ b/layers/components/blocks/slide/Fade.vue
@@ -24,6 +24,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 
+const splideIndex = defineModel<number>('index', { required: false })
+
 const splideRef = ref()
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
@@ -56,13 +58,13 @@ const options = computed((): ResponsiveOptions => {
   }
 })
 
-defineExpose({
-  splide: computed(() => splideRef.value?.splide),
-})
-
 const handleSplideMounted = (splide: SplideType) => {
   emit('mounted', splide)
 
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = splide.index
+  }
+
   // 화살표 버튼 클릭 이벤트 리스너 추가
   nextTick(() => {
     addArrowClickListeners(splide, (direction, targetIndex) => {
@@ -78,7 +80,15 @@ const handleMove = (
   destIndex: number
 ) => {
   emit('move', splide, newIndex, oldIndex, destIndex)
+
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = newIndex
+  }
 }
+
+defineExpose({
+  splide: computed(() => splideRef.value?.splide),
+})
 </script>
 
 <template>
diff --git a/layers/components/blocks/slide/Thumbnail.vue b/layers/components/blocks/slide/Thumbnail.vue
index c6a91e5..e961d95 100644
--- a/layers/components/blocks/slide/Thumbnail.vue
+++ b/layers/components/blocks/slide/Thumbnail.vue
@@ -21,6 +21,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 
+const splideIndex = defineModel<number>('index', { required: false })
+
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
 
@@ -88,6 +90,14 @@ const getThumbnailSrc = (item: PageDataResourceGroup) => {
   return getResourceSrc(item)
 }
 
+const handleSplideMounted = (splide: SplideType) => {
+  emit('mounted', splide)
+
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = splide.index
+  }
+}
+
 const handleMove = (
   splide: SplideType,
   newIndex: number,
@@ -95,10 +105,10 @@ const handleMove = (
   destIndex: number
 ) => {
   emit('move', splide, newIndex, oldIndex, destIndex)
-}
 
-const handleSplideMounted = (splide: SplideType) => {
-  emit('mounted', splide)
+  if (splideIndex.value !== undefined) {
+    splideIndex.value = newIndex
+  }
 }
 
 onMounted(() => {
@@ -141,8 +151,8 @@ onBeforeUnmount(() => {
       ref="mainRef"
       :options="mainOptions"
       class="main-splide"
-      @splide:move="handleMove"
       @splide:mounted="handleSplideMounted"
+      @splide:move="handleMove"
     >
       <slot />
     </Splide>
diff --git a/layers/components/widgets/Background.vue b/layers/components/widgets/Background.vue
index f379479..1b69833 100644
--- a/layers/components/widgets/Background.vue
+++ b/layers/components/widgets/Background.vue
@@ -4,20 +4,20 @@ import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 interface Props {
   resourcesData: PageDataResourceGroup
   size?: 'contain' | 'cover'
+  videoPlay?: boolean
   gradient?: string
   dimmed?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: 'cover',
+  videoPlay: true,
   gradient: '',
   dimmed: false,
 })
 
 const { getCurrentSrc } = useResponsiveSrc()
 
-const videoRef = ref<HTMLVideoElement | null>(null)
-
 const resourcesSrc = computed(() => {
   return getCurrentSrc(props.resourcesData)
 })
@@ -32,28 +32,6 @@ const gradientClasses = computed(() => [
   'absolute bottom-[-2px] left-[-2px] right-[-2px]',
   props.gradient,
 ])
-
-// 비디오를 처음부터 재생하는 메서드
-const restartVideo = () => {
-  if (!videoRef.value) return
-
-  videoRef.value.currentTime = 0
-  videoRef.value.play().catch(err => {
-    console.warn('Video play failed:', err)
-  })
-}
-
-// src 변경 시 비디오 다시 로드
-watch(resourcesSrc, () => {
-  if (!videoRef.value) return
-
-  videoRef.value.currentTime = 0
-  videoRef.value.load()
-})
-
-defineExpose({
-  restartVideo,
-})
 </script>
 
 <template>
@@ -69,18 +47,13 @@ defineExpose({
     />
 
     <!-- 비디오 타입 -->
-    <video
+    <AtomsVideo
       v-else-if="isTypeVideo(resourcesData?.resource_type)"
-      ref="videoRef"
-      class="w-full h-full object-cover"
+      :src="resourcesSrc"
       :poster="posterSrc"
-      autoplay
-      muted
-      loop
-      playsinline
-    >
-      <source :src="resourcesSrc" type="video/mp4" />
-    </video>
+      :play="videoPlay"
+      class="w-full h-full object-cover"
+    />
 
     <i v-if="dimmed" class="absolute inset-0 bg-black/50" />
     <i v-if="gradient" :class="gradientClasses" />
diff --git a/layers/middleware/init.route.global.ts b/layers/middleware/init.route.global.ts
index 590fa38..16464b1 100644
--- a/layers/middleware/init.route.global.ts
+++ b/layers/middleware/init.route.global.ts
@@ -1,4 +1,4 @@
-import type { GameDataRequest, GameDataValue } from '#layers/types/api/gameData'
+import type { GameDataValue } from '#layers/types/api/gameData'
 
 export default defineNuxtRouteMiddleware(async (to, _from) => {
   const nuxtApp = useNuxtApp()
@@ -59,12 +59,11 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
       to.path.includes('/error') ||
       to.path.includes('/inspection')
     ) {
-      console.log("🚀 ~ init.route.global error 페이지는 API 호출하지 않음")
+      console.log('🚀 ~ init.route.global error 페이지는 API 호출하지 않음')
       showError(
         createError({
           statusCode: 500,
-          statusMessage:
-            'Internal Server Error',
+          statusMessage: 'Internal Server Error',
           fatal: false, // 즉시 에러 페이지로
           data: { reason: 'post-not-found' },
         })
diff --git a/layers/templates/FxVideo01/index.vue b/layers/templates/FxVideo01/index.vue
index 7fe6822..7dfc555 100644
--- a/layers/templates/FxVideo01/index.vue
+++ b/layers/templates/FxVideo01/index.vue
@@ -6,7 +6,6 @@ import {
   getComponentContainer,
 } from '#layers/utils/dataUtil'
 import { getYouTubeThumbnail } from '#layers/utils/youtubeUtil'
-import type { Splide as SplideType } from '@splidejs/splide'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 import type { OperateGroupItem } from '#layers/types/api/operateResources'
 
@@ -84,7 +83,8 @@ const ITEMS_PER_PAGE = {
   MOBILE: 8,
   DESKTOP: 12,
 } as const
-const currentRecommendedIndex = ref(1)
+
+const currentRecommendedIndex = ref<number | null>(null)
 const currentRecentPage = ref(1)
 
 // 추천 영상 (option01 === 1)
@@ -110,10 +110,6 @@ const hasMore = computed(
   () => visibleVideos.value.length < recentVideos.value.length
 )
 
-const handleSplideMove = (_splide: SplideType, newIndex: number) => {
-  currentRecommendedIndex.value = newIndex + 1
-}
-
 const handleVideoClick = (url: string) => {
   modalStore.handleOpenYoutube({ youtubeUrl: url })
 }
@@ -142,12 +138,12 @@ const handleLoadMoreRecent = () => {
         class="relative content-static bg-[#fff] rounded-[12px] md:rounded-[16px]"
       >
         <BlocksSlideFade
+          v-model:index="currentRecommendedIndex"
           :autoplay="recommendedVideos.length > 1"
           :interval="3000"
           :arrows="recommendedVideos.length > 1"
           :pagination="false"
           :drag="false"
-          @move="handleSplideMove"
         >
           <SplideSlide
             v-for="(item, index) in recommendedVideos"
@@ -192,7 +188,7 @@ const handleLoadMoreRecent = () => {
         </BlocksSlideFade>
         <div v-if="recommendedVideos.length > 1" class="splide-pagination">
           <span class="font-[700] text-[#1F1F1F]">
-            {{ currentRecommendedIndex }}
+            {{ currentRecommendedIndex + 1 }}
           </span>
           /
           <span>{{ recommendedVideos.length }}</span>
diff --git a/layers/templates/GrDetail01/index.vue b/layers/templates/GrDetail01/index.vue
index c04dd61..502e4a9 100644
--- a/layers/templates/GrDetail01/index.vue
+++ b/layers/templates/GrDetail01/index.vue
@@ -4,7 +4,6 @@ import {
   getComponentContainer,
   getComponentGroupAry,
 } from '#layers/utils/dataUtil'
-import type { Splide as SplideType } from '@splidejs/splide'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {
@@ -30,14 +29,6 @@ const goToSlide = (index: number) => {
     splide.go(index)
   }
 }
-
-const handleSplideMounted = (splide: SplideType) => {
-  currentSlideIndex.value = splide.index
-}
-
-const handleSplideMove = (_splide: SplideType, newIndex: number) => {
-  currentSlideIndex.value = newIndex
-}
 </script>
 
 <template>
@@ -45,17 +36,17 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
     <BlocksSlideFade
       v-if="slideData"
       ref="splideRef"
+      v-model:index="currentSlideIndex"
       :autoplay="true"
       :arrows="false"
       :pagination="false"
       class="h-full"
-      @move="handleSplideMove"
-      @mounted="handleSplideMounted"
     >
       <SplideSlide v-for="(item, index) in slideData" :key="index">
         <WidgetsBackground
           v-if="hasComponentGroup(item, 'background')"
           :resources-data="getComponentGroup(item, 'background')"
+          :video-play="currentSlideIndex === index"
         />
         <div class="content-standard">
           <WidgetsMainTitle
diff --git a/layers/templates/GrDetail02/index.vue b/layers/templates/GrDetail02/index.vue
index c648430..d937baa 100644
--- a/layers/templates/GrDetail02/index.vue
+++ b/layers/templates/GrDetail02/index.vue
@@ -13,6 +13,8 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const currentSlideIndex = ref<number | null>(null)
+
 const slideData = computed(() => {
   return getComponentContainer(props.components, 'group_sets', { maxLength: 7 })
 })
@@ -29,6 +31,7 @@ const paginationData = computed(() => {
 <template>
   <section class="section-standard">
     <BlocksSlideThumbnail
+      v-model:index="currentSlideIndex"
       :thumbnail-data="thumbnailData"
       :pagination-data="paginationData"
     >
@@ -36,6 +39,7 @@ const paginationData = computed(() => {
         <WidgetsBackground
           v-if="hasComponentGroup(item, 'background')"
           :resources-data="getComponentGroup(item, 'background')"
+          :video-play="currentSlideIndex === index"
         />
         <div class="content-standard">
           <WidgetsMainTitle
diff --git a/layers/templates/GrDetail03/index.vue b/layers/templates/GrDetail03/index.vue
index 86fdc36..70a547e 100644
--- a/layers/templates/GrDetail03/index.vue
+++ b/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>
diff --git a/layers/templates/GrGallery01/index.vue b/layers/templates/GrGallery01/index.vue
index 8d15b37..7c4ca59 100644
--- a/layers/templates/GrGallery01/index.vue
+++ b/layers/templates/GrGallery01/index.vue
@@ -19,7 +19,6 @@ const props = defineProps<Props>()
 const { locale } = useI18n()
 const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
 
-const slideThumbnailRef = ref<any>(null)
 const playingSlideIndex = ref<number | null>(null)
 let stopVideoTimeoutId: ReturnType<typeof setTimeout> | null = null
 
@@ -65,7 +64,7 @@ const handleVideoClick = (index: number) => {
   )
 }
 
-const stopVideo = () => {
+const handleSplideMove = () => {
   // 이전 타이머 정리
   if (stopVideoTimeoutId) {
     clearTimeout(stopVideoTimeoutId)
@@ -104,14 +103,13 @@ onBeforeUnmount(() => {
         class="title-md max-w-[944px]"
       />
       <BlocksSlideThumbnail
-        ref="slideThumbnailRef"
         :thumbnail-data="slideData"
         variant="media"
         class="mt-[24px] md:mt-[32px]"
         :pagination-data="paginationData"
         :arrows="slideData.length > 5"
-        @move="stopVideo"
         @arrow-click="onArrowClick"
+        @move="handleSplideMove"
       >
         <SplideSlide
           v-for="(item, index) in slideData"
diff --git a/layers/templates/GrVisual03/index.vue b/layers/templates/GrVisual03/index.vue
index eed919e..dfe9928 100644
--- a/layers/templates/GrVisual03/index.vue
+++ b/layers/templates/GrVisual03/index.vue
@@ -18,6 +18,8 @@ const props = defineProps<Props>()
 const { locale } = useI18n()
 const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
 
+const currentSlideIndex = ref<number | null>(null)
+
 const slideData = computed(() => {
   return getComponentContainer(props.components, 'group_sets')
 })
@@ -36,6 +38,7 @@ const onArrowClick = direction => {
   <section class="section-standard">
     <BlocksSlideFade
       v-if="slideData"
+      v-model:index="currentSlideIndex"
       :arrows="slideData.length > 1"
       :pagination="slideData.length > 1"
       class="h-full"
@@ -46,6 +49,7 @@ const onArrowClick = direction => {
         <WidgetsBackground
           v-if="hasComponentGroup(item, 'background')"
           :resources-data="getComponentGroup(item, 'background')"
+          :video-play="currentSlideIndex === index"
         />
         <div class="content-standard gap-3 md:gap-5">
           <WidgetsSubTitle