From 82295502202b59ac4b50bac824a4c05afe401818 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Thu, 30 Oct 2025 21:32:17 +0900
Subject: [PATCH] =?UTF-8?q?feat.=20getResolvedHost=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80,=20img=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/atoms/Button/Launcher.vue |  5 +--
 layers/components/atoms/Button/Sns.vue      |  4 +-
 layers/components/atoms/Img.vue             | 37 +++++++++++--------
 layers/components/atoms/ResourcesImg.vue    | 41 +++++++++++++++++++++
 layers/templates/GrContents01/index.vue     |  2 +-
 layers/utils/styleUtil.ts                   | 20 ++++++++--
 6 files changed, 84 insertions(+), 25 deletions(-)
 create mode 100644 layers/components/atoms/ResourcesImg.vue

diff --git a/layers/components/atoms/Button/Launcher.vue b/layers/components/atoms/Button/Launcher.vue
index 8918489..16d9ece 100644
--- a/layers/components/atoms/Button/Launcher.vue
+++ b/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
 })
diff --git a/layers/components/atoms/Button/Sns.vue b/layers/components/atoms/Button/Sns.vue
index ca3194f..0ef8347 100644
--- a/layers/components/atoms/Button/Sns.vue
+++ b/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"
         >
diff --git a/layers/components/atoms/Img.vue b/layers/components/atoms/Img.vue
index 8ec9a47..2343cea 100644
--- a/layers/components/atoms/Img.vue
+++ b/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"
diff --git a/layers/components/atoms/ResourcesImg.vue b/layers/components/atoms/ResourcesImg.vue
new file mode 100644
index 0000000..8ec9a47
--- /dev/null
+++ b/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>
diff --git a/layers/templates/GrContents01/index.vue b/layers/templates/GrContents01/index.vue
index 9b2746a..16bf204 100644
--- a/layers/templates/GrContents01/index.vue
+++ b/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"
diff --git a/layers/utils/styleUtil.ts b/layers/utils/styleUtil.ts
index 695315a..3e2fa04 100644
--- a/layers/utils/styleUtil.ts
+++ b/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}`