From e9a9299a4a418692b32b127b23e88e5e14c4dff1 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Thu, 30 Oct 2025 21:42:19 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20img=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/atoms/Img.vue               | 45 +++++++++----------
 .../{ResourcesImg.vue => ImgResources.vue}    |  0
 layers/templates/GrContents01/index.vue       |  2 +-
 3 files changed, 23 insertions(+), 24 deletions(-)
 rename layers/components/atoms/{ResourcesImg.vue => ImgResources.vue} (100%)

diff --git a/layers/components/atoms/Img.vue b/layers/components/atoms/Img.vue
index 2343cea..3a4f054 100644
--- a/layers/components/atoms/Img.vue
+++ b/layers/components/atoms/Img.vue
@@ -1,24 +1,28 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { getResolvedHost } from '#layers/utils/styleUtil'
 
 interface Props {
-  src: {
-    pc?: string
-    mo?: string
-  }
+  src: string | { pc?: string; mo?: string }
   alt?: string
-  objectFit?: 'contain' | 'cover'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   alt: 'image',
-  objectFit: 'contain',
 })
 
 const isDev = process.env.NODE_ENV === 'development'
 const rootPath = isDev ? '' : '/templates/brand'
 
+const isResponsiveMode = computed(() => {
+  return typeof props.src === 'object' && !!props.src.pc && !!props.src.mo
+})
 const imagePaths = computed(() => {
+  if (typeof props.src === 'string') {
+    const resolved = getResolvedHost(`${rootPath}${props.src}`)
+    return { pc: resolved, mo: '' }
+  }
+
   return {
     pc: props.src.pc ? getResolvedHost(`${rootPath}${props.src.pc}`) : '',
     mo: props.src.mo ? getResolvedHost(`${rootPath}${props.src.mo}`) : '',
@@ -27,22 +31,17 @@ const imagePaths = computed(() => {
 </script>
 
 <template>
-  <picture v-if="imagePaths" ref="pictureRef">
-    <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 || imagePaths.mo"
-      :alt="alt"
-      :class="`w-full h-full object-${objectFit}`"
-      loading="lazy"
-    />
+  <picture v-if="isResponsiveMode">
+    <source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
+    <source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
+    <img :src="imagePaths.pc" :alt="alt" v-bind="$attrs" loading="lazy" />
   </picture>
+
+  <img
+    v-else
+    :src="imagePaths.pc || imagePaths.mo"
+    :alt="alt"
+    v-bind="$attrs"
+    loading="lazy"
+  />
 </template>
diff --git a/layers/components/atoms/ResourcesImg.vue b/layers/components/atoms/ImgResources.vue
similarity index 100%
rename from layers/components/atoms/ResourcesImg.vue
rename to layers/components/atoms/ImgResources.vue
diff --git a/layers/templates/GrContents01/index.vue b/layers/templates/GrContents01/index.vue
index 16bf204..fa7a55a 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">
-          <AtomsResourcesImg
+          <AtomsImgResources
             :resources-data="item"
             object-fit="contain"
             :alt="item?.group_label"