refactor: 메모리 누수 정리 및 타이머 관리 개선, 이벤트 리스너 제거 함수 추가

layers/components/atoms/Video.vue

@@ -19,6 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const videoRef = ref<HTMLVideoElement | null>(null)
+let pauseTimeoutId: ReturnType<typeof setTimeout> | null = null
 
 // autoplay prop 변경 시 재생/정지 제어
 watch(
@@ -26,19 +27,36 @@ watch(
   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 {
-      setTimeout(() => {
-        videoRef.value.pause()
-        videoRef.value.currentTime = 0
+      pauseTimeoutId = setTimeout(() => {
+        if (videoRef.value) {
+          videoRef.value.pause()
+          videoRef.value.currentTime = 0
+        }
+        pauseTimeoutId = null
       }, 200)
     }
   }
 )
 
+onBeforeUnmount(() => {
+  // 타이머 정리
+  if (pauseTimeoutId) {
+    clearTimeout(pauseTimeoutId)
+    pauseTimeoutId = null
+  }
+})
+
 // src 변경 시 비디오 다시 로드
 watch(
   () => props.src,

layers/components/blocks/slide/Thumbnail.vue

@@ -26,6 +26,7 @@ const { addArrowClickListeners } = useSplideArrow()
 
 let mainInst: SplideType | null = null
 let thumbsInst: SplideType | null = null
+let removeArrowListeners: (() => void) | null = null
 
 defineExpose({
   mainInst: computed(() => mainInst),
@@ -111,7 +112,7 @@ onMounted(() => {
     mainInst.sync(thumbsInst)
     // 썸네일 슬라이드의 화살표 버튼에 이벤트 리스너 추가
     nextTick(() => {
-      addArrowClickListeners(thumbsInst, (direction, targetIndex) => {
+      removeArrowListeners = addArrowClickListeners(thumbsInst, (direction, targetIndex) => {
         emit('arrowClick', direction, targetIndex)
       })
     })
@@ -119,8 +120,17 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  // 이벤트 리스너 제거
+  if (removeArrowListeners) {
+    removeArrowListeners()
+    removeArrowListeners = null
+  }
+  
+  // Splide 인스턴스 정리
   mainInst?.destroy?.()
   thumbsInst?.destroy?.()
+  mainInst = null
+  thumbsInst = null
 })
 </script>