케이스 이어하기 UI와 공통 탭·이미지 복구를 반영

2026-09-01 11:45:23 +09:00 · 2026-09-01 11:45:23 +09:00 · f1b80676c1
commit f1b80676c1
parent 72353ecd82
38 changed files with 3581 additions and 455 deletions
--- a/apps/web/e2e/tabs-behavior.spec.ts
+++ b/apps/web/e2e/tabs-behavior.spec.ts
@ -0,0 +1,138 @@
+import { expect, test, type Locator, type Page } from "@playwright/test";
+import { signInAsAdmin, signInAsTeacher } from "./support";
+
+async function expectConnectedTabPanel(tab: Locator, panel: Locator) {
+  const tabId = await tab.getAttribute("id");
+  const panelId = await panel.getAttribute("id");
+  expect(tabId).toBeTruthy();
+  expect(panelId).toBeTruthy();
+  await expect(tab).toHaveAttribute("aria-controls", panelId!);
+  await expect(panel).toHaveAttribute("aria-labelledby", tabId!);
+}
+
+async function expectKeyboardSelection(
+  page: Page,
+  tablistName: string,
+  startName: string,
+  key: "ArrowRight" | "ArrowLeft" | "Home" | "End",
+  expectedName: string,
+) {
+  const tablist = page.getByRole("tablist", { name: tablistName });
+  const start = tablist.getByRole("tab", { name: startName });
+  const expected = tablist.getByRole("tab", { name: expectedName });
+  const panel = page.getByRole("tabpanel");
+
+  await start.focus();
+  await start.press(key);
+  await expect(expected).toBeFocused();
+  await expect(expected).toHaveAttribute("aria-selected", "true");
+  await expect(expected).toHaveAttribute("tabindex", "0");
+  await expect(start).toHaveAttribute("tabindex", startName === expectedName ? "0" : "-1");
+  await expectConnectedTabPanel(expected, panel);
+}
+
+test.describe("공통 Tabs behavior", () => {
+  test("관리자 사용자·접근 권한 탭이 패널 연결과 roving keyboard를 공유한다 @single-run", async ({
+    page,
+  }) => {
+    await signInAsAdmin(page);
+
+    await page.goto("/admin/users");
+    const userTabs = page.getByRole("tablist", { name: "사용자 관리 탭" });
+    const approval = userTabs.getByRole("tab", { name: /가입 승인/ });
+    const userPanel = page.getByRole("tabpanel");
+    await expect(userTabs).toBeVisible();
+    await expect(userTabs).toHaveAttribute("id", "admin-users-tabs");
+    await expect(userPanel).toHaveAttribute("id", "admin-users-tabs-panel");
+    await expect(userTabs).not.toHaveClass(/vg-surface/);
+    await expectConnectedTabPanel(approval, userPanel);
+
+    await expectKeyboardSelection(
+      page,
+      "사용자 관리 탭",
+      "가입 승인",
+      "ArrowRight",
+      "사용자 목록",
+    );
+    await expectKeyboardSelection(
+      page,
+      "사용자 관리 탭",
+      "사용자 목록",
+      "End",
+      "활동 요약",
+    );
+    await expectKeyboardSelection(
+      page,
+      "사용자 관리 탭",
+      "활동 요약",
+      "Home",
+      "가입 승인",
+    );
+
+    await page.goto("/admin/access");
+    const accessTabs = page.getByRole("tablist", { name: "접근 권한 탭" });
+    const roles = accessTabs.getByRole("tab", { name: "역할", exact: true });
+    const accessPanel = page.getByRole("tabpanel");
+    await expect(accessTabs).toBeVisible();
+    await expect(accessTabs).toHaveAttribute("id", "admin-access-tabs");
+    await expect(accessPanel).toHaveAttribute("id", "admin-access-tabs-panel");
+    await expect(accessTabs).not.toHaveClass(/vg-surface/);
+    await expectConnectedTabPanel(roles, accessPanel);
+    await expectKeyboardSelection(
+      page,
+      "접근 권한 탭",
+      "역할",
+      "End",
+      "상담 프로토콜",
+    );
+    await expectKeyboardSelection(
+      page,
+      "접근 권한 탭",
+      "상담 프로토콜",
+      "Home",
+      "역할",
+    );
+  });
+
+  test("페르소나 저작 탭이 같은 패널 연결과 방향키 계약을 사용한다 @single-run", async ({
+    page,
+  }) => {
+    await signInAsTeacher(page);
+    await page.route("**/api/personas", async (route) => {
+      if (route.request().method() !== "GET") return route.fallback();
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify([]),
+      });
+    });
+    await page.route("**/api/personas/review", async (route) => {
+      if (route.request().method() !== "GET") return route.fallback();
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify([]),
+      });
+    });
+
+    await page.goto("/teach/personas?view=personas&mode=create&step=edit");
+    const tablist = page.getByRole("tablist", { name: "저작 섹션" });
+    const overview = tablist.getByRole("tab", { name: "개요", exact: true });
+    const panel = page.getByRole("tabpanel");
+    await expect(tablist).toBeVisible();
+    await expect(tablist).toHaveAttribute("id", "persona-authoring-tabs");
+    await expect(panel).toHaveAttribute("id", "persona-authoring-tabs-panel");
+    await expect(tablist).not.toHaveClass(/vg-surface/);
+    await expectConnectedTabPanel(overview, panel);
+
+    await expectKeyboardSelection(
+      page,
+      "저작 섹션",
+      "개요",
+      "ArrowRight",
+      "임상",
+    );
+    await expectKeyboardSelection(page, "저작 섹션", "임상", "End", "프롬프트");
+    await expectKeyboardSelection(page, "저작 섹션", "프롬프트", "Home", "개요");
+  });
+});