feat: port TechLog content format and renderer

2026-08-15 18:44:09 +09:00
parent 82f94423e5
commit 16753f53af
18 changed files with 3148 additions and 0 deletions
@@ -0,0 +1,99 @@
+import { useId, useRef } from "react";
+
+import type { ResolveEvidenceAsset } from "../../../domain/public-render-content.ts";
+
+type PublicEvidenceFigureProps = {
+  evidenceKey: string;
+  alt: string;
+  caption: string;
+  zoom: boolean;
+  resolveEvidenceAsset: ResolveEvidenceAsset;
+};
+
+export function PublicEvidenceFigure({
+  evidenceKey,
+  alt,
+  caption,
+  zoom,
+  resolveEvidenceAsset,
+}: PublicEvidenceFigureProps) {
+  const asset = resolveEvidenceAsset(evidenceKey);
+  const descriptionId = useId();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  function open() {
+    dialogRef.current?.showModal();
+  }
+
+  function close() {
+    dialogRef.current?.close();
+  }
+
+  if (!zoom) {
+    return (
+      <figure className="evidence-figure">
+        <img
+          src={asset.src}
+          width={asset.width}
+          height={asset.height}
+          alt={alt}
+          loading="lazy"
+        />
+        <figcaption>{caption}</figcaption>
+      </figure>
+    );
+  }
+
+  return (
+    <>
+      <figure className="evidence-figure">
+        <button
+          ref={triggerRef}
+          className="evidence-image-button"
+          type="button"
+          aria-label={asset.triggerLabel}
+          aria-describedby={descriptionId}
+          onClick={open}
+        >
+          <img
+            src={asset.src}
+            width={asset.width}
+            height={asset.height}
+            alt={alt}
+            loading="lazy"
+          />
+          <span>크게 보기</span>
+          <span className="visually-hidden" id={descriptionId}>
+            {alt}
+          </span>
+        </button>
+        <figcaption>{caption}</figcaption>
+      </figure>
+
+      <dialog
+        ref={dialogRef}
+        className="figure-dialog"
+        aria-label={asset.dialogLabel}
+        onClose={() => triggerRef.current?.focus()}
+        onClick={(event) => {
+          if (event.target === event.currentTarget) close();
+        }}
+      >
+        <div>
+          <button type="button" className="dialog-close" onClick={close}>
+            닫기
+          </button>
+          <img
+            src={asset.src}
+            width={asset.width}
+            height={asset.height}
+            alt={alt}
+            loading="lazy"
+          />
+          <p>{caption}</p>
+        </div>
+      </dialog>
+    </>
+  );
+}