From 1d3cd18ada8440a0756809bfeeca6ff36d9edb08 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 22 Oct 2025 17:37:23 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20mo=20=EB=85=B8=EC=B6=9C=EB=90=98?=
 =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/blocks/VisualContent.vue | 33 +++++++++++++++-------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/layers/components/blocks/VisualContent.vue b/layers/components/blocks/VisualContent.vue
index ce19871..e968b22 100644
--- a/layers/components/blocks/VisualContent.vue
+++ b/layers/components/blocks/VisualContent.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+import { getResolvedHost, getColorCode } from '#layers/utils/styleUtil'
+import { isTypeImage, isTypeText } from '#layers/utils/dataUtil'
 
 interface Props {
   resourcesData?: PageDataResourceGroup
@@ -11,10 +13,18 @@ const props = withDefaults(defineProps<Props>(), {
   objectFit: 'contain',
 })
 
-const { getCurrentSrc } = useResponsiveSrc()
+const imagePaths = computed(() => {
+  if (!props.resourcesData?.res_path) return null
 
-const imageSrc = computed(() => {
-  return getCurrentSrc(props.resourcesData?.res_path)
+  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'
@@ -34,13 +44,16 @@ const sanitizedContent = computed(() => {
 
 <template>
   <!-- 이미지 -->
-  <img
-    v-if="isTypeImage(resourcesData?.resource_type) && imageSrc"
-    :src="imageSrc"
-    :alt="alt || displayText"
-    :class="`w-full h-full object-${objectFit}`"
-    loading="lazy"
-  />
+  <picture v-if="isTypeImage(resourcesData?.resource_type) && imagePaths">
+    <source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
+    <source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
+    <img
+      :src="imagePaths.pc"
+      :alt="alt || displayText"
+      :class="`w-full h-full object-${objectFit}`"
+      loading="lazy"
+    />
+  </picture>
   <!-- 텍스트 -->
   <span
     v-else-if="isTypeText(resourcesData?.resource_type)"