fix. 컴포넌트 리팩토링

layers/components/blocks/CardNews.vue

@@ -5,6 +5,7 @@ interface Props {
   imgPath: string
   linkTarget?: string
   url?: string
+  alt?: string
   class?: string
 }
 
@@ -18,7 +19,7 @@ const props = defineProps<Props>()
   >
     <img
       :src="props.imgPath"
-      :alt="props.title"
+      :alt="props.title || props.alt"
       class="card-image"
       loading="lazy"
     />

layers/components/blocks/slide/Fade.vue

@@ -15,8 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: true,
 })
 
-// 페이드 슬라이드 옵션
-const fadeOptions = computed((): ResponsiveOptions => {
+const options = computed((): ResponsiveOptions => {
   return {
     type: 'fade',
     rewind: true,
@@ -40,7 +39,7 @@ const fadeOptions = computed((): ResponsiveOptions => {
 </script>
 
 <template>
-  <Splide :options="fadeOptions" class="h-full">
+  <Splide :options="options" class="h-full">
     <slot />
   </Splide>
 </template>

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