feat. getResolvedHost 함수 추가, img 컴포넌트 추가

layers/components/atoms/Button/Launcher.vue

@@ -49,9 +49,6 @@ const componentTag = computed(() => {
 const isDuplication = computed(() => props.type === 'duplication')
 const isSingle = computed(() => props.type === 'single')
 const platformIcon = computed(() => PLATFORM_ICON_MAP[props.platform])
-const duplicationImage = computed(() =>
-  isDuplication.value ? DUP_IMAGE_MAP[props.platform] : ''
-)
 
 const inlineStyle = computed<CSSProperties>(() => {
   const style: CSSProperties = {}
@@ -63,7 +60,7 @@ const inlineStyle = computed<CSSProperties>(() => {
     style.color = props.textColor
   }
   if (props.type === 'duplication') {
-    style.backgroundImage = `url(${duplicationImage.value})`
+    style.backgroundImage = `url(${getImageHost(DUP_IMAGE_MAP[props.platform])})`
   }
   return style
 })

layers/components/atoms/Button/Sns.vue

@@ -77,7 +77,7 @@ const handleCopy = async () => {
             target="_blank"
             class="sns-item"
             :style="{
-              backgroundImage: `url(/images/common/ic-v2-logo-${key}-fill.svg)`,
+              backgroundImage: `url(${getImageHost(`/images/common/ic-v2-logo-${key}-fill.svg`)})`,
             }"
           >
             <span class="sr-only">{{ key }}</span>
@@ -87,7 +87,7 @@ const handleCopy = async () => {
           type="button"
           class="sns-item"
           :style="{
-            backgroundImage: `url(/images/common/ic-v2-community-link-line.svg)`,
+            backgroundImage: `url(${getImageHost('/images/common/ic-v2-community-link-line.svg')})`,
           }"
           @click="handleCopy"
         >

layers/components/atoms/Img.vue

@@ -1,38 +1,45 @@
 <script setup lang="ts">
 import { getResolvedHost } from '#layers/utils/styleUtil'
-import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 interface Props {
-  resourcesData?: PageDataResourceGroup
-  objectFit?: 'contain' | 'cover'
+  src: {
+    pc?: string
+    mo?: string
+  }
   alt?: string
+  objectFit?: 'contain' | 'cover'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  objectFit: 'contain',
   alt: 'image',
+  objectFit: 'contain',
 })
 
-const imagePaths = computed(() => {
-  if (!props.resourcesData?.res_path) return null
+const isDev = process.env.NODE_ENV === 'development'
+const rootPath = isDev ? '' : '/templates/brand'
 
-  const pc =
-    props.resourcesData.res_path.path_pc ?? props.resourcesData.res_path.path_mo
-  const mo =
-    props.resourcesData.res_path.path_mo ?? props.resourcesData.res_path.path_pc
+const imagePaths = computed(() => {
   return {
-    pc: pc ? getResolvedHost(pc) : '',
-    mo: mo ? getResolvedHost(mo) : '',
+    pc: props.src.pc ? getResolvedHost(`${rootPath}${props.src.pc}`) : '',
+    mo: props.src.mo ? getResolvedHost(`${rootPath}${props.src.mo}`) : '',
   }
 })
 </script>
 
 <template>
   <picture v-if="imagePaths" ref="pictureRef">
-    <source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
-    <source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
+    <source
+      v-if="imagePaths.pc"
+      media="(min-width: 1024px)"
+      :srcset="imagePaths.pc"
+    />
+    <source
+      v-if="imagePaths.mo"
+      media="(max-width: 1023px)"
+      :srcset="imagePaths.mo"
+    />
     <img
-      :src="imagePaths.pc"
+      :src="imagePaths.pc || imagePaths.mo"
       :alt="alt"
       :class="`w-full h-full object-${objectFit}`"
       loading="lazy"

layers/components/atoms/ResourcesImg.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { getResolvedHost } from '#layers/utils/styleUtil'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+
+interface Props {
+  resourcesData?: PageDataResourceGroup
+  objectFit?: 'contain' | 'cover'
+  alt?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  objectFit: 'contain',
+  alt: 'image',
+})
+
+const imagePaths = computed(() => {
+  if (!props.resourcesData?.res_path) return null
+
+  const pc =
+    props.resourcesData.res_path.path_pc ?? props.resourcesData.res_path.path_mo
+  const mo =
+    props.resourcesData.res_path.path_mo ?? props.resourcesData.res_path.path_pc
+  return {
+    pc: pc ? getResolvedHost(pc) : '',
+    mo: mo ? getResolvedHost(mo) : '',
+  }
+})
+</script>
+
+<template>
+  <picture v-if="imagePaths" ref="pictureRef">
+    <source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
+    <source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
+    <img
+      :src="imagePaths.pc"
+      :alt="alt"
+      :class="`w-full h-full object-${objectFit}`"
+      loading="lazy"
+    />
+  </picture>
+</template>

layers/templates/GrContents01/index.vue

@@ -45,7 +45,7 @@ const buttonListData = computed(() => {
       />
       <div v-if="imgListData" class="img-container">
         <div v-for="(item, index) in imgListData" :key="index" class="img-item">
-          <AtomsImg
+          <AtomsResourcesImg
             :resources-data="item"
             object-fit="contain"
             :alt="item?.group_label"

layers/utils/styleUtil.ts

@@ -8,6 +8,23 @@ import type {
   PageDataResourceGroupResPath,
 } from '#layers/types/api/pageData'
 
+/**
+ * 이미지 경로를 완전한 호스트 URL로 변환합니다.
+ * @param path 이미지 경로
+ * @returns 완전한 이미지 URL
+ */
+export const getImageHost = (path: string): string => {
+  // path가 없으면 빈 문자열 반환
+  if (!path || typeof path !== 'string') return ''
+
+  const config = useRuntimeConfig()
+
+  const isDev = process.env.NODE_ENV === 'development'
+  const rootPath = isDev ? '' : `${config.public.staticUrl}`
+
+  return `${rootPath}${path}`
+}
+
 /**
  * [TODO] 수정 필요
  * 이미지 경로를 완전한 호스트 URL로 변환합니다.
@@ -27,9 +44,6 @@ export const getResolvedHost = (path: string): string => {
   }
 
   const config = useRuntimeConfig()
-  //   const isDev = process.env.NODE_ENV === "development";
-  //   const rootPath = isDev ? "/images" : `${config.public.staticUrl}`;
-
   const rootPath = config.public.staticUrl
 
   return `${rootPath}${path}`