fix. loading, preload 추가

layers/components/atoms/Img.vue

@@ -3,7 +3,15 @@ interface Props {
   src: string | { pc?: string; mo?: string }
   alt?: string
   imageType?: 'public' | 'cdn'
+  /**
+   * 브라우저 네이티브 priority 값
+   * - 'high'  : fold 내 반드시 보여야 하는 이미지
+   * - 'low'   : 중요도 낮은 이미지
+   * - 'auto'  : 기본값, 브라우저에 위임
+   */
   priority?: 'high' | 'low' | 'auto'
+  /** 실제 이미지 로드 전까지 표시할 placeholder 이미지 경로 */
+  placeholder?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -37,14 +45,22 @@ const imagePaths = computed(() => {
       : '',
   }
 })
+
+const placeholderSrc = computed(() => props.placeholder ?? '')
 </script>
 
 <template>
   <picture v-if="isResponsiveMode">
-    <source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
-    <source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
+    <source
+      media="(min-width: 1024px)"
+      :srcset="imagePaths.pc || placeholderSrc"
+    />
+    <source
+      media="(max-width: 1023px)"
+      :srcset="imagePaths.mo || placeholderSrc"
+    />
     <img
-      :src="imagePaths.mo"
+      :src="imagePaths.mo || placeholderSrc"
       :alt="alt"
       v-bind="$attrs"
       :loading="priority === 'high' ? 'eager' : 'lazy'"
@@ -55,7 +71,7 @@ const imagePaths = computed(() => {
 
   <img
     v-else
-    :src="imagePaths.mo"
+    :src="imagePaths.mo || placeholderSrc"
     :alt="alt"
     v-bind="$attrs"
     :loading="priority === 'high' ? 'eager' : 'lazy'"