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"

layers/templates/GrContents01/index.vue

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

layers/utils/dataUtil.ts

@@ -7,6 +7,7 @@ import type {
   PageDataValue,
   PageDataResourceContainer,
   PageDataTemplateComponents,
+  PageDataResourceGroup,
   PageDataResourceGroupType,
 } from '#layers/types/api/pageData'
 import type { OperateComponents } from '#layers/types/api/resourcesData'
@@ -145,12 +146,16 @@ export const getComponentGroupAry = (
   return components[componentName]?.groups || []
 }
 
-/**
- * 현재 시간의 타임스탬프를 반환합니다.
- * @param unit 단위 ('ms' | 's') - 밀리초 또는 초
- * @returns 타임스탬프
- */
-export const getCurrentTimestamp = (unit: 'ms' | 's' = 'ms'): number => {
-  const now = Date.now()
-  return unit === 's' ? Math.floor(now / 1000) : now
+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,
+  }
 }