From 348420618d51e2667063bfc9d03f819c43a56fb0 Mon Sep 17 00:00:00 2001
From: DongHyeonka <ehdgus6435@kumoh.ac.kr>
Date: Fri, 21 Aug 2026 17:57:10 +0900
Subject: [PATCH] fix: stop claiming a 1x1 size for an image whose dimensions
 are unknown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

An uploaded figure never appeared, and no request for it was ever made. The
resolver substituted 1x1 when an asset carried no dimensions, and a 1x1 box
with `loading="lazy"` never enters the viewport — so the browser had no reason
to fetch it. The image was not failing to load; it was never asked for.

Unknown dimensions now say so. The figure omits the attributes and loads
eagerly, letting the browser size the image from the file, and reserves layout
space only when the size is actually known. Guessing a number to fill an
attribute is what turned a missing measurement into a missing picture.
---
 .../shared/public-render/asset-resolvers.ts   |  8 +++--
 .../shared/public-render/evidence-figure.tsx  | 34 +++++++------------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/features/tech-log/presentation/shared/public-render/asset-resolvers.ts b/src/features/tech-log/presentation/shared/public-render/asset-resolvers.ts
index a2a7541..54ee03f 100644
--- a/src/features/tech-log/presentation/shared/public-render/asset-resolvers.ts
+++ b/src/features/tech-log/presentation/shared/public-render/asset-resolvers.ts
@@ -53,8 +53,12 @@ export type ResolvedAssetLike = Readonly<{
 function fromDescriptor(descriptor: ResolvedAssetLike): EvidenceAsset {
   return Object.freeze({
     src: descriptor.publicPath,
-    width: descriptor.width ?? 1,
-    height: descriptor.height ?? 1,
+    // 치수를 모르면 0 으로 둔다 — 1 이 아니라. 1×1 은 "아주 작은 그림" 이라는 거짓말이고,
+    // `loading="lazy"` 와 만나면 브라우저는 화면에 걸리지 않는 1×1 상자를 영영 가져오지 않는다.
+    // 실제로 업로드가 치수를 기록하지 않아 모든 그림이 그렇게 사라졌다. 0 은 figure 가
+    // 자기 값을 모른다는 뜻이고, 렌더러가 그때 속성을 빼고 즉시 로드로 바꾼다.
+    width: descriptor.width ?? 0,
+    height: descriptor.height ?? 0,
     triggerLabel: `${descriptor.assetKey} 이미지 크게 보기`,
     dialogLabel: `${descriptor.assetKey} 확대`,
   });
diff --git a/src/features/tech-log/presentation/shared/public-render/evidence-figure.tsx b/src/features/tech-log/presentation/shared/public-render/evidence-figure.tsx
index 47b188e..a9b7c39 100644
--- a/src/features/tech-log/presentation/shared/public-render/evidence-figure.tsx
+++ b/src/features/tech-log/presentation/shared/public-render/evidence-figure.tsx
@@ -30,16 +30,20 @@ export function PublicEvidenceFigure({
     dialogRef.current?.close();
   }
 
+  /**
+   * 치수를 아는 그림만 자리를 미리 잡는다. 모르는데 숫자를 적으면 그 상자가 진짜 크기가 되고,
+   * `loading="lazy"` 는 화면에 걸리지 않는 상자를 끝내 가져오지 않는다 — 그림이 통째로 사라진다.
+   * 모를 때는 속성을 빼고 즉시 로드해, 브라우저가 원래 크기로 그리게 둔다.
+   */
+  const known = asset.width > 0 && asset.height > 0;
+  const sizing = known
+    ? ({ width: asset.width, height: asset.height, loading: "lazy" } as const)
+    : ({ loading: "eager" } as const);
+
   if (!zoom) {
     return (
       <figure className="evidence-figure">
-        <img
-          src={asset.src}
-          width={asset.width}
-          height={asset.height}
-          alt={alt}
-          loading="lazy"
-        />
+        <img src={asset.src} alt={alt} {...sizing} />
         <figcaption>{caption}</figcaption>
       </figure>
     );
@@ -56,13 +60,7 @@ export function PublicEvidenceFigure({
           aria-describedby={descriptionId}
           onClick={open}
         >
-          <img
-            src={asset.src}
-            width={asset.width}
-            height={asset.height}
-            alt={alt}
-            loading="lazy"
-          />
+          <img src={asset.src} alt={alt} {...sizing} />
           <span>크게 보기</span>
           <span className="visually-hidden" id={descriptionId}>
             {alt}
@@ -84,13 +82,7 @@ export function PublicEvidenceFigure({
           <button type="button" className="dialog-close" onClick={close}>
             닫기
           </button>
-          <img
-            src={asset.src}
-            width={asset.width}
-            height={asset.height}
-            alt={alt}
-            loading="lazy"
-          />
+          <img src={asset.src} alt={alt} {...sizing} />
           <p>{caption}</p>
         </div>
       </dialog>