fix(site): add explicit not-found page

apps/site/src/layouts/Base.astro

@@ -11,9 +11,10 @@ interface Props {
   title: string;
   description: string;
   translationPath?: string | null;
+  noindex?: boolean;
 }
 
-const { lang, title, description } = Astro.props;
+const { lang, title, description, noindex = false } = Astro.props;
 const copy = lang === "ko" ? landingKo : landingEn;
 const socialPreview = lang === "ko" ? socialPreviewKo : socialPreviewEn;
 const socialPreviewAlt = lang === "ko"
@@ -67,6 +68,7 @@ const schema = isHome
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{title}</title>
     <meta name="description" content={description} />
+    {noindex && <meta name="robots" content="noindex, follow" />}
     <meta name="theme-color" content="#f2f1eb" />
     <meta name="color-scheme" content="light" />
     <link rel="icon" href={favicon} />

apps/site/src/pages/404.astro

@@ -0,0 +1,213 @@
+---
+import Base from "../layouts/Base.astro";
+
+const title = "페이지를 찾을 수 없습니다 | Page not found | designpaca";
+const description = "요청한 주소를 찾을 수 없습니다. 한국어 또는 영어 홈에서 다시 시작할 수 있습니다. Page not found. Return to the Korean or English home page.";
+---
+
+<Base lang="ko" title={title} description={description} translationPath={null} noindex>
+  <section class="not-found grain" aria-labelledby="not-found-title">
+    <div class="not-found-grid shell">
+      <div class="not-found-copy">
+        <p class="status-code mono">HTTP 404</p>
+        <h1 id="not-found-title">페이지를 찾을 수 없습니다</h1>
+        <p class="not-found-lead">
+          주소가 바뀌었거나 페이지가 이동했습니다. 아래 홈 화면에서 다시 시작해 주세요.
+        </p>
+        <p class="not-found-en" lang="en">
+          Page not found. The address may have changed or the page may have moved.
+        </p>
+      </div>
+
+      <nav class="recovery-map frame" aria-label="홈 화면으로 이동">
+        <div class="recovery-source">
+          <span class="recovery-label">현재 위치 <span lang="en">Current route</span></span>
+          <span class="recovery-value nums" aria-hidden="true">404</span>
+        </div>
+        <div class="recovery-links">
+          <a class="recovery-link" href="/">
+            <span class="recovery-code mono" aria-hidden="true">KO</span>
+            <span>한국어 홈</span>
+          </a>
+          <a class="recovery-link" href="/en/" lang="en">
+            <span class="recovery-code mono" aria-hidden="true">EN</span>
+            <span>English home</span>
+          </a>
+        </div>
+      </nav>
+    </div>
+  </section>
+</Base>
+
+<style>
+  .not-found {
+    min-height: calc(100dvh - var(--header-h));
+    display: grid;
+    align-items: center;
+    padding-block: var(--space-8);
+  }
+
+  .not-found-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
+    gap: var(--space-7);
+    align-items: stretch;
+  }
+
+  .not-found-copy {
+    align-self: center;
+    max-width: 40rem;
+    padding-block: var(--space-6);
+  }
+
+  .status-code {
+    margin-bottom: var(--space-5);
+    color: var(--accent);
+    font-size: var(--step--1);
+    font-weight: var(--weight-medium);
+    letter-spacing: 0.08em;
+  }
+
+  h1 {
+    max-width: 11ch;
+  }
+
+  .not-found-lead,
+  .not-found-en {
+    max-width: var(--measure-narrow);
+    color: var(--ink-muted);
+  }
+
+  .not-found-lead {
+    margin-top: var(--space-5);
+  }
+
+  .not-found-en {
+    margin-top: var(--space-3);
+    font-size: var(--step--1);
+  }
+
+  .recovery-map {
+    position: relative;
+    min-height: 25rem;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto;
+    overflow: hidden;
+  }
+
+  .recovery-map::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-image:
+      linear-gradient(to right, transparent calc(50% - 0.5px), var(--line) 50%, transparent calc(50% + 0.5px)),
+      linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--line) 50%, transparent calc(50% + 0.5px));
+    opacity: 0.38;
+  }
+
+  .recovery-source,
+  .recovery-links {
+    position: relative;
+    z-index: 1;
+  }
+
+  .recovery-source {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: var(--space-6);
+    padding: var(--space-6);
+  }
+
+  .recovery-label {
+    color: var(--ink-muted);
+    font-size: var(--step--1);
+  }
+
+  .recovery-label span {
+    display: block;
+    margin-top: var(--space-1);
+  }
+
+  .recovery-value {
+    align-self: flex-end;
+    color: var(--ink);
+    font-size: clamp(5rem, 12vw, 10rem);
+    font-weight: var(--weight-body);
+    line-height: 0.82;
+    letter-spacing: -0.055em;
+  }
+
+  .recovery-links {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    border-top: var(--line-width) solid var(--line-strong);
+    background: var(--surface-raised);
+  }
+
+  .recovery-link {
+    min-height: 4.75rem;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+    color: var(--ink);
+    font-weight: var(--weight-medium);
+    line-height: 1.25;
+    text-decoration: none;
+  }
+
+  .recovery-link + .recovery-link {
+    border-left: var(--line-width) solid var(--line-strong);
+  }
+
+  .recovery-link:hover,
+  .recovery-link:focus-visible {
+    background: var(--surface-soft);
+  }
+
+  .recovery-link:active {
+    background: var(--surface);
+  }
+
+  .recovery-code {
+    color: var(--accent);
+  }
+
+  @media (max-width: 48rem) {
+    .not-found {
+      align-items: start;
+      padding-block: var(--space-7);
+    }
+
+    .not-found-grid {
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--space-6);
+    }
+
+    .not-found-copy {
+      padding-block: 0;
+    }
+
+    .recovery-map {
+      min-height: 20rem;
+    }
+
+    .recovery-value {
+      font-size: clamp(5rem, 30vw, 8rem);
+    }
+  }
+
+  @media (max-width: 23rem) {
+    .recovery-links {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .recovery-link + .recovery-link {
+      border-top: var(--line-width) solid var(--line-strong);
+      border-left: 0;
+    }
+  }
+</style>

apps/site/tools/site-e2e.mjs

@@ -32,8 +32,8 @@ const GEOMETRY_WIDTHS = [320, 390, 768, 1024, 1440, 1920, 2560];
 const CAPTURE_WIDTHS = new Set([390, 1440]);
 const HEIGHTS = new Map([[320, 844], [390, 844], [768, 1024], [1024, 900], [1440, 1000], [1920, 1080], [2560, 1440]]);
 const AXE_TAGS = ["wcag2a", "wcag2aa", "wcag21a", "wcag21aa", "wcag22aa"];
-const EXPECTED_SCENARIOS = 80;
+const EXPECTED_SCENARIOS = 81;
-const EXPECTED_ASSERTIONS = 995;
+const EXPECTED_ASSERTIONS = 1009;
 const EXPECTED_CAPTURES = 8;
 
 function parseArguments(argv) {
@@ -1394,6 +1394,62 @@ async function main() {
     console.log(`Serving ${serveRoot}`);
     console.log(`Evidence ${evidenceRoot}\n`);
 
+    const notFoundScope = "404 artifact and recovery";
+    await results.scenario(notFoundScope, async () => {
+      const artifact = path.join(serveRoot, "404.html");
+      results.equal(notFoundScope, "top-level 404 artifact exists", true, fs.existsSync(artifact));
+      const opened = await openPage(browser, server.origin, { path: "/404.html" }, { width: 390 });
+      try {
+        const state = await opened.page.evaluate(() => {
+          const robots = [...document.querySelectorAll("meta[name='robots']")].map((element) => element.getAttribute("content") || "");
+          const h1s = [...document.querySelectorAll("h1")].map((element) => element.textContent?.replace(/\s+/g, " ").trim() || "");
+          const englishCopy = [...document.querySelectorAll("[lang='en']")].some((element) => /Page not found\./.test(element.textContent || ""));
+          const links = [...document.querySelectorAll("main a[href]")].map((element) => ({
+            href: element.getAttribute("href"),
+            lang: element.getAttribute("lang"),
+            text: element.textContent?.replace(/\s+/g, " ").trim() || "",
+          }));
+          const executableScripts = [...document.scripts].filter((script) => {
+            const type = (script.getAttribute("type") || "").trim().toLowerCase();
+            return !["application/ld+json", "application/json", "importmap"].includes(type);
+          }).length;
+          return {
+            lang: document.documentElement.lang,
+            mainCount: document.querySelectorAll("main").length,
+            h1s,
+            robots,
+            englishCopy,
+            links,
+            executableScripts,
+            viewportWidth: innerWidth,
+            documentWidth: document.documentElement.scrollWidth,
+          };
+        });
+        const axe = await runAxe(opened.page);
+        results.equal(notFoundScope, "local artifact route responds", 200, opened.status);
+        results.equal(notFoundScope, "document language is Korean", "ko", state.lang);
+        results.equal(notFoundScope, "one main landmark", 1, state.mainCount);
+        results.equal(notFoundScope, "one unique h1", 1, state.h1s.length);
+        results.equal(notFoundScope, "h1 identifies the missing page", "페이지를 찾을 수 없습니다", state.h1s[0]);
+        results.equal(notFoundScope, "English explanation is language tagged", true, state.englishCopy);
+        results.equal(notFoundScope, "one robots directive", 1, state.robots.length);
+        results.check(notFoundScope, "robots directive prevents indexing", state.robots[0]?.split(",").some((value) => value.trim().toLowerCase() === "noindex"), {
+          expected: "noindex",
+          actual: state.robots,
+        });
+        results.check(notFoundScope, "Korean home recovery link exists", state.links.some((link) => link.href === "/" && link.text.endsWith("한국어 홈")), { actual: state.links });
+        results.check(notFoundScope, "English home recovery link exists and is language tagged", state.links.some((link) => link.href === "/en/" && link.lang === "en" && link.text === "EN English home"), { actual: state.links });
+        results.equal(notFoundScope, "no executable scripts", 0, state.executableScripts);
+        results.check(notFoundScope, "no horizontal document overflow", state.documentWidth <= state.viewportWidth + 1, {
+          expected: `<= ${state.viewportWidth + 1}`,
+          actual: state.documentWidth,
+        });
+        results.empty(notFoundScope, "axe WCAG A/AA violations", axe);
+      } finally {
+        await closePage(opened.page);
+      }
+    });
+
     // Four routes across the complete local preflight width matrix. Only the
     // 390/1440 states create visual evidence; every width gets the full geometry gate.
     for (const route of ROUTES) {