fix. 코드 리팩토링

app/app.vue

@@ -125,12 +125,13 @@ gtag('event', 'screen_view', {
 
 onMounted(() => {
   useEventListener('scroll', scrollStore.updateScrollValue)
-  if (gameData.value?.comm_img_json) {
-    gameData.value?.comm_img_json.groups.forEach(group => {
-      const cssVarName = `--${group.img_name}`
-      const imageUrl = `url(${getResolvedHost(group.img_path?.comm ?? '')})`
-
-      document.documentElement.style.setProperty(cssVarName, imageUrl)
+  if (gameData.value?.comm_img_json?.groups) {
+    const groups = gameData.value.comm_img_json.groups
+    groups.forEach(({ img_name, img_path }) => {
+      document.documentElement.style.setProperty(
+        `--${img_name}`,
+        `url(${getResolvedHost(img_path?.comm ?? '')})`
+      )
     })
   }
 })

layers/assets/css/components/_layout.css

@@ -25,6 +25,6 @@
     @apply line-clamp-2 text-[16px] font-[500] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:line-clamp-1 md:text-[24px] md:leading-[34px];
   }
   .title-xs {
-    @apply text-[14px] leading-[20px] tracking-[-0.42px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px];
+    @apply text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px];
   }
 }

layers/components/atoms/Video.vue

@@ -2,15 +2,85 @@
 interface Props {
   src: string
   type?: 'mp4' | 'webm'
+  play?: boolean
+  autoplay?: boolean
+  muted?: boolean
+  loop?: boolean
+  playsinline?: boolean
+  class?: ClassType
 }
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'mp4',
+  play: false,
+  muted: true,
+  loop: true,
+  playsinline: true,
 })
+
+const videoRef = ref<HTMLVideoElement | null>(null)
+
+// autoplay prop 변경 시 재생/정지 제어
+watch(
+  () => props.play,
+  shouldPlay => {
+    if (!videoRef.value) return
+
+    if (shouldPlay) {
+      videoRef.value.play().catch(err => {
+        console.warn('Video play failed:', err)
+      })
+    } else {
+      setTimeout(() => {
+        videoRef.value.pause()
+        videoRef.value.currentTime = 0
+      }, 200)
+    }
+  }
+)
+
+// 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)
+        })
+      })
+    }
+  }
+)
 </script>
 
 <template>
-  <video v-if="props.src" v-bind="$attrs">
-    <source :src="props.src" :type="`video/${props.type}`" />
-  </video>
+  <div v-if="props.src" :class="['video-box', props.class]">
+    <video
+      ref="videoRef"
+      :autoplay="props.autoplay"
+      :muted="props.muted"
+      :loop="props.loop"
+      :playsinline="props.playsinline"
+    >
+      <source :src="props.src" :type="`video/${props.type}`" />
+    </video>
+  </div>
 </template>
