Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4a3110974b | ||
|
|
caf09ecd56 | ||
|
|
6db96b6ef5 | ||
|
|
f6300c5d1d |
@@ -9,4 +9,5 @@ artifacts/**/*.json
|
|||||||
artifacts/**/*.xml
|
artifacts/**/*.xml
|
||||||
artifacts/**/*.txt
|
artifacts/**/*.txt
|
||||||
artifacts/**/*.sarif
|
artifacts/**/*.sarif
|
||||||
|
artifacts/tests/e2e/
|
||||||
!artifacts/**/.gitkeep
|
!artifacts/**/.gitkeep
|
||||||
|
|||||||
@@ -0,0 +1,15 @@
|
|||||||
|
# APP_HOME accessibility review
|
||||||
|
|
||||||
|
Status: pending-manual-review
|
||||||
|
|
||||||
|
Reviewer:
|
||||||
|
|
||||||
|
Keyboard: automated tab-order fixture passed; human review pending.
|
||||||
|
|
||||||
|
Focus: automated visible-focus fixture passed; route-change review pending.
|
||||||
|
|
||||||
|
Screen reader: pending.
|
||||||
|
|
||||||
|
Reduced motion: automated media-query fixture passed; human review pending.
|
||||||
|
|
||||||
|
Color signal: pending.
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
# Manual accessibility review checklist
|
||||||
|
|
||||||
|
Automated axe checks do not establish WCAG conformance. A human reviewer must
|
||||||
|
copy this checklist to `artifacts/tests/a11y-manual/<route-id>.md`, execute it
|
||||||
|
on the release candidate, and sign it.
|
||||||
|
|
||||||
|
- Status: `pending` or `reviewed`
|
||||||
|
- Reviewer and reviewed-at timestamp
|
||||||
|
- Keyboard: all actions reachable in logical order
|
||||||
|
- Focus: visible, route changes deterministic, modal restore verified
|
||||||
|
- Screen reader: headings, live regions, errors, and actions announced once
|
||||||
|
- Reduced motion: non-essential animation suppressed
|
||||||
|
- Color signal: every state has text/icon/structure in addition to color
|
||||||
|
- Notes and linked defect IDs
|
||||||
|
|
||||||
|
Passing the automated threshold means only that the tested pages had zero
|
||||||
|
critical/serious axe findings under the recorded browser run.
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
# Build and supply-chain gate
|
||||||
|
|
||||||
|
Merge and release controls:
|
||||||
|
|
||||||
|
- frozen `pnpm-lock.yaml` installation; drift is blocking
|
||||||
|
- clean production build with hashed assets and build manifest
|
||||||
|
- machine-readable bundle sizes and checksums
|
||||||
|
- source plus built-asset credential-pattern scan
|
||||||
|
- direct dependency inventory and lockfile digest
|
||||||
|
- base/head dependency diff review record
|
||||||
|
|
||||||
|
Organization-specific vulnerability severity, denied-license list, SBOM format,
|
||||||
|
and scanner selection remain policy inputs. An approved suppression must record
|
||||||
|
reason, owner, expiry, affected package, and compensating control. Expired
|
||||||
|
suppressions are blocking.
|
||||||
|
|
||||||
|
`artifacts/security/dependency-diff.json` is a local baseline. CI replaces it
|
||||||
|
with the actual base/head direct and transitive lockfile diff before release.
|
||||||
+7
-2
@@ -11,6 +11,7 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build && node scripts/generate-build-manifest.mjs",
|
"build": "vite build && node scripts/generate-build-manifest.mjs",
|
||||||
|
"build:release": "corepack pnpm build && corepack pnpm generate:supply-chain && corepack pnpm scan:security",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"lint": "eslint src scripts tests vite.config.js vitest.config.js playwright.config.js --max-warnings=0",
|
"lint": "eslint src scripts tests vite.config.js vitest.config.js playwright.config.js --max-warnings=0",
|
||||||
"check:architecture": "node scripts/check-architecture.mjs",
|
"check:architecture": "node scripts/check-architecture.mjs",
|
||||||
@@ -21,9 +22,13 @@
|
|||||||
"test:component": "vitest run tests/component --reporter=default --reporter=junit --outputFile.junit=artifacts/tests/component.xml",
|
"test:component": "vitest run tests/component --reporter=default --reporter=junit --outputFile.junit=artifacts/tests/component.xml",
|
||||||
"test:integration": "vitest run tests/integration --reporter=default --reporter=junit --outputFile.junit=artifacts/tests/integration.xml",
|
"test:integration": "vitest run tests/integration --reporter=default --reporter=junit --outputFile.junit=artifacts/tests/integration.xml",
|
||||||
"test:e2e": "playwright test",
|
"test:e2e": "playwright test",
|
||||||
"test:a11y": "playwright test --grep @a11y",
|
"test:a11y": "playwright test --grep @a11y && node scripts/write-a11y-report.mjs",
|
||||||
|
"review:a11y-manual": "node scripts/verify-a11y-manual.mjs",
|
||||||
"test:sample-removal": "node scripts/test-sample-removal.mjs",
|
"test:sample-removal": "node scripts/test-sample-removal.mjs",
|
||||||
"test:all": "pnpm test:runtime-schema && pnpm test:unit && pnpm test:component && pnpm test:integration"
|
"test:all": "corepack pnpm test:runtime-schema && corepack pnpm test:unit && corepack pnpm test:component && corepack pnpm test:integration",
|
||||||
|
"verify:lockfile": "corepack pnpm install --frozen-lockfile",
|
||||||
|
"generate:supply-chain": "node scripts/generate-supply-chain.mjs",
|
||||||
|
"scan:security": "node scripts/security-scan.mjs"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tanstack/react-query": "5.101.4",
|
"@tanstack/react-query": "5.101.4",
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ export default defineConfig({
|
|||||||
screenshot: "only-on-failure",
|
screenshot: "only-on-failure",
|
||||||
},
|
},
|
||||||
webServer: {
|
webServer: {
|
||||||
command: "pnpm dev --host 127.0.0.1",
|
command: "corepack pnpm dev --host 127.0.0.1",
|
||||||
url: "http://127.0.0.1:5173",
|
url: "http://127.0.0.1:5173",
|
||||||
reuseExistingServer: !process.env.CI,
|
reuseExistingServer: !process.env.CI,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
||||||
|
"$id": "build-manifest.schema.json",
|
||||||
|
"type": "object",
|
||||||
|
"required": [
|
||||||
|
"schemaVersion",
|
||||||
|
"buildId",
|
||||||
|
"commitSha",
|
||||||
|
"generatedAt",
|
||||||
|
"buildContext",
|
||||||
|
"outputs"
|
||||||
|
],
|
||||||
|
"properties": {
|
||||||
|
"schemaVersion": { "const": 1 },
|
||||||
|
"buildId": { "type": "string", "minLength": 1 },
|
||||||
|
"commitSha": { "type": "string", "minLength": 1 },
|
||||||
|
"generatedAt": { "type": "string", "format": "date-time" },
|
||||||
|
"buildContext": {
|
||||||
|
"type": "object",
|
||||||
|
"required": ["nodeVersion", "packageManagerVersion", "runnerImage"],
|
||||||
|
"properties": {
|
||||||
|
"nodeVersion": { "type": "string" },
|
||||||
|
"packageManagerVersion": { "type": "string" },
|
||||||
|
"runnerImage": { "type": "string" }
|
||||||
|
},
|
||||||
|
"additionalProperties": false
|
||||||
|
},
|
||||||
|
"outputs": {
|
||||||
|
"type": "object",
|
||||||
|
"required": ["directory", "viteManifest"],
|
||||||
|
"properties": {
|
||||||
|
"directory": { "type": "string" },
|
||||||
|
"viteManifest": { "type": "string" }
|
||||||
|
},
|
||||||
|
"additionalProperties": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"additionalProperties": false
|
||||||
|
}
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
import { createHash } from "node:crypto";
|
||||||
|
import { gzipSync } from "node:zlib";
|
||||||
|
import {
|
||||||
|
mkdir,
|
||||||
|
readFile,
|
||||||
|
readdir,
|
||||||
|
stat,
|
||||||
|
writeFile,
|
||||||
|
} from "node:fs/promises";
|
||||||
|
import path from "node:path";
|
||||||
|
|
||||||
|
/** @param {string} directory @returns {Promise<string[]>} */
|
||||||
|
async function filesWithin(directory) {
|
||||||
|
const entries = await readdir(directory, { withFileTypes: true });
|
||||||
|
const nested = /** @type {string[][]} */ (await Promise.all(
|
||||||
|
entries.map((entry) => {
|
||||||
|
const target = path.join(directory, entry.name);
|
||||||
|
return entry.isDirectory() ? filesWithin(target) : [target];
|
||||||
|
}),
|
||||||
|
));
|
||||||
|
return nested.flat().sort();
|
||||||
|
}
|
||||||
|
|
||||||
|
const packageJson = JSON.parse(await readFile("package.json", "utf8"));
|
||||||
|
const lockfile = await readFile("pnpm-lock.yaml");
|
||||||
|
const outputFiles = await filesWithin("dist");
|
||||||
|
|
||||||
|
const outputs = await Promise.all(
|
||||||
|
outputFiles.map(async (outputFile) => {
|
||||||
|
const content = await readFile(outputFile);
|
||||||
|
const metadata = await stat(outputFile);
|
||||||
|
return {
|
||||||
|
path: outputFile,
|
||||||
|
bytes: metadata.size,
|
||||||
|
gzipBytes: gzipSync(content).byteLength,
|
||||||
|
sha256: createHash("sha256").update(content).digest("hex"),
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const dependencies = {
|
||||||
|
...packageJson.dependencies,
|
||||||
|
...packageJson.devDependencies,
|
||||||
|
};
|
||||||
|
const inventory = Object.entries(dependencies)
|
||||||
|
.sort(([left], [right]) => left.localeCompare(right))
|
||||||
|
.map(([name, version]) => ({ name, version, direct: true }));
|
||||||
|
|
||||||
|
await mkdir("artifacts/performance", { recursive: true });
|
||||||
|
await mkdir("artifacts/release", { recursive: true });
|
||||||
|
await mkdir("artifacts/security", { recursive: true });
|
||||||
|
|
||||||
|
await writeFile(
|
||||||
|
"artifacts/performance/bundle.json",
|
||||||
|
`${JSON.stringify(
|
||||||
|
{
|
||||||
|
schemaVersion: 1,
|
||||||
|
generatedAt: new Date().toISOString(),
|
||||||
|
context: {
|
||||||
|
nodeVersion: process.version,
|
||||||
|
packageManager: packageJson.packageManager,
|
||||||
|
runnerImage: process.env.CI_RUNNER_IMAGE ?? `${process.platform}-${process.arch}`,
|
||||||
|
},
|
||||||
|
outputs,
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
2,
|
||||||
|
)}\n`,
|
||||||
|
);
|
||||||
|
|
||||||
|
await writeFile(
|
||||||
|
"artifacts/release/dependency-inventory.json",
|
||||||
|
`${JSON.stringify(
|
||||||
|
{
|
||||||
|
schemaVersion: 1,
|
||||||
|
lockfileSha256: createHash("sha256").update(lockfile).digest("hex"),
|
||||||
|
dependencies: inventory,
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
2,
|
||||||
|
)}\n`,
|
||||||
|
);
|
||||||
|
|
||||||
|
await writeFile(
|
||||||
|
"artifacts/release/checksums.txt",
|
||||||
|
`${outputs.map((output) => `${output.sha256} ${output.path}`).join("\n")}\n`,
|
||||||
|
);
|
||||||
|
|
||||||
|
await writeFile(
|
||||||
|
"artifacts/security/dependency-diff.json",
|
||||||
|
`${JSON.stringify(
|
||||||
|
{
|
||||||
|
schemaVersion: 1,
|
||||||
|
reviewStatus: "local-baseline",
|
||||||
|
directDependencies: inventory.length,
|
||||||
|
highRiskUnreviewed: [],
|
||||||
|
lockfileSha256: createHash("sha256").update(lockfile).digest("hex"),
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
2,
|
||||||
|
)}\n`,
|
||||||
|
);
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
|
||||||
|
import path from "node:path";
|
||||||
|
|
||||||
|
const scanRoots = ["src", "dist"];
|
||||||
|
const findings = /** @type {Array<{ruleId: string, file: string}>} */ ([]);
|
||||||
|
const patterns = [
|
||||||
|
{ id: "private-key", expression: /-----BEGIN (?:RSA |EC )?PRIVATE KEY-----/g },
|
||||||
|
{ id: "aws-access-key", expression: /\bAKIA[0-9A-Z]{16}\b/g },
|
||||||
|
{ id: "github-token", expression: /\bgh[pousr]_[A-Za-z0-9_]{30,}\b/g },
|
||||||
|
{
|
||||||
|
id: "assigned-secret",
|
||||||
|
expression:
|
||||||
|
/\b(?:client_secret|password|private_key)\s*[:=]\s*["'][^"'${}]{12,}["']/gi,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/** @param {string} directory @returns {Promise<string[]>} */
|
||||||
|
async function filesWithin(directory) {
|
||||||
|
const entries = await readdir(directory, { withFileTypes: true });
|
||||||
|
const nested = /** @type {string[][]} */ (await Promise.all(
|
||||||
|
entries.map((entry) => {
|
||||||
|
const target = path.join(directory, entry.name);
|
||||||
|
return entry.isDirectory() ? filesWithin(target) : [target];
|
||||||
|
}),
|
||||||
|
));
|
||||||
|
return nested.flat();
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const root of scanRoots) {
|
||||||
|
for (const scanFile of await filesWithin(root)) {
|
||||||
|
if (/\.(png|jpg|jpeg|gif|woff2?|zip)$/i.test(scanFile)) continue;
|
||||||
|
const content = await readFile(scanFile, "utf8");
|
||||||
|
for (const pattern of patterns) {
|
||||||
|
pattern.expression.lastIndex = 0;
|
||||||
|
if (pattern.expression.test(content)) {
|
||||||
|
findings.push({ ruleId: pattern.id, file: scanFile });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const sarif = {
|
||||||
|
version: "2.1.0",
|
||||||
|
$schema:
|
||||||
|
"https://json.schemastore.org/sarif-2.1.0.json",
|
||||||
|
runs: [
|
||||||
|
{
|
||||||
|
tool: {
|
||||||
|
driver: {
|
||||||
|
name: "ca-frontend-secret-scan",
|
||||||
|
rules: patterns.map((pattern) => ({
|
||||||
|
id: pattern.id,
|
||||||
|
shortDescription: { text: "Potential credential material" },
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
results: findings.map((finding) => ({
|
||||||
|
ruleId: finding.ruleId,
|
||||||
|
message: { text: "Potential secret material must be removed." },
|
||||||
|
locations: [
|
||||||
|
{
|
||||||
|
physicalLocation: {
|
||||||
|
artifactLocation: { uri: finding.file },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
await mkdir("artifacts/security", { recursive: true });
|
||||||
|
await writeFile(
|
||||||
|
"artifacts/security/scan.sarif",
|
||||||
|
`${JSON.stringify(sarif, null, 2)}\n`,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (findings.length > 0) {
|
||||||
|
process.stderr.write(`Security scan found ${findings.length} blocking result(s).\n`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
process.stdout.write("Source and built-asset secret scan: PASS\n");
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
import { readFile } from "node:fs/promises";
|
||||||
|
|
||||||
|
const evidence = await readFile(
|
||||||
|
"artifacts/tests/a11y-manual/APP_HOME.md",
|
||||||
|
"utf8",
|
||||||
|
);
|
||||||
|
|
||||||
|
const required = [
|
||||||
|
"Status: reviewed",
|
||||||
|
"Reviewer:",
|
||||||
|
"Keyboard:",
|
||||||
|
"Focus:",
|
||||||
|
"Screen reader:",
|
||||||
|
"Reduced motion:",
|
||||||
|
"Color signal:",
|
||||||
|
];
|
||||||
|
|
||||||
|
const missing = required.filter((marker) => !evidence.includes(marker));
|
||||||
|
if (missing.length > 0) {
|
||||||
|
process.stderr.write(
|
||||||
|
`Manual accessibility evidence is incomplete: ${missing.join(", ")}\n`,
|
||||||
|
);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
process.stdout.write("Manual accessibility evidence: PASS\n");
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { mkdir, writeFile } from "node:fs/promises";
|
||||||
|
|
||||||
|
await mkdir("artifacts/tests", { recursive: true });
|
||||||
|
await writeFile(
|
||||||
|
"artifacts/tests/a11y.json",
|
||||||
|
`${JSON.stringify(
|
||||||
|
{
|
||||||
|
schemaVersion: 1,
|
||||||
|
generatedAt: new Date().toISOString(),
|
||||||
|
scope: ["APP_HOME", "SAMPLE_RESOURCE_LIST", "NOT_FOUND"],
|
||||||
|
threshold: { critical: 0, serious: 0 },
|
||||||
|
automatedStatus: "passed",
|
||||||
|
manualReview: "see artifacts/tests/a11y-manual/APP_HOME.md",
|
||||||
|
},
|
||||||
|
null,
|
||||||
|
2,
|
||||||
|
)}\n`,
|
||||||
|
);
|
||||||
@@ -1,7 +1,12 @@
|
|||||||
/** @param {{ label?: string }} props */
|
/** @param {{ label?: string }} props */
|
||||||
export function LoadingSurface({ label = "불러오는 중" }) {
|
export function LoadingSurface({ label = "불러오는 중" }) {
|
||||||
return (
|
return (
|
||||||
<section aria-busy="true" aria-label={label}>
|
<section
|
||||||
|
aria-busy="true"
|
||||||
|
aria-label={label}
|
||||||
|
aria-live="polite"
|
||||||
|
aria-atomic="true"
|
||||||
|
>
|
||||||
<div className="ui-skeleton" aria-hidden="true" />
|
<div className="ui-skeleton" aria-hidden="true" />
|
||||||
<span className="sr-only">{label}</span>
|
<span className="sr-only">{label}</span>
|
||||||
</section>
|
</section>
|
||||||
@@ -11,7 +16,7 @@ export function LoadingSurface({ label = "불러오는 중" }) {
|
|||||||
/** @param {{ title?: string, action?: React.ReactNode }} props */
|
/** @param {{ title?: string, action?: React.ReactNode }} props */
|
||||||
export function EmptySurface({ title = "표시할 항목이 없습니다.", action }) {
|
export function EmptySurface({ title = "표시할 항목이 없습니다.", action }) {
|
||||||
return (
|
return (
|
||||||
<section className="ui-empty">
|
<section className="ui-empty" aria-live="polite">
|
||||||
<p>{title}</p>
|
<p>{title}</p>
|
||||||
{action}
|
{action}
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -0,0 +1,37 @@
|
|||||||
|
import AxeBuilder from "@axe-core/playwright";
|
||||||
|
import { expect, test } from "@playwright/test";
|
||||||
|
|
||||||
|
for (const route of ["/", "/sample/resources", "/not-found"]) {
|
||||||
|
test(`@a11y ${route} has no critical or serious axe violations`, async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
await page.goto(route);
|
||||||
|
await expect(page.getByRole("main")).toBeVisible();
|
||||||
|
const results = await new AxeBuilder({ page })
|
||||||
|
.withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
|
||||||
|
.analyze();
|
||||||
|
const blocking = results.violations.filter((violation) =>
|
||||||
|
["critical", "serious"].includes(violation.impact ?? ""),
|
||||||
|
);
|
||||||
|
expect(blocking).toEqual([]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
test("@a11y keyboard reaches the primary route action with visible focus", async ({
|
||||||
|
page,
|
||||||
|
}) => {
|
||||||
|
await page.goto("/");
|
||||||
|
await page.keyboard.press("Tab");
|
||||||
|
const action = page.getByRole("link", { name: "샘플 리소스" });
|
||||||
|
await expect(action).toBeFocused();
|
||||||
|
await expect(action).toHaveCSS("outline-style", "solid");
|
||||||
|
});
|
||||||
|
|
||||||
|
test("@a11y reduced-motion policy disables long animation", async ({ page }) => {
|
||||||
|
await page.emulateMedia({ reducedMotion: "reduce" });
|
||||||
|
await page.goto("/");
|
||||||
|
const duration = await page
|
||||||
|
.locator("body")
|
||||||
|
.evaluate((body) => getComputedStyle(body).animationDuration);
|
||||||
|
expect(["0s", "0.00001s", "1e-05s"]).toContain(duration);
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user