fix. 코드 리팩토링

layers/components/widgets/Background.vue

@@ -12,71 +12,62 @@ const props = withDefaults(defineProps<Props>(), {
   size: 'cover',
 })
 
-const breakpoints = useResponsiveBreakpointsReliable()
+const { getCurrentSrc } = useResponsiveSrc()
 
-const resPath = computed(() => {
-  return props.resourcesData?.res_path
-})
-const bgStyles = computed(() => {
-  return getResponsiveSrc(resPath.value, {
-    resourcesType: 'bg',
-  })
+const videoRef = ref<HTMLVideoElement | null>(null)
+
+const resPath = computed(() => props.resourcesData?.res_path)
+const imageSrc = computed(() => {
+  return getCurrentSrc(resPath.value)
 })
 const videoSrc = computed(() => {
-  return getResponsiveSrc(resPath.value, {
-    resourcesType: 'video',
-  })
+  return getCurrentSrc(resPath.value, { resourcesType: 'video' })
 })
 const posterSrc = computed(() => {
-  return getResponsiveSrc(resPath.value)
+  return getCurrentSrc(resPath.value)
 })
-const currentVideoSrc = computed(() => {
-  if (!videoSrc.value) return ''
-  return breakpoints.value.isMobile
-    ? videoSrc.value.mobileSrc
-    : videoSrc.value.pcSrc
-})
-const currentPosterSrc = computed(() => {
-  if (!posterSrc.value) return ''
-  return breakpoints.value.isMobile
-    ? posterSrc.value.mobileSrc
-    : posterSrc.value.pcSrc
+const imageClasses = computed(() => [
+  `w-full h-full bg-center bg-no-repeat`,
+  props.size === 'contain' ? 'bg-contain' : 'bg-cover',
+])
+const gradientClasses = computed(() => [
+  'absolute bottom-0 left-0 right-0',
+  props.gradient,
+])
+
+// src 변경 시 비디오 다시 로드
+watch(videoSrc, () => {
+  if (!videoRef.value) return
+
+  videoRef.value.currentTime = 0
+  videoRef.value.load()
 })
 </script>
 
 <template>
   <div class="absolute inset-0 w-full h-full">
-    <!-- 이미지 타입-->
+    <!-- 이미지 타입 -->
     <div
-      v-if="isTypeImage(resourcesData?.resource_type)"
-      :class="[
-        'w-full h-full bg-cover bg-center bg-no-repeat',
-        {
-          'object-contain': props.size === 'contain',
-          'object-cover': props.size === 'cover',
-        },
-      ]"
-      :style="bgStyles"
+      v-if="isTypeImage(resourcesData?.resource_type) && imageSrc"
+      :class="imageClasses"
+      :style="{ backgroundImage: `url(${imageSrc})` }"
     />
 
     <!-- 비디오 타입 -->
     <video
-      v-else-if="isTypeVideo(resourcesData?.resource_type) && currentVideoSrc"
+      v-else-if="isTypeVideo(resourcesData?.resource_type) && videoSrc"
+      ref="videoRef"
       class="w-full h-full object-cover"
-      :poster="currentPosterSrc"
+      :poster="posterSrc"
       autoplay
       muted
       loop
       playsinline
     >
-      <source :src="currentVideoSrc" type="video/mp4" />
-      <source :src="currentVideoSrc" type="video/webm" />
+      <source :src="videoSrc" type="video/mp4" />
     </video>
 
-    <!-- 그라디언트 오버레이 (gradient가 true일 때만) -->
-    <div
-      v-if="props.gradient"
-      :class="`absolute bottom-0 left-0 right-0 ${props.gradient}`"
-    />
+    <!-- 그라디언트 오버레이 -->
+    <div v-if="gradient" :class="gradientClasses" />
   </div>
 </template>