fix. utils 함수 리팩토링

2025-12-01 14:23:35 +09:00
parent 10ce30e149
commit 9b3b7b4ee3
20 changed files with 120 additions and 162 deletions
--- a/app/app.vue
+++ b/app/app.vue
@@ -37,16 +37,16 @@ const setupAllMetaData = (data: GameDataValue) => {
    {
      rel: 'icon',
      type: 'image/x-icon',
-      href: getResourceHost(faviconPath[0]),
+      href: formatPathHost(faviconPath[0]),
    },
    {
      rel: 'apple-touch-icon',
-      href: getResourceHost(faviconPath[1]),
+      href: formatPathHost(faviconPath[1]),
    },
    {
      rel: 'icon',
      type: 'image/png',
-      href: getResourceHost(faviconPath[2]),
+      href: formatPathHost(faviconPath[2]),
    },
  ]

@@ -59,7 +59,7 @@ const setupAllMetaData = (data: GameDataValue) => {
    data.comm_img_json?.groups
      ?.map(
        ({ img_name, img_path }) =>
-          `--${img_name}: url(${getResourceHost(img_path?.comm ?? '')});`
+          `--${img_name}: url(${formatPathHost(img_path?.comm ?? '')});`
      )
      .join('\n      ') ?? ''

@@ -76,10 +76,10 @@ const setupAllMetaData = (data: GameDataValue) => {
      { name: 'description', content: meta.page_desc },
      { property: 'og:title', content: meta.og_title },
      { property: 'og:description', content: meta.og_desc },
-      { property: 'og:image', content: getResourceHost(meta.og_image) },
+      { property: 'og:image', content: formatPathHost(meta.og_image) },
      { name: 'twitter:title', content: meta.x_title },
      { name: 'twitter:description', content: meta.x_desc },
-      { name: 'twitter:image', content: getResourceHost(meta.x_image) },
+      { name: 'twitter:image', content: formatPathHost(meta.x_image) },
    ],
    htmlAttrs: {
      'data-game': data.game_name || '',
--- a/app/pages/inspection/index.vue
+++ b/app/pages/inspection/index.vue
@@ -213,7 +213,7 @@ const enabledMarkets = computed(() => {
 const logoImgUrl = computed(() => {
  const currentLocale = locale.value || 'ko'
  const localeData = (webInspectionData.value as any)?.[currentLocale]
-  return getResourceHost(localeData.img_json.bi_large)
+  return formatPathHost(localeData.img_json.bi_large)
 })

 const communityUrl = computed(() => {
--- a/layers/components/atoms/Img.vue
+++ b/layers/components/atoms/Img.vue
@@ -16,7 +16,7 @@ const isResponsiveMode = computed(() => {

 const imagePaths = computed(() => {
  if (typeof props.src === 'string') {
-    const resolved = getResourceHost(props.src, {
+    const resolved = formatPathHost(props.src, {
      imageType: props.imageType,
    })
    return { pc: '', mo: resolved }
@@ -24,12 +24,12 @@ const imagePaths = computed(() => {

  return {
    pc: props.src.pc
-      ? getResourceHost(props.src.pc, {
+      ? formatPathHost(props.src.pc, {
          imageType: props.imageType,
        })
      : '',
    mo: props.src.mo
-      ? getResourceHost(props.src.mo, {
+      ? formatPathHost(props.src.mo, {
          imageType: props.imageType,
        })
      : '',
--- a/layers/components/blocks/Button/Launcher.vue
+++ b/layers/components/blocks/Button/Launcher.vue
@@ -61,7 +61,7 @@ const inlineStyle = computed<CSSProperties>(() => {
    style.color = props.textColor
  }
  if (props.type === 'duplication') {
-    style.backgroundImage = `url(${getResourceHost(DUP_IMAGE_MAP[props.platform], { imageType: 'common' })})`
+    style.backgroundImage = `url(${formatPathHost(DUP_IMAGE_MAP[props.platform], { imageType: 'common' })})`
  }
  return style
 })
--- a/layers/components/blocks/Button/Sns.vue
+++ b/layers/components/blocks/Button/Sns.vue
@@ -67,7 +67,7 @@ const handleCopy = async () => {
            target="_blank"
            class="sns-item"
            :style="{
-              backgroundImage: `url(${getResourceHost(`/images/common/ic-v2-logo-${key}-fill.png`, { imageType: 'common' })})`,
+              backgroundImage: `url(${formatPathHost(`/images/common/ic-v2-logo-${key}-fill.png`, { imageType: 'common' })})`,
            }"
          >
            <span class="sr-only">{{ key }}</span>
@@ -77,7 +77,7 @@ const handleCopy = async () => {
          type="button"
          class="sns-item"
          :style="{
-            backgroundImage: `url(${getResourceHost('/images/common/ic-v2-community-link-line.png', { imageType: 'common' })})`,
+            backgroundImage: `url(${formatPathHost('/images/common/ic-v2-community-link-line.png', { imageType: 'common' })})`,
          }"
          @click="handleCopy"
        >
--- a/layers/components/blocks/VisualContent.vue
+++ b/layers/components/blocks/VisualContent.vue
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<Props>(), {
  objectFit: 'contain',
 })

-const imagePaths = computed(() => getImagePaths(props.resourcesData))
+const imagePaths = computed(() => getResourceSrc(props.resourcesData))
 const displayText = computed(() => props.resourcesData?.display?.text)
 const colorName = computed(() => props.resourcesData?.display?.color_name)
 const colorCode = computed(() => props.resourcesData?.display?.color_code)
--- a/layers/components/layouts/Footer.vue
+++ b/layers/components/layouts/Footer.vue
@@ -174,7 +174,7 @@
          <a href="https://www.smilegate.com" target="_blank" class="smilegate">
            <img
              :src="
-                getResourceHost(`/images/common/logo_smilegate.png`, {
+                formatPathHost(`/images/common/logo_smilegate.png`, {
                  imageType: 'common',
                })
              "
@@ -190,7 +190,7 @@
          >
            <img
              :src="
-                getResourceHost(`${setDevCi.dev_ci_img_path}`, {
+                formatPathHost(`${setDevCi.dev_ci_img_path}`, {
                  imageType: 'game',
                })
              "
@@ -242,9 +242,12 @@ const getGameRatingImage = computed((): string[] => {
  }
  return contentInfo.map(item => {
    const type = ageTypeMap[item] || 'TypeTest'
-    return getResourceHost(`/images/common/grades_age/${locale.value}/${type}.svg`, {
-      imageType: 'common',
-    })
+    return formatPathHost(
+      `/images/common/grades_age/${locale.value}/${type}.svg`,
+      {
+        imageType: 'common',
+      }
+    )
  })
 })

@@ -266,7 +269,7 @@ const getContentInfoImage = computed((): string[] => {
    .map(item => {
      const type = contentTypeMap[item]
      return type
-        ? getResourceHost(`/images/common/grades_use/${type}.svg`, {
+        ? formatPathHost(`/images/common/grades_use/${type}.svg`, {
            imageType: 'common',
          })
        : ''
@@ -281,7 +284,7 @@ const toggleAgeRating = (): void => {

 const footerAgeRatingInfo = computed((): string[] => {
  const info = (tm as any)('Footer_AgeRating_Info')
-  console.log("🚀 ~ info:", info)
+  console.log('🚀 ~ info:', info)
  return Array.isArray(info) ? info : []
 })
 </script>
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -232,7 +232,7 @@ onMounted(() => {
    >
      <AtomsLocaleLink to="/" class="mx-auto md:hidden">
        <img
-          :src="getResourceHost(gnbData?.bi_path)"
+          :src="formatPathHost(gnbData?.bi_path)"
          :alt="gameData?.game_name"
          class="h-[30px]"
        />
@@ -249,7 +249,7 @@ onMounted(() => {
          <div class="nav-logo">
            <AtomsLocaleLink to="/" @click="handleMenuClose">
              <img
-                :src="getResourceHost(gnbData?.bi_path)"
+                :src="formatPathHost(gnbData?.bi_path)"
                :alt="gameData?.game_name"
                class="h-[30px]"
              />
--- a/layers/components/layouts/Main.vue
+++ b/layers/components/layouts/Main.vue
@@ -53,9 +53,9 @@ const setupSeoMeta = (metaTag: PageDataMetaTag) => {
    description: metaTag?.page_desc ?? '',
    ogTitle: metaTag?.og_title ?? '',
    ogDescription: metaTag?.og_desc ?? '',
-    ogImage: getResourceHost(metaTag?.og_image) ?? '',
+    ogImage: formatPathHost(metaTag?.og_image) ?? '',
    twitterTitle: metaTag?.x_title ?? '',
-    twitterImage: getResourceHost(metaTag?.x_image) ?? '',
+    twitterImage: formatPathHost(metaTag?.x_image) ?? '',
    twitterDescription: metaTag?.x_desc ?? '',
  })
 }
--- a/layers/components/widgets/Background.vue
+++ b/layers/components/widgets/Background.vue
@@ -18,15 +18,11 @@ const { getCurrentSrc } = useResponsiveSrc()

 const videoRef = ref<HTMLVideoElement | null>(null)

-const resPath = computed(() => props.resourcesData?.res_path)
-const imageSrc = computed(() => {
-  return getCurrentSrc(resPath.value)
-})
-const videoSrc = computed(() => {
-  return getCurrentSrc(resPath.value, { resourcesType: 'video' })
+const resourcesSrc = computed(() => {
+  return getCurrentSrc(props.resourcesData)
 })
 const posterSrc = computed(() => {
-  return getCurrentSrc(resPath.value)
+  return getCurrentSrc(props.resourcesData, { resourcesType: 'IMG' })
 })
 const imageClasses = computed(() => [
  `w-full h-full bg-center bg-no-repeat`,
@@ -48,7 +44,7 @@ const restartVideo = () => {
 }

 // src 변경 시 비디오 다시 로드
-watch(videoSrc, () => {
+watch(resourcesSrc, () => {
  if (!videoRef.value) return

  videoRef.value.currentTime = 0
@@ -61,17 +57,20 @@ defineExpose({
 </script>

 <template>
-  <div v-if="resPath" class="overflow-hidden absolute inset-0 w-full h-full">
+  <div
+    v-if="resourcesSrc"
+    class="overflow-hidden absolute inset-0 w-full h-full"
+  >
    <!-- 이미지 타입 -->
    <div
-      v-if="isTypeImage(resourcesData?.resource_type) && imageSrc"
+      v-if="isTypeImage(resourcesData?.resource_type)"
      :class="imageClasses"
-      :style="{ backgroundImage: `url(${imageSrc})` }"
+      :style="{ backgroundImage: `url(${resourcesSrc})` }"
    />

    <!-- 비디오 타입 -->
    <video
-      v-else-if="isTypeVideo(resourcesData?.resource_type) && videoSrc"
+      v-else-if="isTypeVideo(resourcesData?.resource_type)"
      ref="videoRef"
      class="w-full h-full object-cover"
      :poster="posterSrc"
@@ -80,7 +79,7 @@ defineExpose({
      loop
      playsinline
    >
-      <source :src="videoSrc" type="video/mp4" />
+      <source :src="resourcesSrc" type="video/mp4" />
    </video>

    <i v-if="dimmed" class="absolute inset-0 bg-black/50" />
--- a/layers/components/widgets/ButtonList.vue
+++ b/layers/components/widgets/ButtonList.vue
@@ -60,7 +60,7 @@ const downloadFile = async (url: string = '', osType: number = 0) => {
    return
  }

-  const fileUrl = getResourceHost(url)
+  const fileUrl = formatPathHost(url)

  try {
    const res = await $fetch<Blob>(fileUrl, {
--- a/layers/components/widgets/FixMainTitle.vue
+++ b/layers/components/widgets/FixMainTitle.vue
@@ -8,9 +8,8 @@ const props = defineProps<{

 const { getCurrentSrc } = useResponsiveSrc()

-const resPath = computed(() => props.resourcesData?.res_path)
 const imageSrc = computed(() => {
-  return getCurrentSrc(resPath.value)
+  return getCurrentSrc(props.resourcesData)
 })
 </script>

--- a/layers/templates/FxDownload01/index.vue
+++ b/layers/templates/FxDownload01/index.vue
@@ -155,7 +155,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
            >
              <img
                :src="
-                  getResourceHost('/images/common/img_desktop.png', {
+                  formatPathHost('/images/common/img_desktop.png', {
                    imageType: 'common',
                  })
                "
@@ -410,7 +410,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
              <div class="flex items-center justify-center w-full">
                <img
                  :src="
-                    getResourceHost(
+                    formatPathHost(
                      `/images/common/grades_driver/Type-${driver.driverCode}.svg`,
                      { imageType: 'common' }
                    )
--- a/layers/templates/FxPreregist01/index.vue
+++ b/layers/templates/FxPreregist01/index.vue
@@ -240,7 +240,7 @@ const handlePreregistClick = () => {
        <div class="flex flex-col gap-4 mt-8 md:flex-row">
          <div v-if="preImgPreregistdData" class="w-full max-w-[446px]">
            <AtomsImg
-              :src="getImagePaths(preImgPreregistdData)"
+              :src="getResourceSrc(preImgPreregistdData)"
              :alt="preImgPreregistdData?.display?.text"
              loading="lazy"
              decoding="async"
@@ -249,7 +249,7 @@ const handlePreregistClick = () => {
          </div>
          <div v-if="preImgSnsData" class="relative w-full max-w-[446px]">
            <AtomsImg
-              :src="getImagePaths(preImgSnsData)"
+              :src="getResourceSrc(preImgSnsData)"
              :alt="preImgSnsData?.display?.text"
              loading="lazy"
              decoding="async"
@@ -266,7 +266,7 @@ const handlePreregistClick = () => {
              >
                <a :href="btn.link" target="_blank" rel="noopener noreferrer">
                  <AtomsImg
-                    :src="getImagePaths(btn.image)"
+                    :src="getResourceSrc(btn.image)"
                    :alt="btn.image?.display?.text"
                  />
                </a>
@@ -361,7 +361,7 @@ const handlePreregistClick = () => {
              >
                <AtomsImg
                  :src="
-                    getImagePaths(
+                    getResourceSrc(
                      item.flagType === 1 ? item.incomplete : item.default
                    )
                  "
--- a/layers/templates/FxSecure01/index.vue
+++ b/layers/templates/FxSecure01/index.vue
@@ -232,7 +232,7 @@ onMounted(() => {
                >
                  <img
                    :src="
-                      getResourceHost(card.benefitIcon, { imageType: 'common' })
+                      formatPathHost(card.benefitIcon, { imageType: 'common' })
                    "
                    :alt="card.benefitTitle"
                    class="w-[48px] h-[48px] object-contain rounded-2xl"
--- a/layers/templates/GrContents01/index.vue
+++ b/layers/templates/GrContents01/index.vue
@@ -46,8 +46,8 @@ const buttonListData = computed(() => {
      <div v-if="imgListData" class="img-container">
        <div v-for="(item, index) in imgListData" :key="index" class="img-item">
          <AtomsImg
-            v-if="getImagePaths(item)"
-            :src="getImagePaths(item)"
+            v-if="getResourceSrc(item)"
+            :src="getResourceSrc(item)"
            :alt="item?.display?.text"
            class="w-full object-contain"
          />
--- a/layers/templates/GrVisual02/index.vue
+++ b/layers/templates/GrVisual02/index.vue
@@ -5,7 +5,7 @@ import {
  getComponentGroup,
  getComponentContainer,
 } from '#layers/utils/dataUtil'
-import { getResourceHost } from '#layers/utils/styleUtil'
+
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 import type { OperateGroupItem } from '#layers/types/api/operateResources'

@@ -118,7 +118,7 @@ const onArrowClick = direction => {
          <BlocksCardNews
            :title="item.title"
            :description="globalDateFormat(item.reg_dt, locale)"
-            :img-path="getResourceHost(item.img_path)"
+            :img-path="formatPathHost(item.img_path)"
            :url="item.url"
            :link-target="item.link_target"
            class="slide-inner"
--- a/layers/utils/dataUtil.ts
+++ b/layers/utils/dataUtil.ts
@@ -44,6 +44,7 @@ export const getSupportedPlatforms = (
      return storePlatforms
  }
 }
+
 /**
 * 페이지 데이터를 기반으로 레이아웃 타입을 결정합니다.
 * @param pageData 페이지 데이터
@@ -62,7 +63,10 @@ export const getLayoutType = (
 */
 export const isTypeImage = (type: PageDataResourceGroupType): boolean => {
  return (
-    type === 'IMG_COMM' || type === 'IMG_LANG' || type === 'IMG_COMM_GLOBAL'
+    type === 'IMG_COMM' ||
+    type === 'IMG_LANG' ||
+    type === 'IMG_COMM_GLOBAL' ||
+    type === 'IMG'
  )
 }

@@ -163,20 +167,6 @@ export const getComponentGroupAry = (
  return components[componentName]?.groups || []
 }

-export const getImagePaths = (resourcesData: PageDataResourceGroup) => {
-  if (!resourcesData?.res_path) return null
-
-  const pcPath = resourcesData.res_path.path_pc
-  const moPath = resourcesData.res_path.path_mo
-
-  if (!pcPath || !moPath) return pcPath || moPath
-
-  return {
-    pc: pcPath,
-    mo: moPath,
-  }
-}
-
 /**
 * 컴포넌트 그룹의 첫 번째 데이터를 반환합니다.
 * @param components props.components 또는 group 객체
@@ -191,3 +181,34 @@ export const getComponentGroup = (

  return components[componentName]?.groups?.[0] || null
 }
+
+/**
+ * 리소스 데이터를 기반으로 리소스 경로를 반환합니다.
+ * @param resourcesData 리소스 데이터
+ * @param resourcesType 리소스 타입
+ *  - IMG: 이미지
+ *  - VID: 비디오
+ * @returns 리소스 경로 객체 (pc: PC 버전, mo: 모바일 버전) 또는 null
+ */
+export const getResourceSrc = (
+  resourcesData: PageDataResourceGroup,
+  resourcesType?: 'IMG' | 'VID'
+) => {
+  if (!resourcesData) return null
+  const resPath = resourcesData.res_path
+  const resType = resourcesType || resourcesData.resource_type
+
+  const pcField = isTypeVideo(resType) ? 'path_vid_pc' : 'path_pc'
+  const mobileField = isTypeVideo(resType) ? 'path_vid_mo' : 'path_mo'
+
+  const pcPath = resPath[pcField] || resPath[mobileField]
+  const mobilePath = resPath[mobileField] || resPath[pcField]
+
+  // 경로가 없으면 null 반환
+  if (!pcPath && !mobilePath) return null
+
+  return {
+    pc: pcPath,
+    mo: mobilePath,
+  }
+}
--- a/layers/utils/formatUtil.ts
+++ b/layers/utils/formatUtil.ts
@@ -53,3 +53,34 @@ export const formatPathWithoutLocale = (path: string): string => {
 export const isInternalUrl = (url?: string): boolean => {
  return !!url && !url.startsWith('http')
 }
+
+/**
+ * 리소스 경로를 완전한 호스트 URL로 변환합니다.
+ * @param path 리소스 경로
+ * @returns 완전한 리소스 URL
+ */
+export const formatPathHost = (
+  path: string,
+  options: { imageType?: 'common' | 'game'; isSkipHost?: boolean } = {}
+): string => {
+  if (!path) return ''
+
+  if (/^(https?:\/\/|www\.)/.test(path)) return path
+
+  const runtimeConfig = useRuntimeConfig()
+  const { staticUrl, assetsUrl } = runtimeConfig.public
+  const { imageType = 'game', isSkipHost = false } = options
+
+  const isDevelopment = import.meta.dev
+  const isTypeGame = imageType === 'game'
+
+  if (isSkipHost) return path
+
+  // 개발 환경일 때는 루트 경로 생략
+  if (!isTypeGame && isDevelopment) return path
+
+  // 게임/공통 여부에 따른 경로 결정
+  const basePath = isTypeGame ? staticUrl : assetsUrl
+
+  return `${basePath}${path}`
+}
--- a/layers/utils/styleUtil.ts
+++ b/layers/utils/styleUtil.ts
@@ -3,84 +3,12 @@
 * @description ui 처리에 필요한 유틸리티 함수를 제공합니다.
 */

-import { isTypeVideo } from '#layers/utils/dataUtil'
 import type { GameDataResourceGroupBtnInfo } from '#layers/types/api/gameData'
 import type {
  PageDataResourceGroups,
-  PageDataResourceGroup,
-  PageDataResourceGroupResPath,
  PageDataResourceGroupBtnInfo,
 } from '#layers/types/api/pageData'

-/**
- * 리소스 경로를 완전한 호스트 URL로 변환합니다.
- * @param path 리소스 경로
- * @returns 완전한 리소스 URL
- */
-export const getResourceHost = (
-  path: string,
-  options: { imageType?: 'common' | 'game' } = {}
-): string => {
-  if (!path) return ''
-
-  if (/^(https?:\/\/|www\.)/.test(path)) return path
-
-  const runtimeConfig = useRuntimeConfig()
-  const { staticUrl, assetsUrl } = runtimeConfig.public
-  const { imageType = 'game' } = options
-
-  const isDevelopment = import.meta.dev
-  const isTypeGame = imageType === 'game'
-
-  // * [TODO] 수정 필요 : 게임별 이미지 로컬에 추가 필요.
-  if (isTypeGame) return `${staticUrl}${path}`
-
-  // 개발 환경일 때는 루트 경로 생략
-  if (isDevelopment) return path
-
-  // 게임/공통 여부에 따른 경로 결정
-  const basePath = isTypeGame ? staticUrl : assetsUrl
-
-  return `${basePath}${path}`
-}
-
-/**
- * 디바이스 리소스(이미지/비디오)를 처리하여 PC/모바일 버전을 반환합니다.
- * @param pathArray 리소스 경로 배열
- * @param options 리소스 타입 옵션
- * @returns 디바이스 리소스 객체 또는 null
- */
-export const getDeviceSrc = (
-  pathArray: PageDataResourceGroupResPath,
-  options?: {
-    resourcesType?: 'image' | 'video'
-    imageType?: 'common' | 'game'
-  }
-) => {
-  // pathArray가 없으면 null 반환
-  if (!pathArray) return null
-
-  const { resourcesType = 'image', imageType = 'game' } = options ?? {}
-  const pcField = resourcesType === 'video' ? 'path_vid_pc' : 'path_pc'
-  const mobileField = resourcesType === 'video' ? 'path_vid_mo' : 'path_mo'
-
-  const pcPath = pathArray[pcField] || pathArray[mobileField]
-  const mobilePath = pathArray[mobileField] || pathArray[pcField]
-
-  // 경로가 없으면 null 반환
-  if (!pcPath && !mobilePath) return null
-
-  const resolvedImages = {
-    pc: pcPath ? getResourceHost(pcPath, { imageType }) : '',
-    mobile: mobilePath ? getResourceHost(mobilePath, { imageType }) : '',
-  }
-
-  return {
-    mobileSrc: resolvedImages.mobile,
-    pcSrc: resolvedImages.pc,
-  }
-}
-
 /**
 * 색상값을 반환합니다.
 * @param colorName 색상 이름
@@ -147,26 +75,3 @@ export const getPaginationClass = (
    '--pagination-disabled': paginationDisabled,
  }
 }
-
-/**
- * 미디어 이미지를 반환합니다. (이미지 / 유튜브 썸네일)
- * @param resourceGroups - 미디어 리소스 그룹 객체
- * @param quality - 썸네일 품질
- * @returns 미디어 이미지 소스 (이미지 / 유튜브 썸네일)
- */
-export const getMediaImgSrc = (
-  resourceGroups: PageDataResourceGroup,
-  quality?
-): string => {
-  if (!resourceGroups) return ''
-
-  const mediaSrc = resourceGroups?.display?.text
-  const mediaType = resourceGroups?.resource_type
-
-  if (isTypeVideo(mediaType) && mediaSrc) {
-    const thumbnailUrl = getYouTubeThumbnail(mediaSrc, quality)
-    return thumbnailUrl
-  }
-
-  return mediaSrc || ''
-}