feat. getResolvedHost 함수 추가, img 컴포넌트 추가

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"