fix: 편집과 미리보기를 한 화면에서 보고, 저장·게시를 아래에 고정한다
편집기는 탭이었다. 고친 것이 어떻게 보이는지 확인하려면 편집하던 자리를 화면에서 치워야 했고, 돌아오면 스크롤 위치도 잃었다. 두 패널을 나란히 두면 그 왕복이 통째로 없어진다. 작업 상태와 저장·게시는 오른쪽 세로 rail 이었다. 그 자리는 편집기와 미리보기가 함께 쓸 가로 폭을 가져갔고, 편집 칸이 길어질수록 rail 은 위에 붙은 채 본문만 멀어졌다. 화면 아래에 고정하면 폭을 돌려주면서 스크롤 위치와 무관하게 손이 닿는다. 탭을 없앴으므로 각 패널이 스스로 이름을 가져야 한다. `aria-labelledby` 로 제목을 가리켜 landmark 로 만든다 — 탭 목록이 하던 "여기는 편집, 저기는 미리보기" 안내를 대신한다. `aside` 와 「작업 상태」라는 이름은 그대로 둔다. 자리가 바뀐 것이지 이 묶음이 무엇인지가 바뀐 것은 아니다. 미리보기가 늘 떠 있게 되면서 Picker 테스트의 단언도 함께 고쳤다. 「Picker 가 좁아졌는가」를 화면 전체에 묻고 있었는데, 이제는 미리보기 쪽의 같은 Asset 까지 세게 된다. 그 김에 `.studio-asset-panel` 의 `aria-labelledby` 가 role 없는 div 에서 아무 이름도 만들지 못하던 것도 `role="group"` 으로 실효화했다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0189NzCryfeqDzS81EWidnBx
This commit is contained in:
co-authored by
Claude Opus 5
parent
b3119952d5
commit
60c8c82097
@@ -114,20 +114,17 @@ describe("TechLog Studio document editor", () => {
|
||||
]);
|
||||
expect(within(rail).queryAllByRole("link")).toHaveLength(0);
|
||||
|
||||
const editTab = screen.getByRole("tab", { name: "편집" });
|
||||
const previewTab = screen.getByRole("tab", { name: "즉시 미리보기" });
|
||||
editTab.focus();
|
||||
await user.keyboard("{ArrowRight}");
|
||||
expect(previewTab).toHaveFocus();
|
||||
expect(previewTab).toHaveAttribute("aria-selected", "true");
|
||||
// 편집과 미리보기는 한 화면에 함께 있다. 탭이었을 때는 고친 결과를 보려면 편집하던 자리를
|
||||
// 화면에서 치워야 했고, 돌아오면 스크롤 위치도 잃었다 — 그 왕복이 없어야 한다는 것이
|
||||
// 이 화면의 요구다. 아무것도 누르지 않은 채로 둘 다 보이는지 묻는다.
|
||||
expect(screen.getByRole("region", { name: "문서 편집" })).toBeVisible();
|
||||
expect(
|
||||
within(screen.getByRole("tabpanel", { name: "즉시 미리보기" })).getByRole(
|
||||
within(screen.getByRole("region", { name: "즉시 미리보기" })).getByRole(
|
||||
"heading",
|
||||
{ level: 1, name: "편집한 Redis 경계" },
|
||||
),
|
||||
).toBeVisible();
|
||||
await user.keyboard("{Home}");
|
||||
expect(editTab).toHaveFocus();
|
||||
expect(screen.queryByRole("tab", { name: "즉시 미리보기" })).toBeNull();
|
||||
expect(screen.getByLabelText("제목")).toHaveValue("편집한 Redis 경계");
|
||||
expect(calls).toEqual({ save: 0, validate: 0, preview: 0, publish: 0 });
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user