fix. 이미지 컴포넌트 수정

layers/components/atoms/Img.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { getResolvedHost } from '#layers/utils/styleUtil'
-
 interface Props {
   src: string | { pc?: string; mo?: string }
   alt?: string

layers/components/atoms/ImgResources.vue

@@ -1,41 +0,0 @@
-<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/components/blocks/VisualContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
-import { getResolvedHost, getColorCode } from '#layers/utils/styleUtil'
+import { getColorCode } from '#layers/utils/styleUtil'
 import { isTypeImage, isTypeText } from '#layers/utils/dataUtil'
 
 interface Props {
@@ -13,28 +13,12 @@ const props = withDefaults(defineProps<Props>(), {
   objectFit: 'contain',
 })
 
-const imagePaths = computed(() => {
-  if (!props.resourcesData?.res_path) return null
-
-  const pcPath =
-    props.resourcesData.res_path.path_pc ?? props.resourcesData.res_path.path_mo
-  const moPath =
-    props.resourcesData.res_path.path_mo ?? props.resourcesData.res_path.path_pc
-
-  return {
-    pc: pcPath ? getResolvedHost(pcPath) : '',
-    mo: moPath ? getResolvedHost(moPath) : '',
-  }
-})
-const displayText = computed(() => {
-  return props.resourcesData?.display?.text || 'image'
-})
-const colorName = computed(() => {
-  return props.resourcesData?.display?.color_name
-})
-const colorCode = computed(() => {
-  return props.resourcesData?.display?.color_code
-})
+const imagePaths = computed(() => getImagePaths(props.resourcesData))
+const displayText = computed(
+  () => props.resourcesData?.display?.text || 'image'
+)
+const colorName = computed(() => props.resourcesData?.display?.color_name)
+const colorCode = computed(() => props.resourcesData?.display?.color_code)
 
 // HTML 콘텐츠 정리 (줄바꿈 처리)
 const sanitizedContent = computed(() => {
@@ -43,18 +27,14 @@ const sanitizedContent = computed(() => {
 </script>
 
 <template>
-  <!-- 이미지 -->
-  <picture v-if="isTypeImage(resourcesData?.resource_type) && imagePaths">
-    <source :srcset="imagePaths.pc" media="(min-width: 1024px)" />
-    <source :srcset="imagePaths.mo" media="(max-width: 1023px)" />
-    <img
-      :src="imagePaths.pc"
-      :alt="alt || displayText"
-      :class="`w-full h-full object-${objectFit}`"
-      loading="lazy"
-    />
-  </picture>
-  <!-- 텍스트 -->
+  <AtomsImg
+    v-if="isTypeImage(resourcesData?.resource_type) && imagePaths"
+    ref="pictureRef"
+    :src="imagePaths"
+    :alt="alt || displayText"
+    :class="`w-full h-full object-${objectFit}`"
+  />
+
   <span
     v-else-if="isTypeText(resourcesData?.resource_type)"
     v-dompurify-html="sanitizedContent"