feat: release Find-Word v0.2.3

tests/browser/ui.spec.ts

@@ -54,12 +54,12 @@ test("난이도 설명은 모바일에서도 보인다", async ({ page }) => {
   await page.getByRole("button", { name: "게임 시작 · 소리 듣기" }).click();
   // DOM에만 설명을 남기고 모바일 CSS로 숨기면 컴포넌트 검증은 통과하므로
   // 실제 화면에서 난이도 배지와 쉬운 설명을 모두 읽을 수 있는지 확인한다.
-  await expect.soft(page.locator(".db-note")).toBeVisible({ timeout: 1000 });
+  await expect.soft(page.locator("#snr-help")).toBeVisible({ timeout: 1000 });
   await expect
     .soft(page.getByText("1단계 · SNR +6 dB"))
     .toBeVisible({ timeout: 1000 });
   await expect
-    .soft(page.locator(".db-note"))
+    .soft(page.locator("#snr-help"))
     .toContainText("음성이 배경보다 6 dB 커요.", { timeout: 1000 });
 });
 
@@ -116,3 +116,43 @@ test("한국어 제목은 단어 중간에서 줄바꿈하지 않는다", async
     ),
   ).toBe(true);
 });
+
+// 새 설정도 기존 카드와 같은 터치 크기를 갖고 360px에서 레이블과 함께 넘치지 않아야 한다.
+test("시작 단계와 SNR 설정은 카드 안에 들어가고 터치 영역을 확보한다", async ({
+  page,
+}) => {
+  await page.goto("/");
+  const panel = (await page
+    .getByRole("region", { name: "나의 소리 탐험 준비" })
+    .boundingBox())!;
+  for (const control of [
+    page.getByLabel("시작 난이도"),
+    page.getByRole("slider", { name: "목표 음성 SNR" }),
+  ]) {
+    const bounds = (await control.boundingBox())!;
+    expect(bounds.height).toBeGreaterThanOrEqual(44);
+    expect(bounds.x).toBeGreaterThanOrEqual(panel.x);
+    expect(bounds.x + bounds.width).toBeLessThanOrEqual(panel.x + panel.width);
+  }
+  // select의 상자만 들어가도 선택한 글자는 화살표 뒤에서 잘릴 수 있다.
+  const labelFits = await page.getByLabel("시작 난이도").evaluate((element) => {
+    const select = element as HTMLSelectElement;
+    const style = getComputedStyle(select);
+    const context = document.createElement("canvas").getContext("2d")!;
+    context.font = style.font;
+    const available =
+      select.clientWidth -
+      parseFloat(style.paddingLeft) -
+      parseFloat(style.paddingRight) -
+      24;
+    return (
+      context.measureText(select.selectedOptions[0]!.text).width <= available
+    );
+  });
+  expect(labelFits).toBe(true);
+  expect(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth <= innerWidth,
+    ),
+  ).toBe(true);
+});