fix. 코드 리팩토링

2025-10-22 16:12:02 +09:00
parent 8e0cdc9478
commit 69e46595bc
9 changed files with 199 additions and 128 deletions
--- a/app/app.vue
+++ b/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 ?? '')})`
+      )
    })
  }
 })
--- a/layers/assets/css/components/_layout.css
+++ b/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];
  }
 }
--- a/layers/components/atoms/Video.vue
+++ b/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>
--- a/layers/components/blocks/VisualContent.vue
+++ b/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"
--- a/layers/components/blocks/slide/Thumbnail.vue
+++ b/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 = (
--- a/layers/components/widgets/Background.vue
+++ b/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>
--- a/layers/composables/useBreakpoints.ts
+++ b/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 }
+}
--- a/layers/templates/GrDetail03/index.vue
+++ b/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>
--- a/layers/utils/styleUtil.ts
+++ b/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 색상 이름