- 15
+ {showcaseCount}
라이브 쇼케이스
@@ -266,7 +268,7 @@ const siteLabel = "사이트 보기";
designpaca
diff --git a/apps/site/tools/capture-showcase-duo.mjs b/apps/site/tools/capture-showcase-duo.mjs
new file mode 100644
index 0000000..e3134bd
--- /dev/null
+++ b/apps/site/tools/capture-showcase-duo.mjs
@@ -0,0 +1,194 @@
+// 한남자리·철판클럽 전용 캡처.
+//
+// 이 스크립트가 덮어쓰는 파일은 아래 여섯 개뿐이다.
+// src/assets/shots/work-hannam-jari.png
+// src/assets/shots/work-hannam-jari-2.png
+// src/assets/shots/work-griddle-club.png
+// src/assets/shots/work-griddle-club-2.png
+// public/work/hannam-jari/og.png
+// public/work/griddle-club/og.png
+//
+// 공개 자산과 같은 HTTP 경로로 상대 링크를 검증하고, 폰트·이미지가 준비되지 않으면
+// 불완전한 화면을 저장하지 않고 실패한다.
+import fs from "node:fs";
+import http from "node:http";
+import path from "node:path";
+import url from "node:url";
+
+import puppeteer from "puppeteer-core";
+
+const here = path.dirname(url.fileURLToPath(import.meta.url));
+const root = path.resolve(here, "..");
+const publicRoot = path.join(root, "public");
+const shotsRoot = path.join(root, "src", "assets", "shots");
+
+const chrome = [
+ process.env.CHROME_PATH,
+ "C:/Program Files/Google/Chrome/Application/chrome.exe",
+ "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
+ "/usr/bin/google-chrome",
+ "/usr/bin/chromium",
+].find((candidate) => candidate && fs.existsSync(candidate));
+
+if (!chrome) {
+ throw new Error("Chrome/Chromium executable not found. Set CHROME_PATH or install Chrome/Chromium.");
+}
+
+const MIME = new Map([
+ [".avif", "image/avif"],
+ [".css", "text/css; charset=utf-8"],
+ [".html", "text/html; charset=utf-8"],
+ [".ico", "image/x-icon"],
+ [".jpeg", "image/jpeg"],
+ [".jpg", "image/jpeg"],
+ [".js", "text/javascript; charset=utf-8"],
+ [".json", "application/json; charset=utf-8"],
+ [".png", "image/png"],
+ [".svg", "image/svg+xml"],
+ [".webmanifest", "application/manifest+json; charset=utf-8"],
+ [".webp", "image/webp"],
+ [".woff", "font/woff"],
+ [".woff2", "font/woff2"],
+]);
+
+const jobs = [
+ {
+ label: "한남자리 공개",
+ route: "/work/hannam-jari/",
+ output: path.join(shotsRoot, "work-hannam-jari.png"),
+ },
+ {
+ label: "한남자리 관리자",
+ route: "/work/hannam-jari/admin/",
+ output: path.join(shotsRoot, "work-hannam-jari-2.png"),
+ },
+ {
+ label: "철판클럽 공개",
+ route: "/work/griddle-club/",
+ output: path.join(shotsRoot, "work-griddle-club.png"),
+ },
+ {
+ label: "철판클럽 가맹",
+ route: "/work/griddle-club/franchise/",
+ output: path.join(shotsRoot, "work-griddle-club-2.png"),
+ },
+];
+
+const ogJobs = [
+ {
+ label: "한남자리 OG",
+ route: "/work/hannam-jari/",
+ output: path.join(publicRoot, "work", "hannam-jari", "og.png"),
+ },
+ {
+ label: "철판클럽 OG",
+ route: "/work/griddle-club/",
+ output: path.join(publicRoot, "work", "griddle-club", "og.png"),
+ },
+];
+
+function inside(rootDirectory, candidate) {
+ const relative = path.relative(rootDirectory, candidate);
+ return relative === "" || (!relative.startsWith(".." + path.sep) && relative !== ".." && !path.isAbsolute(relative));
+}
+
+const server = http.createServer((request, response) => {
+ try {
+ const pathname = decodeURIComponent(new URL(request.url, "http://127.0.0.1").pathname);
+ const candidate = path.resolve(publicRoot, `.${pathname}`);
+ if (!inside(publicRoot, candidate)) {
+ response.writeHead(403).end("forbidden");
+ return;
+ }
+ const file = fs.existsSync(candidate) && fs.statSync(candidate).isDirectory()
+ ? path.join(candidate, "index.html")
+ : candidate;
+ if (!fs.existsSync(file) || !fs.statSync(file).isFile()) {
+ response.writeHead(404).end("not found");
+ return;
+ }
+ response.setHeader("Content-Type", MIME.get(path.extname(file).toLowerCase()) || "application/octet-stream");
+ response.setHeader("Cache-Control", "no-store");
+ fs.createReadStream(file).pipe(response);
+ } catch {
+ response.writeHead(400).end("bad request");
+ }
+});
+
+await fs.promises.mkdir(shotsRoot, { recursive: true });
+await new Promise((resolve, reject) => {
+ server.once("error", reject);
+ server.listen(0, "127.0.0.1", resolve);
+});
+
+const address = server.address();
+const origin = `http://127.0.0.1:${address.port}`;
+let browser;
+
+async function waitForReady(page) {
+ await Promise.race([
+ page.evaluate(() => document.fonts?.ready || Promise.resolve()),
+ new Promise((_, reject) => setTimeout(() => reject(new Error("Font readiness timed out")), 10000)),
+ ]);
+ await page.evaluate(async () => {
+ const images = [...document.images];
+ for (const image of images) image.loading = "eager";
+ await Promise.allSettled(images.map((image) => image.decode()));
+ });
+ await new Promise((resolve) => setTimeout(resolve, 900));
+ const broken = await page.evaluate(() => [...document.images]
+ .filter((image) => image.complete && image.naturalWidth === 0)
+ .map((image) => image.currentSrc || image.src));
+ if (broken.length) throw new Error(`Broken images: ${broken.join(", ")}`);
+ await page.addStyleTag({
+ content: "*{animation:none!important;transition:none!important;caret-color:transparent!important}html{scroll-behavior:auto!important}::-webkit-scrollbar{display:none!important}",
+ });
+ await page.evaluate(() => window.scrollTo(0, 0));
+}
+
+async function capture(job, viewport) {
+ const page = await browser.newPage();
+ const failures = [];
+ page.on("pageerror", (error) => failures.push(`pageerror ${error.message}`));
+ page.on("response", (response) => {
+ if (response.url().startsWith(origin) && response.status() >= 400) {
+ failures.push(`${response.status()} ${response.url()}`);
+ }
+ });
+ try {
+ await page.setCacheEnabled(false);
+ await page.setViewport(viewport);
+ const response = await page.goto(origin + job.route, { waitUntil: "networkidle0", timeout: 30000 });
+ if (!response?.ok()) throw new Error(`${job.route} returned ${response?.status() ?? "no response"}`);
+ await waitForReady(page);
+ if (failures.length) throw new Error(failures.join(" · "));
+ await fs.promises.mkdir(path.dirname(job.output), { recursive: true });
+ await page.screenshot({ path: job.output, type: "png", fullPage: false });
+ const size = Math.round((await fs.promises.stat(job.output)).size / 1024);
+ console.log(`CAPTURE ${job.label} → ${path.relative(root, job.output)} (${viewport.width}×${viewport.height}, ${size}KB)`);
+ } finally {
+ await page.close();
+ }
+}
+
+try {
+ console.log("OVERWRITE SCOPE");
+ for (const job of [...jobs, ...ogJobs]) console.log(`- ${path.relative(root, job.output)}`);
+ browser = await puppeteer.launch({
+ executablePath: chrome,
+ headless: "new",
+ args: [
+ "--no-sandbox",
+ "--use-angle=swiftshader",
+ "--enable-unsafe-swiftshader",
+ "--force-device-scale-factor=1",
+ ],
+ });
+ for (const job of jobs) await capture(job, { width: 1440, height: 900, deviceScaleFactor: 1 });
+ for (const job of ogJobs) await capture(job, { width: 1200, height: 630, deviceScaleFactor: 1 });
+} finally {
+ if (browser) await browser.close();
+ await new Promise((resolve) => server.close(resolve));
+}
+
+console.log("쇼케이스 듀오 카드 4장과 OG 2장 캡처 완료");
diff --git a/apps/site/tools/design-gate.mjs b/apps/site/tools/design-gate.mjs
index f111e3d..f2a04e7 100644
--- a/apps/site/tools/design-gate.mjs
+++ b/apps/site/tools/design-gate.mjs
@@ -26,6 +26,7 @@ const DEFAULT_CFG = {
viewAttribute: "data-view",
views: ["main"],
h1: "h1",
+ h1MaxLines: 1,
brand: ".brand",
},
],
@@ -103,49 +104,105 @@ const cssFilesOf = (p) => {
return out;
};
+// 페이지가 공유 CSS·동적 JS·지역 토큰을 함께 쓰면 HTML 한 장과 파일명 규칙만으로
+// 소유권을 추측할 수 없다. staticContract 는 검사 자체를 끄지 않고, 어떤 CSS를
+// 어떤 문서 코퍼스로 대조하며 어느 파일이 토큰 권위인지 명시한다.
+const contractFilesOf = (p, key, fallback) => {
+ const specs = p.staticContract?.[key];
+ if (!Array.isArray(specs)) return fallback;
+ return specs.map((file) => path.resolve(process.cwd(), file));
+};
+
+const scriptFilesOf = (p) => {
+ const out = [];
+ let html = "";
+ try { html = fs.readFileSync(path.resolve(process.cwd(), p.path), "utf8"); } catch { return out; }
+ for (const tag of html.matchAll(/
]+src=["']([^"']+)["'][^>]*>/g)) {
+ const src = tag[1];
+ if (/^(?:https?:|data:)/.test(src)) continue;
+ const file = path.resolve(pageDir(p), src.split("?")[0]);
+ if (fs.existsSync(file) && !out.includes(file)) out.push(file);
+ }
+ return out;
+};
+
+const selectorDocumentsOf = (p) => contractFilesOf(
+ p,
+ "selectorDocuments",
+ [path.resolve(process.cwd(), p.path), ...scriptFilesOf(p)],
+);
+
+const missingFiles = (files) => files.filter((file) => !fs.existsSync(file));
+
if (CFG.checks.deadCss) {
const ignore = CFG.deadCssIgnore || [];
for (const p of CFG.pages) {
- let html = "";
- try { html = fs.readFileSync(path.resolve(process.cwd(), p.path), "utf8"); }
- catch { skip(`${p.name} 죽은 선택자`, "HTML 읽기 실패"); continue; }
- const files = cssFilesOf(p);
+ const files = contractFilesOf(p, "selectorFiles", cssFilesOf(p));
+ const documents = selectorDocumentsOf(p);
+ const missing = missingFiles([...files, ...documents]);
+ if (missing.length) {
+ fail(`${p.name} 죽은 선택자 계약`, `없는 파일 ${missing.map((file) => path.relative(process.cwd(), file)).join(", ")}`);
+ continue;
+ }
if (!files.length) { skip(`${p.name} 죽은 선택자`, "로컬 CSS 없음"); continue; }
+ const corpus = documents.map((file) => fs.readFileSync(file, "utf8")).join("\n");
const dead = new Set();
for (const f of files) {
const src = fs.readFileSync(f, "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
for (const m of src.matchAll(/\.([A-Za-z_][A-Za-z0-9_-]*)/g)) {
const cls = m[1];
if (ignore.some((pfx) => cls.startsWith(pfx))) continue;
- if (!html.includes(cls)) dead.add(cls);
+ if (!corpus.includes(cls)) dead.add(cls);
}
}
dead.size
? fail(`${p.name} 죽은 선택자 ${dead.size}종`, [...dead].slice(0, 8).map((c) => "." + c).join(" ") + (dead.size > 8 ? " …" : "") + " — 제거는 HTML·CSS·JS 삼위일체")
- : pass(`${p.name} 죽은 선택자`, `${files.length}개 CSS 전 클래스 사용 중(무시 ${ignore.length}접두사)`);
+ : pass(`${p.name} 죽은 선택자`, `${files.length}개 CSS × ${documents.length}개 HTML·JS 문서(무시 ${ignore.length}접두사)`);
}
} else skip("죽은 선택자", "checks.deadCss=false");
if (CFG.checks.cssHygiene) {
for (const p of CFG.pages) {
- const files = cssFilesOf(p);
+ const files = contractFilesOf(p, "hygieneFiles", cssFilesOf(p));
if (!files.length) { skip(`${p.name} 토큰 위생`, "로컬 CSS 없음"); continue; }
- // 토큰 파일 = 파일명에 tokens 가 있는 것. 이 안의 값이 프로젝트의 단일 원본이다
- const tokenFiles = files.filter((f) => /tokens/i.test(path.basename(f)));
- const others = files.filter((f) => !tokenFiles.includes(f));
- const hexes = []; const radii = new Set();
- for (const f of others) {
+ const inferredTokens = cssFilesOf(p).filter((f) => /tokens/i.test(path.basename(f)));
+ const tokenFiles = contractFilesOf(p, "tokenFiles", inferredTokens);
+ const missing = missingFiles([...files, ...tokenFiles]);
+ if (missing.length) {
+ fail(`${p.name} 토큰 위생 계약`, `없는 파일 ${missing.map((file) => path.relative(process.cwd(), file)).join(", ")}`);
+ continue;
+ }
+ const tokenNames = new Set();
+ for (const f of new Set([...tokenFiles, ...files])) {
const src = fs.readFileSync(f, "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
- for (const m of src.matchAll(/#[0-9a-fA-F]{3,8}\b/g)) hexes.push(`${path.basename(f)}:${m[0]}`);
- for (const m of src.matchAll(/(?= CFG.thresholds.radiusLiterals) bad.push(`radius 리터럴 ${radii.size}종([${[...radii].join(", ")}])`);
+ if (colorLimit !== null && colors.length > colorLimit) bad.push(`색 리터럴 ${colors.length}건 > 계약 ${colorLimit}건`);
+ if (radiusLimit !== null ? radii.size > radiusLimit : radii.size >= CFG.thresholds.radiusLiterals) {
+ bad.push(`radius 리터럴 ${radii.size}종 > 계약 ${radiusLimit ?? `<${CFG.thresholds.radiusLiterals}`}종([${[...radii].join(", ")}])`);
+ }
bad.length
- ? fail(`${p.name} 토큰 위생`, bad.join(" · ") + (hexes.length ? " — 예: " + hexes.slice(0, 4).join(" ") : ""))
- : pass(`${p.name} 토큰 위생`, `색 ${hexes.length}·radius ${radii.size} 리터럴(토큰 ${tokenFiles.length}파일)`);
+ ? fail(`${p.name} 토큰 위생`, bad.join(" · ") + (colors.length ? " — 예: " + colors.slice(0, 4).join(" ") : ""))
+ : pass(`${p.name} 토큰 위생`, `색 ${colors.length}${colorLimit === null ? "" : `/${colorLimit}`}건(${colorKinds.size}종)·radius ${radii.size}${radiusLimit === null ? "" : `/${radiusLimit}`}종·토큰 ${tokenFiles.length}파일/${tokenNames.size}개`);
}
} else skip("토큰 위생", "checks.cssHygiene=false");
@@ -240,7 +297,7 @@ for (const p of CFG.pages) {
if (meta.themeColor.replace(/\s+/g, "").toLowerCase() !== hexOf(meta.bodyBg))
m.push(`theme-color ${meta.themeColor} ≠ 실제 배경 ${meta.bodyBg}(낡은 토큰 의심)`);
}
- if (meta.h1Count > 1) m.push(`h1 ${meta.h1Count}개(유일해야)`);
+ if (meta.h1Count !== 1) m.push(`h1 ${meta.h1Count}개(정확히 하나여야)`);
if (meta.imgNoAlt) m.push(`img alt 없음 ${meta.imgNoAlt}개`);
if (meta.jsonldCount && !meta.jsonld) m.push("JSON-LD 파싱 실패");
// 데모·로컬 페이지는 canonical/robots 미명시 허용 — 있으면 오히려 검증
@@ -269,10 +326,14 @@ for (const p of CFG.pages) {
}
overs.length ? fail(`${p.name}/${v} 오버플로`, overs.join(" ")) : pass(`${p.name}/${v} 오버플로`, CFG.widths.join("/"));
- // h1 1줄
+ // h1 줄 수 — 앱 화면은 기본 1줄, 마케팅 헤드라인은 페이지별로 최대 2줄까지 명시할 수 있다.
await page.setViewport({ width: 1440, height: 900 });
const h1l = await page.evaluate(`__lines(${JSON.stringify(p.h1 || "h1")})`);
- h1l === 1 ? pass(`${p.name}/${v} h1 1줄`) : (h1l > 1 ? fail(`${p.name}/${v} h1 ${h1l}줄`) : skip(`${p.name}/${v} h1`, "요소 없음"));
+ const h1MaxLines = Number.isInteger(p.h1MaxLines) && p.h1MaxLines > 0 ? p.h1MaxLines : 1;
+ const h1Rule = h1MaxLines === 1 ? "h1 1줄" : `h1 최대 ${h1MaxLines}줄`;
+ h1l >= 1 && h1l <= h1MaxLines
+ ? pass(`${p.name}/${v} ${h1Rule}`)
+ : (h1l > h1MaxLines ? fail(`${p.name}/${v} h1 ${h1l}줄(최대 ${h1MaxLines}줄)`) : skip(`${p.name}/${v} h1`, "요소 없음"));
// 세로 쌓임(수축) — 짧은 라벨 3줄 이상
if (CFG.checks.stack) {
@@ -372,6 +433,7 @@ for (const p of CFG.pages) {
// ── 스케일×폭 h1 행렬 (안드로이드 글꼴 확대 재현) ──
if (CFG.checks.scaleMatrix) {
const bad = [];
+ const h1MaxLines = Number.isInteger(p.h1MaxLines) && p.h1MaxLines > 0 ? p.h1MaxLines : 1;
for (const w of [375, 390]) {
for (const s of CFG.fontScales) {
await page.setViewport({ width: w, height: 800, isMobile: true, hasTouch: true });
@@ -379,10 +441,10 @@ for (const p of CFG.pages) {
await page.evaluate(UTILS);
await page.addStyleTag({ content: `html { font-size: ${16 * s}px !important; }` });
const l = await page.evaluate(`__lines(${JSON.stringify(p.h1 || "h1")})`);
- if (l > 1) bad.push(`${w}@${s}x:${l}줄`);
+ if (l > h1MaxLines) bad.push(`${w}@${s}x:${l}줄(최대 ${h1MaxLines}줄)`);
}
}
- bad.length ? fail(`${p.name} 스케일×폭 h1`, bad.join(",")) : pass(`${p.name} 스케일×폭 h1`, `scales ${CFG.fontScales.join("/")}`);
+ bad.length ? fail(`${p.name} 스케일×폭 h1`, bad.join(",")) : pass(`${p.name} 스케일×폭 h1`, `최대 ${h1MaxLines}줄 · scales ${CFG.fontScales.join("/")}`);
// 브랜드 1줄
await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true });
await page.goto(href, { waitUntil: "networkidle0" });
diff --git a/apps/site/tools/showcase-duo-e2e-report.md b/apps/site/tools/showcase-duo-e2e-report.md
new file mode 100644
index 0000000..c9836dc
--- /dev/null
+++ b/apps/site/tools/showcase-duo-e2e-report.md
@@ -0,0 +1,1444 @@
+# Showcase Duo E2E report
+
+- root: `public`
+- started: 2026-08-29T12:14:41.758Z
+- finished: 2026-08-29T12:16:40.746Z
+- scenarios: 90/90
+- assertions: 350/350 (350 passed)
+- failed scenarios: 0
+- visual evidence: 12/12
+- contract: PASS
+
+## Scenario results
+
+| result | suite | scenario | assertions |
+| --- | --- | --- | ---: |
+| PASS | Chromium 반응형 | 한남자리 공개 320px | 7/7 |
+| PASS | Chromium 반응형 | 한남자리 공개 390px | 7/7 |
+| PASS | Chromium 반응형 | 한남자리 공개 768px | 7/7 |
+| PASS | Chromium 반응형 | 한남자리 공개 1440px | 7/7 |
+| PASS | Chromium 반응형 | 한남자리 관리자 320px | 7/7 |
+| PASS | Chromium 반응형 | 한남자리 관리자 390px | 7/7 |
+| PASS | Chromium 반응형 | 한남자리 관리자 768px | 7/7 |
+| PASS | Chromium 반응형 | 한남자리 관리자 1440px | 7/7 |
+| PASS | Chromium 반응형 | 철판클럽 공개 320px | 7/7 |
+| PASS | Chromium 반응형 | 철판클럽 공개 390px | 7/7 |
+| PASS | Chromium 반응형 | 철판클럽 공개 768px | 7/7 |
+| PASS | Chromium 반응형 | 철판클럽 공개 1440px | 7/7 |
+| PASS | Chromium 반응형 | 철판클럽 가맹 320px | 7/7 |
+| PASS | Chromium 반응형 | 철판클럽 가맹 390px | 7/7 |
+| PASS | Chromium 반응형 | 철판클럽 가맹 768px | 7/7 |
+| PASS | Chromium 반응형 | 철판클럽 가맹 1440px | 7/7 |
+| PASS | WebKit | 한남자리 공개 390px | 4/4 |
+| PASS | WebKit | 한남자리 공개 1440px | 4/4 |
+| PASS | WebKit | 한남자리 관리자 390px | 4/4 |
+| PASS | WebKit | 한남자리 관리자 1440px | 4/4 |
+| PASS | WebKit | 철판클럽 공개 390px | 4/4 |
+| PASS | WebKit | 철판클럽 공개 1440px | 4/4 |
+| PASS | WebKit | 철판클럽 가맹 390px | 4/4 |
+| PASS | WebKit | 철판클럽 가맹 1440px | 4/4 |
+| PASS | axe 접근성 | 한남자리 공개 390px | 2/2 |
+| PASS | axe 접근성 | 한남자리 공개 1440px | 2/2 |
+| PASS | axe 접근성 | 한남자리 관리자 390px | 2/2 |
+| PASS | axe 접근성 | 한남자리 관리자 1440px | 2/2 |
+| PASS | axe 접근성 | 철판클럽 공개 390px | 2/2 |
+| PASS | axe 접근성 | 철판클럽 공개 1440px | 2/2 |
+| PASS | axe 접근성 | 철판클럽 가맹 390px | 2/2 |
+| PASS | axe 접근성 | 철판클럽 가맹 1440px | 2/2 |
+| PASS | 성능과 자산 | 한남자리 공개 390px | 4/4 |
+| PASS | 성능과 자산 | 한남자리 공개 1440px | 4/4 |
+| PASS | 성능과 자산 | 한남자리 관리자 390px | 4/4 |
+| PASS | 성능과 자산 | 한남자리 관리자 1440px | 4/4 |
+| PASS | 성능과 자산 | 철판클럽 공개 390px | 4/4 |
+| PASS | 성능과 자산 | 철판클럽 공개 1440px | 4/4 |
+| PASS | 성능과 자산 | 철판클럽 가맹 390px | 4/4 |
+| PASS | 성능과 자산 | 철판클럽 가맹 1440px | 4/4 |
+| PASS | 점진 향상 | 한남자리 공개 JavaScript 없음 | 4/4 |
+| PASS | 점진 향상 | 한남자리 공개 감소 모션 | 4/4 |
+| PASS | 점진 향상 | 한남자리 관리자 JavaScript 없음 | 4/4 |
+| PASS | 점진 향상 | 한남자리 관리자 감소 모션 | 4/4 |
+| PASS | 점진 향상 | 철판클럽 공개 JavaScript 없음 | 4/4 |
+| PASS | 점진 향상 | 철판클럽 공개 감소 모션 | 4/4 |
+| PASS | 점진 향상 | 철판클럽 가맹 JavaScript 없음 | 4/4 |
+| PASS | 점진 향상 | 철판클럽 가맹 감소 모션 | 4/4 |
+| PASS | 한남자리 공개 기능 | 분석 전 다섯 조건과 범위 무결성 | 3/3 |
+| PASS | 한남자리 공개 기능 | 매매 다섯 조건 briefing compare와 시각 증거 | 3/3 |
+| PASS | 한남자리 공개 기능 | 전세 예산 면적 입주 주차 변형 | 3/3 |
+| PASS | 한남자리 공개 기능 | 월세 보증금과 월 납부 분리 | 3/3 |
+| PASS | 한남자리 공개 기능 | 세 후보 장면 matrix dossier 상담 동기화 | 3/3 |
+| PASS | 한남자리 공개 기능 | 면적과 가격 단위 왕복 | 3/3 |
+| PASS | 한남자리 공개 기능 | 서류철 다섯 탭 클릭과 키보드 | 3/3 |
+| PASS | 한남자리 공개 기능 | 다섯 조건 저장과 상담 무부작용 | 3/3 |
+| PASS | 철판클럽 공개 기능 | 메뉴 분류 필터 | 3/3 |
+| PASS | 철판클럽 공개 기능 | 메뉴 빈 상태와 전체 복구 | 3/3 |
+| PASS | 철판클럽 공개 기능 | 매운 더블 프리셋 | 3/3 |
+| PASS | 철판클럽 공개 기능 | 세트 조합과 시각 증거 | 3/3 |
+| PASS | 철판클럽 공개 기능 | 재료 조정과 알레르기 재계산 | 3/3 |
+| PASS | 철판클럽 공개 기능 | 영업 종료 매장 선택 경계 | 3/3 |
+| PASS | 철판클럽 공개 기능 | 매장 검색 일치 | 3/3 |
+| PASS | 철판클럽 공개 기능 | 매장 검색 빈 결과와 복구 | 3/3 |
+| PASS | 철판클럽 공개 기능 | 조합 저장 성공 | 3/3 |
+| PASS | 철판클럽 공개 기능 | 조합 저장 실패와 입력 보존 | 3/3 |
+| PASS | 철판클럽 가맹 기능 | 첫 단계 필수값 오류 | 3/3 |
+| PASS | 철판클럽 가맹 기능 | 첫 단계 정상 전환 | 3/3 |
+| PASS | 철판클럽 가맹 기능 | 점포 면적 조건부 환산 | 3/3 |
+| PASS | 철판클럽 가맹 기능 | 두 번째 단계 오류와 복구 | 3/3 |
+| PASS | 철판클럽 가맹 기능 | 검토 값과 시각 증거 | 3/3 |
+| PASS | 철판클럽 가맹 기능 | 문의 체험 동의 오류 | 3/3 |
+| PASS | 철판클럽 가맹 기능 | 문의 준비 완료와 다시 시작 | 3/3 |
+| PASS | 철판클럽 가맹 기능 | 문의 준비 실패와 재시도 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 초기 선택과 조사관 동기화 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 행 선택 전환 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 검색 일치 결과 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 검색 빈 상태와 초기화 복구 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 검수 필요 상태 필터 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 매물명 오름차순 정렬 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 불러오는 중과 정상 복구 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 강제 빈 대기열과 복구 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 불러오기 실패와 마지막 자료 복구 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 자료 오래됨과 정상 복구 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 버전 충돌 저장 실패와 정상 재시도 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 권한 제한과 정상 복구 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 키보드 탭과 첫 누락 초점 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 실제 광고 차단 대화상자와 시각 증거 | 3/3 |
+| PASS | 한남자리 관리자 기능 | AI 주장 검토 완료 | 3/3 |
+| PASS | 한남자리 관리자 기능 | 새 예시 초안 생성 | 3/3 |
+
+## Visual evidence
+
+| name | file | geometry | bytes | sha256 |
+| --- | --- | ---: | ---: | --- |
+| estate-public-390 | `tools/.gen/showcase-duo/estate-public-390.png` | 390x844 | 189923 | `df0c70be772242b30390249ea3f2289dcaf718ec5c0f7d0a3bf12aa2b8d05ee1` |
+| estate-public-1440 | `tools/.gen/showcase-duo/estate-public-1440.png` | 1440x900 | 552244 | `349f593d64e0a5dcf549ab7344166dca590c38b48c6a3e5d9517b2ab38af0f91` |
+| estate-admin-390 | `tools/.gen/showcase-duo/estate-admin-390.png` | 390x844 | 101662 | `c61b6a0c5df7a1b518a45d36f46cfe5746c75e6cb202320fee56c66911db540b` |
+| estate-admin-1440 | `tools/.gen/showcase-duo/estate-admin-1440.png` | 1440x900 | 216108 | `1aba620a23ccb0abca843f15c25d835db18c7f7fc61e34137419ae1ed47382ed` |
+| burger-public-390 | `tools/.gen/showcase-duo/burger-public-390.png` | 390x844 | 204547 | `015c028b153385cf355d5828a4bfded2135a148222a2beff20d750b09ba99e55` |
+| burger-public-1440 | `tools/.gen/showcase-duo/burger-public-1440.png` | 1440x900 | 773543 | `86d82b8a54295b5dc63c9be98820a0a186b2b27fd5506bd383b23c5285ef0701` |
+| burger-franchise-390 | `tools/.gen/showcase-duo/burger-franchise-390.png` | 390x844 | 87915 | `18f5e9ad12800605c870b0aa1975b7c2a98116484fa0d72b12309510466da676` |
+| burger-franchise-1440 | `tools/.gen/showcase-duo/burger-franchise-1440.png` | 1440x900 | 782399 | `a551bb80ede996b0ab163ff4e875f1d073adc6fce2b14cd00c93171e08720483` |
+| estate-ai-adjusted-1440 | `tools/.gen/showcase-duo/estate-ai-adjusted-1440.png` | 1440x900 | 98628 | `ed0388bb5294e5b59aede0adc2c5b6c994a73bc371f9c0b047fd7bee70f444a8` |
+| burger-builder-valid-1440 | `tools/.gen/showcase-duo/burger-builder-valid-1440.png` | 1440x900 | 332505 | `64ddde0ed45b5ea942dd9f4a0eb51faadaf2ebf93c51247aa15f540d1e0bcb97` |
+| burger-franchise-review-1440 | `tools/.gen/showcase-duo/burger-franchise-review-1440.png` | 1440x900 | 82943 | `b5f3d1f19d0f099c1443ecf0e90c6f80718c82cd9183c92c4995e1f8eed64546` |
+| estate-admin-block-dialog-1440 | `tools/.gen/showcase-duo/estate-admin-block-dialog-1440.png` | 1440x900 | 240971 | `89973d8d55e74915b5f770a576d93d0022476b9477662ed5adf7859095df5a71` |
+
+## Assertion ledger
+
+### PASS · Chromium 반응형 · 한남자리 공개 320px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 320
+ - actual: 320
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 문서가 뷰포트를 채움
+ - expected: height >= 844
+ - actual: 7004
+
+### PASS · Chromium 반응형 · 한남자리 공개 390px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 390
+ - actual: 390
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 기본 상태 시각 증거
+ - expected: 390x844, >10KB, sha256
+ - actual: {"pass":true,"name":"estate-public-390","file":"tools/.gen/showcase-duo/estate-public-390.png","exists":true,"width":390,"height":844,"bytes":189923,"sha256":"df0c70be772242b30390249ea3f2289dcaf718ec5c0f7d0a3bf12aa2b8d05ee1"}
+
+### PASS · Chromium 반응형 · 한남자리 공개 768px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 768
+ - actual: 768
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 문서가 뷰포트를 채움
+ - expected: height >= 900
+ - actual: 6005
+
+### PASS · Chromium 반응형 · 한남자리 공개 1440px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 1440
+ - actual: 1440
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 기본 상태 시각 증거
+ - expected: 1440x900, >10KB, sha256
+ - actual: {"pass":true,"name":"estate-public-1440","file":"tools/.gen/showcase-duo/estate-public-1440.png","exists":true,"width":1440,"height":900,"bytes":552244,"sha256":"349f593d64e0a5dcf549ab7344166dca590c38b48c6a3e5d9517b2ab38af0f91"}
+
+### PASS · Chromium 반응형 · 한남자리 관리자 320px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 320
+ - actual: 320
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 1
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 문서가 뷰포트를 채움
+ - expected: height >= 844
+ - actual: 2129
+
+### PASS · Chromium 반응형 · 한남자리 관리자 390px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 390
+ - actual: 390
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 1
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 기본 상태 시각 증거
+ - expected: 390x844, >10KB, sha256
+ - actual: {"pass":true,"name":"estate-admin-390","file":"tools/.gen/showcase-duo/estate-admin-390.png","exists":true,"width":390,"height":844,"bytes":101662,"sha256":"c61b6a0c5df7a1b518a45d36f46cfe5746c75e6cb202320fee56c66911db540b"}
+
+### PASS · Chromium 반응형 · 한남자리 관리자 768px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 768
+ - actual: 768
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 1
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 문서가 뷰포트를 채움
+ - expected: height >= 900
+ - actual: 1743
+
+### PASS · Chromium 반응형 · 한남자리 관리자 1440px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 1440
+ - actual: 1440
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 1
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 기본 상태 시각 증거
+ - expected: 1440x900, >10KB, sha256
+ - actual: {"pass":true,"name":"estate-admin-1440","file":"tools/.gen/showcase-duo/estate-admin-1440.png","exists":true,"width":1440,"height":900,"bytes":216108,"sha256":"1aba620a23ccb0abca843f15c25d835db18c7f7fc61e34137419ae1ed47382ed"}
+
+### PASS · Chromium 반응형 · 철판클럽 공개 320px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 320
+ - actual: 320
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 문서가 뷰포트를 채움
+ - expected: height >= 844
+ - actual: 11179
+
+### PASS · Chromium 반응형 · 철판클럽 공개 390px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 390
+ - actual: 390
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 기본 상태 시각 증거
+ - expected: 390x844, >10KB, sha256
+ - actual: {"pass":true,"name":"burger-public-390","file":"tools/.gen/showcase-duo/burger-public-390.png","exists":true,"width":390,"height":844,"bytes":204547,"sha256":"015c028b153385cf355d5828a4bfded2135a148222a2beff20d750b09ba99e55"}
+
+### PASS · Chromium 반응형 · 철판클럽 공개 768px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 768
+ - actual: 768
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 문서가 뷰포트를 채움
+ - expected: height >= 900
+ - actual: 10278
+
+### PASS · Chromium 반응형 · 철판클럽 공개 1440px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 1440
+ - actual: 1440
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 기본 상태 시각 증거
+ - expected: 1440x900, >10KB, sha256
+ - actual: {"pass":true,"name":"burger-public-1440","file":"tools/.gen/showcase-duo/burger-public-1440.png","exists":true,"width":1440,"height":900,"bytes":773543,"sha256":"86d82b8a54295b5dc63c9be98820a0a186b2b27fd5506bd383b23c5285ef0701"}
+
+### PASS · Chromium 반응형 · 철판클럽 가맹 320px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 320
+ - actual: 320
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 문서가 뷰포트를 채움
+ - expected: height >= 844
+ - actual: 10747
+
+### PASS · Chromium 반응형 · 철판클럽 가맹 390px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 390
+ - actual: 390
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 기본 시각 증거와 영웅 행동 정렬
+ - expected: 390x844, controls >=44px, center diff <=2px
+ - actual: {"shot":{"pass":true,"name":"burger-franchise-390","file":"tools/.gen/showcase-duo/burger-franchise-390.png","exists":true,"width":390,"height":844,"bytes":87915,"sha256":"18f5e9ad12800605c870b0aa1975b7c2a98116484fa0d72b12309510466da676"},"heroActions":[{"selector":"button button-light","height":48,"centerY":527.375},{"selector":"text-link light-link","height":48,"centerY":527.375}]}
+
+### PASS · Chromium 반응형 · 철판클럽 가맹 768px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 768
+ - actual: 768
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 문서가 뷰포트를 채움
+ - expected: height >= 900
+ - actual: 8723
+
+### PASS · Chromium 반응형 · 철판클럽 가맹 1440px
+
+- PASS · HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 가로 오버플로 없음
+ - expected: <= 1440
+ - actual: 1440
+- PASS · 문서 h1 정확히 하나
+ - expected: 1
+ - actual: 1
+- PASS · h1 최대 두 줄
+ - expected: 1~2 lines
+ - actual: 2
+- PASS · 보이는 텍스트 대비 AA
+ - expected: 0 violations
+ - actual: []
+- PASS · 이미지와 런타임 무결성
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+- PASS · 기본 시각 증거와 영웅 행동 정렬
+ - expected: 1440x900, controls >=44px, center diff <=2px
+ - actual: {"shot":{"pass":true,"name":"burger-franchise-1440","file":"tools/.gen/showcase-duo/burger-franchise-1440.png","exists":true,"width":1440,"height":900,"bytes":782399,"sha256":"a551bb80ede996b0ab163ff4e875f1d073adc6fce2b14cd00c93171e08720483"},"heroActions":[{"selector":"button button-light","height":48,"centerY":612.15625},{"selector":"text-link light-link","height":48,"centerY":612.15625}]}
+
+### PASS · WebKit · 한남자리 공개 390px
+
+- PASS · WebKit HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · WebKit 가로 오버플로 없음
+ - expected: <= 390
+ - actual: 390
+- PASS · WebKit 제목 구조
+ - expected: 1 h1 / 1~2 lines
+ - actual: {"count":1,"lines":2}
+- PASS · WebKit 이미지와 런타임
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+
+### PASS · WebKit · 한남자리 공개 1440px
+
+- PASS · WebKit HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · WebKit 가로 오버플로 없음
+ - expected: <= 1440
+ - actual: 1440
+- PASS · WebKit 제목 구조
+ - expected: 1 h1 / 1~2 lines
+ - actual: {"count":1,"lines":2}
+- PASS · WebKit 이미지와 런타임
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+
+### PASS · WebKit · 한남자리 관리자 390px
+
+- PASS · WebKit HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · WebKit 가로 오버플로 없음
+ - expected: <= 390
+ - actual: 390
+- PASS · WebKit 제목 구조
+ - expected: 1 h1 / 1~2 lines
+ - actual: {"count":1,"lines":1}
+- PASS · WebKit 이미지와 런타임
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+
+### PASS · WebKit · 한남자리 관리자 1440px
+
+- PASS · WebKit HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · WebKit 가로 오버플로 없음
+ - expected: <= 1440
+ - actual: 1440
+- PASS · WebKit 제목 구조
+ - expected: 1 h1 / 1~2 lines
+ - actual: {"count":1,"lines":1}
+- PASS · WebKit 이미지와 런타임
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+
+### PASS · WebKit · 철판클럽 공개 390px
+
+- PASS · WebKit HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · WebKit 가로 오버플로 없음
+ - expected: <= 390
+ - actual: 390
+- PASS · WebKit 제목 구조
+ - expected: 1 h1 / 1~2 lines
+ - actual: {"count":1,"lines":2}
+- PASS · WebKit 이미지와 런타임
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+
+### PASS · WebKit · 철판클럽 공개 1440px
+
+- PASS · WebKit HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · WebKit 가로 오버플로 없음
+ - expected: <= 1440
+ - actual: 1440
+- PASS · WebKit 제목 구조
+ - expected: 1 h1 / 1~2 lines
+ - actual: {"count":1,"lines":2}
+- PASS · WebKit 이미지와 런타임
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+
+### PASS · WebKit · 철판클럽 가맹 390px
+
+- PASS · WebKit HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · WebKit 가로 오버플로 없음
+ - expected: <= 390
+ - actual: 390
+- PASS · WebKit 제목 구조
+ - expected: 1 h1 / 1~2 lines
+ - actual: {"count":1,"lines":2}
+- PASS · WebKit 이미지와 런타임
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+
+### PASS · WebKit · 철판클럽 가맹 1440px
+
+- PASS · WebKit HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · WebKit 가로 오버플로 없음
+ - expected: <= 1440
+ - actual: 1440
+- PASS · WebKit 제목 구조
+ - expected: 1 h1 / 1~2 lines
+ - actual: {"count":1,"lines":2}
+- PASS · WebKit 이미지와 런타임
+ - expected: 0 broken / 0 errors
+ - actual: {"broken":[],"errors":[]}
+
+### PASS · axe 접근성 · 한남자리 공개 390px
+
+- PASS · 중대 접근성 위반 없음
+ - expected: 0 critical/serious
+ - actual: []
+- PASS · 보통 접근성 위반 없음
+ - expected: 0 moderate
+ - actual: []
+
+### PASS · axe 접근성 · 한남자리 공개 1440px
+
+- PASS · 중대 접근성 위반 없음
+ - expected: 0 critical/serious
+ - actual: []
+- PASS · 보통 접근성 위반 없음
+ - expected: 0 moderate
+ - actual: []
+
+### PASS · axe 접근성 · 한남자리 관리자 390px
+
+- PASS · 중대 접근성 위반 없음
+ - expected: 0 critical/serious
+ - actual: []
+- PASS · 보통 접근성 위반 없음
+ - expected: 0 moderate
+ - actual: []
+
+### PASS · axe 접근성 · 한남자리 관리자 1440px
+
+- PASS · 중대 접근성 위반 없음
+ - expected: 0 critical/serious
+ - actual: []
+- PASS · 보통 접근성 위반 없음
+ - expected: 0 moderate
+ - actual: []
+
+### PASS · axe 접근성 · 철판클럽 공개 390px
+
+- PASS · 중대 접근성 위반 없음
+ - expected: 0 critical/serious
+ - actual: []
+- PASS · 보통 접근성 위반 없음
+ - expected: 0 moderate
+ - actual: []
+
+### PASS · axe 접근성 · 철판클럽 공개 1440px
+
+- PASS · 중대 접근성 위반 없음
+ - expected: 0 critical/serious
+ - actual: []
+- PASS · 보통 접근성 위반 없음
+ - expected: 0 moderate
+ - actual: []
+
+### PASS · axe 접근성 · 철판클럽 가맹 390px
+
+- PASS · 중대 접근성 위반 없음
+ - expected: 0 critical/serious
+ - actual: []
+- PASS · 보통 접근성 위반 없음
+ - expected: 0 moderate
+ - actual: []
+
+### PASS · axe 접근성 · 철판클럽 가맹 1440px
+
+- PASS · 중대 접근성 위반 없음
+ - expected: 0 critical/serious
+ - actual: []
+- PASS · 보통 접근성 위반 없음
+ - expected: 0 moderate
+ - actual: []
+
+### PASS · 성능과 자산 · 한남자리 공개 390px
+
+- PASS · CLS 예산
+ - expected: <= 0.1
+ - actual: 0
+- PASS · 첫 화면 이미지 예산
+ - expected: 0..266240 bytes
+ - actual: 60102
+- PASS · 로컬 자바스크립트 예산
+ - expected: 1..180KB
+ - actual: 25242
+- PASS · 로컬 CSS 예산
+ - expected: 1..180KB
+ - actual: 35387
+
+### PASS · 성능과 자산 · 한남자리 공개 1440px
+
+- PASS · CLS 예산
+ - expected: <= 0.1
+ - actual: 0
+- PASS · 첫 화면 이미지 예산
+ - expected: 0..358400 bytes
+ - actual: 125514
+- PASS · 로컬 자바스크립트 예산
+ - expected: 1..180KB
+ - actual: 25242
+- PASS · 로컬 CSS 예산
+ - expected: 1..180KB
+ - actual: 160901
+
+### PASS · 성능과 자산 · 한남자리 관리자 390px
+
+- PASS · CLS 예산
+ - expected: <= 0.1
+ - actual: 0
+- PASS · 첫 화면 이미지 예산
+ - expected: 0..266240 bytes
+ - actual: 44804
+- PASS · 로컬 자바스크립트 예산
+ - expected: 1..180KB
+ - actual: 25095
+- PASS · 로컬 CSS 예산
+ - expected: 1..180KB
+ - actual: 41774
+
+### PASS · 성능과 자산 · 한남자리 관리자 1440px
+
+- PASS · CLS 예산
+ - expected: <= 0.1
+ - actual: 0
+- PASS · 첫 화면 이미지 예산
+ - expected: 0..358400 bytes
+ - actual: 44804
+- PASS · 로컬 자바스크립트 예산
+ - expected: 1..180KB
+ - actual: 25095
+- PASS · 로컬 CSS 예산
+ - expected: 1..180KB
+ - actual: 41774
+
+### PASS · 성능과 자산 · 철판클럽 공개 390px
+
+- PASS · CLS 예산
+ - expected: <= 0.1
+ - actual: 0
+- PASS · 첫 화면 이미지 예산
+ - expected: 0..266240 bytes
+ - actual: 85848
+- PASS · 로컬 자바스크립트 예산
+ - expected: 1..180KB
+ - actual: 11177
+- PASS · 로컬 CSS 예산
+ - expected: 1..180KB
+ - actual: 28832
+
+### PASS · 성능과 자산 · 철판클럽 공개 1440px
+
+- PASS · CLS 예산
+ - expected: <= 0.1
+ - actual: 0.0105
+- PASS · 첫 화면 이미지 예산
+ - expected: 0..358400 bytes
+ - actual: 99272
+- PASS · 로컬 자바스크립트 예산
+ - expected: 1..180KB
+ - actual: 11177
+- PASS · 로컬 CSS 예산
+ - expected: 1..180KB
+ - actual: 28832
+
+### PASS · 성능과 자산 · 철판클럽 가맹 390px
+
+- PASS · CLS 예산
+ - expected: <= 0.1
+ - actual: 0
+- PASS · 첫 화면 이미지 예산
+ - expected: 0..266240 bytes
+ - actual: 119384
+- PASS · 로컬 자바스크립트 예산
+ - expected: 1..180KB
+ - actual: 11756
+- PASS · 로컬 CSS 예산
+ - expected: 1..180KB
+ - actual: 44919
+
+### PASS · 성능과 자산 · 철판클럽 가맹 1440px
+
+- PASS · CLS 예산
+ - expected: <= 0.1
+ - actual: 0.0043
+- PASS · 첫 화면 이미지 예산
+ - expected: 0..358400 bytes
+ - actual: 119384
+- PASS · 로컬 자바스크립트 예산
+ - expected: 1..180KB
+ - actual: 11756
+- PASS · 로컬 CSS 예산
+ - expected: 1..180KB
+ - actual: 44919
+
+### PASS · 점진 향상 · 한남자리 공개 JavaScript 없음
+
+- PASS · 무자바스크립트 HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 핵심 문서 구조 유지
+ - expected: visible h1 and main
+ - actual: {"h1":true,"main":true}
+- PASS · 읽기 가능한 정적 대안
+ - expected: true
+ - actual: true
+- PASS · 무자바스크립트 깨진 이미지
+ - expected: 0
+ - actual: 0
+
+### PASS · 점진 향상 · 한남자리 공개 감소 모션
+
+- PASS · 감소 모션 미디어 일치
+ - expected: true
+ - actual: true
+- PASS · 부드러운 스크롤 해제
+ - expected: auto
+ - actual: auto
+- PASS · 반복 애니메이션 제거
+ - expected: <= 0.01s
+ - actual: 0.00001
+- PASS · 감소 모션에서도 핵심 작동
+ - expected: route-specific state changed
+ - actual: 35.8평
+
+### PASS · 점진 향상 · 한남자리 관리자 JavaScript 없음
+
+- PASS · 무자바스크립트 HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 핵심 문서 구조 유지
+ - expected: visible h1 and main
+ - actual: {"h1":true,"main":true}
+- PASS · 읽기 가능한 정적 대안
+ - expected: true
+ - actual: true
+- PASS · 무자바스크립트 깨진 이미지
+ - expected: 0
+ - actual: 0
+
+### PASS · 점진 향상 · 한남자리 관리자 감소 모션
+
+- PASS · 감소 모션 미디어 일치
+ - expected: true
+ - actual: true
+- PASS · 부드러운 스크롤 해제
+ - expected: auto
+ - actual: auto
+- PASS · 반복 애니메이션 제거
+ - expected: <= 0.01s
+ - actual: 0.00001
+- PASS · 감소 모션에서도 핵심 작동
+ - expected: route-specific state changed
+ - actual: true
+
+### PASS · 점진 향상 · 철판클럽 공개 JavaScript 없음
+
+- PASS · 무자바스크립트 HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 핵심 문서 구조 유지
+ - expected: visible h1 and main
+ - actual: {"h1":true,"main":true}
+- PASS · 읽기 가능한 정적 대안
+ - expected: true
+ - actual: true
+- PASS · 무자바스크립트 깨진 이미지
+ - expected: 0
+ - actual: 0
+
+### PASS · 점진 향상 · 철판클럽 공개 감소 모션
+
+- PASS · 감소 모션 미디어 일치
+ - expected: true
+ - actual: true
+- PASS · 부드러운 스크롤 해제
+ - expected: auto
+ - actual: auto
+- PASS · 반복 애니메이션 제거
+ - expected: <= 0.01s
+ - actual: 0.00001
+- PASS · 감소 모션에서도 핵심 작동
+ - expected: route-specific state changed
+ - actual: 2
+
+### PASS · 점진 향상 · 철판클럽 가맹 JavaScript 없음
+
+- PASS · 무자바스크립트 HTTP 상태
+ - expected: 200
+ - actual: 200
+- PASS · 핵심 문서 구조 유지
+ - expected: visible h1 and main
+ - actual: {"h1":true,"main":true}
+- PASS · 읽기 가능한 정적 대안
+ - expected: true
+ - actual: true
+- PASS · 무자바스크립트 깨진 이미지
+ - expected: 0
+ - actual: 0
+
+### PASS · 점진 향상 · 철판클럽 가맹 감소 모션
+
+- PASS · 감소 모션 미디어 일치
+ - expected: true
+ - actual: true
+- PASS · 부드러운 스크롤 해제
+ - expected: auto
+ - actual: auto
+- PASS · 반복 애니메이션 제거
+ - expected: <= 0.01s
+ - actual: 0.00001
+- PASS · 감소 모션에서도 핵심 작동
+ - expected: route-specific state changed
+ - actual: 예시 호칭을 두 글자 이상 입력해 주세요.
+
+### PASS · 한남자리 공개 기능 · 분석 전 다섯 조건과 범위 무결성
+
+- PASS · 보이는 의사결정 필드 집합
+ - expected: ["budget","minArea","moveIn","parking","trade"]
+ - actual: [{"name":"trade","visible":true},{"name":"budget","visible":true},{"name":"minArea","visible":true},{"name":"moveIn","visible":true},{"name":"parking","visible":true}]
+- PASS · 분석 전 briefing matrix dossier 미실행 상태
+ - expected: empty visible / groups hidden / five 분석 후 notes / no 적합 claim
+ - actual: {"emptyVisible":true,"groupsHidden":true,"listItems":0,"analysisHome":"아직 분석하지 않았습니다","analysisText":"\n 예시 AI 브리핑 · 모의 조건 비교 · 공인중개사 확인 전아직 분석하지 않았습니다\n \n 01\n 내 조건을 먼저 알려 주세요.분석을 실행하면 세 후보 가운데 조건과 가까운 집을 고르고, 이유를 세 묶음으로 정리합니다.\n 조건 입력으로 이동\n \n \n 01조건과 맞는 점\n 02조정이 필요한 점\n 03중개사와 확인할 점\n \n ","matrixNotes":["분석 후 거래 조건 대조","분석 후 예산과 대조","분석 후 면적과 대조","분석 후 주차와 대조","분석 후 입주일과 대조"],"dossierFit":"브리핑을 실행하면 입력 조건과의 관계를 표시합니다."}
+- PASS · 공개 범위 고지와 금지 토큰
+ - expected: scoped 예시 labels / every image 연출 / footer limits / no legacy tokens
+ - actual: {"forbidden":[],"candidateScopes":1,"dossierScopes":1,"imageCount":4,"imageProvenance":["연출 이미지","연출 이미지","연출 이미지","연출 이미지"],"demoStrip":"디자인 쇼케이스 · 가상 브랜드 · 상담은 접수되지 않습니다","limitItems":2,"footer":"한남자리는 가상 브랜드이며 등록 공인중개사무소나 거래 서비스를 제공하지 않습니다."}
+
+### PASS · 한남자리 공개 기능 · 매매 다섯 조건 briefing compare와 시각 증거
+
+- PASS · 브리핑 세 묶음 생성
+ - expected: empty hidden / groups visible / all lists populated
+ - actual: {"emptyHidden":true,"groupsVisible":true,"counts":[1,4,2],"home":"정원형 연립주택 브리핑"}
+- PASS · 선택 후보와 다섯 조건 compare dossier 동기화
+ - expected: home-1 / 5 resolved matrix notes / dossier recomputed
+ - actual: {"selected":"home-1","matrixValues":["매매","38억 원","118.42㎡","2대","2026.12.20 이후 협의"],"matrixNotes":["입력과 같음","예산보다 18억 높음","최소보다 11.58㎡ 작음","1대 부족","희망일보다 늦음"],"dossier":"정원형 연립주택","dossierFit":"매매 조건과 같습니다."}
+- PASS · 새 briefing compare 시각 증거
+ - expected: exists / 1440x900 / >10KB / sha256
+ - actual: {"pass":true,"name":"estate-ai-adjusted-1440","file":"tools/.gen/showcase-duo/estate-ai-adjusted-1440.png","exists":true,"width":1440,"height":900,"bytes":98628,"sha256":"ed0388bb5294e5b59aede0adc2c5b6c994a73bc371f9c0b047fd7bee70f444a8"}
+
+### PASS · 한남자리 공개 기능 · 전세 예산 면적 입주 주차 변형
+
+- PASS · 전세 후보와 서류철 선택
+ - expected: home-2 / 복층형 공동주택
+ - actual: {"selected":"home-2","analysis":"복층형 공동주택 브리핑","dossier":"복층형 공동주택"}
+- PASS · 다섯 입력만 의사결정 주장에 반영
+ - expected: trade/price/area/parking/move and no commute/sunlight
+ - actual: {"titles":["거래 형태","가격 상한","전용면적","주차","입주 시점"],"text":"\n 01조건과 맞는 점거래 형태전세 조건과 같습니다.입력한 조건 · 매물 정보\n 02조정이 필요한 점가격 상한입력한 상한보다 1억 원 높습니다.입력한 조건 · 매물 정보전용면적최소 면적보다 2.20㎡ 작습니다.입력한 조건 · 매물 정보주차필요한 수보다 1대 부족합니다.입력한 조건 · 매물 정보입주 시점2027.01.15 이후 협의으로 입력한 희망일보다 늦습니다.입력한 조건 · 매물 정보\n 03중개사와 확인할 점권리 관계등기와 계약 조건은 서류를 통해 다시 살펴야 합니다.공인중개사 확인현장 상태소음, 마감과 채광은 방문해서 확인해야 합니다.현장 확인\n "}
+- PASS · 전세 다섯 조건 matrix 판정
+ - expected: same / +1억 / -2.20㎡ / -1 car / late
+ - actual: ["입력과 같음","예산보다 1억 높음","최소보다 2.20㎡ 작음","1대 부족","희망일보다 늦음"]
+
+### PASS · 한남자리 공개 기능 · 월세 보증금과 월 납부 분리
+
+- PASS · 월세 후보와 서류철 선택
+ - expected: home-3 / 테라스형 다세대주택
+ - actual: {"selected":"home-3","analysis":"테라스형 다세대주택 브리핑","dossier":"테라스형 다세대주택"}
+- PASS · 보증금만으로 가격 적합 처리 금지
+ - expected: no price fit / 월 납부 조건 in adjust
+ - actual: {"fitTitles":["거래 형태","전용면적","주차","입주 시점"],"adjustTitles":["월 납부 조건"],"adjustText":"월 납부 조건보증금은 상한 안쪽이지만 월 1,200만 원을 별도로 살펴야 합니다.입력한 조건 · 매물 정보"}
+- PASS · 월세 matrix dossier에 별도 확인 유지
+ - expected: deposit + monthly / monthly note in matrix and dossier
+ - actual: {"price":"보증금 5억 · 월 1,200만","note":"보증금은 상한 안쪽 · 월 납부 별도","dossierRisk":"보증금은 상한 안쪽이지만 월 1,200만 원을 별도로 살펴야 합니다.등기와 계약 조건은 서류를 통해 다시 살펴야 합니다.소음, 마감과 채광은 방문해서 확인해야 합니다."}
+
+### PASS · 한남자리 공개 기능 · 세 후보 장면 matrix dossier 상담 동기화
+
+- PASS · 정원형 연립주택 전체 표면 동기화
+ - expected: home-1 / image / five matrix / dossier / consult
+ - actual: {"snapshot":{"selected":"home-1","selectedCount":1,"scene":"정원형 연립주택","image":"./assets/hannam-interior-1200.webp","imageAlt":"큰 창과 목재 수납이 있는 거실을 표현한 이미지","matrix":["매매","38억 원","118.42㎡","2대","2026.12.20 이후 협의"],"dossier":"정원형 연립주택","specs":["매매","38억 원","118.42㎡","2대","2026.12.20 이후 협의"],"consult":"정원형 연립주택"},"expected":{"id":"home-1","name":"정원형 연립주택","image":"hannam-interior-1200.webp","matrix":["매매","38억 원","118.42㎡","2대","2026.12.20 이후 협의"]}}
+- PASS · 복층형 공동주택 전체 표면 동기화
+ - expected: home-2 / image / five matrix / dossier / consult
+ - actual: {"snapshot":{"selected":"home-2","selectedCount":1,"scene":"복층형 공동주택","image":"./assets/hannam-evening-1600.webp","imageAlt":"서울 언덕 생활권의 현대 주거 외관을 표현한 이미지","matrix":["전세","22억 원","142.80㎡","2대","2027.01.15 이후 협의"],"dossier":"복층형 공동주택","specs":["전세","22억 원","142.80㎡","2대","2027.01.15 이후 협의"],"consult":"복층형 공동주택"},"expected":{"id":"home-2","name":"복층형 공동주택","image":"hannam-evening-1600.webp","matrix":["전세","22억 원","142.80㎡","2대","2027.01.15 이후 협의"]}}
+- PASS · 테라스형 다세대주택 전체 표면 동기화
+ - expected: home-3 / image / five matrix / dossier / consult
+ - actual: {"snapshot":{"selected":"home-3","selectedCount":1,"scene":"테라스형 다세대주택","image":"./assets/hannam-interior-1200.webp","imageAlt":"큰 창과 목재 수납이 있는 거실을 표현한 이미지","matrix":["월세","보증금 5억 · 월 1,200만","140.84㎡","1대","2026.11.01 이후 협의"],"dossier":"테라스형 다세대주택","specs":["월세","보증금 5억 · 월 1,200만","140.84㎡","1대","2026.11.01 이후 협의"],"consult":"테라스형 다세대주택"},"expected":{"id":"home-3","name":"테라스형 다세대주택","image":"hannam-interior-1200.webp","matrix":["월세","보증금 5억 · 월 1,200만","140.84㎡","1대","2026.11.01 이후 협의"]}}
+
+### PASS · 한남자리 공개 기능 · 면적과 가격 단위 왕복
+
+- PASS · 평 단위 전체 비교 표면
+ - expected: pressed / 3 candidate areas / matrix and dossier 35.8평
+ - actual: {"pressed":"true","candidates":["매매 · 35.8평","전세 · 43.2평","월세 · 42.6평"],"matrix":"35.8평","spec":"35.8평"}
+- PASS · 면적 단가 matrix dossier 반영
+ - expected: unit pressed / both price values are per-pyeong
+ - actual: {"pressed":"true","matrix":"평당 약 10,610만 원","spec":"평당 약 10,610만 원"}
+- PASS · 총액과 제곱미터 복원
+ - expected: m2 and total pressed / 118.42㎡ / 38억 원
+ - actual: {"areaPressed":"true","pricePressed":"true","area":"118.42㎡","price":"38억 원"}
+
+### PASS · 한남자리 공개 기능 · 서류철 다섯 탭 클릭과 키보드
+
+- PASS · 가격 탭 클릭 상태
+ - expected: price selected/focused/sole visible/tabstop
+ - actual: {"selected":"price","selectedCount":1,"visible":["price"],"focus":"price","tabStops":["price"]}
+- PASS · 화살표와 Home 키보드 순환
+ - expected: rights → location → facility → basic with focus
+ - actual: [{"selected":"rights","selectedCount":1,"visible":["rights"],"focus":"rights","tabStops":["rights"]},{"selected":"location","selectedCount":1,"visible":["location"],"focus":"location","tabStops":["location"]},{"selected":"facility","selectedCount":1,"visible":["facility"],"focus":"facility","tabStops":["facility"]},{"selected":"basic","selectedCount":1,"visible":["basic"],"focus":"basic","tabStops":["basic"]}]
+- PASS · 다섯 탭 aria-controls 관계
+ - expected: 5 unique tabs map to 5 panels
+ - actual: [{"name":"basic","controls":"dossier-basic","panel":"basic","role":"tab"},{"name":"price","controls":"dossier-price","panel":"price","role":"tab"},{"name":"rights","controls":"dossier-rights","panel":"rights","role":"tab"},{"name":"location","controls":"dossier-location","panel":"location","role":"tab"},{"name":"facility","controls":"dossier-facility","panel":"facility","role":"tab"}]
+
+### PASS · 한남자리 공개 기능 · 다섯 조건 저장과 상담 무부작용
+
+- PASS · 로컬 저장은 다섯 필드만
+ - expected: exact fields and typed values / no network mutation
+ - actual: {"saved":{"trade":"monthly","budget":31,"minArea":135,"moveIn":"2027-02-01","parking":1},"externalMutations":[]}
+- PASS · 새로고침 뒤 다섯 입력 복원
+ - expected: monthly / 31 / 135 / 2027-02-01 / 1
+ - actual: {"trade":"monthly","budget":"31","minArea":"135","moveIn":"2027-02-01","parking":"1"}
+- PASS · 상담 완료 바깥 클릭 Escape와 초점 복귀
+ - expected: preview only / both close / trigger focus / storage unchanged / no requests
+ - actual: {"finished":"준비할 순서권리 관계와 계약 조건현장 방문 때 볼 항목","outside":{"open":false,"locked":false,"focus":true},"escape":{"open":false,"locked":false,"focus":true,"storage":"{\"trade\":\"monthly\",\"budget\":31,\"minArea\":135,\"moveIn\":\"2027-02-01\",\"parking\":1}"},"saved":"{\"trade\":\"monthly\",\"budget\":31,\"minArea\":135,\"moveIn\":\"2027-02-01\",\"parking\":1}","externalMutations":[]}
+
+### PASS · 철판클럽 공개 기능 · 메뉴 분류 필터
+
+- PASS · 곁들임 필터 선택
+ - expected: true
+ - actual: true
+- PASS · 곁들임 두 항목만 노출
+ - expected: 2 side items
+ - actual: ["side","side"]
+- PASS · 필터 결과가 있어 빈 상태 숨김
+ - expected: true
+ - actual: true
+
+### PASS · 철판클럽 공개 기능 · 메뉴 빈 상태와 전체 복구
+
+- PASS · 메뉴 빈 상태 노출
+ - expected: true
+ - actual: true
+- PASS · 빈 상태에서 메뉴 0개
+ - expected: 0
+ - actual: 0
+- PASS · 모든 메뉴 보기로 복구
+ - expected: fixture removed and six items visible
+ - actual: {"query":"","count":6}
+
+### PASS · 철판클럽 공개 기능 · 매운 더블 프리셋
+
+- PASS · 매운 맛과 더블 동시 선택
+ - expected: 2
+ - actual: 2
+- PASS · 프리셋 이름 반영
+ - expected: 고추 피클 더블
+ - actual: 고추 피클 더블
+- PASS · 매운 조합 알레르기 반영
+ - expected: contains 토마토
+ - actual: 알, 우유, 대두, 밀, 쇠고기, 토마토
+
+### PASS · 철판클럽 공개 기능 · 세트 조합과 시각 증거
+
+- PASS · 세트 선택 뒤 곁들임 입력 활성
+ - expected: side and drink enabled
+ - actual: [false,false]
+- PASS · 세트 예시 총액 계산
+ - expected: 13,000원
+ - actual: 13,000원
+- PASS · 유효 버거 조합 시각 증거
+ - expected: 1440x900, >10KB, sha256
+ - actual: {"pass":true,"name":"burger-builder-valid-1440","file":"tools/.gen/showcase-duo/burger-builder-valid-1440.png","exists":true,"width":1440,"height":900,"bytes":332505,"sha256":"64ddde0ed45b5ea942dd9f4a0eb51faadaf2ebf93c51247aa15f540d1e0bcb97"}
+
+### PASS · 철판클럽 공개 기능 · 재료 조정과 알레르기 재계산
+
+- PASS · 재료 문장 동기화
+ - expected: no cheese / extra onion / sauce side
+ - actual: 패티 두 장 / 치즈 없음 / 양파 많이 / 피클 기본 / 소스 따로
+- PASS · 우유 알레르기 제거
+ - expected: does not contain 우유
+ - actual: 알, 대두, 밀, 쇠고기
+- PASS · 재료 변경 총액 계산
+ - expected: 8,500원
+ - actual: 8,500원
+
+### PASS · 철판클럽 공개 기능 · 영업 종료 매장 선택 경계
+
+- PASS · 목록과 지도 연남 선택
+ - expected: yeonnam selected in both
+ - actual: {"card":"yeonnam","pin":"yeonnam"}
+- PASS · 종료 상태 요약
+ - expected: contains 영업 종료
+ - actual: 오늘 영업 종료 예시
+- PASS · 저장 행동 차단과 이유
+ - expected: disabled / choose another store
+ - actual: {"disabled":true,"text":"다른 매장을 골라 주세요"}
+
+### PASS · 철판클럽 공개 기능 · 매장 검색 일치
+
+- PASS · 검색 결과 한 매장
+ - expected: 1
+ - actual: 1
+- PASS · 검색 결과와 지도 핀 일치
+ - expected: yeonnam
+ - actual: yeonnam
+- PASS · 검색어가 있어 지우기 노출
+ - expected: false
+ - actual: false
+
+### PASS · 철판클럽 공개 기능 · 매장 검색 빈 결과와 복구
+
+- PASS · 매장 빈 상태 노출
+ - expected: true
+ - actual: true
+- PASS · 빈 검색 결과 0개
+ - expected: 0
+ - actual: 0
+- PASS · 검색 조건 초기화로 세 매장 복구
+ - expected: blank query / 3 stores
+ - actual: {"query":"","count":3}
+
+### PASS · 철판클럽 공개 기능 · 조합 저장 성공
+
+- PASS · 현재 탭에 조합 스냅샷 저장
+ - expected: classic / patty 2 / seongsu
+ - actual: {"flavor":"classic","patty":"2","cheese":"1","onion":"regular","pickle":"regular","sauce":"regular","serving":"single","store":"seongsu"}
+- PASS · 실제 주문 미전송 안내
+ - expected: contains 실제 주문으로 전송되지 않습니다
+ - actual: 이 기기의 현재 탭에 선택 내용을 남겼어요. 실제 주문으로 전송되지 않습니다.
+- PASS · 성공 상태 오류 스타일 없음
+ - expected: false
+ - actual: false
+
+### PASS · 철판클럽 공개 기능 · 조합 저장 실패와 입력 보존
+
+- PASS · 저장 실패 안내
+ - expected: contains 남기지 못했어요
+ - actual: 선택 내용을 남기지 못했어요. 고른 내용은 화면에 그대로 두었습니다.
+- PASS · 저장 실패 오류 스타일
+ - expected: true
+ - actual: true
+- PASS · 실패 뒤 조합과 저장소 상태
+ - expected: onion extra retained / no snapshot
+ - actual: {"onion":"extra","stored":null}
+
+### PASS · 철판클럽 가맹 기능 · 첫 단계 필수값 오류
+
+- PASS · 첫 단계 오류 세 가지
+ - expected: name / region / area kind
+ - actual: ["예시 호칭을 두 글자 이상 입력해 주세요.","희망 지역을 골라 주세요.","희망 상권을 골라 주세요."]
+- PASS · 첫 오류 입력으로 초점
+ - expected: demo-name
+ - actual: demo-name
+- PASS · 오류 뒤 첫 단계 유지
+ - expected: 1
+ - actual: 1
+
+### PASS · 철판클럽 가맹 기능 · 첫 단계 정상 전환
+
+- PASS · 두 번째 단계 노출
+ - expected: 2
+ - actual: 2
+- PASS · 단계 표시 aria-current
+ - expected: 2
+ - actual: 2
+- PASS · 두 번째 제목으로 초점 이동
+ - expected: step-two-heading
+ - actual: step-two-heading
+
+### PASS · 철판클럽 가맹 기능 · 점포 면적 조건부 환산
+
+- PASS · 협의 중이면 면적 입력 노출
+ - expected: true
+ - actual: true
+- PASS · 면적 입력 필수 전환
+ - expected: true
+ - actual: true
+- PASS · 제곱미터와 평 환산 병기
+ - expected: contains 약 30평
+ - actual: 99.2㎡ · 약 30평
+
+### PASS · 철판클럽 가맹 기능 · 두 번째 단계 오류와 복구
+
+- PASS · 두 번째 단계 누락 오류
+ - expected: possession / opening / experience
+ - actual: ["점포 상태를 골라 주세요.","희망 시작 시기를 골라 주세요.","운영 경험 여부를 골라 주세요."]
+- PASS · 입력 뒤 오류 속성 해제
+ - expected: all aria-invalid removed
+ - actual: 0
+- PASS · 복구 뒤 검토 단계 진입
+ - expected: 3
+ - actual: 3
+
+### PASS · 철판클럽 가맹 기능 · 검토 값과 시각 증거
+
+- PASS · 검토 원장에 입력값 반영
+ - expected: name / region / possession
+ - actual: {"demoName":"예시점주","region":"서울 동쪽","areaKind":"주거지","storePossession":"협의 중","exclusiveArea":"99.2㎡ · 약 30평","openingWindow":"석 달에서 여섯 달","experience":"없음"}
+- PASS · 검토 원장에 면적 환산
+ - expected: contains 약 30평
+ - actual: 99.2㎡ · 약 30평
+- PASS · 가맹 검토 단계 시각 증거
+ - expected: 1440x900, >10KB, sha256
+ - actual: {"pass":true,"name":"burger-franchise-review-1440","file":"tools/.gen/showcase-duo/burger-franchise-review-1440.png","exists":true,"width":1440,"height":900,"bytes":82943,"sha256":"b5f3d1f19d0f099c1443ecf0e90c6f80718c82cd9183c92c4995e1f8eed64546"}
+
+### PASS · 철판클럽 가맹 기능 · 문의 체험 동의 오류
+
+- PASS · 동의 입력 aria-invalid
+ - expected: true
+ - actual: true
+- PASS · 동의 오류 이유
+ - expected: contains 확인해 주세요
+ - actual: 문의 체험 안내를 확인해 주세요.
+- PASS · 동의 입력으로 초점
+ - expected: demo-consent
+ - actual: demo-consent
+
+### PASS · 철판클럽 가맹 기능 · 문의 준비 완료와 다시 시작
+
+- PASS · 성공 패널로 전환
+ - expected: success visible / form hidden
+ - actual: {"success":true,"form":true}
+- PASS · 입력 내용 다시 보기 3단계
+ - expected: 3
+ - actual: 3
+- PASS · 처음부터 보기 입력 초기화
+ - expected: step 1 / blank name
+ - actual: {"step":"1","name":""}
+
+### PASS · 철판클럽 가맹 기능 · 문의 준비 실패와 재시도
+
+- PASS · 제출 실패 이유
+ - expected: contains 바꾸지 못했어요
+ - actual: 지금은 문의 준비 상태를 바꾸지 못했어요. 입력 내용은 화면에 그대로 두었습니다.
+- PASS · 재시도 버튼 복구
+ - expected: enabled / 다시 시도하기
+ - actual: {"disabled":false,"text":"다시 시도하기"}
+- PASS · 실패 뒤 입력과 단계 보존
+ - expected: step 3 / name retained
+ - actual: {"step":"3","name":"예시점주"}
+
+### PASS · 한남자리 관리자 기능 · 초기 선택과 조사관 동기화
+
+- PASS · 첫 행 선택 상태
+ - expected: DEMO-HJ-101 selected / aria-selected true
+ - actual: {"id":"DEMO-HJ-101","selected":"true"}
+- PASS · 조사관 제목과 식별자 동기화
+ - expected: 한남 생활권 정원 주거 / DEMO-HJ-101
+ - actual: {"title":"한남 생활권 정원 주거","id":"DEMO-HJ-101 · 예시 매물"}
+- PASS · 초기 대기열 원장
+ - expected: 6 rows / 6개 예시
+ - actual: {"rows":6,"count":"6개 예시"}
+
+### PASS · 한남자리 관리자 기능 · 행 선택 전환
+
+- PASS · 닫힌 단일 대기열과 행 선택 뒤 분할 복구
+ - expected: closed edge <=2px / open split 0..20px
+ - actual: {"closed":{"inspectorOpen":false,"selectedCount":0,"rightEdgeDiff":0},"restored":{"inspectorOpen":true,"gap":12,"inspectorRightDiff":0}}
+- PASS · 새 행만 선택
+ - expected: 102 true / 101 false
+ - actual: {"next":"true","previous":"false","selectedCount":1}
+- PASS · 선택 제목과 상태 조사관 반영
+ - expected: 한강 가까운 복층 주거 / 쇼케이스 공개
+ - actual: {"title":"한강 가까운 복층 주거","status":"쇼케이스 공개"}
+
+### PASS · 한남자리 관리자 기능 · 검색 일치 결과
+
+- PASS · 검색 결과 한 행
+ - expected: 1
+ - actual: 1
+- PASS · 검색 결과 식별자
+ - expected: DEMO-HJ-105
+ - actual: DEMO-HJ-105
+- PASS · 검색 결과 수와 빈 상태
+ - expected: 1개 예시 / empty hidden
+ - actual: {"count":"1개 예시","empty":true}
+
+### PASS · 한남자리 관리자 기능 · 검색 빈 상태와 초기화 복구
+
+- PASS · 검색 빈 상태 원인 안내
+ - expected: 0개 예시 / 현재 조건
+ - actual: {"count":"0개 예시","title":"현재 조건에 맞는 예시가 없습니다.","visible":true}
+- PASS · 빈 검색에서 보이는 행 없음
+ - expected: 0
+ - actual: 0
+- PASS · 필터 초기화로 전체 복구
+ - expected: blank / all / 6 rows
+ - actual: {"query":"","status":"all","rows":6}
+
+### PASS · 한남자리 관리자 기능 · 검수 필요 상태 필터
+
+- PASS · 검수 필요 결과 수
+ - expected: 2
+ - actual: 2
+- PASS · 검수 필요 식별자 집합
+ - expected: DEMO-HJ-101, DEMO-HJ-106
+ - actual: ["DEMO-HJ-101","DEMO-HJ-106"]
+- PASS · 상태 필터 결과 문구
+ - expected: 2개 예시
+ - actual: 2개 예시
+
+### PASS · 한남자리 관리자 기능 · 매물명 오름차순 정렬
+
+- PASS · 정렬 뒤 원장 보존
+ - expected: 6
+ - actual: 6
+- PASS · 한국어 매물명 오름차순
+ - expected: every previous <= next
+ - actual: ["남산 가까운 가족 주거","독서당길 안쪽 복층 주거","언덕 위 작은 정원 주거","조용한 골목의 테라스 주거","한강 가까운 복층 주거","한남 생활권 정원 주거"]
+- PASS · 정렬 변경 라이브 안내
+ - expected: contains 정렬을 바꿨습니다
+ - actual: 대기열 정렬을 바꿨습니다.
+
+### PASS · 한남자리 관리자 기능 · 불러오는 중과 정상 복구
+
+- PASS · 대기열 로딩 상태
+ - expected: aria-busy true / loading visible
+ - actual: {"busy":"true","loading":true}
+- PASS · 로딩 라이브 안내
+ - expected: contains 불러오는 중
+ - actual: 대기열을 불러오는 중입니다.
+- PASS · 정상 선택으로 로딩 종료
+ - expected: aria-busy false / loading hidden / 6 rows
+ - actual: {"busy":"false","loading":true,"rows":6}
+
+### PASS · 한남자리 관리자 기능 · 강제 빈 대기열과 복구
+
+- PASS · 강제 빈 대기열 노출
+ - expected: true
+ - actual: true
+- PASS · 강제 빈 상태 설명
+ - expected: contains 아직 접수된
+ - actual: 아직 접수된 예시 매물이 없습니다.
+- PASS · 정상 선택으로 빈 상태 해제
+ - expected: empty hidden / 6개 예시
+ - actual: {"empty":true,"count":"6개 예시"}
+
+### PASS · 한남자리 관리자 기능 · 불러오기 실패와 마지막 자료 복구
+
+- PASS · 불러오기 실패 배너
+ - expected: visible / 대기열 일부
+ - actual: {"visible":true,"title":"대기열 일부를 불러오지 못했습니다."}
+- PASS · 실패 중 마지막 여섯 행 유지
+ - expected: 6
+ - actual: 6
+- PASS · 정상 선택으로 실패 배너 해제
+ - expected: banner hidden / normal state
+ - actual: {"hidden":true,"state":"normal"}
+
+### PASS · 한남자리 관리자 기능 · 자료 오래됨과 정상 복구
+
+- PASS · 자료 오래됨 차단 상태
+ - expected: body stale / banner visible
+ - actual: {"stale":true,"banner":true}
+- PASS · 조사관 오래됨 상태
+ - expected: 자료 오래됨
+ - actual: 자료 오래됨
+- PASS · 정상 선택으로 오래됨 전역 상태 해제
+ - expected: body normal / banner hidden
+ - actual: {"stale":false,"hidden":true}
+
+### PASS · 한남자리 관리자 기능 · 버전 충돌 저장 실패와 정상 재시도
+
+- PASS · 충돌 저장 실패 배너
+ - expected: 버전 충돌로 저장하지 않았습니다.
+ - actual: 버전 충돌로 저장하지 않았습니다.
+- PASS · 충돌 저장 실패 라이브 안내
+ - expected: contains 저장하지 않았습니다
+ - actual: 버전 충돌로 저장하지 않았습니다.
+- PASS · 정상 재시도는 외부 저장 없음
+ - expected: contains 실제 저장하지 않았습니다
+ - actual: 수정 시연을 마쳤습니다. 서버가 없는 데모라 실제 저장하지 않았습니다.
+
+### PASS · 한남자리 관리자 기능 · 권한 제한과 정상 복구
+
+- PASS · 권한 제한 행동 비활성
+ - expected: review/save/draft disabled
+ - actual: [true,true,true]
+- PASS · 권한 제한 근거 배너
+ - expected: body limited / permission title
+ - actual: {"limited":true,"title":"중개보조 예시 권한으로 보는 중입니다."}
+- PASS · 정상 선택으로 행동 복구
+ - expected: body normal / all enabled
+ - actual: {"limited":false,"disabled":0}
+
+### PASS · 한남자리 관리자 기능 · 키보드 탭과 첫 누락 초점
+
+- PASS · 오른쪽 화살표로 표시 광고 탭 활성
+ - expected: legal selected / focused
+ - actual: {"selected":"true","focused":"tab-legal"}
+- PASS · 탭과 패널 상태 동기화
+ - expected: legal visible / basic hidden
+ - actual: {"legal":false,"basic":true}
+- PASS · 첫 누락 입력으로 초점
+ - expected: missing-orientation
+ - actual: missing-orientation
+
+### PASS · 한남자리 관리자 기능 · 실제 광고 차단 대화상자와 시각 증거
+
+- PASS · 게시 차단 대화상자와 배경 잠금
+ - expected: dialog open / body locked / inspector open
+ - actual: {"open":true,"locked":true,"inspector":true}
+- PASS · 게시 차단 조사관 시각 증거
+ - expected: exists / 1440x900 / >10KB / sha256
+ - actual: {"pass":true,"name":"estate-admin-block-dialog-1440","file":"tools/.gen/showcase-duo/estate-admin-block-dialog-1440.png","exists":true,"width":1440,"height":900,"bytes":240971,"sha256":"89973d8d55e74915b5f770a576d93d0022476b9477662ed5adf7859095df5a71"}
+- PASS · 대화상자 닫힘과 선택 상태 동시 해제
+ - expected: dialog closed / unlocked / inspector closed / no selected row
+ - actual: {"open":false,"locked":false,"inspector":false,"selectedRows":0}
+
+### PASS · 한남자리 관리자 기능 · AI 주장 검토 완료
+
+- PASS · 지원되지 않은 주장 수정 반영
+ - expected: disabled / 수정 반영
+ - actual: {"disabled":true,"text":"수정 반영"}
+- PASS · 사람 검토 완료 상태
+ - expected: disabled / 수정 후 승인됨 / pass badge
+ - actual: {"disabled":true,"text":"수정 후 승인됨","badge":"수정 후 승인","pass":true}
+- PASS · AI 검토 라이브 안내
+ - expected: contains 데모 외부에는 게시하지 않았습니다
+ - actual: AI 참고 분석을 수정 후 승인 상태로 바꿨습니다. 데모 외부에는 게시하지 않았습니다.
+
+### PASS · 한남자리 관리자 기능 · 새 예시 초안 생성
+
+- PASS · 초안 행 한 번만 추가
+ - expected: 7 rows / DEMO-HJ-NEW once
+ - actual: {"rows":7,"drafts":1}
+- PASS · 새 초안 선택과 조사관 유지
+ - expected: draft selected / inspector open
+ - actual: {"selected":"true","inspector":true}
+- PASS · 새 초안 조사관 기본값
+ - expected: title / 입력 전 / 7개 예시
+ - actual: {"title":"제목 없는 새 예시 초안","price":"미선택","count":"7개 예시"}
diff --git a/apps/site/tools/showcase-duo-e2e.mjs b/apps/site/tools/showcase-duo-e2e.mjs
new file mode 100644
index 0000000..dda2457
--- /dev/null
+++ b/apps/site/tools/showcase-duo-e2e.mjs
@@ -0,0 +1,1352 @@
+// 한남자리 공개·관리자 + 철판클럽 공개·가맹 전용 실제 브라우저 게이트.
+// source와 Astro 산출물을 같은 계약으로 검증한다.
+// node tools/showcase-duo-e2e.mjs --root=public
+// node tools/showcase-duo-e2e.mjs --root=dist
+import crypto from "node:crypto";
+import fs from "node:fs";
+import http from "node:http";
+import path from "node:path";
+import url from "node:url";
+import { createRequire } from "node:module";
+
+import puppeteer from "puppeteer-core";
+import { webkit } from "playwright";
+import { PNG } from "pngjs";
+
+const require = createRequire(import.meta.url);
+const axePath = require.resolve("axe-core/axe.min.js");
+const here = path.dirname(url.fileURLToPath(import.meta.url));
+const siteRoot = path.resolve(here, "..");
+const EXPECTED_SCENARIOS = 90;
+const EXPECTED_ASSERTIONS = 350;
+
+function parseRoot(argv) {
+ let value = "public";
+ for (let index = 2; index < argv.length; index += 1) {
+ const argument = argv[index];
+ if (argument === "--root") value = argv[++index];
+ else if (argument.startsWith("--root=")) value = argument.slice(7);
+ else throw new Error(`Unknown argument: ${argument}`);
+ }
+ if (!value || !["public", "dist"].includes(value)) throw new Error("--root must be public or dist");
+ return value;
+}
+
+const rootName = parseRoot(process.argv);
+const serveRoot = path.join(siteRoot, rootName);
+const reportFile = path.join(here, "showcase-duo-e2e-report.md");
+const evidenceRoot = path.join(here, ".gen", "showcase-duo");
+if (!fs.existsSync(serveRoot)) throw new Error(`${rootName} root does not exist: ${serveRoot}`);
+if (!fs.existsSync(axePath)) throw new Error(`axe-core asset does not exist: ${axePath}`);
+
+const chrome = [
+ process.env.CHROME_PATH,
+ "C:/Program Files/Google/Chrome/Application/chrome.exe",
+ "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
+ "/usr/bin/google-chrome",
+ "/usr/bin/chromium",
+].find((candidate) => candidate && fs.existsSync(candidate));
+if (!chrome) throw new Error("Chrome/Chromium executable not found. Set CHROME_PATH or install Chrome/Chromium.");
+
+const ROUTES = [
+ { key: "estate-public", label: "한남자리 공개", path: "/work/hannam-jari/", main: "#main-content", fallback: ".no-script" },
+ { key: "estate-admin", label: "한남자리 관리자", path: "/work/hannam-jari/admin/", main: "#admin-main", fallback: ".admin-noscript" },
+ { key: "burger-public", label: "철판클럽 공개", path: "/work/griddle-club/", main: "#main", fallback: "#menu" },
+ { key: "burger-franchise", label: "철판클럽 가맹", path: "/work/griddle-club/franchise/", main: "#main", fallback: "#model" },
+];
+const WIDTHS = [320, 390, 768, 1440];
+const VISUAL_WIDTHS = new Set([390, 1440]);
+const evidence = [];
+
+const MIME = new Map([
+ [".avif", "image/avif"], [".css", "text/css; charset=utf-8"], [".html", "text/html; charset=utf-8"],
+ [".ico", "image/x-icon"], [".jpeg", "image/jpeg"], [".jpg", "image/jpeg"],
+ [".js", "text/javascript; charset=utf-8"], [".json", "application/json; charset=utf-8"],
+ [".png", "image/png"], [".svg", "image/svg+xml"], [".webmanifest", "application/manifest+json; charset=utf-8"],
+ [".webp", "image/webp"], [".woff", "font/woff"], [".woff2", "font/woff2"],
+]);
+
+function inside(root, candidate) {
+ const relative = path.relative(root, candidate);
+ return relative === "" || (!relative.startsWith(`..${path.sep}`) && relative !== ".." && !path.isAbsolute(relative));
+}
+
+const server = http.createServer((request, response) => {
+ try {
+ const pathname = decodeURIComponent(new URL(request.url, "http://127.0.0.1").pathname);
+ const candidate = path.resolve(serveRoot, `.${pathname}`);
+ if (!inside(serveRoot, candidate)) return void response.writeHead(403).end("forbidden");
+ const file = fs.existsSync(candidate) && fs.statSync(candidate).isDirectory() ? path.join(candidate, "index.html") : candidate;
+ if (!fs.existsSync(file) || !fs.statSync(file).isFile()) return void response.writeHead(404).end("not found");
+ response.setHeader("Content-Type", MIME.get(path.extname(file).toLowerCase()) || "application/octet-stream");
+ response.setHeader("Cache-Control", "no-store");
+ fs.createReadStream(file).pipe(response);
+ } catch {
+ response.writeHead(400).end("bad request");
+ }
+});
+
+const scenarios = [];
+function defineScenario(suite, name, expectedAssertions, run) {
+ scenarios.push({ suite, name, expectedAssertions, run });
+}
+
+function display(value) {
+ if (typeof value === "string") return value;
+ if (value === undefined) return "undefined";
+ try { return JSON.stringify(value); } catch { return String(value); }
+}
+
+class ScenarioContext {
+ constructor(definition) {
+ this.definition = definition;
+ this.assertions = [];
+ }
+ check(name, expected, actual, predicate) {
+ let pass = false;
+ try { pass = Boolean(predicate(actual, expected)); } catch { pass = false; }
+ this.assertions.push({ name, expected: display(expected), actual: display(actual), pass });
+ }
+ equal(name, expected, actual) { this.check(name, expected, actual, (a, e) => Object.is(a, e)); }
+ ok(name, actual, expected = true) { this.check(name, expected, actual, (a) => Boolean(a)); }
+ includes(name, expected, actual) { this.check(name, `contains ${expected}`, actual, (a) => String(a).includes(expected)); }
+}
+
+let origin = "";
+let chromiumBrowser;
+let webkitBrowser;
+const pageErrors = new WeakMap();
+
+async function settle(page, { eagerImages = false } = {}) {
+ await Promise.race([
+ page.evaluate(() => document.fonts?.ready || Promise.resolve()),
+ new Promise((resolve) => setTimeout(resolve, 5000)),
+ ]);
+ if (eagerImages) {
+ await page.evaluate(async () => {
+ const images = [...document.images];
+ for (const image of images) image.loading = "eager";
+ await Promise.allSettled(images.map((image) => image.decode()));
+ });
+ }
+ await new Promise((resolve) => setTimeout(resolve, 240));
+}
+
+async function openChromium(route, { width = 1440, height = width < 500 ? 844 : 900, javascript = true, reduced = false, query = "" } = {}) {
+ const page = await chromiumBrowser.newPage();
+ const errors = [];
+ pageErrors.set(page, errors);
+ await page.setJavaScriptEnabled(javascript);
+ await page.setCacheEnabled(false);
+ await page.setViewport({ width, height, deviceScaleFactor: 1, isMobile: width < 500, hasTouch: width < 500 });
+ if (reduced) await page.emulateMediaFeatures([{ name: "prefers-reduced-motion", value: "reduce" }]);
+ page.on("pageerror", (error) => errors.push(`pageerror: ${error.message}`));
+ page.on("console", (message) => { if (message.type() === "error") errors.push(`console: ${message.text()}`); });
+ page.on("response", (response) => {
+ if (response.url().startsWith(origin) && response.status() >= 400) errors.push(`response: ${response.status()} ${response.url()}`);
+ });
+ const response = await page.goto(`${origin}${route.path}${query}`, { waitUntil: "domcontentloaded", timeout: 30000 });
+ await settle(page);
+ return { page, status: response?.status() ?? 0, errors };
+}
+
+async function closePage(page) {
+ if (page && !page.isClosed()) await page.close();
+}
+
+async function setValue(page, selector, value, eventName = "input") {
+ await page.$eval(selector, (element, next, eventType) => {
+ element.value = next;
+ element.dispatchEvent(new Event(eventType, { bubbles: true }));
+ }, String(value), eventName);
+}
+
+async function choose(page, selector) {
+ await page.$eval(selector, (element) => {
+ element.checked = true;
+ element.dispatchEvent(new Event("change", { bubbles: true }));
+ });
+}
+
+async function textOf(page, selector) {
+ return page.$eval(selector, (element) => element.textContent.trim());
+}
+
+async function visible(page, selector) {
+ return page.$eval(selector, (element) => {
+ const style = getComputedStyle(element);
+ const rect = element.getBoundingClientRect();
+ return !element.hidden && style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0;
+ }).catch(() => false);
+}
+
+async function captureEvidence(page, name, width, height, { focusSelector = null } = {}) {
+ await settle(page, { eagerImages: true });
+ const integrity = await page.evaluate(() => ({
+ broken: [...document.images].filter((image) => image.complete && image.naturalWidth === 0).map((image) => image.currentSrc || image.src),
+ width: innerWidth,
+ height: innerHeight,
+ }));
+ const errors = pageErrors.get(page) || [];
+ if (integrity.broken.length || errors.length) return { pass: false, ...integrity, errors };
+ await page.addStyleTag({ content: "*{animation:none!important;transition:none!important;caret-color:transparent!important}html{scroll-behavior:auto!important}::-webkit-scrollbar{display:none!important}" });
+ if (focusSelector) {
+ await page.$eval(focusSelector, (element) => element.scrollIntoView({ block: "center", inline: "nearest" }));
+ } else {
+ await page.evaluate(() => window.scrollTo(0, 0));
+ }
+ await new Promise((resolve) => setTimeout(resolve, 80));
+ await fs.promises.mkdir(evidenceRoot, { recursive: true });
+ const file = path.join(evidenceRoot, `${name}.png`);
+ const buffer = await page.screenshot({ path: file, type: "png", fullPage: false });
+ const png = PNG.sync.read(buffer);
+ const hash = crypto.createHash("sha256").update(buffer).digest("hex");
+ const item = { name, file: path.relative(siteRoot, file).replaceAll("\\", "/"), exists: fs.existsSync(file), width: png.width, height: png.height, bytes: buffer.byteLength, sha256: hash };
+ evidence.push(item);
+ return { pass: item.exists && png.width === width && png.height === height && buffer.byteLength > 10000 && /^[a-f0-9]{64}$/.test(hash), ...item };
+}
+
+function localFileBytes(resourceUrl) {
+ const parsed = new URL(resourceUrl);
+ if (parsed.origin !== origin) return 0;
+ const candidate = path.resolve(serveRoot, `.${decodeURIComponent(parsed.pathname)}`);
+ return inside(serveRoot, candidate) && fs.existsSync(candidate) && fs.statSync(candidate).isFile() ? fs.statSync(candidate).size : 0;
+}
+
+const GEOMETRY_PROBE = () => {
+ const visible = (el) => { const cs = getComputedStyle(el); const r = el.getBoundingClientRect(); return cs.display !== 'none' && cs.visibility !== 'hidden' && r.width > 0 && r.height > 0; };
+ const h1 = document.querySelector('h1');
+ const lines = h1 ? (() => { const range = document.createRange(); range.selectNodeContents(h1); const tops = [...range.getClientRects()].filter((r) => r.width > 1 && r.height > 4).map((r) => r.top).sort((a,b) => a-b); const unique=[]; for (const top of tops) if (!unique.length || top-unique.at(-1)>5) unique.push(top); return unique.length; })() : 0;
+ const textNodes=[]; const walker=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT); let n;
+ while((n=walker.nextNode())) { if(!n.textContent.trim()||!n.parentElement||!visible(n.parentElement)) continue; const range=document.createRange(); range.selectNodeContents(n); const r=range.getBoundingClientRect(); if(r.width>1&&r.height>4&&r.left>=0) textNodes.push(r.left); }
+ return { viewport: innerWidth, scrollWidth: document.documentElement.scrollWidth, h1Count: document.querySelectorAll('h1').length, h1Lines: lines, minInset: textNodes.length ? Math.round(Math.min(...textNodes)) : null, broken: [...document.images].filter((image)=>image.complete&&image.naturalWidth===0).map((image)=>image.currentSrc||image.src), documentHeight: document.documentElement.scrollHeight };
+};
+
+const CONTRAST_PROBE = () => {
+ const rgb=(s)=>{const m=String(s).match(/[\\d.]+/g);return m?{r:+m[0],g:+m[1],b:+m[2],a:m[3]===undefined?1:+m[3]}:null};
+ const lum=(c)=>{const f=(v)=>{v/=255;return v<=.03928?v/12.92:((v+.055)/1.055)**2.4};return .2126*f(c.r)+.7152*f(c.g)+.0722*f(c.b)};
+ const visible=(el)=>{const cs=getComputedStyle(el),r=el.getBoundingClientRect();return cs.display!=='none'&&cs.visibility!=='hidden'&&+cs.opacity!==0&&r.width>0&&r.height>0};
+ const out=[];
+ document.querySelectorAll('p,span,a,li,dt,dd,h1,h2,h3,h4,label,button,strong,small,th,td').forEach((el)=>{
+ if(!visible(el)||![...el.childNodes].some((n)=>n.nodeType===3&&n.textContent.trim()))return;
+ const cs=getComputedStyle(el); const fg=rgb(cs.color); if(!fg)return; let node=el,bg=null;
+ while(node&&node!==document.documentElement){const c=rgb(getComputedStyle(node).backgroundColor);if(c&&c.a>=.95){bg=c;break}node=node.parentElement} if(!bg)bg=rgb(getComputedStyle(document.body).backgroundColor)||{r:255,g:255,b:255,a:1};
+ const ratio=(Math.max(lum(fg),lum(bg))+.05)/(Math.min(lum(fg),lum(bg))+.05); const size=parseFloat(cs.fontSize),bold=+cs.fontWeight>=700,need=size>=24||(size>=18.66&&bold)?3:4.5;
+ if(ratio+0.005 {
+ const opened = await openChromium(route, { width });
+ try {
+ await settle(opened.page, { eagerImages: true });
+ const geometry = await opened.page.evaluate(GEOMETRY_PROBE);
+ const contrast = await opened.page.evaluate(CONTRAST_PROBE);
+ t.equal("HTTP 상태", 200, opened.status);
+ t.check("가로 오버플로 없음", `<= ${geometry.viewport}`, geometry.scrollWidth, (actual) => actual <= geometry.viewport);
+ t.equal("문서 h1 정확히 하나", 1, geometry.h1Count);
+ t.check("h1 최대 두 줄", "1~2 lines", geometry.h1Lines, (actual) => actual >= 1 && actual <= 2);
+ t.check("보이는 텍스트 대비 AA", "0 violations", contrast, (actual) => actual.length === 0);
+ t.check("이미지와 런타임 무결성", "0 broken / 0 errors", { broken: geometry.broken, errors: opened.errors }, (actual) => actual.broken.length === 0 && actual.errors.length === 0);
+ if (VISUAL_WIDTHS.has(width)) {
+ const shot = await captureEvidence(opened.page, `${route.key}-${width}`, width, width < 500 ? 844 : 900);
+ if (route.key === "burger-franchise") {
+ const heroActions = await opened.page.evaluate(() => [...document.querySelectorAll(".franchise-hero .hero-actions > a")].map((element) => {
+ const rect = element.getBoundingClientRect();
+ return { selector: element.className, height: rect.height, centerY: rect.top + rect.height / 2 };
+ }));
+ t.check("기본 시각 증거와 영웅 행동 정렬", `${width}x${width < 500 ? 844 : 900}, controls >=44px, center diff <=2px`, { shot, heroActions }, (actual) => actual.shot.pass
+ && actual.heroActions.length === 2
+ && actual.heroActions.every((item) => item.height >= 44)
+ && Math.abs(actual.heroActions[0].centerY - actual.heroActions[1].centerY) <= 2);
+ } else {
+ t.check("기본 상태 시각 증거", `${width}x${width < 500 ? 844 : 900}, >10KB, sha256`, shot, (actual) => actual.pass);
+ }
+ } else {
+ t.check("문서가 뷰포트를 채움", `height >= ${width < 500 ? 844 : 900}`, geometry.documentHeight, (actual) => actual >= (width < 500 ? 844 : 900));
+ }
+ } finally { await closePage(opened.page); }
+ });
+ }
+}
+
+// WebKit 8시나리오 · 32단언.
+for (const route of ROUTES) {
+ for (const width of [390, 1440]) {
+ defineScenario("WebKit", `${route.label} ${width}px`, 4, async (t) => {
+ const page = await webkitBrowser.newPage({ viewport: { width, height: width < 500 ? 844 : 900 } });
+ const errors = [];
+ page.on("pageerror", (error) => errors.push(error.message));
+ page.on("console", (message) => { if (message.type() === "error") errors.push(message.text()); });
+ try {
+ const response = await page.goto(origin + route.path, { waitUntil: "domcontentloaded" });
+ await page.evaluate(() => document.fonts?.ready || Promise.resolve());
+ await page.waitForTimeout(180);
+ const geometry = await page.evaluate(GEOMETRY_PROBE);
+ t.equal("WebKit HTTP 상태", 200, response?.status() ?? 0);
+ t.check("WebKit 가로 오버플로 없음", `<= ${geometry.viewport}`, geometry.scrollWidth, (actual) => actual <= geometry.viewport);
+ t.check("WebKit 제목 구조", "1 h1 / 1~2 lines", { count: geometry.h1Count, lines: geometry.h1Lines }, (actual) => actual.count === 1 && actual.lines >= 1 && actual.lines <= 2);
+ t.check("WebKit 이미지와 런타임", "0 broken / 0 errors", { broken: geometry.broken, errors }, (actual) => actual.broken.length === 0 && actual.errors.length === 0);
+ } finally { await page.close(); }
+ });
+ }
+}
+
+// axe 8시나리오 · 16단언.
+for (const route of ROUTES) {
+ for (const width of [390, 1440]) {
+ defineScenario("axe 접근성", `${route.label} ${width}px`, 2, async (t) => {
+ const opened = await openChromium(route, { width });
+ try {
+ await opened.page.addScriptTag({ path: axePath });
+ const violations = await opened.page.evaluate(async () => (await axe.run(document, { runOnly: { type: "tag", values: ["wcag2a", "wcag2aa", "wcag21aa", "wcag22aa"] } })).violations.map((item) => ({
+ id: item.id,
+ impact: item.impact,
+ nodes: item.nodes.map((node) => ({
+ target: node.target,
+ html: node.html,
+ failureSummary: node.failureSummary,
+ checks: [...node.any, ...node.all, ...node.none].map((check) => ({ id: check.id, message: check.message, data: check.data })),
+ })),
+ })));
+ t.check("중대 접근성 위반 없음", "0 critical/serious", violations.filter((item) => ["critical", "serious"].includes(item.impact)), (actual) => actual.length === 0);
+ t.check("보통 접근성 위반 없음", "0 moderate", violations.filter((item) => item.impact === "moderate"), (actual) => actual.length === 0);
+ } finally { await closePage(opened.page); }
+ });
+ }
+}
+
+// 성능·자산 8시나리오 · 32단언.
+for (const route of ROUTES) {
+ for (const width of [390, 1440]) {
+ defineScenario("성능과 자산", `${route.label} ${width}px`, 4, async (t) => {
+ const page = await chromiumBrowser.newPage();
+ const errors = [];
+ pageErrors.set(page, errors);
+ await page.setViewport({ width, height: width < 500 ? 844 : 900, deviceScaleFactor: 1, isMobile: width < 500, hasTouch: width < 500 });
+ await page.evaluateOnNewDocument(() => {
+ window.__duoCls = 0;
+ new PerformanceObserver((list) => { for (const entry of list.getEntries()) if (!entry.hadRecentInput) window.__duoCls += entry.value; }).observe({ type: "layout-shift", buffered: true });
+ });
+ try {
+ await page.goto(origin + route.path, { waitUntil: "domcontentloaded", timeout: 30000 });
+ await settle(page);
+ const metrics = await page.evaluate(() => ({
+ cls: window.__duoCls || 0,
+ images: [...document.images].filter((image) => { const r=image.getBoundingClientRect(); return r.bottom>0&&r.top image.currentSrc),
+ scripts: performance.getEntriesByType("resource").filter((entry) => entry.initiatorType === "script").map((entry) => entry.name),
+ styles: performance.getEntriesByType("resource").filter((entry) => entry.initiatorType === "css" || entry.initiatorType === "link").map((entry) => entry.name),
+ }));
+ const imageBytes = [...new Set(metrics.images)].reduce((sum, item) => sum + localFileBytes(item), 0);
+ const scriptBytes = [...new Set(metrics.scripts)].reduce((sum, item) => sum + localFileBytes(item), 0);
+ const styleBytes = [...new Set(metrics.styles)].reduce((sum, item) => sum + localFileBytes(item), 0);
+ const imageBudget = width < 500 ? 260 * 1024 : 350 * 1024;
+ t.check("CLS 예산", "<= 0.1", +metrics.cls.toFixed(4), (actual) => actual <= 0.1);
+ t.check("첫 화면 이미지 예산", `0..${imageBudget} bytes`, imageBytes, (actual) => actual >= 0 && actual <= imageBudget);
+ t.check("로컬 자바스크립트 예산", "1..180KB", scriptBytes, (actual) => actual > 0 && actual <= 180 * 1024);
+ t.check("로컬 CSS 예산", "1..180KB", styleBytes, (actual) => actual > 0 && actual <= 180 * 1024);
+ } finally { await closePage(page); }
+ });
+ }
+}
+
+async function reducedAction(page, route) {
+ if (route.key === "estate-public") {
+ await page.click('[data-area-unit="pyeong"]');
+ return textOf(page, "[data-matrix-area]");
+ }
+ if (route.key === "estate-admin") {
+ await page.click('[data-tab="legal"]');
+ return visible(page, '#inspector-legal');
+ }
+ if (route.key === "burger-public") {
+ await page.click('[data-menu-filter="side"]');
+ return page.$$eval('[data-menu-category]:not([hidden])', (items) => items.length);
+ }
+ await page.click("[data-next]");
+ return textOf(page, "#demo-name-error");
+}
+
+// 무자바스크립트 4 + 감소 모션 4 = 8시나리오 · 32단언.
+for (const route of ROUTES) {
+ defineScenario("점진 향상", `${route.label} JavaScript 없음`, 4, async (t) => {
+ const opened = await openChromium(route, { width: 390, javascript: false });
+ try {
+ await settle(opened.page, { eagerImages: true });
+ const state = await opened.page.evaluate((mainSelector, fallbackSelector) => {
+ const h1=document.querySelector('h1'),main=document.querySelector(mainSelector),fallback=document.querySelector(fallbackSelector);
+ const vis=(el)=>{if(!el)return false;const cs=getComputedStyle(el),r=el.getBoundingClientRect();return cs.display!=='none'&&cs.visibility!=='hidden'&&r.width>0&&r.height>0};
+ return { h1:vis(h1), main:vis(main), fallback:vis(fallback), broken:[...document.images].filter((image)=>image.complete&&image.naturalWidth===0).length };
+ }, route.main, route.fallback);
+ t.equal("무자바스크립트 HTTP 상태", 200, opened.status);
+ t.check("핵심 문서 구조 유지", "visible h1 and main", { h1: state.h1, main: state.main }, (actual) => actual.h1 && actual.main);
+ t.ok("읽기 가능한 정적 대안", state.fallback);
+ t.equal("무자바스크립트 깨진 이미지", 0, state.broken);
+ } finally { await closePage(opened.page); }
+ });
+
+ defineScenario("점진 향상", `${route.label} 감소 모션`, 4, async (t) => {
+ const opened = await openChromium(route, { width: 390, reduced: true });
+ try {
+ const motion = await opened.page.evaluate(() => {
+ const durations=[...document.querySelectorAll('body *')].filter((el)=>{const r=el.getBoundingClientRect();return r.width>0&&r.height>0}).flatMap((el)=>getComputedStyle(el).animationDuration.split(',').map((v)=>parseFloat(v)||0));
+ return { matches: matchMedia('(prefers-reduced-motion: reduce)').matches, scroll: getComputedStyle(document.documentElement).scrollBehavior, maxAnimation: durations.length?Math.max(...durations):0 };
+ });
+ const action = await reducedAction(opened.page, route);
+ t.equal("감소 모션 미디어 일치", true, motion.matches);
+ t.equal("부드러운 스크롤 해제", "auto", motion.scroll);
+ t.check("반복 애니메이션 제거", "<= 0.01s", motion.maxAnimation, (actual) => actual <= 0.01);
+ t.check("감소 모션에서도 핵심 작동", "route-specific state changed", action, (actual) => actual === true || Number(actual) > 0 || String(actual).length > 0);
+ } finally { await closePage(opened.page); }
+ });
+}
+
+const estatePublic = ROUTES.find((route) => route.key === "estate-public");
+const estateAdmin = ROUTES.find((route) => route.key === "estate-admin");
+const burgerPublic = ROUTES.find((route) => route.key === "burger-public");
+const burgerFranchise = ROUTES.find((route) => route.key === "burger-franchise");
+
+// 한남자리 공개 8시나리오 · 24단언. H04 개인 브리핑·비교 계약.
+const ESTATE_DECISION_FIELDS = ["budget", "minArea", "moveIn", "parking", "trade"];
+
+async function setEstateConditions(page, { trade, budget, minArea, moveIn, parking }) {
+ await page.select('[name="trade"]', trade);
+ await setValue(page, '[name="budget"]', budget);
+ await setValue(page, '[name="minArea"]', minArea);
+ await setValue(page, '[name="moveIn"]', moveIn);
+ await page.select('[name="parking"]', String(parking));
+}
+
+async function submitEstate(page) {
+ await page.click("[data-condition-form] button[type='submit']");
+ await new Promise((resolve) => setTimeout(resolve, 180));
+}
+
+defineScenario("한남자리 공개 기능", "분석 전 다섯 조건과 범위 무결성", 3, async (t) => {
+ const opened = await openChromium(estatePublic);
+ try {
+ const fields = await opened.page.$eval("[data-condition-form]", (form) => [...form.elements]
+ .filter((element) => element.name)
+ .map((element) => ({ name: element.name, visible: element.getBoundingClientRect().width > 0 && element.getBoundingClientRect().height > 0 })));
+ t.check("보이는 의사결정 필드 집합", ESTATE_DECISION_FIELDS, fields, (actual, expected) => actual.length === 5
+ && actual.every((item) => item.visible)
+ && actual.map((item) => item.name).sort().join(",") === expected.join(","));
+ t.check("분석 전 briefing matrix dossier 미실행 상태", "empty visible / groups hidden / five 분석 후 notes / no 적합 claim", await opened.page.evaluate(() => ({
+ emptyVisible: !document.querySelector("[data-analysis-empty]")?.hidden,
+ groupsHidden: document.querySelector("[data-analysis-groups]")?.hidden,
+ listItems: document.querySelectorAll("[data-fit-list] li, [data-adjust-list] li, [data-check-list] li").length,
+ analysisHome: document.querySelector("[data-analysis-home]")?.textContent.trim(),
+ analysisText: document.querySelector("[data-analysis-result]")?.textContent,
+ matrixNotes: [...document.querySelectorAll("[data-matrix-trade-note], [data-matrix-price-note], [data-matrix-area-note], [data-matrix-parking-note], [data-matrix-move-note]")].map((item) => item.textContent.trim()),
+ dossierFit: document.querySelector("[data-dossier-fit]")?.textContent.trim(),
+ })), (actual) => actual.emptyVisible
+ && actual.groupsHidden
+ && actual.listItems === 0
+ && actual.analysisHome === "아직 분석하지 않았습니다"
+ && !actual.analysisText.includes("적합")
+ && actual.matrixNotes.length === 5
+ && actual.matrixNotes.every((item) => item.startsWith("분석 후"))
+ && actual.dossierFit.includes("브리핑을 실행하면"));
+ t.check("공개 범위 고지와 금지 토큰", "scoped 예시 labels / every image 연출 / footer limits / no legacy tokens", await opened.page.evaluate(() => {
+ const markup = document.documentElement.outerHTML;
+ const forbidden = ["data-map", "map-marker", "PUBLIC_REAL_AD", "fixture", "demo-0.3", "DEMO-HJ"].filter((token) => markup.includes(token));
+ const imageFigures = [...document.querySelectorAll("figure[data-image-frame]")].filter((figure) => figure.querySelector("img"));
+ return {
+ forbidden,
+ candidateScopes: [...document.querySelectorAll("#homes .eyebrow")].filter((item) => item.textContent.includes("예시")).length,
+ dossierScopes: [...document.querySelectorAll("#dossier .eyebrow")].filter((item) => item.textContent.includes("선택한 예시")).length,
+ imageCount: imageFigures.length,
+ imageProvenance: imageFigures.map((figure) => figure.querySelector("figcaption")?.textContent.trim()),
+ demoStrip: document.querySelector(".demo-strip")?.textContent.trim(),
+ limitItems: document.querySelectorAll(".masthead-note > div").length,
+ footer: document.querySelector(".site-footer p")?.textContent.trim(),
+ };
+ }), (actual) => actual.forbidden.length === 0
+ && actual.candidateScopes === 1
+ && actual.dossierScopes === 1
+ && actual.imageCount >= 4
+ && actual.imageProvenance.every((item) => item?.includes("연출 이미지"))
+ && actual.demoStrip.includes("상담은 접수되지 않습니다")
+ && actual.limitItems === 2
+ && actual.footer.includes("거래 서비스를 제공하지 않습니다"));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 공개 기능", "매매 다섯 조건 briefing compare와 시각 증거", 3, async (t) => {
+ const opened = await openChromium(estatePublic);
+ try {
+ await setEstateConditions(opened.page, { trade: "sale", budget: 20, minArea: 130, moveIn: "2026-12-01", parking: 3 });
+ await submitEstate(opened.page);
+ t.check("브리핑 세 묶음 생성", "empty hidden / groups visible / all lists populated", await opened.page.evaluate(() => ({
+ emptyHidden: document.querySelector("[data-analysis-empty]")?.hidden,
+ groupsVisible: !document.querySelector("[data-analysis-groups]")?.hidden,
+ counts: ["[data-fit-list]", "[data-adjust-list]", "[data-check-list]"].map((selector) => document.querySelector(selector)?.children.length),
+ home: document.querySelector("[data-analysis-home]")?.textContent.trim(),
+ })), (actual) => actual.emptyHidden && actual.groupsVisible && actual.counts.every((count) => count > 0) && actual.home === "정원형 연립주택 브리핑");
+ t.check("선택 후보와 다섯 조건 compare dossier 동기화", "home-1 / 5 resolved matrix notes / dossier recomputed", await opened.page.evaluate(() => ({
+ selected: document.querySelector('[data-select-listing][aria-pressed="true"]')?.dataset.selectListing,
+ matrixValues: [...document.querySelectorAll("[data-matrix-trade], [data-matrix-price], [data-matrix-area], [data-matrix-parking], [data-matrix-move]")].map((item) => item.textContent.trim()),
+ matrixNotes: [...document.querySelectorAll("[data-matrix-trade-note], [data-matrix-price-note], [data-matrix-area-note], [data-matrix-parking-note], [data-matrix-move-note]")].map((item) => item.textContent.trim()),
+ dossier: document.querySelector("[data-dossier-title]")?.textContent.trim(),
+ dossierFit: document.querySelector("[data-dossier-fit]")?.textContent.trim(),
+ })), (actual) => actual.selected === "home-1"
+ && actual.matrixValues.length === 5
+ && actual.matrixNotes.length === 5
+ && actual.matrixNotes.every((item) => !item.startsWith("분석 후"))
+ && actual.dossier === "정원형 연립주택"
+ && !actual.dossierFit.includes("브리핑을 실행하면"));
+ const shot = await captureEvidence(opened.page, "estate-ai-adjusted-1440", 1440, 900, { focusSelector: ".briefing-sheet" });
+ t.check("새 briefing compare 시각 증거", "exists / 1440x900 / >10KB / sha256", shot, (actual) => actual.pass);
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 공개 기능", "전세 예산 면적 입주 주차 변형", 3, async (t) => {
+ const opened = await openChromium(estatePublic);
+ try {
+ await setEstateConditions(opened.page, { trade: "jeonse", budget: 21, minArea: 145, moveIn: "2026-12-01", parking: 3 });
+ await submitEstate(opened.page);
+ t.check("전세 후보와 서류철 선택", "home-2 / 복층형 공동주택", await opened.page.evaluate(() => ({
+ selected: document.querySelector('[data-select-listing][aria-pressed="true"]')?.dataset.selectListing,
+ analysis: document.querySelector("[data-analysis-home]")?.textContent.trim(),
+ dossier: document.querySelector("[data-dossier-title]")?.textContent.trim(),
+ })), (actual) => actual.selected === "home-2" && actual.analysis === "복층형 공동주택 브리핑" && actual.dossier === "복층형 공동주택");
+ t.check("다섯 입력만 의사결정 주장에 반영", "trade/price/area/parking/move and no commute/sunlight", await opened.page.evaluate(() => ({
+ titles: [...document.querySelectorAll("[data-fit-list] strong, [data-adjust-list] strong")].map((item) => item.textContent.trim()),
+ text: document.querySelector("[data-analysis-groups]")?.textContent,
+ })), (actual) => ["거래 형태", "가격 상한", "전용면적", "주차", "입주 시점"].every((title) => actual.titles.includes(title))
+ && !/통근|이동 시간|일조|남향/.test(actual.text));
+ t.check("전세 다섯 조건 matrix 판정", "same / +1억 / -2.20㎡ / -1 car / late", await opened.page.$$eval("[data-matrix-trade-note], [data-matrix-price-note], [data-matrix-area-note], [data-matrix-parking-note], [data-matrix-move-note]", (items) => items.map((item) => item.textContent.trim())), (actual) => actual.length === 5
+ && actual[0] === "입력과 같음"
+ && actual[1].includes("예산보다 1억 높음")
+ && actual[2].includes("2.20㎡ 작음")
+ && actual[3].includes("1대 부족")
+ && actual[4] === "희망일보다 늦음");
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 공개 기능", "월세 보증금과 월 납부 분리", 3, async (t) => {
+ const opened = await openChromium(estatePublic);
+ try {
+ await setEstateConditions(opened.page, { trade: "monthly", budget: 6, minArea: 120, moveIn: "2026-12-20", parking: 1 });
+ await submitEstate(opened.page);
+ t.check("월세 후보와 서류철 선택", "home-3 / 테라스형 다세대주택", await opened.page.evaluate(() => ({
+ selected: document.querySelector('[data-select-listing][aria-pressed="true"]')?.dataset.selectListing,
+ analysis: document.querySelector("[data-analysis-home]")?.textContent.trim(),
+ dossier: document.querySelector("[data-dossier-title]")?.textContent.trim(),
+ })), (actual) => actual.selected === "home-3" && actual.analysis === "테라스형 다세대주택 브리핑" && actual.dossier === "테라스형 다세대주택");
+ t.check("보증금만으로 가격 적합 처리 금지", "no price fit / 월 납부 조건 in adjust", await opened.page.evaluate(() => ({
+ fitTitles: [...document.querySelectorAll("[data-fit-list] strong")].map((item) => item.textContent.trim()),
+ adjustTitles: [...document.querySelectorAll("[data-adjust-list] strong")].map((item) => item.textContent.trim()),
+ adjustText: document.querySelector("[data-adjust-list]")?.textContent,
+ })), (actual) => !actual.fitTitles.some((title) => /가격|보증금/.test(title))
+ && actual.adjustTitles.includes("월 납부 조건")
+ && actual.adjustText.includes("월 1,200만 원을 별도로"));
+ t.check("월세 matrix dossier에 별도 확인 유지", "deposit + monthly / monthly note in matrix and dossier", await opened.page.evaluate(() => ({
+ price: document.querySelector("[data-matrix-price]")?.textContent.trim(),
+ note: document.querySelector("[data-matrix-price-note]")?.textContent.trim(),
+ dossierRisk: document.querySelector("[data-dossier-risk]")?.textContent,
+ })), (actual) => actual.price.includes("보증금 5억")
+ && actual.price.includes("월 1,200만")
+ && actual.note.includes("월 납부 별도")
+ && actual.dossierRisk.includes("월 1,200만 원을 별도로"));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 공개 기능", "세 후보 장면 matrix dossier 상담 동기화", 3, async (t) => {
+ const opened = await openChromium(estatePublic);
+ const expectedHomes = [
+ { id: "home-1", name: "정원형 연립주택", image: "hannam-interior-1200.webp", matrix: ["매매", "38억 원", "118.42㎡", "2대", "2026.12.20 이후 협의"] },
+ { id: "home-2", name: "복층형 공동주택", image: "hannam-evening-1600.webp", matrix: ["전세", "22억 원", "142.80㎡", "2대", "2027.01.15 이후 협의"] },
+ { id: "home-3", name: "테라스형 다세대주택", image: "hannam-interior-1200.webp", matrix: ["월세", "보증금 5억 · 월 1,200만", "140.84㎡", "1대", "2026.11.01 이후 협의"] },
+ ];
+ try {
+ await submitEstate(opened.page);
+ for (const expected of expectedHomes) {
+ await opened.page.click(`[data-select-listing="${expected.id}"]`);
+ const snapshot = await opened.page.evaluate(() => ({
+ selected: document.querySelector('[data-select-listing][aria-pressed="true"]')?.dataset.selectListing,
+ selectedCount: document.querySelectorAll('[data-select-listing][aria-pressed="true"]').length,
+ scene: document.querySelector("[data-compare-name]")?.textContent.trim(),
+ image: document.querySelector("[data-compare-image]")?.getAttribute("src"),
+ imageAlt: document.querySelector("[data-compare-image]")?.getAttribute("alt"),
+ matrix: [...document.querySelectorAll("[data-matrix-trade], [data-matrix-price], [data-matrix-area], [data-matrix-parking], [data-matrix-move]")].map((item) => item.textContent.trim()),
+ dossier: document.querySelector("[data-dossier-title]")?.textContent.trim(),
+ specs: [...document.querySelectorAll("[data-spec-strip] dd")].map((item) => item.textContent.trim()),
+ consult: document.querySelector("[data-consult-home]")?.textContent.trim(),
+ }));
+ t.check(`${expected.name} 전체 표면 동기화`, `${expected.id} / image / five matrix / dossier / consult`, { snapshot, expected }, (actual) => actual.snapshot.selected === actual.expected.id
+ && actual.snapshot.selectedCount === 1
+ && actual.snapshot.scene === actual.expected.name
+ && actual.snapshot.image.endsWith(actual.expected.image)
+ && actual.snapshot.imageAlt.includes("표현한 이미지")
+ && actual.snapshot.matrix.join("|") === actual.expected.matrix.join("|")
+ && actual.snapshot.dossier === actual.expected.name
+ && actual.snapshot.specs.join("|") === actual.expected.matrix.join("|")
+ && actual.snapshot.consult === actual.expected.name);
+ }
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 공개 기능", "면적과 가격 단위 왕복", 3, async (t) => {
+ const opened = await openChromium(estatePublic);
+ try {
+ await opened.page.click('[data-area-unit="pyeong"]');
+ t.check("평 단위 전체 비교 표면", "pressed / 3 candidate areas / matrix and dossier 35.8평", await opened.page.evaluate(() => ({
+ pressed: document.querySelector('[data-area-unit="pyeong"]')?.getAttribute("aria-pressed"),
+ candidates: [...document.querySelectorAll(".candidate-content small")].map((item) => item.textContent.trim()),
+ matrix: document.querySelector("[data-matrix-area]")?.textContent.trim(),
+ spec: [...document.querySelectorAll("[data-spec-strip] dd")][2]?.textContent.trim(),
+ })), (actual) => actual.pressed === "true"
+ && actual.candidates.length === 3
+ && actual.candidates.every((item) => item.includes("평"))
+ && actual.matrix === "35.8평"
+ && actual.spec === "35.8평");
+ await opened.page.click('[data-price-unit="unit"]');
+ t.check("면적 단가 matrix dossier 반영", "unit pressed / both price values are per-pyeong", await opened.page.evaluate(() => ({
+ pressed: document.querySelector('[data-price-unit="unit"]')?.getAttribute("aria-pressed"),
+ matrix: document.querySelector("[data-matrix-price]")?.textContent.trim(),
+ spec: [...document.querySelectorAll("[data-spec-strip] dd")][1]?.textContent.trim(),
+ })), (actual) => actual.pressed === "true" && actual.matrix.includes("평당") && actual.spec.includes("평당"));
+ await opened.page.click('[data-area-unit="m2"]');
+ await opened.page.click('[data-price-unit="total"]');
+ t.check("총액과 제곱미터 복원", "m2 and total pressed / 118.42㎡ / 38억 원", await opened.page.evaluate(() => ({
+ areaPressed: document.querySelector('[data-area-unit="m2"]')?.getAttribute("aria-pressed"),
+ pricePressed: document.querySelector('[data-price-unit="total"]')?.getAttribute("aria-pressed"),
+ area: document.querySelector("[data-matrix-area]")?.textContent.trim(),
+ price: document.querySelector("[data-matrix-price]")?.textContent.trim(),
+ })), (actual) => actual.areaPressed === "true" && actual.pricePressed === "true" && actual.area === "118.42㎡" && actual.price === "38억 원");
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 공개 기능", "서류철 다섯 탭 클릭과 키보드", 3, async (t) => {
+ const opened = await openChromium(estatePublic);
+ const tabState = () => opened.page.evaluate(() => ({
+ selected: document.querySelector('[data-dossier-tab][aria-selected="true"]')?.dataset.dossierTab,
+ selectedCount: document.querySelectorAll('[data-dossier-tab][aria-selected="true"]').length,
+ visible: [...document.querySelectorAll("[data-dossier-panel]")].filter((panel) => !panel.hidden).map((panel) => panel.dataset.dossierPanel),
+ focus: document.activeElement?.dataset?.dossierTab || null,
+ tabStops: [...document.querySelectorAll("[data-dossier-tab]")].filter((tab) => tab.tabIndex === 0).map((tab) => tab.dataset.dossierTab),
+ }));
+ try {
+ await opened.page.click('[data-dossier-tab="price"]');
+ t.check("가격 탭 클릭 상태", "price selected/focused/sole visible/tabstop", await tabState(), (actual) => actual.selected === "price"
+ && actual.focus === "price"
+ && actual.selectedCount === 1
+ && actual.visible.join() === "price"
+ && actual.tabStops.join() === "price");
+ const trail = [];
+ for (const key of ["ArrowRight", "ArrowRight", "ArrowRight", "Home"]) {
+ await opened.page.keyboard.press(key);
+ trail.push(await tabState());
+ }
+ t.check("화살표와 Home 키보드 순환", "rights → location → facility → basic with focus", trail, (actual) => actual.map((item) => item.selected).join(",") === "rights,location,facility,basic"
+ && actual.every((item) => item.focus === item.selected && item.visible.join() === item.selected && item.tabStops.join() === item.selected));
+ t.check("다섯 탭 aria-controls 관계", "5 unique tabs map to 5 panels", await opened.page.$$eval("[data-dossier-tab]", (tabs) => tabs.map((tab) => ({
+ name: tab.dataset.dossierTab,
+ controls: tab.getAttribute("aria-controls"),
+ panel: document.querySelector(`#${tab.getAttribute("aria-controls")}`)?.dataset.dossierPanel,
+ role: tab.getAttribute("role"),
+ }))), (actual) => actual.length === 5
+ && new Set(actual.map((item) => item.name)).size === 5
+ && actual.every((item) => item.role === "tab" && item.panel === item.name));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 공개 기능", "다섯 조건 저장과 상담 무부작용", 3, async (t) => {
+ const opened = await openChromium(estatePublic);
+ const externalMutations = [];
+ opened.page.on("request", (request) => {
+ if (!["GET", "HEAD"].includes(request.method()) || ["fetch", "xhr", "websocket"].includes(request.resourceType())) externalMutations.push(`${request.method()} ${request.url()}`);
+ });
+ try {
+ await setEstateConditions(opened.page, { trade: "monthly", budget: 31, minArea: 135, moveIn: "2027-02-01", parking: 1 });
+ await opened.page.click("[data-save-condition]");
+ const saved = await opened.page.evaluate(() => JSON.parse(localStorage.getItem("hannam-jari-conditions-v2")));
+ t.check("로컬 저장은 다섯 필드만", "exact fields and typed values / no network mutation", { saved, externalMutations }, (actual) => Object.keys(actual.saved || {}).sort().join(",") === ESTATE_DECISION_FIELDS.join(",")
+ && actual.saved.trade === "monthly"
+ && actual.saved.budget === 31
+ && actual.saved.minArea === 135
+ && actual.saved.moveIn === "2027-02-01"
+ && actual.saved.parking === 1
+ && actual.externalMutations.length === 0);
+ await opened.page.reload({ waitUntil: "domcontentloaded" });
+ await settle(opened.page);
+ t.check("새로고침 뒤 다섯 입력 복원", "monthly / 31 / 135 / 2027-02-01 / 1", await opened.page.$eval("[data-condition-form]", (form) => ({
+ trade: form.elements.trade.value,
+ budget: form.elements.budget.value,
+ minArea: form.elements.minArea.value,
+ moveIn: form.elements.moveIn.value,
+ parking: form.elements.parking.value,
+ })), (actual) => actual.trade === "monthly" && actual.budget === "31" && actual.minArea === "135" && actual.moveIn === "2027-02-01" && actual.parking === "1");
+ await opened.page.click("[data-open-consult]");
+ await opened.page.click("[data-finish-consult]");
+ const finished = await textOf(opened.page, "[data-consult-content]");
+ await opened.page.$eval("[data-consult-dialog]", (element) => element.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+ await new Promise((resolve) => setTimeout(resolve, 80));
+ const outside = await opened.page.evaluate(() => ({ open: document.querySelector("[data-consult-dialog]")?.open, locked: document.body.classList.contains("is-locked"), focus: document.activeElement?.matches("[data-open-consult]") }));
+ await opened.page.click("[data-open-consult]");
+ await opened.page.keyboard.press("Escape");
+ await new Promise((resolve) => setTimeout(resolve, 80));
+ const escape = await opened.page.evaluate(() => ({
+ open: document.querySelector("[data-consult-dialog]")?.open,
+ locked: document.body.classList.contains("is-locked"),
+ focus: document.activeElement?.matches("[data-open-consult]"),
+ storage: localStorage.getItem("hannam-jari-conditions-v2"),
+ }));
+ t.check("상담 완료 바깥 클릭 Escape와 초점 복귀", "preview only / both close / trigger focus / storage unchanged / no requests", { finished, outside, escape, saved: JSON.stringify(saved), externalMutations }, (actual) => actual.finished.includes("준비할 순서")
+ && !actual.outside.open
+ && !actual.outside.locked
+ && actual.outside.focus
+ && !actual.escape.open
+ && !actual.escape.locked
+ && actual.escape.focus
+ && actual.escape.storage === actual.saved
+ && actual.externalMutations.length === 0);
+ } finally { await closePage(opened.page); }
+});
+
+// 철판클럽 공개 10시나리오 · 30단언.
+defineScenario("철판클럽 공개 기능", "메뉴 분류 필터", 3, async (t) => {
+ const opened = await openChromium(burgerPublic);
+ try {
+ await opened.page.click('[data-menu-filter="side"]');
+ t.equal("곁들임 필터 선택", "true", await opened.page.$eval('[data-menu-filter="side"]', (element) => element.getAttribute("aria-pressed")));
+ t.check("곁들임 두 항목만 노출", "2 side items", await opened.page.$$eval('[data-menu-category]:not([hidden])', (items) => items.map((item) => item.dataset.menuCategory)), (actual) => actual.length === 2 && actual.every((item) => item === "side"));
+ t.equal("필터 결과가 있어 빈 상태 숨김", true, await opened.page.$eval("#menu-empty", (element) => element.hidden));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 공개 기능", "메뉴 빈 상태와 전체 복구", 3, async (t) => {
+ const opened = await openChromium(burgerPublic, { query: "?fixture=menu-empty" });
+ try {
+ t.ok("메뉴 빈 상태 노출", await visible(opened.page, "#menu-empty"));
+ t.equal("빈 상태에서 메뉴 0개", 0, await opened.page.$$eval('[data-menu-category]:not([hidden])', (items) => items.length));
+ await opened.page.click("[data-show-all-menu]");
+ await new Promise((resolve) => setTimeout(resolve, 80));
+ t.check("모든 메뉴 보기로 복구", "fixture removed and six items visible", await opened.page.evaluate(() => ({ query: location.search, count: document.querySelectorAll('[data-menu-category]:not([hidden])').length })), (actual) => !actual.query.includes("fixture") && actual.count === 6);
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 공개 기능", "매운 더블 프리셋", 3, async (t) => {
+ const opened = await openChromium(burgerPublic);
+ try {
+ await opened.page.click('[data-preset="spicy"]');
+ t.equal("매운 맛과 더블 동시 선택", 2, await opened.page.$$eval('input[name="flavor"][value="spicy"]:checked, input[name="patty"][value="2"]:checked', (items) => items.length));
+ t.equal("프리셋 이름 반영", "고추 피클 더블", await textOf(opened.page, "#summary-heading"));
+ t.includes("매운 조합 알레르기 반영", "토마토", await textOf(opened.page, "#summary-allergens"));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 공개 기능", "세트 조합과 시각 증거", 3, async (t) => {
+ const opened = await openChromium(burgerPublic);
+ try {
+ await choose(opened.page, 'input[name="serving"][value="set"]');
+ t.check("세트 선택 뒤 곁들임 입력 활성", "side and drink enabled", await opened.page.$$eval("#set-options select", (items) => items.map((item) => item.disabled)), (actual) => actual.length === 2 && actual.every((item) => !item));
+ t.equal("세트 예시 총액 계산", "13,000원", await textOf(opened.page, "#summary-total"));
+ const shot = await captureEvidence(opened.page, "burger-builder-valid-1440", 1440, 900, { focusSelector: ".builder-layout" });
+ t.check("유효 버거 조합 시각 증거", "1440x900, >10KB, sha256", shot, (actual) => actual.pass);
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 공개 기능", "재료 조정과 알레르기 재계산", 3, async (t) => {
+ const opened = await openChromium(burgerPublic);
+ try {
+ await opened.page.select("#cheese", "0");
+ await opened.page.select('select[name="onion"]', "extra");
+ await opened.page.select('select[name="sauce"]', "side");
+ t.check("재료 문장 동기화", "no cheese / extra onion / sauce side", await textOf(opened.page, "#summary-lines"), (actual) => actual.includes("치즈 없음") && actual.includes("양파 많이") && actual.includes("소스 따로"));
+ t.check("우유 알레르기 제거", "does not contain 우유", await textOf(opened.page, "#summary-allergens"), (actual) => !actual.includes("우유"));
+ t.equal("재료 변경 총액 계산", "8,500원", await textOf(opened.page, "#summary-total"));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 공개 기능", "영업 종료 매장 선택 경계", 3, async (t) => {
+ const opened = await openChromium(burgerPublic);
+ try {
+ await opened.page.click('[data-select-store="yeonnam"]');
+ t.check("목록과 지도 연남 선택", "yeonnam selected in both", await opened.page.evaluate(() => ({ card: document.querySelector('[data-store].is-selected')?.dataset.store, pin: document.querySelector('[data-map-store].is-active')?.dataset.mapStore })), (actual) => actual.card === "yeonnam" && actual.pin === "yeonnam");
+ t.includes("종료 상태 요약", "영업 종료", await textOf(opened.page, "#summary-store-state"));
+ t.check("저장 행동 차단과 이유", "disabled / choose another store", await opened.page.$eval("#save-builder", (element) => ({ disabled: element.disabled, text: element.textContent.trim() })), (actual) => actual.disabled && actual.text.includes("다른 매장"));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 공개 기능", "매장 검색 일치", 3, async (t) => {
+ const opened = await openChromium(burgerPublic);
+ try {
+ await setValue(opened.page, "#store-search", "연남");
+ t.equal("검색 결과 한 매장", 1, await opened.page.$$eval('[data-store]:not([hidden])', (items) => items.length));
+ t.equal("검색 결과와 지도 핀 일치", "yeonnam", await opened.page.$eval('[data-map-store]:not([hidden])', (element) => element.dataset.mapStore));
+ t.equal("검색어가 있어 지우기 노출", false, await opened.page.$eval("#clear-store-search", (element) => element.hidden));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 공개 기능", "매장 검색 빈 결과와 복구", 3, async (t) => {
+ const opened = await openChromium(burgerPublic);
+ try {
+ await setValue(opened.page, "#store-search", "없는동네");
+ t.ok("매장 빈 상태 노출", await visible(opened.page, "#store-empty"));
+ t.equal("빈 검색 결과 0개", 0, await opened.page.$$eval('[data-store]:not([hidden])', (items) => items.length));
+ await opened.page.click("#reset-store-search");
+ t.check("검색 조건 초기화로 세 매장 복구", "blank query / 3 stores", await opened.page.evaluate(() => ({ query: document.querySelector("#store-search")?.value, count: document.querySelectorAll('[data-store]:not([hidden])').length })), (actual) => actual.query === "" && actual.count === 3);
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 공개 기능", "조합 저장 성공", 3, async (t) => {
+ const opened = await openChromium(burgerPublic);
+ try {
+ await opened.page.click("#save-builder");
+ const snapshot = await opened.page.evaluate(() => JSON.parse(sessionStorage.getItem("griddle-club-demo-selection")));
+ t.check("현재 탭에 조합 스냅샷 저장", "classic / patty 2 / seongsu", snapshot, (actual) => actual?.flavor === "classic" && actual?.patty === "2" && actual?.store === "seongsu");
+ t.includes("실제 주문 미전송 안내", "실제 주문으로 전송되지 않습니다", await textOf(opened.page, "#save-status"));
+ t.equal("성공 상태 오류 스타일 없음", false, await opened.page.$eval("#save-status", (element) => element.classList.contains("is-error")));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 공개 기능", "조합 저장 실패와 입력 보존", 3, async (t) => {
+ const opened = await openChromium(burgerPublic, { query: "?fixture=save-fail" });
+ try {
+ await opened.page.select('select[name="onion"]', "extra");
+ await opened.page.click("#save-builder");
+ t.includes("저장 실패 안내", "남기지 못했어요", await textOf(opened.page, "#save-status"));
+ t.equal("저장 실패 오류 스타일", true, await opened.page.$eval("#save-status", (element) => element.classList.contains("is-error")));
+ t.check("실패 뒤 조합과 저장소 상태", "onion extra retained / no snapshot", await opened.page.evaluate(() => ({ onion: document.querySelector('select[name="onion"]')?.value, stored: sessionStorage.getItem("griddle-club-demo-selection") })), (actual) => actual.onion === "extra" && actual.stored === null);
+ } finally { await closePage(opened.page); }
+});
+
+async function fillFranchiseStepOne(page) {
+ await setValue(page, "#demo-name", "예시점주");
+ await page.select("#region", "서울 동쪽");
+ await choose(page, 'input[name="areaKind"][value="주거지"]');
+ await page.click('[data-step="1"] [data-next]');
+ await new Promise((resolve) => setTimeout(resolve, 60));
+}
+
+async function fillFranchiseStepTwo(page, { possession = "협의 중", area = "99.2" } = {}) {
+ await choose(page, `input[name="storePossession"][value="${possession}"]`);
+ if (["협의 중", "보유함"].includes(possession)) await setValue(page, "#exclusive-area", area);
+ await page.select("#opening-window", "석 달에서 여섯 달");
+ await choose(page, 'input[name="experience"][value="없음"]');
+ await page.click('[data-step="2"] [data-next]');
+ await new Promise((resolve) => setTimeout(resolve, 60));
+}
+
+// 철판클럽 가맹 8시나리오 · 24단언.
+defineScenario("철판클럽 가맹 기능", "첫 단계 필수값 오류", 3, async (t) => {
+ const opened = await openChromium(burgerFranchise);
+ try {
+ await opened.page.click('[data-step="1"] [data-next]');
+ t.check("첫 단계 오류 세 가지", "name / region / area kind", await opened.page.evaluate(() => ["#demo-name-error", "#region-error", "#area-kind-error"].map((selector) => document.querySelector(selector)?.textContent.trim())), (actual) => actual.length === 3 && actual.every(Boolean));
+ t.equal("첫 오류 입력으로 초점", "demo-name", await opened.page.evaluate(() => document.activeElement?.id));
+ t.equal("오류 뒤 첫 단계 유지", "1", await opened.page.$eval(".form-step.is-current", (element) => element.dataset.step));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 가맹 기능", "첫 단계 정상 전환", 3, async (t) => {
+ const opened = await openChromium(burgerFranchise);
+ try {
+ await fillFranchiseStepOne(opened.page);
+ t.equal("두 번째 단계 노출", "2", await opened.page.$eval(".form-step.is-current", (element) => element.dataset.step));
+ t.equal("단계 표시 aria-current", "2", await opened.page.$eval('[data-step-indicator][aria-current="step"]', (element) => element.dataset.stepIndicator));
+ t.equal("두 번째 제목으로 초점 이동", "step-two-heading", await opened.page.evaluate(() => document.activeElement?.id));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 가맹 기능", "점포 면적 조건부 환산", 3, async (t) => {
+ const opened = await openChromium(burgerFranchise);
+ try {
+ await fillFranchiseStepOne(opened.page);
+ await choose(opened.page, 'input[name="storePossession"][value="협의 중"]');
+ t.ok("협의 중이면 면적 입력 노출", await visible(opened.page, "#area-field"));
+ t.equal("면적 입력 필수 전환", true, await opened.page.$eval("#exclusive-area", (element) => element.required));
+ await setValue(opened.page, "#exclusive-area", "99.2");
+ t.includes("제곱미터와 평 환산 병기", "약 30평", await textOf(opened.page, "#area-conversion"));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 가맹 기능", "두 번째 단계 오류와 복구", 3, async (t) => {
+ const opened = await openChromium(burgerFranchise);
+ try {
+ await fillFranchiseStepOne(opened.page);
+ await opened.page.click('[data-step="2"] [data-next]');
+ t.check("두 번째 단계 누락 오류", "possession / opening / experience", await opened.page.evaluate(() => ["#store-possession-error", "#opening-window-error", "#experience-error"].map((selector) => document.querySelector(selector)?.textContent.trim())), (actual) => actual.length === 3 && actual.every(Boolean));
+ await choose(opened.page, 'input[name="storePossession"][value="아직 없음"]');
+ await opened.page.select("#opening-window", "아직 모름");
+ await choose(opened.page, 'input[name="experience"][value="있음"]');
+ t.check("입력 뒤 오류 속성 해제", "all aria-invalid removed", await opened.page.$$eval('[data-step="2"] [aria-invalid="true"]', (items) => items.length), (actual) => actual === 0);
+ await opened.page.click('[data-step="2"] [data-next]');
+ t.equal("복구 뒤 검토 단계 진입", "3", await opened.page.$eval(".form-step.is-current", (element) => element.dataset.step));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 가맹 기능", "검토 값과 시각 증거", 3, async (t) => {
+ const opened = await openChromium(burgerFranchise);
+ try {
+ await fillFranchiseStepOne(opened.page);
+ await fillFranchiseStepTwo(opened.page);
+ const review = await opened.page.evaluate(() => Object.fromEntries([...document.querySelectorAll("[data-review]")].map((element) => [element.dataset.review, element.textContent.trim()])));
+ t.check("검토 원장에 입력값 반영", "name / region / possession", review, (actual) => actual.demoName === "예시점주" && actual.region === "서울 동쪽" && actual.storePossession === "협의 중");
+ t.includes("검토 원장에 면적 환산", "약 30평", review.exclusiveArea);
+ const shot = await captureEvidence(opened.page, "burger-franchise-review-1440", 1440, 900, { focusSelector: '[data-step="3"]' });
+ t.check("가맹 검토 단계 시각 증거", "1440x900, >10KB, sha256", shot, (actual) => actual.pass);
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 가맹 기능", "문의 체험 동의 오류", 3, async (t) => {
+ const opened = await openChromium(burgerFranchise);
+ try {
+ await fillFranchiseStepOne(opened.page);
+ await fillFranchiseStepTwo(opened.page, { possession: "아직 없음" });
+ await opened.page.click("#submit-inquiry");
+ t.equal("동의 입력 aria-invalid", "true", await opened.page.$eval("#demo-consent", (element) => element.getAttribute("aria-invalid")));
+ t.includes("동의 오류 이유", "확인해 주세요", await textOf(opened.page, "#demo-consent-error"));
+ t.equal("동의 입력으로 초점", "demo-consent", await opened.page.evaluate(() => document.activeElement?.id));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 가맹 기능", "문의 준비 완료와 다시 시작", 3, async (t) => {
+ const opened = await openChromium(burgerFranchise);
+ try {
+ await fillFranchiseStepOne(opened.page);
+ await fillFranchiseStepTwo(opened.page, { possession: "아직 없음" });
+ await opened.page.click("#demo-consent");
+ await opened.page.click("#submit-inquiry");
+ await new Promise((resolve) => setTimeout(resolve, 520));
+ t.check("성공 패널로 전환", "success visible / form hidden", await opened.page.evaluate(() => ({ success: !document.querySelector("#inquiry-success")?.hidden, form: document.querySelector("#franchise-form")?.hidden })), (actual) => actual.success && actual.form);
+ await opened.page.click("#review-again");
+ t.equal("입력 내용 다시 보기 3단계", "3", await opened.page.$eval(".form-step.is-current", (element) => element.dataset.step));
+ await opened.page.click("#submit-inquiry");
+ await new Promise((resolve) => setTimeout(resolve, 520));
+ await opened.page.click("#restart-form");
+ t.check("처음부터 보기 입력 초기화", "step 1 / blank name", await opened.page.evaluate(() => ({ step: document.querySelector(".form-step.is-current")?.dataset.step, name: document.querySelector("#demo-name")?.value })), (actual) => actual.step === "1" && actual.name === "");
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("철판클럽 가맹 기능", "문의 준비 실패와 재시도", 3, async (t) => {
+ const opened = await openChromium(burgerFranchise, { query: "?fixture=inquiry-fail" });
+ try {
+ await fillFranchiseStepOne(opened.page);
+ await fillFranchiseStepTwo(opened.page, { possession: "아직 없음" });
+ await opened.page.click("#demo-consent");
+ await opened.page.click("#submit-inquiry");
+ await new Promise((resolve) => setTimeout(resolve, 520));
+ t.includes("제출 실패 이유", "바꾸지 못했어요", await textOf(opened.page, "#submit-state"));
+ t.check("재시도 버튼 복구", "enabled / 다시 시도하기", await opened.page.$eval("#submit-inquiry", (element) => ({ disabled: element.disabled, text: element.textContent.trim() })), (actual) => !actual.disabled && actual.text === "다시 시도하기");
+ t.check("실패 뒤 입력과 단계 보존", "step 3 / name retained", await opened.page.evaluate(() => ({ step: document.querySelector(".form-step.is-current")?.dataset.step, name: document.querySelector("#demo-name")?.value })), (actual) => actual.step === "3" && actual.name === "예시점주");
+ } finally { await closePage(opened.page); }
+});
+
+// 한남자리 관리자 16시나리오 · 48단언.
+defineScenario("한남자리 관리자 기능", "초기 선택과 조사관 동기화", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ t.check("첫 행 선택 상태", "DEMO-HJ-101 selected / aria-selected true", await opened.page.evaluate(() => {
+ const row = document.querySelector('[data-queue-row].is-selected');
+ return { id: row?.dataset.id, selected: row?.getAttribute("aria-selected") };
+ }), (actual) => actual.id === "DEMO-HJ-101" && actual.selected === "true");
+ t.check("조사관 제목과 식별자 동기화", "한남 생활권 정원 주거 / DEMO-HJ-101", await opened.page.evaluate(() => ({
+ title: document.querySelector("[data-inspector-title]")?.textContent.trim(),
+ id: document.querySelector("[data-inspector-id]")?.textContent.trim(),
+ })), (actual) => actual.title === "한남 생활권 정원 주거" && actual.id.startsWith("DEMO-HJ-101"));
+ t.check("초기 대기열 원장", "6 rows / 6개 예시", await opened.page.evaluate(() => ({
+ rows: document.querySelectorAll("[data-queue-row]").length,
+ count: document.querySelector("[data-result-count]")?.textContent.trim(),
+ })), (actual) => actual.rows === 6 && actual.count === "6개 예시");
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "행 선택 전환", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.click("[data-close-inspector]");
+ const closed = await opened.page.evaluate(() => {
+ const workbench = document.querySelector(".admin-workbench")?.getBoundingClientRect();
+ const queue = document.querySelector("[data-queue-panel]")?.getBoundingClientRect();
+ return {
+ inspectorOpen: document.querySelector("[data-inspector]")?.classList.contains("is-open"),
+ selectedCount: document.querySelectorAll("[data-queue-row].is-selected").length,
+ rightEdgeDiff: workbench && queue ? Math.abs(workbench.right - queue.right) : null,
+ };
+ });
+ await opened.page.click('[data-queue-row][data-id="DEMO-HJ-102"] [data-select-row]');
+ const restored = await opened.page.evaluate(() => {
+ const workbench = document.querySelector(".admin-workbench")?.getBoundingClientRect();
+ const queue = document.querySelector("[data-queue-panel]")?.getBoundingClientRect();
+ const inspector = document.querySelector("[data-inspector]")?.getBoundingClientRect();
+ return {
+ inspectorOpen: document.querySelector("[data-inspector]")?.classList.contains("is-open"),
+ gap: queue && inspector ? inspector.left - queue.right : null,
+ inspectorRightDiff: workbench && inspector ? Math.abs(workbench.right - inspector.right) : null,
+ };
+ });
+ t.check("닫힌 단일 대기열과 행 선택 뒤 분할 복구", "closed edge <=2px / open split 0..20px", { closed, restored }, (actual) => !actual.closed.inspectorOpen
+ && actual.closed.selectedCount === 0
+ && actual.closed.rightEdgeDiff <= 2
+ && actual.restored.inspectorOpen
+ && actual.restored.gap >= 0
+ && actual.restored.gap <= 20
+ && actual.restored.inspectorRightDiff <= 2);
+ t.check("새 행만 선택", "102 true / 101 false", await opened.page.evaluate(() => ({
+ next: document.querySelector('[data-queue-row][data-id="DEMO-HJ-102"]')?.getAttribute("aria-selected"),
+ previous: document.querySelector('[data-queue-row][data-id="DEMO-HJ-101"]')?.getAttribute("aria-selected"),
+ selectedCount: document.querySelectorAll("[data-queue-row].is-selected").length,
+ })), (actual) => actual.next === "true" && actual.previous === "false" && actual.selectedCount === 1);
+ t.check("선택 제목과 상태 조사관 반영", "한강 가까운 복층 주거 / 쇼케이스 공개", await opened.page.evaluate(() => ({
+ title: document.querySelector("[data-inspector-title]")?.textContent.trim(),
+ status: document.querySelector("[data-inspector-status]")?.textContent.trim(),
+ })), (actual) => actual.title === "한강 가까운 복층 주거" && actual.status === "쇼케이스 공개");
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "검색 일치 결과", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await setValue(opened.page, "[data-queue-search]", "남산");
+ t.equal("검색 결과 한 행", 1, await opened.page.$$eval("[data-queue-row]:not(.is-hidden)", (rows) => rows.length));
+ t.equal("검색 결과 식별자", "DEMO-HJ-105", await opened.page.$eval("[data-queue-row]:not(.is-hidden)", (row) => row.dataset.id));
+ t.check("검색 결과 수와 빈 상태", "1개 예시 / empty hidden", await opened.page.evaluate(() => ({
+ count: document.querySelector("[data-result-count]")?.textContent.trim(),
+ empty: document.querySelector("[data-queue-empty]")?.hidden,
+ })), (actual) => actual.count === "1개 예시" && actual.empty);
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "검색 빈 상태와 초기화 복구", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await setValue(opened.page, "[data-queue-search]", "없는 매물");
+ t.check("검색 빈 상태 원인 안내", "0개 예시 / 현재 조건", await opened.page.evaluate(() => ({
+ count: document.querySelector("[data-result-count]")?.textContent.trim(),
+ title: document.querySelector("[data-empty-title]")?.textContent.trim(),
+ visible: !document.querySelector("[data-queue-empty]")?.hidden,
+ })), (actual) => actual.count === "0개 예시" && actual.visible && actual.title.includes("현재 조건"));
+ t.equal("빈 검색에서 보이는 행 없음", 0, await opened.page.$$eval("[data-queue-row]:not(.is-hidden)", (rows) => rows.length));
+ await opened.page.click("[data-reset-filter]");
+ t.check("필터 초기화로 전체 복구", "blank / all / 6 rows", await opened.page.evaluate(() => ({
+ query: document.querySelector("[data-queue-search]")?.value,
+ status: document.querySelector("[data-status-filter]")?.value,
+ rows: document.querySelectorAll("[data-queue-row]:not(.is-hidden)").length,
+ })), (actual) => actual.query === "" && actual.status === "all" && actual.rows === 6);
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "검수 필요 상태 필터", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.select("[data-status-filter]", "review");
+ const result = await opened.page.$$eval("[data-queue-row]:not(.is-hidden)", (rows) => rows.map((row) => row.dataset.id));
+ t.equal("검수 필요 결과 수", 2, result.length);
+ t.check("검수 필요 식별자 집합", "DEMO-HJ-101, DEMO-HJ-106", result, (actual) => actual.join(",") === "DEMO-HJ-101,DEMO-HJ-106");
+ t.equal("상태 필터 결과 문구", "2개 예시", await textOf(opened.page, "[data-result-count]"));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "매물명 오름차순 정렬", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.select("[data-sort-select]", "title-asc");
+ const order = await opened.page.$$eval("[data-queue-row]", (rows) => rows.map((row) => row.dataset.title));
+ t.equal("정렬 뒤 원장 보존", 6, order.length);
+ t.check("한국어 매물명 오름차순", "every previous <= next", order, (actual) => actual.every((title, index) => index === 0 || actual[index - 1].localeCompare(title, "ko") <= 0));
+ t.includes("정렬 변경 라이브 안내", "정렬을 바꿨습니다", await textOf(opened.page, "[data-admin-live]"));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "불러오는 중과 정상 복구", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.select("[data-state-simulator]", "loading");
+ t.check("대기열 로딩 상태", "aria-busy true / loading visible", await opened.page.evaluate(() => ({
+ busy: document.querySelector("[data-queue-panel]")?.getAttribute("aria-busy"),
+ loading: !document.querySelector("[data-queue-loading]")?.hidden,
+ })), (actual) => actual.busy === "true" && actual.loading);
+ t.includes("로딩 라이브 안내", "불러오는 중", await textOf(opened.page, "[data-admin-live]"));
+ await opened.page.select("[data-state-simulator]", "normal");
+ t.check("정상 선택으로 로딩 종료", "aria-busy false / loading hidden / 6 rows", await opened.page.evaluate(() => ({
+ busy: document.querySelector("[data-queue-panel]")?.getAttribute("aria-busy"),
+ loading: document.querySelector("[data-queue-loading]")?.hidden,
+ rows: document.querySelectorAll("[data-queue-row]:not(.is-hidden)").length,
+ })), (actual) => actual.busy === "false" && actual.loading && actual.rows === 6);
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "강제 빈 대기열과 복구", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.select("[data-state-simulator]", "empty");
+ t.ok("강제 빈 대기열 노출", await visible(opened.page, "[data-queue-empty]"));
+ t.includes("강제 빈 상태 설명", "아직 접수된", await textOf(opened.page, "[data-empty-title]"));
+ await opened.page.select("[data-state-simulator]", "normal");
+ t.check("정상 선택으로 빈 상태 해제", "empty hidden / 6개 예시", await opened.page.evaluate(() => ({
+ empty: document.querySelector("[data-queue-empty]")?.hidden,
+ count: document.querySelector("[data-result-count]")?.textContent.trim(),
+ })), (actual) => actual.empty && actual.count === "6개 예시");
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "불러오기 실패와 마지막 자료 복구", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.select("[data-state-simulator]", "error");
+ t.check("불러오기 실패 배너", "visible / 대기열 일부", await opened.page.evaluate(() => ({
+ visible: !document.querySelector("[data-system-banner]")?.hidden,
+ title: document.querySelector("[data-banner-title]")?.textContent.trim(),
+ })), (actual) => actual.visible && actual.title === "대기열 일부를 불러오지 못했습니다.");
+ t.equal("실패 중 마지막 여섯 행 유지", 6, await opened.page.$$eval("[data-queue-row]:not(.is-hidden)", (rows) => rows.length));
+ await opened.page.select("[data-state-simulator]", "normal");
+ t.check("정상 선택으로 실패 배너 해제", "banner hidden / normal state", await opened.page.evaluate(() => ({
+ hidden: document.querySelector("[data-system-banner]")?.hidden,
+ state: document.querySelector("[data-state-simulator]")?.value,
+ })), (actual) => actual.hidden && actual.state === "normal");
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "자료 오래됨과 정상 복구", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.select("[data-state-simulator]", "stale");
+ t.check("자료 오래됨 차단 상태", "body stale / banner visible", await opened.page.evaluate(() => ({
+ stale: document.body.classList.contains("is-stale-demo"),
+ banner: !document.querySelector("[data-system-banner]")?.hidden,
+ })), (actual) => actual.stale && actual.banner);
+ t.equal("조사관 오래됨 상태", "자료 오래됨", await textOf(opened.page, "[data-inspector-status]"));
+ await opened.page.select("[data-state-simulator]", "normal");
+ t.check("정상 선택으로 오래됨 전역 상태 해제", "body normal / banner hidden", await opened.page.evaluate(() => ({
+ stale: document.body.classList.contains("is-stale-demo"),
+ hidden: document.querySelector("[data-system-banner]")?.hidden,
+ })), (actual) => !actual.stale && actual.hidden);
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "버전 충돌 저장 실패와 정상 재시도", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.select("[data-state-simulator]", "conflict");
+ await opened.page.$eval("[data-simulate-save]", (button) => button.click());
+ t.equal("충돌 저장 실패 배너", "버전 충돌로 저장하지 않았습니다.", await textOf(opened.page, "[data-banner-title]"));
+ t.includes("충돌 저장 실패 라이브 안내", "저장하지 않았습니다", await textOf(opened.page, "[data-admin-live]"));
+ await opened.page.select("[data-state-simulator]", "normal");
+ await opened.page.$eval("[data-simulate-save]", (button) => button.click());
+ t.includes("정상 재시도는 외부 저장 없음", "실제 저장하지 않았습니다", await textOf(opened.page, "[data-admin-live]"));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "권한 제한과 정상 복구", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.select("[data-state-simulator]", "permission");
+ t.check("권한 제한 행동 비활성", "review/save/draft disabled", await opened.page.$$eval("[data-review-ai], [data-simulate-save], [data-new-draft]", (buttons) => buttons.map((button) => button.disabled)), (actual) => actual.length === 3 && actual.every(Boolean));
+ t.check("권한 제한 근거 배너", "body limited / permission title", await opened.page.evaluate(() => ({
+ limited: document.body.classList.contains("is-permission-limited"),
+ title: document.querySelector("[data-banner-title]")?.textContent.trim(),
+ })), (actual) => actual.limited && actual.title.includes("권한"));
+ await opened.page.select("[data-state-simulator]", "normal");
+ t.check("정상 선택으로 행동 복구", "body normal / all enabled", await opened.page.evaluate(() => ({
+ limited: document.body.classList.contains("is-permission-limited"),
+ disabled: [...document.querySelectorAll("[data-review-ai], [data-simulate-save], [data-new-draft]")].filter((button) => button.disabled).length,
+ })), (actual) => !actual.limited && actual.disabled === 0);
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "키보드 탭과 첫 누락 초점", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.focus("#tab-basic");
+ await opened.page.keyboard.press("ArrowRight");
+ t.check("오른쪽 화살표로 표시 광고 탭 활성", "legal selected / focused", await opened.page.evaluate(() => ({
+ selected: document.querySelector("#tab-legal")?.getAttribute("aria-selected"),
+ focused: document.activeElement?.id,
+ })), (actual) => actual.selected === "true" && actual.focused === "tab-legal");
+ t.check("탭과 패널 상태 동기화", "legal visible / basic hidden", await opened.page.evaluate(() => ({
+ legal: document.querySelector("#inspector-legal")?.hidden,
+ basic: document.querySelector("#inspector-basic")?.hidden,
+ })), (actual) => !actual.legal && actual.basic);
+ await opened.page.click("[data-focus-missing]");
+ await new Promise((resolve) => setTimeout(resolve, 100));
+ t.equal("첫 누락 입력으로 초점", "missing-orientation", await opened.page.evaluate(() => document.activeElement?.id));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "실제 광고 차단 대화상자와 시각 증거", 3, async (t) => {
+ const opened = await openChromium(estateAdmin, { width: 1440, height: 900 });
+ try {
+ await opened.page.click("[data-block-publish]");
+ t.check("게시 차단 대화상자와 배경 잠금", "dialog open / body locked / inspector open", await opened.page.evaluate(() => ({
+ open: document.querySelector("[data-block-dialog]")?.open,
+ locked: document.body.classList.contains("is-locked"),
+ inspector: document.querySelector("[data-inspector]")?.classList.contains("is-open"),
+ })), (actual) => actual.open && actual.locked && actual.inspector);
+ const shot = await captureEvidence(opened.page, "estate-admin-block-dialog-1440", 1440, 900);
+ t.check("게시 차단 조사관 시각 증거", "exists / 1440x900 / >10KB / sha256", shot, (actual) => actual.pass);
+ await opened.page.keyboard.press("Escape");
+ await new Promise((resolve) => setTimeout(resolve, 100));
+ t.check("대화상자 닫힘과 선택 상태 동시 해제", "dialog closed / unlocked / inspector closed / no selected row", await opened.page.evaluate(() => ({
+ open: document.querySelector("[data-block-dialog]")?.open,
+ locked: document.body.classList.contains("is-locked"),
+ inspector: document.querySelector("[data-inspector]")?.classList.contains("is-open"),
+ selectedRows: document.querySelectorAll("[data-queue-row].is-selected").length,
+ })), (actual) => !actual.open && !actual.locked && !actual.inspector && actual.selectedRows === 0);
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "AI 주장 검토 완료", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.click('[data-tab="ai"]');
+ await opened.page.click('[data-claim-action="edit"]');
+ t.check("지원되지 않은 주장 수정 반영", "disabled / 수정 반영", await opened.page.$eval('[data-claim-action="edit"]', (button) => ({ disabled: button.disabled, text: button.textContent.trim() })), (actual) => actual.disabled && actual.text === "수정 반영");
+ await opened.page.click("[data-review-ai]");
+ t.check("사람 검토 완료 상태", "disabled / 수정 후 승인됨 / pass badge", await opened.page.evaluate(() => ({
+ disabled: document.querySelector("[data-review-ai]")?.disabled,
+ text: document.querySelector("[data-review-ai]")?.textContent.trim(),
+ badge: document.querySelector("#inspector-ai .status-badge")?.textContent.trim(),
+ pass: document.querySelector("#inspector-ai .status-badge")?.classList.contains("status-pass"),
+ })), (actual) => actual.disabled && actual.text === "수정 후 승인됨" && actual.badge === "수정 후 승인" && actual.pass);
+ t.includes("AI 검토 라이브 안내", "데모 외부에는 게시하지 않았습니다", await textOf(opened.page, "[data-admin-live]"));
+ } finally { await closePage(opened.page); }
+});
+
+defineScenario("한남자리 관리자 기능", "새 예시 초안 생성", 3, async (t) => {
+ const opened = await openChromium(estateAdmin);
+ try {
+ await opened.page.click("[data-new-draft]");
+ t.check("초안 행 한 번만 추가", "7 rows / DEMO-HJ-NEW once", await opened.page.evaluate(() => ({
+ rows: document.querySelectorAll("[data-queue-row]").length,
+ drafts: document.querySelectorAll('[data-queue-row][data-id="DEMO-HJ-NEW"]').length,
+ })), (actual) => actual.rows === 7 && actual.drafts === 1);
+ t.check("새 초안 선택과 조사관 유지", "draft selected / inspector open", await opened.page.evaluate(() => ({
+ selected: document.querySelector('[data-queue-row][data-id="DEMO-HJ-NEW"]')?.getAttribute("aria-selected"),
+ inspector: document.querySelector("[data-inspector]")?.classList.contains("is-open"),
+ })), (actual) => actual.selected === "true" && actual.inspector);
+ t.check("새 초안 조사관 기본값", "title / 입력 전 / 7개 예시", await opened.page.evaluate(() => ({
+ title: document.querySelector("[data-inspector-title]")?.textContent.trim(),
+ price: document.querySelector("[data-basic-grid] dd")?.textContent.trim(),
+ count: document.querySelector("[data-result-count]")?.textContent.trim(),
+ })), (actual) => actual.title === "제목 없는 새 예시 초안" && actual.price === "미선택" && actual.count === "7개 예시");
+ } finally { await closePage(opened.page); }
+});
+
+function markdownCell(value) {
+ return String(value).replaceAll("|", "\\|").replaceAll("\n", "
");
+}
+
+function makeReport({ results, startedAt, finishedAt, setupError, contract }) {
+ const failedScenarios = results.filter((result) => !result.pass).length;
+ const passedAssertions = results.flatMap((result) => result.assertions).filter((assertion) => assertion.pass).length;
+ const actualAssertions = results.reduce((sum, result) => sum + result.assertions.length, 0);
+ const lines = [
+ "# Showcase Duo E2E report",
+ "",
+ `- root: \`${rootName}\``,
+ `- started: ${startedAt}`,
+ `- finished: ${finishedAt}`,
+ `- scenarios: ${results.length}/${EXPECTED_SCENARIOS}`,
+ `- assertions: ${actualAssertions}/${EXPECTED_ASSERTIONS} (${passedAssertions} passed)`,
+ `- failed scenarios: ${failedScenarios}`,
+ `- visual evidence: ${evidence.length}/12`,
+ `- contract: ${contract ? "PASS" : "FAIL"}`,
+ ];
+ if (setupError) lines.push(`- setup error: ${markdownCell(setupError.stack || setupError.message || setupError)}`);
+ lines.push("", "## Scenario results", "", "| result | suite | scenario | assertions |", "| --- | --- | --- | ---: |");
+ for (const result of results) {
+ lines.push(`| ${result.pass ? "PASS" : "FAIL"} | ${markdownCell(result.suite)} | ${markdownCell(result.name)} | ${result.assertions.length}/${result.expectedAssertions} |`);
+ }
+ lines.push("", "## Visual evidence", "", "| name | file | geometry | bytes | sha256 |", "| --- | --- | ---: | ---: | --- |");
+ for (const item of evidence) lines.push(`| ${item.name} | \`${item.file}\` | ${item.width}x${item.height} | ${item.bytes} | \`${item.sha256}\` |`);
+ lines.push("", "## Assertion ledger");
+ for (const result of results) {
+ lines.push("", `### ${result.pass ? "PASS" : "FAIL"} · ${result.suite} · ${result.name}`, "");
+ if (result.error) lines.push(`- runtime error: ${markdownCell(result.error.stack || result.error.message || result.error)}`);
+ for (const assertion of result.assertions) {
+ lines.push(`- ${assertion.pass ? "PASS" : "FAIL"} · ${assertion.name}`);
+ lines.push(` - expected: ${markdownCell(assertion.expected)}`);
+ lines.push(` - actual: ${markdownCell(assertion.actual)}`);
+ }
+ }
+ return `${lines.join("\n")}\n`;
+}
+
+async function listen() {
+ await new Promise((resolve, reject) => {
+ server.once("error", reject);
+ server.listen(0, "127.0.0.1", resolve);
+ });
+ const address = server.address();
+ if (!address || typeof address === "string") throw new Error("Could not resolve local test server address.");
+ origin = `http://127.0.0.1:${address.port}`;
+}
+
+async function run() {
+ const startedAt = new Date().toISOString();
+ const results = [];
+ let setupError = null;
+ let contract = false;
+ try {
+ const plannedAssertions = scenarios.reduce((sum, scenario) => sum + scenario.expectedAssertions, 0);
+ if (scenarios.length !== EXPECTED_SCENARIOS || plannedAssertions !== EXPECTED_ASSERTIONS) {
+ throw new Error(`Definition contract mismatch: ${scenarios.length}/${EXPECTED_SCENARIOS} scenarios, ${plannedAssertions}/${EXPECTED_ASSERTIONS} assertions.`);
+ }
+ await fs.promises.mkdir(evidenceRoot, { recursive: true });
+ await listen();
+ chromiumBrowser = await puppeteer.launch({ executablePath: chrome, headless: true, args: ["--disable-dev-shm-usage", "--no-sandbox"] });
+ webkitBrowser = await webkit.launch({ headless: true });
+
+ for (let index = 0; index < scenarios.length; index += 1) {
+ const definition = scenarios[index];
+ const context = new ScenarioContext(definition);
+ let error = null;
+ try {
+ await definition.run(context);
+ } catch (caught) {
+ error = caught;
+ }
+ const assertionCountPass = context.assertions.length === definition.expectedAssertions;
+ const pass = !error && assertionCountPass && context.assertions.every((assertion) => assertion.pass);
+ results.push({ ...definition, assertions: context.assertions, assertionCountPass, error, pass });
+ console.log(`${String(index + 1).padStart(2, "0")}/${EXPECTED_SCENARIOS} ${pass ? "PASS" : "FAIL"} ${definition.suite} · ${definition.name}`);
+ }
+
+ const assertions = results.flatMap((result) => result.assertions);
+ const expectedEvidenceNames = new Set([
+ ...ROUTES.flatMap((route) => [390, 1440].map((width) => `${route.key}-${width}`)),
+ "estate-ai-adjusted-1440",
+ "estate-admin-block-dialog-1440",
+ "burger-builder-valid-1440",
+ "burger-franchise-review-1440",
+ ]);
+ const evidenceNames = new Set(evidence.map((item) => item.name));
+ const evidenceByName = new Map(evidence.map((item) => [item.name, item]));
+ const interactionDiffs = [
+ ["estate-ai-adjusted-1440", "estate-public-1440"],
+ ["estate-admin-block-dialog-1440", "estate-admin-1440"],
+ ["burger-builder-valid-1440", "burger-public-1440"],
+ ["burger-franchise-review-1440", "burger-franchise-1440"],
+ ].every(([interaction, base]) => evidenceByName.get(interaction)?.sha256 !== evidenceByName.get(base)?.sha256);
+ const evidencePass = evidence.length === 12
+ && evidenceNames.size === 12
+ && [...expectedEvidenceNames].every((name) => evidenceNames.has(name))
+ && evidence.every((item) => item.exists && item.width > 0 && item.height > 0 && item.bytes > 10000 && /^[a-f0-9]{64}$/.test(item.sha256))
+ && interactionDiffs;
+ contract = results.length === EXPECTED_SCENARIOS
+ && assertions.length === EXPECTED_ASSERTIONS
+ && results.every((result) => result.pass)
+ && evidencePass;
+ } catch (caught) {
+ setupError = caught;
+ } finally {
+ await webkitBrowser?.close().catch(() => {});
+ await chromiumBrowser?.close().catch(() => {});
+ if (server.listening) await new Promise((resolve) => server.close(resolve));
+ const report = makeReport({ results, startedAt, finishedAt: new Date().toISOString(), setupError, contract });
+ await fs.promises.writeFile(reportFile, report, "utf8");
+ }
+
+ if (setupError) console.error(setupError);
+ console.log(`Showcase duo E2E: ${contract ? "PASS" : "FAIL"} · ${results.length}/${EXPECTED_SCENARIOS} scenarios · ${results.reduce((sum, result) => sum + result.assertions.length, 0)}/${EXPECTED_ASSERTIONS} assertions · ${evidence.length}/12 captures`);
+ console.log(`Report: ${reportFile}`);
+ if (!contract) process.exitCode = 1;
+}
+
+await run();
diff --git a/apps/site/tools/verify-report.md b/apps/site/tools/verify-report.md
index 710c502..0c4497d 100644
--- a/apps/site/tools/verify-report.md
+++ b/apps/site/tools/verify-report.md
@@ -1,22 +1,23 @@
-# 검증 리포트 — 2026-08-26 09:13
+# 검증 리포트 — 2026-08-29 12:16
-게이트: **전 계층 통과 — 배포 가능** · 총 195.3초
+게이트: **전 계층 통과 — 배포 가능** · 총 416.9초
| 계층 | 결과 | 항목 | 소요 |
|---|---|---|---|
-| L0-자산/트웬티온스 3D | PASS | PASS — | 0.3s |
-| L0-한자 금지/배포 텍스트 | PASS | PASS 1 | 0.1s |
-| L0-정적/stylelint | PASS | PASS — | 2.4s |
-| L0-정식/html-validate | PASS | PASS — | 1.9s |
-| L0-무결성/변수·경로·조판 | PASS | PASS — | 0.1s |
-| L1-단위/계산로직 | PASS | PASS 40 | 0.1s |
-| L2-기능/감사 | PASS | PASS 72 | 10.0s |
-| L2-불변식/렌더 | PASS | PASS 10 | 36.9s |
-| L2-디자인 게이트/메인 | PASS | PASS 130 | 37.9s |
-| L2-디자인 게이트/제품 | PASS | PASS 15 | 7.2s |
-| L3-시각회귀/diff | PASS | PASS 30 | 11.8s |
-| L4-WebKit | PASS | PASS 8 | 3.8s |
-| L5-탐색/키보드 | PASS | PASS 14 | 6.3s |
-| L6-시나리오/E2E | PASS | PASS — | 43.6s |
-| L6-시나리오/최근 쇼케이스 | PASS | PASS 115 | 10.9s |
-| L6-시나리오/트웬티온스 | PASS | PASS 148 | 22.0s |
+| L0-자산/트웬티온스 3D | PASS | PASS — | 0.8s |
+| L0-한자 금지/배포 텍스트 | PASS | PASS 1 | 0.2s |
+| L0-정적/stylelint | PASS | PASS — | 14.8s |
+| L0-정식/html-validate | PASS | PASS — | 9.0s |
+| L0-무결성/변수·경로·조판 | PASS | PASS — | 0.9s |
+| L1-단위/계산로직 | PASS | PASS 40 | 0.8s |
+| L2-기능/감사 | PASS | PASS 72 | 16.0s |
+| L2-불변식/렌더 | PASS | PASS 10 | 23.8s |
+| L2-디자인 게이트/메인 | PASS | PASS 178 | 70.9s |
+| L2-디자인 게이트/제품 | PASS | PASS 15 | 8.9s |
+| L3-시각회귀/diff | PASS | PASS 30 | 17.9s |
+| L4-WebKit | PASS | PASS 8 | 9.0s |
+| L5-탐색/키보드 | PASS | PASS 14 | 10.1s |
+| L6-시나리오/E2E | PASS | PASS — | 50.5s |
+| L6-시나리오/최근 쇼케이스 | PASS | PASS 115 | 29.3s |
+| L6-시나리오/트웬티온스 | PASS | PASS 148 | 29.9s |
+| L6-시나리오/쇼케이스 듀오 | PASS | PASS — | 124.1s |
diff --git a/apps/site/tools/verify.mjs b/apps/site/tools/verify.mjs
index 9dd1578..851f1ab 100644
--- a/apps/site/tools/verify.mjs
+++ b/apps/site/tools/verify.mjs
@@ -21,11 +21,11 @@ const steps = [
},
{
layer: "L0-정적/stylelint",
- cmd: () => spawnSync(npx, ["stylelint", "public/work/*/styles/*.css"], { cwd: root, encoding: "utf8", shell: true }),
+ cmd: () => spawnSync(npx, ["stylelint", "public/work/**/*.css"], { cwd: root, encoding: "utf8", shell: true }),
},
{
layer: "L0-정식/html-validate",
- cmd: () => spawnSync(npx, ["html-validate", "public/work/*/index.html", "public/work/*/*/index.html", "public/work/twentyoz-corp/products.html"], { cwd: root, encoding: "utf8", shell: true }),
+ cmd: () => spawnSync(npx, ["html-validate", "public/work/**/*.html"], { cwd: root, encoding: "utf8", shell: true }),
},
{
// 미정의 CSS 변수·끊긴 상대경로·한글 조판 누락·슬롭 지문은 stylelint 도 html-validate 도
@@ -44,6 +44,7 @@ const steps = [
{ layer: "L6-시나리오/E2E", cmd: () => spawnSync(process.execPath, ["tools/e2e.mjs"], { cwd: root, encoding: "utf8" }) },
{ layer: "L6-시나리오/최근 쇼케이스", cmd: () => spawnSync(process.execPath, ["tools/recent-showcases-e2e.mjs"], { cwd: root, encoding: "utf8" }) },
{ layer: "L6-시나리오/트웬티온스", cmd: () => spawnSync(process.execPath, ["tools/twentyoz-e2e.mjs"], { cwd: root, encoding: "utf8" }) },
+ { layer: "L6-시나리오/쇼케이스 듀오", cmd: () => spawnSync(process.execPath, ["tools/showcase-duo-e2e.mjs", "--root=public"], { cwd: root, encoding: "utf8" }) },
];
const report = [];
diff --git a/packages/cli/CHANGELOG.md b/packages/cli/CHANGELOG.md
index 0b9a98e..6fd7160 100644
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,11 @@
# designpaca
+## 0.10.0
+
+### Minor Changes
+
+- Bundle the upgraded designpaca skill with target-market reference boundaries, trustworthy fictional and AI showcase contracts, state-based visual E2E guidance, and page-scoped static ownership gates.
+
## 0.9.2
### Patch Changes
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 35008c5..806c31f 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "designpaca",
- "version": "0.9.2",
+ "version": "0.10.0",
"description": "웹 디자인 파이프라인 스킬 — Claude Code · Codex · Cursor 에 한 줄로 설치한다",
"keywords": [
"design",
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 6378898..cf89534 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,7 @@
# @designpaca/core
+## 0.10.0
+
## 0.9.2
### Patch Changes
diff --git a/packages/core/package.json b/packages/core/package.json
index 469f681..4f5e78f 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@designpaca/core",
- "version": "0.9.2",
+ "version": "0.10.0",
"private": true,
"description": "designpaca 설치 엔진 — 타깃 어댑터, 매니페스트, 드리프트 감지",
"type": "module",
diff --git a/packages/skill/CHANGELOG.md b/packages/skill/CHANGELOG.md
index c419abd..0bcdfcb 100644
--- a/packages/skill/CHANGELOG.md
+++ b/packages/skill/CHANGELOG.md
@@ -1,5 +1,18 @@
# CHANGELOG
+## 0.10.0
+
+### Minor Changes
+
+- Add target-market reference boundaries; trustworthy fictional/AI showcase contracts with provenance, sensitive-data, generated-evidence, and fail-closed regulated-action rules; state-based visual E2E guidance; human-gate layout invariants; page-scoped h1 line-count gates; and page-scoped static CSS/JS ownership with non-regression hygiene budgets.
+
+- 목표 시장을 R1/R2/R3의 경계 조건으로 잠그고, 같은 문화권의 다른 업종 R2를 우선해 서구 레퍼런스의 무의식적 전이를 막는다.
+- `trustworthy-showcases.md`를 추가해 가상·예시·AI·규제 쇼케이스의 진실 상태·출처 계층, 표면 다이얼, 모바일 이미지 바이블, 고위험 데이터 경계, 규제 행동의 실패 폐쇄, 상태별 시각 E2E를 표준화한다.
+- 인간 시각 게이트에서 발견한 동일 행 액션 중심, 의미별 섹션 토폴로지, 조건부 데스크톱 패널의 트랙 회수를 레이아웃·E2E 계약으로 승격한다.
+- 같은 진실 범위의 공통 부모 라벨, 공개 해석/관리 내부 증거 소유권, 보이는 입력과 판정 의존성 SSOT를 추가해 경고 반복과 맞춤 분석 모순을 막는다.
+- 범용 디자인 게이트에 페이지별 `h1MaxLines` 계약과 h1 정확히 1개 검사를 추가한다. 기본 1줄은 유지하며 마케팅 페이지의 의도적 2줄만 좁게 선언할 수 있다.
+- 범용 디자인 게이트에 페이지별 `staticContract`를 추가해 selector CSS/HTML·JS 문서 코퍼스, 토큰 권위 파일, 색·radius 비회귀 예산을 명시하고 공유 CSS·동적 클래스·지역 토큰 오탐을 막는다.
+
## 0.9.2
### Patch Changes
diff --git a/packages/skill/SKILL.md b/packages/skill/SKILL.md
index 1aeaf00..3496671 100644
--- a/packages/skill/SKILL.md
+++ b/packages/skill/SKILL.md
@@ -15,6 +15,8 @@ description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬.
**쓰지 않는다**: 대시보드의 데이터 밀도 설계(→ 데이터 시각화 스킬) · 순수 백엔드 · 이미 확립된 디자인 시스템을 따라야만 하는 작업(그 시스템을 따르는 게 맞다) · "일단 돌아가게만" 요청
+관리자 화면을 함께 만들 때 designpaca가 맡는 것은 **브랜드 표면·정보 위계·상호작용 상태·진실성/규제 게이트**다. 지표 정의, 차트 해석, 대규모 표의 열 우선순위와 밀도 최적화는 데이터 시각화·도메인 스킬의 근거를 추가로 받아야 한다. `관리자 밀도 3` 다이얼은 이 경계를 없애는 허가가 아니다.
+
## 우선순위
충돌하면 위가 이긴다. **이 스킬의 기본값은 맨 아래다.**
@@ -200,6 +202,8 @@ description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬.
R1과 R2를 같은 업종에서 고르면 결과는 그 업종의 평균이 된다. SaaS 구조 + SaaS 톤 = 또 하나의 SaaS 슬롭이다.
+**목표 시장이 다른 레퍼런스는 자동으로 중립이 되지 않는다.** 단위·용어·문의 방식·사진 조도·신뢰 표지는 문화권의 일부다. 시장 적합성이 중요한 브리프는 R1을 같은 목표 시장에서 우선 찾고, R2는 **같은 문화권의 다른 업종**을 우선한다. 다른 문화권의 R3는 구현 기법 하나만 가져온다. 상세 계약은 `reference-method.md`와, 가상·AI·규제 쇼케이스면 `trustworthy-showcases.md`를 따른다.
+
- 어디서 찾는가 → `references/galleries.md` (브리프별 라우팅 표)
- 어떻게 뜯어보는가 → `references/reference-method.md` (6축 해체 프레임워크, WebFetch 템플릿)
@@ -222,6 +226,7 @@ headed 브라우저가 있으면 스크린샷과 실측값을 바로 받는다
- **한 문장 컨셉** — 이 사이트가 주는 인상을 한 문장으로. ("고급 잡지의 여백", "계기판처럼 정확한", "밤의 스튜디오")
- **미학 프리셋** — 아래에서 고르거나, 브리프가 요구하면 새로 정의한다
- **감수할 리스크 하나** — 정당화할 수 있는 과감한 선택 하나. 없으면 그 디자인은 안전하고 잊힌다
+- **표면 다이얼** — 랜딩·관리자·가맹처럼 과업이 다른 화면이 함께 있으면 각 표면의 표현성·정보 밀도·모션·증거 노출을 0~3으로 따로 적는다. 공통 토큰은 공유하되 과업 밀도까지 같게 만들지 않는다
| 프리셋 | 한 줄 | 언제 |
|---|---|---|
@@ -263,6 +268,7 @@ headed 브라우저가 있으면 스크린샷과 실측값을 바로 받는다
자리를 만들기 전에 **무엇을 실을지** 정한다. 나중에 채우면 비율이 안 맞아 레이아웃을 다시 짠다.
사용자가 준 사진이 있으면 무조건 그것이고, 없으면 **codex 가 설치돼 있는지 확인해 생성**한다.
생성했으면 `design.md` 에 생성물이라고 적는다 — 나중에 실제 사진으로 바꿀 사람이 알아야 한다.
+히어로·증거 컷·모바일 히어로를 각각 슬롯으로 적은 **이미지 바이블**을 먼저 만든다. 데스크톱 크롭에서 핵심 피사체가 폴드 아래로 밀리면 모바일은 별도 원본을 만든다.
싣기 전에 반드시 줄인다(실측: 10.1MB → 603KB).
**4-1. 레이아웃과 타이포그래피** → `references/layout.md` (+ 폰트 적용은 `references/typography.md` §5, §6)
@@ -283,6 +289,9 @@ headed 브라우저가 있으면 스크린샷과 실측값을 바로 받는다
- **키보드 단축키** — 콘솔의 손가락 문법. 숫자키 뷰 전환, `/` 검색 포커스. `kbd` 물리 키 칩으로 안내하고, 입력 요소에 포커스가 있을 때는 무력화한다
- **본연의 도메인 동작** — 학적부는 기록, 시간표는 격자, 주문은 원장. 그 도메인이 종이에서 하던 핵심 동작 하나가 빠져 있으면 그게 곧 '데모 티'다
+**4-6. 진실 계약과 표면 분리** → `references/trustworthy-showcases.md` (가상 브랜드·예시 데이터·AI·규제 주제·고객/관리자 복수 경로일 때만)
+사실·예시·추론·미정을 구현 전에 나누고, 각 값의 출처를 사용자 진술·검증 출처·시스템 상태·합성 픽스처 중 하나로 추적한다. 오해가 생기는 주장·가격·행동 가까이에 라벨을 두되 같은 진실 범위는 가장 가까운 명확한 공통 부모가 한 번 소유한다. 보이는 입력과 판정 의존성은 같은 SSOT에서 만들고, 성공 행동이 다른 청중은 URL과 IA를 나눈다. AI는 출처가 붙은 입력·검증 사실·추론·불확실·수정·사람 검토를 함께 보여 주고, 진단·추천·예약·게시·내보내기처럼 위험한 규제 행동은 행동별 검증이 없으면 실패 폐쇄형으로 막는다.
+
**실험 경로** → `references/experimental-canvas.md`
HTML-in-Canvas(`drawElementImage`)는 **폴백을 완성한 뒤에만** 얹는다. 기본값은 쓰지 않는 것이다.
@@ -304,8 +313,9 @@ HTML-in-Canvas(`drawElementImage`)는 **폴백을 완성한 뒤에만** 얹는
3. **이펙트 전부 끄기** — CSS 필터·WebGL·애니메이션을 끈 상태에서 페이지가 여전히 읽히는가
4. **게이트 실행(폐쇄 루프)** — `tools/design-gate.mjs --init` 으로 설정을 만들고 돌린다. 오버플로·h1·수축·대비·SEO/meta·죽은 선택자·토큰 위생·스케일×폭까지 전 뷰 × 전 폭. L1(단위)·L5(탐색)·L6(시나리오 E2E)는 프로젝트 `tools/` 에 보강해 `npm run verify` 체인으로. **게이트 통과 없이 완료 선언 금지.**
5. **상태 완결성 스윕** — 입력·파괴·열림이 있는 화면은 실제로 조작해 본다: 수치 입력에 범위 밖 값을 넣고, 파괴적 행동을 되돌려보고, 열린 메뉴를 Esc 로 닫는다. 기준은 `references/preflight.md` §4-1. 통과 못 하면 4단계로
+6. **상태별 시각 E2E** — URL별 390·1440 기본 화면과 결과·오류·모달 같은 핵심 상태를 캡처한다. 하니스는 개수·규격·0바이트·중복 해시를 단언하고, 캡처를 실제로 열어 목표 시장 적합성·시선 위계·이미지 크롭·반복을 눈으로 판정한다. 구조 PASS를 시각 PASS로 바꾸어 말하지 않는다
-> 게이트가 잡은 실제 사고 목록과 6계층 설계 근거는 `references/audit-gate.md` 다. 자기 검사 스크립트를 매번 새로 쓰지 마라 — 이 게이트를 심고 확장해라.
+> 게이트가 잡은 실제 사고 목록과 7계층 설계 근거는 `references/audit-gate.md` 다. 자기 검사 스크립트를 매번 새로 쓰지 마라 — 이 게이트를 심고 확장해라.
#### 하드 게이트 — 전부 "아니오"여야 한다
@@ -376,6 +386,7 @@ HTML-in-Canvas(`drawElementImage`)는 **폴백을 완성한 뒤에만** 얹는
| `references/tokens.md` | 3단계 — 토큰을 정할 때 |
| `references/typography.md` | 3단계 — 폰트를 고를 때 / 4-1 — 적용할 때 |
| `references/images.md` | **4-0 — 사진을 구하고 최적화할 때** |
+| `references/trustworthy-showcases.md` | **1·2·4·5단계 — 가상 브랜드·예시 데이터·AI·규제 주제·고객/관리자 복수 경로** |
| `references/layout.md` | 4-1 — 그리드와 타이포 |
| `references/svg-filters.md` | 4-2 — 재질을 만들 때 |
| `references/three.md` | 4-3 — 입체가 필요할 때 |
@@ -385,7 +396,7 @@ HTML-in-Canvas(`drawElementImage`)는 **폴백을 완성한 뒤에만** 얹는
| `references/preflight.md` | 5단계 — 감사 |
| `references/antipatterns.md` | 3·5단계 — 한글 조판 / 슬롭 검출 |
| `references/audit-gate.md` | **5단계 — 게이트(폐쇄 루프) 설계·설치·하니스 규칙** |
-| `tools/design-gate.mjs` | **5단계 — 범용 게이트 실행기(SEO/meta·대비·수축·시각·WebKit 옵션)** |
+| `tools/design-gate.mjs` | **5단계 — 범용 게이트 실행기(SEO/meta·대비·수축·페이지별 h1 최대 줄 계약·시각·WebKit 옵션)** |
## 작업 중 지켜야 할 것
diff --git a/packages/skill/package.json b/packages/skill/package.json
index dfd3b8f..6a1c7c6 100644
--- a/packages/skill/package.json
+++ b/packages/skill/package.json
@@ -1,6 +1,6 @@
{
"name": "@designpaca/skill",
- "version": "0.9.2",
+ "version": "0.10.0",
"private": true,
"description": "designpaca 스킬 원본 — SKILL.md 와 참조 문서",
"scripts": {
diff --git a/packages/skill/references/audit-gate.md b/packages/skill/references/audit-gate.md
index 9f75103..7c540bb 100644
--- a/packages/skill/references/audit-gate.md
+++ b/packages/skill/references/audit-gate.md
@@ -32,6 +32,9 @@
| 탭 전환 스크롤 잔류 — 짧은 뷰에서 클램프되어 헤더 반쯤 잘림, 뷰마다 크롬 위치 제각각 | 뷰 전환 `scrollTo(0,0)` 단언(M5) + mobile-app-ux.md |
| 크럼을 헤더로 내보내 빈약한 헤더 — 계측 전부 통과했지만 사용자에게 '깨져 보인다' | 헤더 sticky·브랜드+액션 구조 단언 + **시각 무게 평가(눈)** — mobile-app-ux.md |
| 왼쪽 인셋 리듬 불일치(제목 16 vs 앱바·카드 24) — 오버플로 검사는 오른쪽만 보므로 통과 | M6 왼쪽 인셋 스위트(텍스트 시작점 ≥12px·같은 축 ±10px) + preflight §0-E |
+| 모바일에서 절대 배치 지도 자식의 부모를 `position: static`으로 바꿈 — offsetParent가 BODY가 되어 격자·핀이 히어로 전체를 덮음. 기하 게이트 8/8 통과 | **상태별 실제 캡처를 열어 보는 시각 E2E** + absolute/fixed 자식의 containing block 단언(하니스 규칙 19) |
+| 새 관리자·가맹 서브페이지가 생겼지만 `public/work/*/index.html`만 검사 — 새 HTML 오류 8건이 검증 밖 | 정적 입력을 `public/work/**/*.html`·`**/*.css`로 재귀화 + 검사 대상 파일 수 단언(하니스 규칙 20) |
+| 마케팅 h1의 의도적 2줄 때문에 범용 1줄 규칙을 꺼 버릴 위험 | 기본 1줄 유지 + 페이지별 `h1MaxLines` 계약. 375·390 × 글꼴 확대 매트릭스도 같은 상한 적용 |
## 7계층
@@ -42,7 +45,7 @@
| L0 정적 | stylelint + html-validate | 문법·구문 위반을 브라우저 켜기 전에 |
| L1 단위 | 순수 계산 로직 추출(calc.js) + 경계값 테스트 | 프로젝트별 작성 — 0명/만석/초과/빈배열. **입력 검증·신청 가능 같은 '판정'(가능/불가+사유)도 여기 둔다** — UI 는 판정을 문장으로 번역만 |
| L2 불변식 | `design-gate.mjs` — 오버플로·h1·수축·대비·SEO/meta·죽은 선택자·토큰 위생·theme-color 정합 | 전 뷰 × 전 폭 |
-| L3 시각 회귀 | 기준 화면 pixelmatch diff (≥0.1% 실패) | 갱신은 검증된 배포 후 `--update-baseline` |
+| L3 시각 회귀 | 기준 화면 pixelmatch diff (≥0.1% 실패) + 핵심 상태 캡처 | 갱신은 검증된 배포 후 `--update-baseline`. 캡처 존재와 사람의 시각 판정은 별개다 |
| L4 WebKit | Playwright webkit | 사파리 엔진 렌더 차이 |
| L5 탐색 | 키보드 완전 통과 + 사용자 여정 차터 | 프로젝트별 작성 — 마우스 금지 |
| L6 시나리오 E2E | 실사용자 여정 재현 — 페르소나의 하루·장기 과업 포함 | 프로젝트별 작성. **기대값 단언 필수**(하니스 규칙 8), 백 키·시트·양방향 흐름은 `mobile-app-ux.md` 패턴 기준. 실측: RED 1,742 단언 중 318 실패가 신규 기능에 정확히 집중 — 시나리오를 먼저 쓰면 미구현이 수치로 드러난다 |
@@ -89,6 +92,17 @@ L1·L5 는 프로젝트 안에 `tools/unit/*.test.mjs`, `tools/exploratory.mjs`
15. **시각 기준 갱신은 의도 변경 리뷰를 동반한다** — "달라졌으니 갱신"으로 결함이 기준에 박힌다(실측: 왼쪽 인셋 결함 화면이 기준 갱신으로 '정상'이 되어 재발을 숨겼다). 갱신 전에 무엇이 의도적으로 바뀌었는지 한 줄씩 나열하고, 사용자 보고가 있던 화면은 수리 후 재촬영한다.
16. **사용자 보고 스크린샷은 비전 요약이 아니라 픽셀 판정으로 해부한다** — 비전 모델의 픽셀 추정("~0px", "~16px")은 부정확하다. pngjs 등으로 화면을 가로 밴드로 나눠 각 밴드의 텍스트 시작 x를 직접 재면(보임 행만, 왼쪽 테두리 아티팩트 제외) "무엇이 어디서 어긋났는지"가 수치로 나온다. 실측: '제목이 가장자리에 붙는다'는 보고가 앱바 24px·제목 16px의 리듬 불일치로 확정됐다.
17. **새 검사는 수정 전 코드로 RED 재현 후 GREEN** — 검사 자체의 측정 하자(오탐)도 이렇게 잡는다. 실측: 왼쪽 인셋 검사 초안이 ①`display:none` 요소의 rect=0, ②전폭 컨테이너의 보더박스(텍스트가 아님)로 38개 오탐 — RED 단계에서 발견해 교정했다.
+18. **시각 E2E는 기본 화면만 찍지 않는다** — URL별 390·1440 기본 화면에 더해 결과가 바뀐 입력, 오류/검토, 모달/차단 상태를 찍는다. 하니스는 파일 개수·가로세로·0바이트·해시 중복을 단언하고, 에이전트는 파일을 실제로 열어 시장 적합성·위계·크롭·반복을 판정한다. 스크린샷을 저장했다는 사실만으로 PASS하지 않는다.
+19. **absolute/fixed 자식은 containing block을 잰다** — 모바일 미디어쿼리에서 부모의 `position`을 바꿨다면 각 절대 배치 자식의 `offsetParent` 또는 기준 rect가 의도한 컨테이너인지 단언한다. `overflow-x:hidden`으로 누수를 숨기지 않는다.
+20. **정적 검사는 재귀 입력과 대상 수를 잠근다** — 서브페이지가 생기는 저장소에서 한 단계 glob은 금지한다. 실행 전에 발견한 HTML/CSS/JS 파일 수를 출력하고 0개 또는 이전 계약보다 적으면 실패시킨다.
+21. **시나리오·단언·캡처 수를 hard-lock한다** — 대규모 E2E는 `EXPECTED_SCENARIOS`, `EXPECTED_ASSERTIONS`, `EXPECTED_CAPTURES`를 둔다. 리팩터링으로 검사가 삭제돼도 전체가 조용히 GREEN이 되지 않게 한다. 수를 채우기 위한 중복 단언은 금지하고 공통·정상·오류·부작용·접근성·시각 상태로 분류한다.
+22. **사용자 승인과 검증 결과는 다른 상태다** — 사용자가 방향 게이트를 자율 승인했어도 기계·기능·시각 게이트는 면제되지 않는다. 승인됨/검증됨을 보고서에서 별도 표기한다.
+23. **혼합 액션 행은 직접 자식 hitbox 중심을 비교한다** — 같은 액션 묶음·같은 행의 직접 자식인 채운 버튼과 텍스트 링크가 둘 다 44px 이상인지, `rect.top + rect.height / 2` 차이가 브라우저 CSS 픽셀 2px 이하인지 단언한다. 중첩 아이콘·배지나 모바일 세로 스택은 비교 대상이 아니다. `align-items:center` 선언 존재는 검사가 아니다.
+24. **연속 섹션 토폴로지를 목록화한다** — 섹션별 `역할 / DOM 골격 / 회색조 실루엣`을 적는다. 역할이 다른 연속 3개가 같은 `제목+목록` 골격이면 시각 RED다. 반복 데이터처럼 같은 골격이 맞는 경우는 이유를 기록한다.
+25. **조건부 패널의 닫힘은 트랙 회수까지 단언한다** — 데스크톱 분할 작업대는 `display:none`만 검사하지 않는다. 인스펙터가 닫히면 주 표면의 오른쪽 끝과 작업대 끝 차이가 CSS 픽셀 2px 이하인지, 다시 선택하면 분할 트랙이 복원되는지 잰다. 모바일 시트·전체 화면 패널은 트랙 대신 닫힘·배경 복귀·포커스 복원을 검증한다.
+26. **진실 라벨은 개수가 아니라 의미 범위를 단언한다** — 같은 상태·출처·행동 가능성을 공유하는 자식은 제목과 경계가 분명한 가장 가까운 공통 부모가 한 번 소유하고 프로그램적으로 연결한다. 상태가 다른 자식만 예외 라벨을 둔다. 같은 공개 문구가 한 그룹의 모든 자식에 복제되면 범위 설계를 다시 본다.
+27. **보이는 입력과 판정 의존성을 같은 SSOT로 잠근다** — 폼의 사용자 조건 이름 집합과 순수 판정 함수가 참조하는 사용자 조건 집합을 비교한다. 숨은 기본값을 사용자 선호로 세지 않고, 보이는 입력을 무시하지 않으며, 분석 전 완료 결과가 없고 복합 비용 일부로 적합을 확정하지 않는지 단언한다.
+28. **공개와 관리 콘텐츠 소유권을 테스트한다** — 공개 DOM에는 내부 ID·원문 출처 원장·규제 채널 상수·감사 로그를 복제하지 않는다. 대신 사용자 행동을 막거나 바꾸는 제한과 해석 가능한 이유는 남긴다. 관리자는 그 요약을 재현하는 출처·검증 이벤트·판정 기록을 가진다.
## 리포트 양식
diff --git a/packages/skill/references/images.md b/packages/skill/references/images.md
index 41dad76..63c4379 100644
--- a/packages/skill/references/images.md
+++ b/packages/skill/references/images.md
@@ -94,6 +94,22 @@ printf '%s' "\$imagegen $PROMPT" \
`Read` 로 열어 확인한 뒤에만 쓴다. 특히 **공간 사진**(작업실·매장)이 어색해지기 쉽다.
주제가 안 맞으면 프롬프트를 **한 번에 한 가지만** 바꿔 다시 만든다.
+### 여러 화면이면 이미지 바이블부터 만든다
+
+히어로 한 장을 만든 뒤 카드·모바일·OG에 같은 파일을 억지로 자르지 않는다. 생성 전에 슬롯 계약을 쓴다.
+
+| 슬롯 | 역할 | 피사체 | 비율 | 안전영역 | 진실 라벨 | 폴백 |
+|---|---|---|---|---|---|---|
+| 데스크톱 히어로 | 첫 인상 | 주체+행동 | 16:9 | 텍스트 반대쪽 55% | 필요 시 `연출 이미지` | 단색+DOM 카피 |
+| 모바일 히어로 | 첫 화면 행동 | 핵심 주체 | 4:5 | 하단/중앙 | 동일 | 별도 정지컷 |
+| 증거 컷 | 재질·동선 | 부분·공간 | 3:2 | 중앙 | 합성/예시 여부 | DOM 도식 |
+
+**비율이 맞는 것과 의미가 맞는 것은 다르다.** 데스크톱 원본을 4:5로 잘랐을 때 얼굴만 남고 제품이 첫 화면 아래로 밀리면 모바일 전용 원본을 생성한다. 모바일 캡처 390×844에서 핵심 피사체가 실제로 보이는지 확인한다.
+
+이미지는 재질·분위기·행동을 맡고, **가격·주소·지도·상태·AI 근거는 DOM이 맡는다.** 생성 이미지 안에 정보를 구우면 접근성·수정 가능성·사실 검증을 동시에 잃는다.
+
+가상 매물·합성 매장처럼 실제 증거로 오인할 수 있는 사진은 파일 출처를 `design.md`에 적는 것만으로 부족하다. 사진과 같은 시각 그룹에 `연출 이미지 · 실제 사진 아님` 같은 라벨을 둔다. 상세 계약은 `trustworthy-showcases.md`를 따른다.
+
---
## 3. 싣기 전에 반드시 줄인다
diff --git a/packages/skill/references/layout.md b/packages/skill/references/layout.md
index 42b821c..11b9933 100644
--- a/packages/skill/references/layout.md
+++ b/packages/skill/references/layout.md
@@ -55,6 +55,43 @@
3. **시선을 한 번은 멈춰라** — 전부 같은 리듬으로 흐르면 아무것도 강조되지 않는다. 섹션 하나는 리듬을 깨야 한다
4. **스크롤은 보상이어야 한다** — 다음 화면에 무언가 새로운 것이 있어야 한다. 같은 카드 그리드가 세 번 반복되면 거기서 이탈한다
+### 의미가 다르면 섹션 토폴로지도 달라야 한다
+
+일관성은 같은 거시 그리드를 복제하는 것이 아니다. **연속한 섹션의 역할이 다른데 모두 `왼쪽 큰 제목 + 오른쪽 목록`이면 구조 슬롭**이다. 색·배경·카드 radius를 바꿔도 읽는 동작은 같다.
+
+2단계에서 섹션 역할과 토폴로지를 나란히 적는다.
+
+| 역할 | 맞는 토폴로지 예 |
+|---|---|
+| 장소·관계 | 지도/도식 + 접근 가능한 목록 쌍둥이 |
+| 비용·사양 | 원장·명세서·비교표 |
+| 절차·판정 | 흐름·분기·상태 전이 |
+| 이미지·재질 | 풀블리드·필름스트립·캡션 |
+| 입력·결과 | 폼 + 결과 인스펙터 |
+
+**다르게 보이기 위해 억지로 바꾸지는 마라.** 같은 데이터 묶음을 반복하는 목록은 같은 구조가 맞다. 규칙은 `의미 역할이 다르면 읽는 동작도 달라야 한다`다. 연속 3개 섹션의 DOM 골격과 회색조 실루엣이 같다면, 그중 둘의 정보 구조부터 다시 설계한다.
+
+### 같은 액션 행의 직접 자식은 클릭 박스 중심을 잰다
+
+한 액션 묶음의 **같은 행에 놓인 직접 자식**인 채운 버튼과 텍스트 링크는 `align-items:center`만으로 시각 중심이 맞지 않을 수 있다. 중첩된 아이콘·배지까지 한꺼번에 비교하거나, 모바일에서 세로로 쌓인 액션에 이 규칙을 적용하면 오탐이다.
+
+- 두 액션 모두 `inline-flex; align-items:center; min-height:44px`의 실제 hitbox를 가진다
+- `getBoundingClientRect()`의 중심 y 차이가 브라우저 CSS 픽셀 기준 2px 이하여야 한다
+- 텍스트 baseline이 아니라 클릭 가능한 박스 전체를 비교한다
+- 보조 링크를 44px로 키우면서 빈 padding이 과해지면 액션을 세로로 쌓는다
+
+### 패널을 숨기면 그리드 트랙도 회수한다
+
+데스크톱 목록+인스펙터 분할 작업대에서 패널만 `display:none`으로 숨기고 2열 `grid-template-columns`를 유지하면 큰 빈 면이 남는다. 닫힌 상태는 가시성 변화가 아니라 **레이아웃 상태 변화**다. 모바일에서 인스펙터가 시트·전체 화면으로 열리는 구조에는 데스크톱 2px 트랙 계약을 그대로 적용하지 않고, 시트 닫힘·배경 복귀·포커스 복원을 별도로 잰다.
+
+```css
+.workbench { grid-template-columns: minmax(0, 1fr) minmax(20rem, .55fr); }
+.workbench.is-inspector-closed { grid-template-columns: minmax(0, 1fr); }
+.workbench.is-inspector-closed .inspector { display: none; }
+```
+
+닫힘 상태에서 목록 오른쪽 끝과 작업대 오른쪽 끝의 차이를 2px 이하로 재고, 행 선택 뒤 2열이 복원되는 것도 함께 단언한다.
+
---
## 3. 타이포그래피
@@ -183,9 +220,12 @@ new Set([...document.querySelectorAll('.nav a')]
- [ ] CSS/HTML만으로 페이지가 완성됐다. JS를 꺼도 읽힌다
- [ ] 모든 값이 3단계 토큰에서 나온다. 하드코딩된 px/색이 없다
- [ ] 첫 화면에 메시지가 셋 이하다
+- [ ] 의미 역할이 다른 연속 섹션이 같은 거시 그리드를 3회 반복하지 않는다. 반복 데이터면 같은 구조를 유지한 이유가 적혀 있다
- [ ] 본문에 `--measure` 가 적용됐다
- [ ] 모바일 폭 **320px**(iPhone SE 세로)에서 가로 스크롤이 없다
- [ ] 키보드 Tab 만으로 모든 인터랙티브 요소에 도달한다. 포커스 링이 보인다
+- [ ] 같은 행 액션 묶음의 직접 자식 hitbox가 44px 이상이고 중심 y 차이가 CSS 픽셀 2px 이하다
+- [ ] 데스크톱 분할 패널을 숨긴 상태에서 빈 그리드 트랙이 남지 않고 주 표면이 전체 폭을 회수한다. 모바일 시트는 닫힘·배경·포커스 복원을 따로 검증한다
- [ ] 한글이 있다면 조판 규칙이 적용됐다
> 근거: research/references/02-methodology.md, 03-trends-2026.md, 04-ai-slop-signatures.md (조사일 2026-08-20)
diff --git a/packages/skill/references/preflight.md b/packages/skill/references/preflight.md
index 521d9fa..206c417 100644
--- a/packages/skill/references/preflight.md
+++ b/packages/skill/references/preflight.md
@@ -163,6 +163,23 @@ canvas { display: none !important; }
---
+## 4-2. 진실 완결성 — 가상·예시·AI·규제 화면
+
+가상 브랜드·예시 데이터·AI 분석·규제 주제를 실제 서비스처럼 보이게 만든 화면에만 돈다. 전역 데모 띠 하나로 끝내지 않는다. 상세 설계는 `trustworthy-showcases.md`.
+
+- [ ] 모든 숫자·주소·상태·추천이 **사실 / 예시 / 추론 / 미정** 중 하나이고 `USER_SELF_REPORT / VERIFIED_SOURCE / SYSTEM_STATE / SYNTHETIC_FIXTURE` 출처 계층이 추적된다. 자기보고 값 자체를 검증 사실로 승격하지 않았다
+- [ ] `예시 가격`, `거래 불가`, `실제 접수 아님`, `연출 이미지` 라벨이 오해가 생기는 범위 가까이에 있다. 같은 상태·출처·행동 가능성을 공유하는 자식은 가장 가까운 공통 부모가 한 번 소유하고, 다른 자식만 예외 라벨을 가진다
+- [ ] 검증하지 않은 수익·가맹비·매장 수·등록번호·연락처를 만들지 않았다. 모르면 `미정`이다
+- [ ] AI 결과에 입력 조건·출처가 붙은 입력/검증 사실·추론·불확실/누락·수정·사람 검토가 있고, 입력을 바꾸면 결과와 근거가 함께 바뀐다. 모델 출력 내용을 `SYSTEM_STATE` 사실로 두지 않았다
+- [ ] 진단·개인화 추천·예약·전송·거래·게시·내보내기 등 실제 규제 행동은 행동별 필수 검증이 없을 때 **실패 폐쇄형**이며, 미등록 행동은 기본 거절되고 막힌 이유가 화면에 보인다
+- [ ] 민감 입력과 파생값의 영속 저장·쿠키·분석 이벤트 포함·네트워크 전송 경계를 E2E로 검증했다
+- [ ] 공개 화면은 사용자 해석·제한·다음 행동을, 관리자는 내부 원장·검증 이벤트·채널 판정·감사 로그를 소유한다. 사용자 행동에 영향을 주는 제한을 관리자에만 숨기지 않았다
+- [ ] 지도·차트·도식의 같은 정보가 DOM 목록·표·설명으로도 제공되고 데이터 원천이 하나다
+- [ ] 생성 이미지는 가격·주소·점수의 증거로 쓰이지 않으며, 모바일 390×844에서 핵심 피사체가 첫 화면의 의도와 맞는다
+- [ ] URL별 390·1440 기본 화면과 핵심 입력/오류/모달 상태 캡처를 실제로 열어 보고 시각 PASS/RED를 따로 기록했다
+
+---
+
## 5. 디자인 자체
기계로 못 잡는 부분이다. **정직하게 답해라.**
@@ -186,6 +203,7 @@ canvas { display: none !important; }
- [ ] 반응형 체크리스트 통과
- [ ] 콘텐츠 체크리스트 통과
- [ ] 상태 완결성(§4-1) — 입력 검증·되돌림·Esc 를 실제 조작으로 확인
+- [ ] 해당하면 진실 완결성(§4-2) — 예시·AI·규제·생성 이미지의 오해 경로를 실제 상태로 확인
- [ ] 5장 여섯 질문에 정직하게 답했고, 실패 항목을 고쳤다
- [ ] `antipatterns.md` 자가 채점표 통과
diff --git a/packages/skill/references/reference-method.md b/packages/skill/references/reference-method.md
index 5b6d919..210f40b 100644
--- a/packages/skill/references/reference-method.md
+++ b/packages/skill/references/reference-method.md
@@ -28,6 +28,21 @@
SaaS 구조 + SaaS 톤 = 또 하나의 SaaS 슬롭.
SaaS 구조 + 독립 출판사 톤 = 차별화.
+### 목표 시장은 네 번째 레퍼런스가 아니라 경계 조건이다
+
+목표 시장을 적지 않으면 검색 결과 상위의 서구 사례가 무의식적으로 기본값이 된다. 먼저 한 줄로 잠근다.
+
+```md
+시장: 국가/도시/생활권 · 주 사용 기기 · 단위/통화 · 문의/구매 관습 · 피해야 할 외래 문법
+```
+
+- R1은 같은 업종·목적에 더해 **같은 목표 시장을 우선**한다. 구조에 단위·용어·연락 방식이 묻어 있기 때문이다.
+- R2의 `다른 업종` 규칙은 유지한다. 목표 시장 감각이 중요하면 **같은 문화권의 다른 업종**을 먼저 찾는다.
+- 다른 문화권 R3는 기법만 가져온다. 카피·색·상징·사진 연출까지 번지면 경계 조건 위반이다.
+- 같은 시장 자료가 부족하면 빈칸을 숨기지 말고, 어떤 관습을 공식 문서·현지 서비스로 별도 검증했는지 적는다.
+
+목표 시장 적합성은 국기·전통 문양 같은 표식이 아니다. 통화 단위, 면적 표기, 동네 탐색 축, 정보 순서, 촬영 조도, CTA 동사처럼 **사용자가 실제로 행동하는 문법**이다.
+
**충돌 해결 순위**
1. 가독성·접근성이 언제나 이긴다. R2의 톤이 대비를 깨면 톤을 조정한다.
2. R1 구조가 R3 모션을 이긴다. 모션 때문에 구조를 바꾸지 않는다.
@@ -82,6 +97,7 @@ SaaS 구조 + 독립 출판사 톤 = 차별화.
## 3. 실전 절차 체크리스트
- [ ] **1. 브리프를 한 문장으로 압축한다.** `[대상]이 [행동]하게. 느낌은 [형용사 2개].` 이 문장 없이 수집을 시작하지 않는다.
+- [ ] **1-b. 목표 시장 경계 조건을 쓴다.** 국가/생활권·기기·단위/통화·행동 관습·금지할 외래 문법. R1이 같은 시장인지 표시한다.
- [ ] **2. galleries.md 라우팅 표에서 R1/R2/R3 갤러리를 정한다.** R2가 R1과 다른 업종인지 확인한다.
- [ ] **3. 각 갤러리에서 원본 사이트 URL을 1개씩 확보한다.** 하위 페이지가 필요하면 **인덱스에서 `href`를 뽑아라. slug를 추측하지 마라** — 추측한 URL은 404가 난다.
- [ ] **3-b. 그 URL이 정본인지 검증한다.** 사용자가 특정 제품·브랜드를 지목했고 후보 도메인이 여럿이면 필수다. **HTTP 200은 살아있다는 뜻이 아니다.**
@@ -214,6 +230,12 @@ WebFetch는 마크다운으로 변환하면서 CSS를 버린다. **그리드·
## 브리프
[대상]이 [행동]하게. 느낌은 [형용사 2개].
+## 목표 시장
+- 지역/생활권:
+- 기기/단위/통화:
+- 행동 관습:
+- 금지할 외래 문법:
+
## R1 · 구조 — <이름> <원본 URL>
- 가져올 축: 그리드, 여백 리듬
- 그리드: 최대폭 1200 / 비대칭 7:5 / 거터 32
@@ -244,6 +266,7 @@ WebFetch는 마크다운으로 변환하면서 CSS를 버린다. **그리드·
**검증 조건** — 하나라도 빠지면 되돌아간다.
- R1/R2/R3 각각 **원본 사이트 URL**이 있다 (갤러리 URL 아님)
+- 목표 시장 경계 조건이 있고 R1의 시장 일치 여부가 적혀 있다
- R2의 업종이 R1과 다르다
- 각 슬롯에 **가져올 축**이 명시되어 있다
- 각 슬롯에 **변형 1개와 그 이유**가 있다
diff --git a/packages/skill/references/trustworthy-showcases.md b/packages/skill/references/trustworthy-showcases.md
new file mode 100644
index 0000000..af94792
--- /dev/null
+++ b/packages/skill/references/trustworthy-showcases.md
@@ -0,0 +1,355 @@
+# trustworthy-showcases — 실제처럼 보이되 거짓말하지 않는 쇼케이스
+
+다음 중 하나라도 해당하면 **1·2·4·5단계**에서 읽는다. 1단계에서 시장과 위험 경계를 잠그고, 2단계에서 정보 구조를 나누고, 4단계에서 구현하며, 5단계에서 실제 상태를 검증한다.
+
+- 가상 브랜드·가상 매물·예시 가격·예시 매장을 실제 서비스처럼 설계한다
+- AI 분석·추천·점수·예측을 화면에 싣는다
+- 부동산·금융·의료처럼 규제되거나 오해 비용이 큰 주제를 다룬다
+- 고객용 랜딩과 관리자·가맹·운영 화면을 한 브랜드로 함께 만든다
+- 생성 이미지를 실제 상품·공간·사람의 증거처럼 오인할 수 있다
+
+목표는 경고문을 많이 붙이는 것이 아니다. **주장의 구조가 정직하고, 그 정직함이 디자인을 약하게 만들지 않게 하는 것**이다.
+
+---
+
+## 1. 기존 근본 규칙과의 충돌 해결
+
+이 문서는 기존 규칙을 느슨하게 만들지 않는다. 충돌하면 다음 순서로 해석한다.
+
+1. 접근성·사실성·사용자 안전이 언제나 이긴다.
+2. 브리프와 목표 시장이 레퍼런스의 멋을 이긴다.
+3. 하나의 브랜드 방향은 유지하되, 서로 다른 과업의 표면 밀도까지 같게 만들지는 않는다.
+4. 게이트의 기본값은 유지한다. 예외가 필요하면 페이지 계약으로 좁게 선언하고 더 넓은 매트릭스로 검증한다.
+5. 생성 이미지는 분위기와 재질을 맡고, 가격·상태·근거·판정은 DOM이 맡는다.
+
+예: 마케팅 h1에 2줄이 필요하면 범용 1줄 규칙을 삭제하지 않는다. 그 페이지만 `h1MaxLines: 2`로 선언하고 375·390px × 글꼴 확대에서도 2줄 이하인지 잰다.
+
+---
+
+## 2. 목표 시장을 먼저 잠근다
+
+`R1/R2/R3`보다 먼저 **시장 계약** 한 줄을 쓴다.
+
+```md
+시장: 한국 / 서울 생활권 / 모바일 우선
+행동 관습: 원·만원·억, ㎡와 평 병기, 동네·역·도보 기준, 국내형 문의 순서
+금지: 서구 럭셔리 부동산 문법, 미국 다이너 문법, 번역투 카피, 이국화 장식
+```
+
+- R1은 같은 업종·목적이면서 가능하면 **같은 목표 시장**에서 고른다. 구조에는 단위·용어·연락 방식·신뢰 표지가 들어 있기 때문이다.
+- R2는 다른 업종이어야 한다는 근본 규칙을 유지한다. 다만 목표 시장의 미감이 중요하면 **같은 문화권의 다른 업종**을 우선한다.
+- R3가 다른 문화권에서 왔다면 가져올 것은 구현 기법 하나뿐이다. 색·카피·상징까지 따라오면 시장 계약을 어긴다.
+- 국내화는 태극 문양이나 한옥 장식을 붙이는 일이 아니다. **단위·정보 순서·검색 축·사진의 조도·문의 단계**를 현지 관습에 맞추는 일이다.
+
+---
+
+## 3. 한 방향, 여러 표면
+
+고객용 랜딩·관리자·가맹 페이지가 함께 있을 때 전부 같은 표현 강도로 만들면 둘 중 하나가 망가진다. 공통 토큰을 공유하고 표면 다이얼을 따로 적는다.
+
+| 다이얼 | 0 | 1 | 2 | 3 |
+|---|---|---|---|---|
+| 표현성 | 문서 | 조용한 제품 | 캠페인 | 실험적 |
+| 정보 밀도 | 넉넉함 | 표준 | 조밀함 | 운영 콘솔 |
+| 모션 | 없음 | 피드백만 | 절제된 전환 | 브랜드 연출 |
+| 증거 노출 | 요약 | 근거 링크 | 근거 병기 | 감사 기록 |
+
+예시:
+
+```md
+공통: Pretendard, 8px 리듬, 먹색, 강조색 1개, 직설형 카피
+고객 랜딩: 표현 2 / 밀도 1 / 모션 1 / 증거 2
+관리자: 표현 0 / 밀도 3 / 모션 0 / 증거 3
+```
+
+이렇게 해야 랜딩은 설득하고 관리자는 판정한다. 프리셋을 두 개 쓰는 것이 아니라 **같은 브랜드가 과업에 맞춰 목소리 크기를 바꾸는 것**이다.
+
+---
+
+## 4. 먼저 진실 계약을 만든다
+
+화면을 그리기 전에 모든 주장과 행동을 네 종류로 분류한다. 이 **진실 상태**와 값이 어디서 왔는지 나타내는 **출처 계층**을 섞지 않는다.
+
+| 종류 | 예 | 화면 규칙 |
+|---|---|---|
+| 사실 | 검증 가능한 문장: `사용자가 40억을 입력했다`, `공식 원문에 전용 118㎡로 적혔다` | 무엇이 사실인지 주어·출처·기준일을 가까이에 둔다 |
+| 예시 | 가상 매물, 예시 가격, 합성 매장 | 주장·가격·카드·행동 근처에 `예시`를 붙인다 |
+| 추론 | AI 추천, 위험 신호, 적합도 | 근거·불확실성·수정 경로를 함께 둔다 |
+| 미정 | 가맹비, 수익, 실제 주소처럼 검증 안 된 값 | `미정`으로 남기고 숫자를 만들지 않는다 |
+
+같은 값이라도 출처가 다르면 화면의 말투와 가능한 행동이 달라진다.
+
+| 출처 계층 | 뜻 | 허용 표현 |
+|---|---|---|
+| `USER_SELF_REPORT` | 사용자가 직접 입력·진술했지만 외부 검증은 안 됨 | `입력한 조건`, `사용자 진술` |
+| `VERIFIED_SOURCE` | 기준일과 원문을 확인한 외부·공식 출처 | `확인된 정보` + 출처·기준일 |
+| `SYSTEM_STATE` | 현재 제품이 직접 계산·관측한 상태 | 계산 규칙·측정 시점 병기 |
+| `SYNTHETIC_FIXTURE` | 쇼케이스 동작 확인용 합성 값 | `예시`, 실제 행동 차단 |
+
+사용자 진술의 값 자체를 곧바로 도메인 사실로 승격하지 않는다. `사용자가 붉음을 선택했다`는 사실일 수 있지만 `피부가 실제로 붉다`는 임상 상태는 검증 전 미정이다. 합성 픽스처도 시스템 관측처럼 표현하지 않는다. 승격에는 출처·기준일·검증 이벤트가 필요하다. AI·모델 출력은 제품이 생성했다는 의미에서 시스템 상태일 수 있어도, 내용의 진실 상태는 여전히 **추론**이다.
+
+### 4-a. 같은 진실 범위는 가장 가까운 공통 부모가 소유한다
+
+`오해 지점 가까이에 라벨`은 같은 경고를 모든 자식에 복제하라는 뜻이 아니다.
+
+- 그룹의 모든 자식이 같은 진실 상태·출처·행동 가능성을 공유하면, 제목과 시각 경계가 분명한 **가장 가까운 공통 부모**에 라벨을 한 번 둔다.
+- 자식 하나라도 상태·출처·행동 가능성이 다르면 그 자식에 예외 라벨을 둔다.
+- 공통 부모의 범위가 화면과 보조기술에서 명확하지 않으면 묶지 않는다. 폼은 `fieldset/legend`, 표는 `caption`, 카드 집합은 제목·설명과 `aria-describedby` 같은 프로그램적 연결을 쓴다.
+- 전역 띠는 사이트 전체의 가상 브랜드 상태를 맡을 수 있지만, 특정 가격·이미지·제출 행동의 서로 다른 경계까지 대신하지 않는다.
+
+구현 전에 진실 라벨의 `문구 / 소유 컨테이너 / 예외 자식`을 표로 만들고, 같은 문구의 반복 횟수가 아니라 의미 범위가 닫혔는지 감사한다.
+
+전역 데모 띠 하나만으로는 부족하다. 사용자는 스크롤 중 그 띠를 보지 못한다. **라벨은 오해가 발생하는 지점에 붙인다.**
+
+- 후보 전체가 같은 상태인 카드 집합: 부모 설명 `아래 세 후보는 예시 · 거래 불가`; 실제·예시가 섞이면 각 카드에 예외 라벨
+- 생성 사진: 각 이미지 캡션 `연출 이미지 · 실제 증빙 아님`
+- 가격 집합이 모두 같은 상태면 표 `caption`이나 열 제목 `예시 가격`; 상태가 다른 값만 개별 표시
+- 매장 상태: `화면 동작 확인용 예시`
+- 폼: `실제 접수되지 않음 · 개인정보 입력 금지`
+
+라벨은 작은 회색 각주로 숨기지 않는다. 본문 대비를 지키고 해당 주장과 같은 시각 그룹에 둔다.
+
+---
+
+## 5. 성공 행동이 다르면 경로를 나눈다
+
+한 페이지에서 소비자와 운영자, 구매자와 중개 관리자를 동시에 설득하지 않는다.
+
+- 소비자 성공: 메뉴·가격·가까운 매장·조합 확인
+- 가맹 성공: 운영 조건·상권·점포·문의 검토
+- 고객 성공: 조건 입력·근거 확인·사람 상담
+- 관리자 성공: 검수·보류 사유·게시 채널 판정
+
+성공 행동이 다르면 URL과 IA를 나눈다. 공통 헤더에서 경로는 연결하되, 각 페이지의 첫 화면 메시지와 CTA는 하나의 성공 행동만 말한다. 별도 경로는 중복이 아니라 **우선순위 충돌을 제거하는 구조**다.
+
+### 5-a. 공개 해석과 내부 검수의 소유권을 나눈다
+
+URL을 나눠도 관리자 언어를 공개 페이지에 복제하면 경로 분리가 끝난 것이 아니다.
+
+| 공개 화면이 소유 | 관리자 화면이 소유 |
+|---|---|
+| 사용자가 결정을 해석하는 데 필요한 근거·한계·다음 행동 | 내부 ID·원문 출처 원장·검증 이벤트·모델/규칙 버전 |
+| 사용자 행동을 막거나 바꾸는 제한과 그 이유 | 규제 채널 판정 상세·역할 권한·감사 로그 |
+| 정정·사람 확인 경로 | 승인·보류·변경 이력과 운영 실패 로그 |
+
+내부 상수와 감사 원장은 관리자에 두되, 제한이 사용자의 행동을 막는다는 사실과 사용자가 이해해야 할 이유까지 숨기지 않는다. 공개는 **해석 가능한 요약**, 관리자는 **재현 가능한 증거**를 소유한다. 구현 전에 각 콘텐츠 블록에 `public / admin / both-summary` 소유자를 표시한다.
+
+### 5-b. 고위험 데모의 데이터 경계
+
+의료·금융·법률·주거 상담처럼 입력 자체가 민감할 수 있는 쇼케이스는 폼이 예뻐 보이는 것보다 **수집하지 않는 증거**가 먼저다.
+
+- 과업 시연에 필요한 최소 필드만 둔다. 이름·연락처·정확한 주소·증상 원문처럼 없어도 되는 자유 입력은 빼거나 로컬 예시 선택지로 바꾼다.
+- 합성 픽스처가 아닌 **민감 입력과 그 파생값**은 기본적으로 새로고침 후 남기지 않는다. 해당 값의 영속 저장·쿠키 기록·분석 이벤트 포함·네트워크 전송이 0회인지 E2E로 단언한다. 정적 이미지·폰트 요청과 일반 페이지 조회 자체는 이 0회 계약의 대상이 아니다.
+- `실제 접수되지 않음` 문구만으로는 부족하다. 제출 성공 UI가 있어도 실제 요청·저장 부작용이 없어야 GREEN이다.
+- 실제 운영 연결이 생기면 동의·보관 기간·삭제·전송 대상을 별도 제품 계약으로 설계한다. 쇼케이스 계약을 조용히 확장하지 않는다.
+
+---
+
+## 6. 이미지 바이블은 슬롯 단위로 만든다
+
+이미지 한 장을 만든 뒤 여기저기 크롭하지 않는다. 생성 전에 슬롯 표를 만든다.
+
+| 슬롯 | 역할 | 피사체 | 비율 | 구도 안전영역 | 진실 라벨 | 폴백 |
+|---|---|---|---|---|---|---|
+| 데스크톱 히어로 | 첫 인상 | 손+제품 | 16:9 | 우측 55% | 연출 이미지 | 단색+제품명 |
+| 모바일 히어로 | 첫 화면 행동 | 제품+손 | 4:5 | 하단 중심 | 연출 이미지 | 같은 톤 정지컷 |
+| 증거 컷 | 재질·동선 | 공간 일부 | 3:2 | 중앙 | 합성 예시 | DOM 도식 |
+
+**모바일 전용 생성은 데스크톱 크롭의 사치 버전이 아니다.** 첫 화면에서 보여야 할 주체가 달라지면 별도 원본이 필요하다. 얼굴이 먼저 나오고 제품이 폴드 아래로 밀리면 비율이 맞아도 실패다.
+
+- 같은 톤 접두사를 공유해 색온도·광원·재질을 잠근다.
+- 장면별로 피사체·행동·카메라 높이만 바꾼다.
+- 음식은 손가락·포장 접힘·재료 층, 공간은 문·난간·가구 접합부를 확대해 본다.
+- 이미지 안에 가격·주소·지도·점수·차트를 굽지 않는다. 그 정보는 DOM으로 만든다.
+- 이미지 파일이 존재한다는 것과 채택 가능하다는 것은 다르다. 원본을 눈으로 보고 조건부 채택 사유를 기록한다.
+
+고위험 업종은 공통 이미지 규칙 위에 **도메인 금지 오버레이**를 한 장 더 만든다.
+
+| 도메인 | 생성 이미지로 만들지 않는 증거 |
+|---|---|
+| 의료·미용 | 전후 비교, 병변·치료 효과, 가짜 의료진·자격·기관 로고 |
+| 금융·투자 | 수익 인증, 잔고·체결 내역, 보장 수익 그래프 |
+| 부동산 | 실제 매물 인증, 권리 서류, 조망·주소·중개 자격 증명 |
+| 음식·가맹 | 실제 매출표, 실재 점포 운영 인증, 검증하지 않은 원산지 표식 |
+
+생성 이미지는 분위기·재질·사용 장면까지만 맡긴다. 자격·효과·소유·수익을 증명하는 장면은 DOM 라벨로도 합법화되지 않는다.
+
+---
+
+## 7. AI는 답이 아니라 검토 가능한 기록이다
+
+AI 화면에는 최소 다섯 블록이 필요하다.
+
+1. **입력 조건** — 사용자가 무엇을 말했는지
+2. **출처가 붙은 입력·검증 사실** — 사용자가 무엇을 진술했는지와 외부·공식 자료로 무엇을 확인했는지 분리
+3. **추론** — 사실에서 어떻게 결론으로 갔는지
+4. **불확실·누락** — 모르는 것과 데이터 기준일
+5. **사람 검토·수정** — 틀린 조건을 고치고 담당자에게 넘기는 경로
+
+단일 점수와 반짝이는 링만 보여 주지 않는다. 점수는 정밀해 보이지만 근거가 없으면 장식이다. 추천 카드마다 `왜`, `무엇이 부족`, `다음 확인`을 붙인다.
+
+모델 출력은 제품 내부에서 생성됐다는 이유만으로 `SYSTEM_STATE`의 관측 사실이 되지 않는다. 출력 내용은 `추론`, 실행·모델 버전·생성 시각만 `SYSTEM_STATE`다.
+
+AI 결과를 바꿀 수 있는 입력을 하나 이상 제공하고, E2E에서 입력을 바꿨을 때 근거·결과·불확실성도 함께 바뀌는지 단언한다.
+
+### 7-a. 보이는 입력과 판정 의존성은 하나의 계약이다
+
+맞춤 분석이 참조하는 조건을 UI와 코드가 따로 관리하지 않는다. 구현 전에 `입력 필드 / 출처 / 판정 사용처 / 출력 주장` 표를 만들고 하나의 스키마·데이터 객체에서 폼과 판정을 함께 만든다.
+
+- 사용자가 입력하지 않은 숨은 기본값을 `희망 조건`처럼 결과에 쓰지 않는다.
+- 화면에 받은 조건을 판정에서 무시한 채 맞춤 결과라고 부르지 않는다.
+- 분석 실행 전에는 완료 수치·추천·충돌을 보여 주지 않는다. `아직 분석하지 않음` 상태가 정직한 초기값이다.
+- 보증금+월 납부액처럼 단일 축으로 비교할 수 없는 복합 비용은 일부 값만으로 `예산 안쪽`이라 판정하지 않고 `별도 확인`으로 남긴다.
+- E2E에서 보이는 입력 이름 집합과 판정 함수의 사용자 조건 의존성 집합이 일치하는지, 입력 변경 뒤 근거·결과·불확실성이 함께 변하는지 단언한다.
+
+---
+
+## 8. 규제된 행동은 실패 폐쇄형으로
+
+게시만 규제되는 것이 아니다. 진단·개인화 추천·예약·상담 전송·거래·문서 내보내기처럼 실제 사람이나 시장에 영향을 주는 행동을 쇼케이스 성공 상태와 같은 버튼으로 다루지 않는다. 행동·채널별 판정 함수를 둔다.
+
+```js
+// 예시 구조다. 실제 필수 요건은 목표 시장·업종의 공식 기준으로 다시 잠근다.
+const requiredByAction = {
+ DIAGNOSE: ["requiredConsent", "verifiedClinicalData", "licensedReviewer", "humanReview"],
+ BOOK_APPOINTMENT: ["requiredConsent", "verifiedProvider", "availableSlot"],
+ EXPORT_RECORD: ["requiredConsent", "verifiedRecord", "accessControl", "auditLog"],
+ PUBLISH_LISTING: ["verifiedBroker", "verifiedAddress", "sourceFiles", "humanReview"],
+};
+
+function regulatedActionDecision(record, action) {
+ if (action === "SHOWCASE_PREVIEW") {
+ return record.syntheticLabelled
+ ? { allowed: true, reason: "예시 범위가 명확한 미리보기" }
+ : { allowed: false, reason: "예시 범위 표지 누락" };
+ }
+
+ const required = requiredByAction[action];
+ if (!required) return { allowed: false, reason: "등록되지 않은 행동" };
+ if (record.syntheticFixture) return { allowed: false, reason: "합성 자료로 실제 행동 불가" };
+
+ const missing = required.filter((field) => !record[field]);
+ if (missing.length) return { allowed: false, reason: `필수 검증 누락: ${missing.join(", ")}` };
+ return { allowed: true, reason: "필수 검증 완료" };
+}
+```
+
+- 화면에서 비활성 버튼만 두지 말고 **왜 막혔는지**를 말한다.
+- 알 수 없는 행동은 기본 거절한다. 행동마다 필수 검증 목록이 다르며, 한 묶음의 불리언으로 모든 규제 행동을 열지 않는다.
+- 관리자 검수 큐에는 `사실 / 추론 / 미정 / 위험` 상태와 출처 계층을 분리한다.
+- 보류·거절은 사유를 필수로 받고, 닫기·Esc·포커스 복귀를 검증한다.
+- 가상 데이터만 있는 쇼케이스라면 실제 진단·추천·예약·전송·거래·게시·내보내기 경로가 끝까지 막힌 상태가 정상 GREEN이다.
+
+---
+
+## 9. 시각화에는 읽을 수 있는 쌍둥이를 둔다
+
+지도·차트·도식은 시선을 모으지만 사실을 완전히 전달하지 못한다. 같은 정보를 DOM 목록·표·설명으로도 제공한다.
+
+- 지도 핀 ↔ 매장 목록
+- 적합도 그래프 ↔ 조건별 근거 목록
+- 재료 도식 ↔ 알레르기·구성 텍스트
+- 운영 흐름 그림 ↔ 단계별 제목·설명
+
+이미지나 SVG가 실패해도 과업을 끝낼 수 있어야 한다. 두 표현의 값이 어긋나지 않도록 데이터 원천은 하나로 둔다.
+
+---
+
+## 10. 시각 E2E는 캡처가 아니라 계약이다
+
+정적·기하 게이트와 눈 검사는 역할이 다르다.
+
+1. HTML/CSS/JS 정적 검사
+2. 320·390·768·1024·1440 기하·대비·터치·h1 계약
+3. 사용자 여정 E2E와 기대값 단언
+4. 기본 화면 + 중요한 상호작용 상태 캡처
+5. 캡처를 실제로 열어 목표 시장 적합성·시선 위계·크롭·반복을 판정
+
+최소 캡처 계약:
+
+- 각 URL의 390px·1440px 기본 화면
+- 결과가 바뀌는 입력 상태 1개
+- 관리자 보류·게시 차단 상태 1개
+- 폼 검토 또는 오류 상태 1개
+
+폭을 숫자 목록으로만 쓰지 말고 각 폭이 잡아야 하는 실패를 적는다.
+
+| 폭 | 검증 목적 |
+|---|---|
+| 320 | 긴 한국어 라벨·최소 터치 영역·긴급 수축 스트레스 |
+| 375 + 글꼴 확대 | 페이지별 `h1MaxLines`·한국어 어절 줄바꿈·보조 행동 수축 |
+| 390 | 실제 모바일 첫 화면의 주체·CTA·고정 요소 |
+| 768 | 카드 재배치와 중간 폭 공백·절대 배치 기준 |
+| 1024 | 태블릿·관리자 분할면의 트랙 회수와 표 오버플로 |
+| 1440 | 데스크톱 시선 위계·콘텐츠 최대폭·과도한 빈 면 |
+
+하니스는 캡처의 **개수·가로세로·0바이트 여부·해시 중복**을 단언한다. 모델은 그 뒤에 `국내 감각인가`, `제품이 첫 화면에 보이는가`, `운영 화면이 과장됐는가` 같은 지점을 평가한다.
+
+실측 사고: 기하 게이트 8/8을 통과한 모바일 페이지에서 `position: static`으로 바뀐 지도 부모 때문에 절대 배치 자식의 기준이 `BODY`가 됐다. 격자와 핀이 히어로 전체를 덮고 실제 지도는 빈 판이 됐다. **시각 캡처를 열지 않았다면 GREEN으로 오판했다.**
+
+---
+
+## 11. 시나리오·단언 수를 잠근다
+
+대규모 E2E가 중간 리팩터링에서 조용히 줄어드는 것을 막는다.
+
+```js
+const EXPECTED_SCENARIOS = 90;
+const EXPECTED_ASSERTIONS = 350;
+
+if (scenarios.length !== EXPECTED_SCENARIOS) throw new Error("scenario count drift");
+if (assertionCount < EXPECTED_ASSERTIONS) throw new Error("assertion count drift");
+```
+
+숫자를 채우려고 같은 검사를 복제하지 않는다. 공통·고객·관리자·오류·접근성·시각 상태로 분류하고, 각 시나리오는 `행동 → 기대 DOM/상태 → 부작용 없음`을 단언한다.
+
+정적 파일도 재귀 glob으로 잡는다. 새 서브페이지가 생겼는데 `public/work/*/index.html`만 검사하면 관리자·가맹 화면이 검증 밖으로 빠진다.
+
+---
+
+## 12. 구현과 사용자 게이트에서 검증된 교훈 21개
+
+| # | 교훈 | 스킬에 반영하는 규칙 |
+|---|---|---|
+| 1 | 서구 레퍼런스는 국내 행동 관습을 자동으로 주지 않는다 | R1을 목표 시장에서 우선 탐색 |
+| 2 | 국내 감각은 장식보다 단위·용어·정보 순서에서 생긴다 | 시장 계약을 R1/R2/R3보다 먼저 작성 |
+| 3 | 다른 업종 R2는 유지해야 카테고리 평균을 피한다 | 같은 문화권의 다른 업종을 우선 |
+| 4 | 랜딩과 관리자는 같은 표현 밀도를 쓰면 둘 다 약해진다 | 표면 다이얼 4종을 별도 선언 |
+| 5 | 강조색은 비율만으로 통제되지 않는다 | 허용 역할과 최대 면적을 함께 적음 |
+| 6 | 생성 이미지는 데이터 증거가 아니다 | 이미지=재질, DOM=가격·상태·근거 |
+| 7 | 데스크톱 크롭은 모바일 핵심 피사체를 보장하지 않는다 | 의미가 바뀌면 모바일 원본 별도 생성 |
+| 8 | 성공 행동이 다른 두 청중은 한 히어로에서 경쟁한다 | URL·IA를 분리하고 공통 브랜드만 공유 |
+| 9 | AI 점수만 있으면 신뢰가 아니라 정밀함의 연출이다 | 사실·추론·불확실·수정·사람 검토를 병기 |
+| 10 | 가상 데이터로 실제 규제 행동이 성공하면 버그다 | 행동별 요구 조건·미등록 기본 거절·합성 자료 차단 |
+| 11 | 지도·도식만으로는 접근성과 사실 확인이 닫히지 않는다 | DOM 목록·표 쌍둥이를 의무화 |
+| 12 | 전역 데모 띠는 스크롤 후 오해를 막지 못한다 | 주장·가격·행동 가까이에 진실 라벨 |
+| 13 | 자동 승인은 검증 면제가 아니다 | 사용자 게이트 상태와 기계/시각 게이트를 분리 |
+| 14 | 구조 PASS는 시각 PASS가 아니다 | 상태 캡처를 열어 직접 판정하고 재촬영 |
+| 15 | 테스트 수는 리팩터링 중 조용히 줄어든다 | 시나리오·단언·캡처 수를 hard-lock |
+| 16 | 채운 버튼과 텍스트 링크는 `align-items:center`여도 시각 중심이 어긋난다 | 실제 hitbox 44px·중심 y 차이 ≤2px를 단언 |
+| 17 | 역할이 다른 섹션도 같은 5:7 제목+목록을 반복하면 구조가 복제돼 보인다 | 장소=도식, 비용=원장, 판정=흐름처럼 의미에 맞는 토폴로지를 배정 |
+| 18 | 인스펙터만 숨기고 그리드 트랙을 남기면 빈 면이 고장처럼 보인다 | 닫힘 상태에서 주 표면이 전체 폭을 회수하고 재선택 때 분할을 복원 |
+| 19 | 같은 `예시` 경고를 모든 자식에 반복하면 가치와 경고가 함께 묻힌다 | 같은 진실 범위는 가장 가까운 명확한 공통 부모가 한 번 소유 |
+| 20 | 공개 페이지에 내부 ID·게시 채널·감사 원장을 복제하면 제품 설명서가 된다 | 공개는 해석·제한·다음 행동, 관리자는 재현 가능한 내부 증거를 소유 |
+| 21 | 보이는 입력과 계산 조건이 다르면 맞춤 분석은 임의 결과가 된다 | 입력 필드·판정 의존성·출력 주장을 한 SSOT 표로 잠그고 초기 미실행 상태를 검증 |
+
+---
+
+## 13. 통과 조건
+
+- [ ] 시장 계약과 금지 문법이 적혀 있다
+- [ ] R1은 목표 시장의 정보 관습을 설명하고, R2는 다른 업종이다
+- [ ] 각 표면의 표현·밀도·모션·증거 다이얼이 적혀 있다
+- [ ] 모든 숫자·주소·상태·AI 결과가 사실/예시/추론/미정 중 하나이고 출처 계층이 추적된다
+- [ ] 진실 라벨이 전역 공지뿐 아니라 오해 지점 가까이에 있고, 같은 범위는 명확한 공통 부모가 한 번 소유하며 다른 자식만 예외 표시된다
+- [ ] 데스크톱·모바일 이미지 슬롯과 폴백이 따로 정의됐다
+- [ ] 고위험 업종의 생성 이미지 금지 증거와 민감 입력·저장·전송 경계가 검증됐다
+- [ ] 보이는 입력과 판정 의존성이 한 SSOT이고, 분석 전 완료 결과가 없으며 복합 비용 일부로 적합을 확정하지 않는다
+- [ ] AI 결과에 출처가 붙은 입력/검증 사실·추론·불확실성과 수정·사람 검토 경로가 있다
+- [ ] 규제 행동은 필수 검증이 없을 때 실패 폐쇄형이다
+- [ ] 공개는 사용자 해석·제한·다음 행동을, 관리자는 재현 가능한 내부 증거를 소유한다
+- [ ] 지도·차트·도식의 DOM 쌍둥이가 있다
+- [ ] URL별 390·1440 기본 캡처와 핵심 상태 캡처를 실제로 열어 봤다
+- [ ] E2E 시나리오·단언·캡처 수가 잠겨 있고 재귀 정적 검사가 새 서브페이지를 포함한다
+
+하나라도 빠지면 4단계로 돌아간다. 정직함을 각주로 미루지 말고 구조로 해결한다.
diff --git a/packages/skill/tools/design-gate.mjs b/packages/skill/tools/design-gate.mjs
index 8f8ec0f..f2a04e7 100644
--- a/packages/skill/tools/design-gate.mjs
+++ b/packages/skill/tools/design-gate.mjs
@@ -26,6 +26,7 @@ const DEFAULT_CFG = {
viewAttribute: "data-view",
views: ["main"],
h1: "h1",
+ h1MaxLines: 1,
brand: ".brand",
},
],
@@ -103,49 +104,105 @@ const cssFilesOf = (p) => {
return out;
};
+// 페이지가 공유 CSS·동적 JS·지역 토큰을 함께 쓰면 HTML 한 장과 파일명 규칙만으로
+// 소유권을 추측할 수 없다. staticContract 는 검사 자체를 끄지 않고, 어떤 CSS를
+// 어떤 문서 코퍼스로 대조하며 어느 파일이 토큰 권위인지 명시한다.
+const contractFilesOf = (p, key, fallback) => {
+ const specs = p.staticContract?.[key];
+ if (!Array.isArray(specs)) return fallback;
+ return specs.map((file) => path.resolve(process.cwd(), file));
+};
+
+const scriptFilesOf = (p) => {
+ const out = [];
+ let html = "";
+ try { html = fs.readFileSync(path.resolve(process.cwd(), p.path), "utf8"); } catch { return out; }
+ for (const tag of html.matchAll(/]+src=["']([^"']+)["'][^>]*>/g)) {
+ const src = tag[1];
+ if (/^(?:https?:|data:)/.test(src)) continue;
+ const file = path.resolve(pageDir(p), src.split("?")[0]);
+ if (fs.existsSync(file) && !out.includes(file)) out.push(file);
+ }
+ return out;
+};
+
+const selectorDocumentsOf = (p) => contractFilesOf(
+ p,
+ "selectorDocuments",
+ [path.resolve(process.cwd(), p.path), ...scriptFilesOf(p)],
+);
+
+const missingFiles = (files) => files.filter((file) => !fs.existsSync(file));
+
if (CFG.checks.deadCss) {
const ignore = CFG.deadCssIgnore || [];
for (const p of CFG.pages) {
- let html = "";
- try { html = fs.readFileSync(path.resolve(process.cwd(), p.path), "utf8"); }
- catch { skip(`${p.name} 죽은 선택자`, "HTML 읽기 실패"); continue; }
- const files = cssFilesOf(p);
+ const files = contractFilesOf(p, "selectorFiles", cssFilesOf(p));
+ const documents = selectorDocumentsOf(p);
+ const missing = missingFiles([...files, ...documents]);
+ if (missing.length) {
+ fail(`${p.name} 죽은 선택자 계약`, `없는 파일 ${missing.map((file) => path.relative(process.cwd(), file)).join(", ")}`);
+ continue;
+ }
if (!files.length) { skip(`${p.name} 죽은 선택자`, "로컬 CSS 없음"); continue; }
+ const corpus = documents.map((file) => fs.readFileSync(file, "utf8")).join("\n");
const dead = new Set();
for (const f of files) {
const src = fs.readFileSync(f, "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
for (const m of src.matchAll(/\.([A-Za-z_][A-Za-z0-9_-]*)/g)) {
const cls = m[1];
if (ignore.some((pfx) => cls.startsWith(pfx))) continue;
- if (!html.includes(cls)) dead.add(cls);
+ if (!corpus.includes(cls)) dead.add(cls);
}
}
dead.size
? fail(`${p.name} 죽은 선택자 ${dead.size}종`, [...dead].slice(0, 8).map((c) => "." + c).join(" ") + (dead.size > 8 ? " …" : "") + " — 제거는 HTML·CSS·JS 삼위일체")
- : pass(`${p.name} 죽은 선택자`, `${files.length}개 CSS 전 클래스 사용 중(무시 ${ignore.length}접두사)`);
+ : pass(`${p.name} 죽은 선택자`, `${files.length}개 CSS × ${documents.length}개 HTML·JS 문서(무시 ${ignore.length}접두사)`);
}
} else skip("죽은 선택자", "checks.deadCss=false");
if (CFG.checks.cssHygiene) {
for (const p of CFG.pages) {
- const files = cssFilesOf(p);
+ const files = contractFilesOf(p, "hygieneFiles", cssFilesOf(p));
if (!files.length) { skip(`${p.name} 토큰 위생`, "로컬 CSS 없음"); continue; }
- // 토큰 파일 = 파일명에 tokens 가 있는 것. 이 안의 값이 프로젝트의 단일 원본이다
- const tokenFiles = files.filter((f) => /tokens/i.test(path.basename(f)));
- const others = files.filter((f) => !tokenFiles.includes(f));
- const hexes = []; const radii = new Set();
- for (const f of others) {
+ const inferredTokens = cssFilesOf(p).filter((f) => /tokens/i.test(path.basename(f)));
+ const tokenFiles = contractFilesOf(p, "tokenFiles", inferredTokens);
+ const missing = missingFiles([...files, ...tokenFiles]);
+ if (missing.length) {
+ fail(`${p.name} 토큰 위생 계약`, `없는 파일 ${missing.map((file) => path.relative(process.cwd(), file)).join(", ")}`);
+ continue;
+ }
+ const tokenNames = new Set();
+ for (const f of new Set([...tokenFiles, ...files])) {
const src = fs.readFileSync(f, "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
- for (const m of src.matchAll(/#[0-9a-fA-F]{3,8}\b/g)) hexes.push(`${path.basename(f)}:${m[0]}`);
- for (const m of src.matchAll(/(?= CFG.thresholds.radiusLiterals) bad.push(`radius 리터럴 ${radii.size}종([${[...radii].join(", ")}])`);
+ if (colorLimit !== null && colors.length > colorLimit) bad.push(`색 리터럴 ${colors.length}건 > 계약 ${colorLimit}건`);
+ if (radiusLimit !== null ? radii.size > radiusLimit : radii.size >= CFG.thresholds.radiusLiterals) {
+ bad.push(`radius 리터럴 ${radii.size}종 > 계약 ${radiusLimit ?? `<${CFG.thresholds.radiusLiterals}`}종([${[...radii].join(", ")}])`);
+ }
bad.length
- ? fail(`${p.name} 토큰 위생`, bad.join(" · ") + (hexes.length ? " — 예: " + hexes.slice(0, 4).join(" ") : ""))
- : pass(`${p.name} 토큰 위생`, `색 ${hexes.length}·radius ${radii.size} 리터럴(토큰 ${tokenFiles.length}파일)`);
+ ? fail(`${p.name} 토큰 위생`, bad.join(" · ") + (colors.length ? " — 예: " + colors.slice(0, 4).join(" ") : ""))
+ : pass(`${p.name} 토큰 위생`, `색 ${colors.length}${colorLimit === null ? "" : `/${colorLimit}`}건(${colorKinds.size}종)·radius ${radii.size}${radiusLimit === null ? "" : `/${radiusLimit}`}종·토큰 ${tokenFiles.length}파일/${tokenNames.size}개`);
}
} else skip("토큰 위생", "checks.cssHygiene=false");
@@ -170,6 +227,12 @@ const UTILS = `
for (const t of tops) if (!ls.length || t - ls[ls.length - 1] > 5) ls.push(t);
return ls.length;
};
+ window.__textLines = (sel) => {
+ const el = typeof sel === "string" ? document.querySelector(sel) : sel;
+ if (!el) return -1;
+ const text = [...el.childNodes].find((node) => node.nodeType === 3 && node.textContent.trim());
+ return window.__lines(text || el);
+ };
`;
const browser = await puppeteer.default.launch({ executablePath: CHROME, headless: "new", args: ["--force-device-scale-factor=1"] });
@@ -234,7 +297,7 @@ for (const p of CFG.pages) {
if (meta.themeColor.replace(/\s+/g, "").toLowerCase() !== hexOf(meta.bodyBg))
m.push(`theme-color ${meta.themeColor} ≠ 실제 배경 ${meta.bodyBg}(낡은 토큰 의심)`);
}
- if (meta.h1Count > 1) m.push(`h1 ${meta.h1Count}개(유일해야)`);
+ if (meta.h1Count !== 1) m.push(`h1 ${meta.h1Count}개(정확히 하나여야)`);
if (meta.imgNoAlt) m.push(`img alt 없음 ${meta.imgNoAlt}개`);
if (meta.jsonldCount && !meta.jsonld) m.push("JSON-LD 파싱 실패");
// 데모·로컬 페이지는 canonical/robots 미명시 허용 — 있으면 오히려 검증
@@ -263,10 +326,14 @@ for (const p of CFG.pages) {
}
overs.length ? fail(`${p.name}/${v} 오버플로`, overs.join(" ")) : pass(`${p.name}/${v} 오버플로`, CFG.widths.join("/"));
- // h1 1줄
+ // h1 줄 수 — 앱 화면은 기본 1줄, 마케팅 헤드라인은 페이지별로 최대 2줄까지 명시할 수 있다.
await page.setViewport({ width: 1440, height: 900 });
const h1l = await page.evaluate(`__lines(${JSON.stringify(p.h1 || "h1")})`);
- h1l === 1 ? pass(`${p.name}/${v} h1 1줄`) : (h1l > 1 ? fail(`${p.name}/${v} h1 ${h1l}줄`) : skip(`${p.name}/${v} h1`, "요소 없음"));
+ const h1MaxLines = Number.isInteger(p.h1MaxLines) && p.h1MaxLines > 0 ? p.h1MaxLines : 1;
+ const h1Rule = h1MaxLines === 1 ? "h1 1줄" : `h1 최대 ${h1MaxLines}줄`;
+ h1l >= 1 && h1l <= h1MaxLines
+ ? pass(`${p.name}/${v} ${h1Rule}`)
+ : (h1l > h1MaxLines ? fail(`${p.name}/${v} h1 ${h1l}줄(최대 ${h1MaxLines}줄)`) : skip(`${p.name}/${v} h1`, "요소 없음"));
// 세로 쌓임(수축) — 짧은 라벨 3줄 이상
if (CFG.checks.stack) {
@@ -366,6 +433,7 @@ for (const p of CFG.pages) {
// ── 스케일×폭 h1 행렬 (안드로이드 글꼴 확대 재현) ──
if (CFG.checks.scaleMatrix) {
const bad = [];
+ const h1MaxLines = Number.isInteger(p.h1MaxLines) && p.h1MaxLines > 0 ? p.h1MaxLines : 1;
for (const w of [375, 390]) {
for (const s of CFG.fontScales) {
await page.setViewport({ width: w, height: 800, isMobile: true, hasTouch: true });
@@ -373,10 +441,10 @@ for (const p of CFG.pages) {
await page.evaluate(UTILS);
await page.addStyleTag({ content: `html { font-size: ${16 * s}px !important; }` });
const l = await page.evaluate(`__lines(${JSON.stringify(p.h1 || "h1")})`);
- if (l > 1) bad.push(`${w}@${s}x:${l}줄`);
+ if (l > h1MaxLines) bad.push(`${w}@${s}x:${l}줄(최대 ${h1MaxLines}줄)`);
}
}
- bad.length ? fail(`${p.name} 스케일×폭 h1`, bad.join(",")) : pass(`${p.name} 스케일×폭 h1`, `scales ${CFG.fontScales.join("/")}`);
+ bad.length ? fail(`${p.name} 스케일×폭 h1`, bad.join(",")) : pass(`${p.name} 스케일×폭 h1`, `최대 ${h1MaxLines}줄 · scales ${CFG.fontScales.join("/")}`);
// 브랜드 1줄
await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true });
await page.goto(href, { waitUntil: "networkidle0" });
@@ -386,7 +454,7 @@ for (const p of CFG.pages) {
const bl = await page.evaluate((sel) => {
const els = [...document.querySelectorAll(sel)];
const el = els.find((e) => e.offsetParent !== null || getComputedStyle(e).position === "fixed") || els[0];
- return window.__lines(el);
+ return window.__textLines(el);
}, p.brand);
bl === 1 ? pass(`${p.name} 브랜드 1줄`) : fail(`${p.name} 브랜드 ${bl}줄(수축 의심)`);
}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
