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 (
- {alt} + {alt}
{caption}
); @@ -56,13 +60,7 @@ export function PublicEvidenceFigure({ aria-describedby={descriptionId} onClick={open} > - {alt} + {alt} 크게 보기 {alt} @@ -84,13 +82,7 @@ export function PublicEvidenceFigure({ - {alt} + {alt}

{caption}