yunchan/vignette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

모바일 메뉴와 주요 화면 UX 개선 및 시각 검수

Browse source
This commit is contained in:
Yun Chan 2026-09-12 17:57:59 +09:00
parent 89b5093ec7
commit e8b770e4d9
50 changed files with 3189 additions and 457 deletions
Download patch file Download diff file Expand all files Collapse all files

41
apps/web/e2e/uc-learner-home-dashboard.spec.ts
View file

@ -400,18 +400,19 @@ async function installFixtures(page: Page, options: FixtureOptions = {}) {
}
test.describe("uc learner home dashboard", () => {
// usecase: 평가가 아직 없는 학습자가 메트릭 카드에서 현황 수치와 빈-평가 문구를 읽는다
test("평가 전 학습자가 메트릭 카드에서 진행·리뷰·평가·라포 수치를 확인한다", async ({
// usecase: 평가가 아직 없는 학습자가 성장 지표에서 현황 수치와 빈-평가 문구를 읽는다
test("평가 전 학습자가 성장 지표에서 전체 회기·리뷰·평가·라포 수치를 확인한다", async ({
page,
}) => {
await installFixtures(page);
await page.goto("/learn");
await page.getByRole("tab", { name: "성장 지표" }).click();
const cards = page.locator(".lh-dashboard-status");
const cards = page.locator("#lh-panel-growth .lh-dashboard-status");
await expect(cards.getByRole("button")).toHaveCount(4);
const progressCard = cards.getByRole("button", { name: /진행 회기/ });
const progressCard = cards.getByRole("button", { name: /전체 회기/ });
await expect(progressCard).toContainText("2회");
await expect(progressCard).toContainText("1회 종료 · 1회 진행");
await expect(progressCard).toContainText("상담 완료 1회 · 진행 중 1회");
const reviewCard = cards.getByRole("button", { name: /리뷰 대기/ });
await expect(reviewCard).toContainText("0건");
await expect(reviewCard).toContainText("대기 중인 리뷰 없음");
@ -490,9 +491,10 @@ test.describe("uc learner home dashboard", () => {
test("리뷰 대기 메트릭 카드를 누르면 기록 화면으로 이동한다", async ({ page }) => {
await installFixtures(page);
await page.goto("/learn");
await page.getByRole("tab", { name: "성장 지표" }).click();
await page
.locator(".lh-dashboard-status")
.locator("#lh-panel-growth .lh-dashboard-status")
.getByRole("button", { name: /리뷰 대기/ })
.click();
await expect(page).toHaveURL(/\/learn\/history$/);
@ -584,8 +586,8 @@ test.describe("uc learner home dashboard", () => {
await expect(page).toHaveURL(new RegExp(`/learn/session/${ACT_ID}$`));
});
// usecase: 학습자가 내담자를 바꿔 선택한 뒤 '새 회기 시작'으로 새 세션 경로에 진입한다
test("다른 내담자를 선택하고 '새 회기 시작'을 누르면 해당 페르소나 세션 경로로 이동한다", async ({
// usecase: 학습자가 내담자를 바꿔 선택한 뒤 새 사례로 세션 시작 화면에 진입한다
test("다른 내담자를 선택하고 '완전히 새로 시작'을 누르면 새 사례 세션 경로로 이동한다", async ({
page,
}) => {
await installFixtures(page);
@ -597,8 +599,8 @@ test.describe("uc learner home dashboard", () => {
"aria-selected",
"true",
);
await page.getByRole("button", { name: "새 회기 시작" }).click();
await expect(page).toHaveURL(/\/learn\/session\/P2$/);
await page.getByRole("button", { name: "완전히 새로 시작" }).click();
await expect(page).toHaveURL(/\/learn\/session\/P2\?continuity=fresh$/);
});
// usecase: 학습자가 페르소나 카드에서 난이도 라벨과 주호소 설명을 읽고 비교한다
@ -689,9 +691,10 @@ test.describe("uc learner home dashboard", () => {
await expect(focus).toContainText("첫 회기 준비");
await expect(focus.getByRole("heading", { name: "성하늘" })).toBeVisible();
await expect(focus.locator(".lh-session-focus__status")).toHaveText("대기");
// 진행 회기 메트릭도 0회.
// 전체 회기 메트릭도 0회.
await page.getByRole("tab", { name: "성장 지표" }).click();
await expect(
page.locator(".lh-dashboard-status").getByRole("button", { name: /진행 회기/ }),
page.locator("#lh-panel-growth .lh-dashboard-status").getByRole("button", { name: /전체 회기/ }),
).toContainText("0회");
// 주 CTA가 '학습 대상 선택'으로 연습 화면에 진입한다.
const primaryAction = page.locator("[data-learner-primary-action]");
@ -750,11 +753,11 @@ test.describe("uc learner home dashboard", () => {
await expect(growthPanel).toContainText(
"첫 회기를 끝내면 라포 누적이 표시됩니다.",
);
await expect(growthPanel).toContainText("첫 회기 이후 표시");
await expect(growthPanel).toContainText("첫 회기 후 표시");
});
// usecase: 학습자가 키보드만으로(Tab 이동 → Enter) 새 회기를 시작한다
test("키보드 Tab 이동과 Enter만으로 새 회기를 시작할 수 있다", async ({
// usecase: 학습자가 키보드만으로(Tab 이동 → Enter) 새 사례 회기 시작 화면으로 이동한다
test("키보드 Tab 이동과 Enter만으로 새 사례 회기를 시작할 수 있다", async ({
page,
}) => {
await installFixtures(page);
@ -763,9 +766,9 @@ test.describe("uc learner home dashboard", () => {
const listbox = page.getByRole("listbox", { name: "연습 페르소나" });
const p1 = listbox.getByRole("option", { name: /P1/ });
await expect(p1).toHaveAttribute("aria-selected", "true");
// 선택된 페르소나 카드에서 시작해 Tab으로 '새 회기 시작' 버튼까지 이동한다.
// 선택된 페르소나 카드에서 시작해 Tab으로 '완전히 새로 시작' 버튼까지 이동한다.
await p1.focus();
const startButton = page.getByRole("button", { name: "새 회기 시작" });
const startButton = page.getByRole("button", { name: "완전히 새로 시작" });
let reached = false;
for (let i = 0; i < 25; i += 1) {
await page.keyboard.press("Tab");
@ -774,9 +777,9 @@ test.describe("uc learner home dashboard", () => {
break;
}
}
expect(reached, "Tab 이동으로 '새 회기 시작' 버튼에 도달해야 한다").toBe(true);
expect(reached, "Tab 이동으로 '완전히 새로 시작' 버튼에 도달해야 한다").toBe(true);
await page.keyboard.press("Enter");
await expect(page).toHaveURL(/\/learn\/session\/P1$/);
await expect(page).toHaveURL(/\/learn\/session\/P1\?continuity=fresh$/);
});
// usecase: 학습자가 대시보드 영역 탭을 화살표 키로 오간다