fix. utils 함수 리팩토링

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 || '',

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(() => {

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,
         })
       : '',

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
 })

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"
         >

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)

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`, {
+    return formatPathHost(
-      imageType: 'common',
+      `/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>

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]"
               />

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 ?? '',
   })
 }

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 resourcesSrc = computed(() => {
-const imageSrc = computed(() => {
+  return getCurrentSrc(props.resourcesData)
-  return getCurrentSrc(resPath.value)
-})
-const videoSrc = computed(() => {
-  return getCurrentSrc(resPath.value, { resourcesType: 'video' })
 })
 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" />

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, {

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>
 

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' }
                     )

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
                     )
                   "

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"

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)"
+            v-if="getResourceSrc(item)"
-            :src="getImagePaths(item)"
+            :src="getResourceSrc(item)"
             :alt="item?.display?.text"
             class="w-full object-contain"
           />

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"

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,
+  }
+}

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}`
+}

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 || ''
-}