fix. 컴포넌트 리팩토링

layers/components/widgets/Background.vue

@@ -10,6 +10,8 @@ const props = withDefaults(defineProps<Props>(), {
   gradient: '',
 })
 
+const breakpoints = useResponsiveBreakpointsReliable()
+
 const resPath = computed(() => {
   return props.resourcesData?.res_path
 })
@@ -26,6 +28,18 @@ const videoSrc = computed(() => {
 const posterSrc = computed(() => {
   return getResponsiveSrc(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
+})
 </script>
 
 <template>
@@ -39,34 +53,18 @@ const posterSrc = computed(() => {
     />
 
     <!-- 비디오 타입 -->
-    <template v-else-if="resourcesData?.group_type === 'video'">
-      <!-- 모바일 비디오 (md 미만) -->
-      <video
-        v-if="videoSrc?.mobileSrc"
-        class="w-full h-full object-cover md:hidden"
-        :poster="posterSrc?.mobileSrc"
-        autoplay
-        muted
-        loop
-        playsinline
-      >
-        <source :src="videoSrc.mobileSrc" type="video/mp4" />
-        <source :src="videoSrc.mobileSrc" type="video/webm" />
-      </video>
-      <!-- PC 비디오 (md 이상) -->
-      <video
-        v-if="videoSrc?.pcSrc"
-        class="w-full h-full object-cover hidden md:block"
-        :poster="posterSrc?.pcSrc"
-        autoplay
-        muted
-        loop
-        playsinline
-      >
-        <source :src="videoSrc.pcSrc" type="video/mp4" />
-        <source :src="videoSrc.pcSrc" type="video/webm" />
-      </video>
-    </template>
+    <video
+      v-else-if="resourcesData?.group_type === 'video' && currentVideoSrc"
+      class="w-full h-full object-cover"
+      :poster="currentPosterSrc"
+      autoplay
+      muted
+      loop
+      playsinline
+    >
+      <source :src="currentVideoSrc" type="video/mp4" />
+      <source :src="currentVideoSrc" type="video/webm" />
+    </video>
 
     <!-- 그라디언트 오버레이 (gradient가 true일 때만) -->
     <div