+
+<style scoped>
+.video-box {
+  @apply overflow-hidden 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 {
+  @apply absolute top-0 left-0 w-full h-full object-cover;
+}
+</style>

layers/components/blocks/VisualContent.vue

@@ -11,27 +11,20 @@ const props = withDefaults(defineProps<Props>(), {
   objectFit: 'contain',
 })
 
-const breakpoints = useResponsiveBreakpointsReliable()
+const { getCurrentSrc } = useResponsiveSrc()
 
+const imageSrc = computed(() => {
+  return getCurrentSrc(props.resourcesData?.res_path)
+})
 const displayText = computed(() => {
   return props.resourcesData?.display?.text || 'image'
 })
-const imageSrc = computed(() => {
-  return getResponsiveSrc(props.resourcesData?.res_path)
-})
 const colorName = computed(() => {
   return props.resourcesData?.display?.color_name
 })
 const colorCode = computed(() => {
   return props.resourcesData?.display?.color_code
 })
-const currentImageSrc = computed(() => {
-  if (!imageSrc.value) return ''
-
-  return breakpoints.value.isMobile
-    ? imageSrc.value.mobileSrc || ''
-    : imageSrc.value.pcSrc || ''
-})
 
 // HTML 콘텐츠 정리 (줄바꿈 처리)
 const sanitizedContent = computed(() => {
@@ -42,8 +35,8 @@ const sanitizedContent = computed(() => {
 <template>
   <!-- 이미지 -->
   <img
-    v-if="isTypeImage(resourcesData?.resource_type) && currentImageSrc"
-    :src="currentImageSrc"
+    v-if="isTypeImage(resourcesData?.resource_type) && imageSrc"
+    :src="imageSrc"
     :alt="alt || displayText"
     :class="`w-full h-full object-${objectFit}`"
     loading="lazy"

layers/components/blocks/slide/Thumbnail.vue

@@ -32,8 +32,6 @@ defineExpose({
   thumbsInst: computed(() => thumbsInst),
 })
 
-const breakpoints = useResponsiveBreakpointsReliable()
-
 const mainRef = ref<InstanceType<typeof Splide> | null>(null)
 const thumbsRef = ref<InstanceType<typeof Splide> | null>(null)
 
@@ -72,17 +70,10 @@ const getThumbnailSrc = (item: PageDataTemplateComponentSet) => {
     return mediaComponent ? getMediaImgSrc(mediaComponent) : ''
   }
 
-  const pagenaviThumbnailComponent = getComponentGroup(
-    item,
-    'pagenaviThumbnail'
-  )
-  const pagenaviThumbnailSrc = getResponsiveSrc(
-    pagenaviThumbnailComponent?.res_path
-  )
+  const thumbnailComponent = getComponentGroup(item, 'pagenaviThumbnail')
+  const thumbnailPath = getDeviceSrc(thumbnailComponent?.res_path)
 
-  return breakpoints.value.isMobile
-    ? pagenaviThumbnailSrc?.mobileSrc
-    : pagenaviThumbnailSrc?.pcSrc || ''
+  return thumbnailPath?.pcSrc
 }
 
 const handleMove = (

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>

layers/composables/useBreakpoints.ts

@@ -1,3 +1,7 @@
+import { useMediaQuery } from '@vueuse/core'
+import { getDeviceSrc } from '#layers/utils/styleUtil'
+import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'
+
 const BREAKPOINTS = {
   xs: 360,
   sm: 768,
@@ -6,18 +10,49 @@ const BREAKPOINTS = {
 } as const
 
 /**
- * 확실한 반응형 브레이크포인트 헬퍼 (useWindowSize 기반)
+ * useMediaQuery 기반 반응형 브레이크포인트
  */
-export const useResponsiveBreakpointsReliable = () => {
-  const { width } = useWindowSize()
+export const useResponsiveBreakpoints = () => {
+  const ssrWidth = BREAKPOINTS.xs
+  const isXs = useMediaQuery(`(min-width: ${BREAKPOINTS.xs}px)`, { ssrWidth })
+  const isSm = useMediaQuery(`(min-width: ${BREAKPOINTS.sm}px)`, { ssrWidth })
+  const isMd = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`, { ssrWidth })
+  const isLg = useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`, { ssrWidth })
+  const isMobile = useMediaQuery(`(max-width: ${BREAKPOINTS.md - 1}px)`, {
+    ssrWidth,
+  })
+  const isTablet = useMediaQuery(
+    `(min-width: ${BREAKPOINTS.sm}px) and (max-width: ${BREAKPOINTS.md - 1}px)`,
+    { ssrWidth }
+  )
+  const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`, {
+    ssrWidth,
+  })
 
   return computed(() => ({
-    xs: width.value >= BREAKPOINTS.xs,
-    sm: width.value >= BREAKPOINTS.sm,
-    md: width.value >= BREAKPOINTS.md,
-    lg: width.value >= BREAKPOINTS.lg,
-    isMobile: width.value < BREAKPOINTS.md,
-    isTablet: width.value >= BREAKPOINTS.sm && width.value < BREAKPOINTS.md,
-    isDesktop: width.value >= BREAKPOINTS.md,
+    isXs: isXs.value,
+    isSm: isSm.value,
+    isMd: isMd.value,
+    isLg: isLg.value,
+    isMobile: isMobile.value,
+    isTablet: isTablet.value,
+    isDesktop: isDesktop.value,
   }))
 }
+
+export const useResponsiveSrc = () => {
+  const breakpoints = useResponsiveBreakpoints()
+
+  const getCurrentSrc = (
+    path: PageDataResourceGroupResPath,
+    options?: {
+      resourcesType?: 'image' | 'video'
+    }
+  ) => {
+    const result = getDeviceSrc(path, options)
+    if (!result) return ''
+    return breakpoints.value.isMobile ? result.mobileSrc : result.pcSrc
+  }
+
+  return { getCurrentSrc }
+}

layers/templates/GrDetail03/index.vue

@@ -6,7 +6,6 @@ import {
   getComponentGroup,
   hasComponentGroup,
 } from '#layers/utils/dataUtil'
-import { getResponsiveSrc } from '#layers/utils/styleUtil'
 import type { Splide as SplideType } from '@splidejs/splide'
 import type {
   PageDataTemplateComponents,
@@ -20,7 +19,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const breakpoints = useResponsiveBreakpointsReliable()
+const { getCurrentSrc } = useResponsiveSrc()
 
 const currentSlideIndex = ref<number>(0)
 
@@ -33,15 +32,9 @@ const paginationData = computed(() => {
   return getComponentGroupAry(props.components, 'pagination')
 })
 
-const currentVideoSrc = (item: PageDataTemplateComponent) => {
-  const videoSrc = getComponentGroup(item, 'video')?.res_path
-  const responsiveSrc = getResponsiveSrc(videoSrc, {
-    resourcesType: 'video',
-  })
-
-  return breakpoints.value.isMobile
-    ? responsiveSrc.mobileSrc
-    : responsiveSrc.pcSrc
+const videoSrc = (item: PageDataTemplateComponent) => {
+  const src = getComponentGroup(item, 'video')?.res_path
+  return getCurrentSrc(src, { resourcesType: 'video' })
 }
 
 const handleSplideMove = (_splide: SplideType, newIndex: number) => {
@@ -66,7 +59,9 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
           size="contain"
           :resources-data="getComponentGroup(item, 'foreground')"
         />
-        <div class="section-content max-w-[1024px] mx-auto items-start">
+        <div
+          class="section-content max-w-[1024px] mx-auto items-start pt-[48px] md:pt-0"
+        >
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'category')"
             :resources-data="getComponentGroup(item, 'category')"
@@ -90,11 +85,13 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
           />
           <AtomsVideo
             v-if="hasComponentGroup(item, 'video')"
-            :src="currentVideoSrc(item)"
-            :autoplay="currentSlideIndex === index"
+            :src="videoSrc(item)"
+            :play="currentSlideIndex === index"
+            autoplay
             muted
             loop
             playsinline
+            class="aspect-[16/10] w-[258px] mt-8 md:w-[496px] md:mt-10"
           />
         </div>
       </SplideSlide>

layers/utils/styleUtil.ts

@@ -15,6 +15,9 @@ import type {
  * @returns 완전한 이미지 URL
  */
 export const getResolvedHost = (path: string): string => {
+  // path가 없으면 빈 문자열 반환
+  if (!path || typeof path !== 'string') return ''
+
   if (
     path.startsWith('http://') ||
     path.startsWith('https://') ||
@@ -33,35 +36,33 @@ export const getResolvedHost = (path: string): string => {
 }
 
 /**
- * 반응형 리소스(이미지/비디오)를 처리하여 PC/모바일 버전을 반환합니다.
+ * 디바이스 리소스(이미지/비디오)를 처리하여 PC/모바일 버전을 반환합니다.
  * @param pathArray 리소스 경로 배열
  * @param options 리소스 타입 옵션
- * @returns 반응형 리소스 객체 또는 null
+ * @returns 디바이스 리소스 객체 또는 null
  */
-export const getResponsiveSrc = (
+export const getDeviceSrc = (
   pathArray: PageDataResourceGroupResPath,
-  options: {
-    resourcesType?: 'image' | 'bg' | 'video'
-  } = {}
+  options?: {
+    resourcesType?: 'image' | 'video'
+  }
 ) => {
-  const { resourcesType = 'image' } = options
+  // pathArray가 없으면 null 반환
+  if (!pathArray) return null
+
+  const { resourcesType = 'image' } = options ?? {}
   const pcField = resourcesType === 'video' ? 'path_vid_pc' : 'path_pc'
   const mobileField = resourcesType === 'video' ? 'path_vid_mo' : 'path_mo'
 
-  if (!pathArray?.[mobileField]) {
-    return null
-  }
+  const pcPath = pathArray[pcField] || pathArray[mobileField]
+  const mobilePath = pathArray[mobileField] || pathArray[pcField]
+
+  // 경로가 없으면 null 반환
+  if (!pcPath && !mobilePath) return null
 
   const resolvedImages = {
-    pc: getResolvedHost(pathArray[pcField] || pathArray[mobileField]),
-    mobile: getResolvedHost(pathArray[mobileField]),
-  }
-
-  if (resourcesType === 'bg') {
-    return {
-      '--pc-bg': `url(${resolvedImages.pc})`,
-      '--mobile-bg': `url(${resolvedImages.mobile})`,
-    }
+    pc: pcPath ? getResolvedHost(pcPath) : '',
+    mobile: mobilePath ? getResolvedHost(mobilePath) : '',
   }
 
   return {
@@ -70,14 +71,6 @@ export const getResponsiveSrc = (
   }
 }
 
-/**
- * 반응형 배경 이미지를 위한 CSS 클래스를 반환합니다.
- * @returns 반응형 배경 클래스 배열
- */
-export const getResponsiveClass = () => {
-  return ['bg-[image:var(--mobile-bg)]', 'md:bg-[image:var(--pc-bg)]']
-}
-
 /**
  * 색상값을 반환합니다.
  * @param colorName 색상 이름