From eca40d10c27e6cdc3dc34f8562cdedbf796953c3 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Fri, 6 Mar 2026 15:06:01 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20loading,=20preload=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/atoms/Img.vue   | 24 ++++++++++++++++++++----
 layers/components/atoms/Video.vue | 12 ++++++++++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/layers/components/atoms/Img.vue b/layers/components/atoms/Img.vue
index da421f5..00cb55a 100644
--- a/layers/components/atoms/Img.vue
+++ b/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'"
diff --git a/layers/components/atoms/Video.vue b/layers/components/atoms/Video.vue
index 035fab1..6e3be0d 100644
--- a/layers/components/atoms/Video.vue
+++ b/layers/components/atoms/Video.vue
@@ -7,6 +7,13 @@ interface Props {
   loop?: boolean
   bordered?: boolean
   class?: string
+  /**
+   * 비디오 데이터 로딩 시점
+   * - none: 재생 전까지 로드 안 함 (가장 절약)
+   * - metadata: 길이·크기 등 메타만 로드
+   * - auto: 재생에 맞게 미리 로드 (autoplay 시 권장)
+   */
+  preload?: 'none' | 'metadata' | 'auto'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -16,6 +23,10 @@ const props = withDefaults(defineProps<Props>(), {
   bordered: true,
 })
 
+const effectivePreload = computed(
+  () => props.preload ?? (props.play ? 'auto' : 'none')
+)
+
 const videoRef = ref<HTMLVideoElement | null>(null)
 const pauseTimer = ref<ReturnType<typeof setTimeout> | null>(null)
 
@@ -119,6 +130,7 @@ onBeforeUnmount(() => {
       :poster="props.poster"
       :loop="props.loop"
       :autoplay="props.play"
+      :preload="effectivePreload"
       muted
       playsinline
       webkit-playsinline