TDD,E2E 개선, 미적용 스타일 개선

tests/e2e/editor.spec.ts

@@ -982,7 +982,8 @@ test("폼 블록을 선택하면 우측 속성 패널에서 폼 필드/버튼
 
   // 이 그룹 안에 최소 2개의 체크박스(입력/셀렉트)가 있어야 한다.
   const fieldCheckboxes = fieldMappingGroup.getByRole("checkbox");
-  await expect(fieldCheckboxes).toHaveCount(2);
+  const checkboxCount = await fieldCheckboxes.count();
+  expect(checkboxCount).toBeGreaterThanOrEqual(2);
 
   // 첫 번째 필드 체크박스를 클릭하면 체크 상태가 되어야 한다.
   await fieldCheckboxes.nth(0).check();
@@ -1016,16 +1017,15 @@ test("폼 입력 블록의 라벨/전송 키/필수 여부를 우측 패널에
   // 우측 속성 패널에 폼 입력 필드 설정 섹션이 보여야 한다.
   const labelInput = page.getByRole("textbox", { name: "필드 라벨" });
   const nameInput = page.getByRole("textbox", { name: "전송 키" });
-  const requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
+  const requiredHint = page.getByText("필수 여부는 폼 컨트롤러에서 설정합니다.");
 
   await expect(labelInput).toBeVisible();
   await expect(nameInput).toBeVisible();
-  await expect(requiredCheckbox).toBeVisible();
+  await expect(requiredHint).toBeVisible();
 
   // 라벨과 전송 키를 수정하고, 필수 여부를 토글할 수 있어야 한다.
   await labelInput.fill("이메일 주소");
   await nameInput.fill("email_address");
-  await requiredCheckbox.check();
 });
 
 test("폼 셀렉트/라디오/체크박스 블록도 우측 패널에서 기본 필드 속성을 편집할 수 있어야 한다", async ({ page }) => {
@@ -1041,15 +1041,14 @@ test("폼 셀렉트/라디오/체크박스 블록도 우측 패널에서 기본
 
   let labelInput = page.getByRole("textbox", { name: "필드 라벨" });
   let nameInput = page.getByRole("textbox", { name: "전송 키" });
-  let requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
+  let requiredHint = page.getByText("필수 여부는 폼 컨트롤러에서 설정합니다.");
 
   await expect(labelInput).toBeVisible();
   await expect(nameInput).toBeVisible();
-  await expect(requiredCheckbox).toBeVisible();
+  await expect(requiredHint).toBeVisible();
 
   await labelInput.fill("셀렉트 라벨");
   await nameInput.fill("select_field");
-  await requiredCheckbox.check();
 
   // 폼 라디오 블록
   await page.getByRole("button", { name: "단일 선택(Radio)" }).click();
@@ -1059,11 +1058,12 @@ test("폼 셀렉트/라디오/체크박스 블록도 우측 패널에서 기본
 
   labelInput = page.getByRole("textbox", { name: "그룹 타이틀" });
   nameInput = page.getByRole("textbox", { name: "전송 키" });
-  requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
+  requiredHint = page.getByText("필수 여부는 폼 컨트롤러에서 설정합니다.");
+
+  await expect(requiredHint).toBeVisible();
 
   await labelInput.fill("라디오 라벨");
   await nameInput.fill("radio_field");
-  await requiredCheckbox.check();
 
   // 라디오 그룹 타이틀 텍스트 필드는 그대로 편집 가능해야 한다.
 
@@ -1075,11 +1075,12 @@ test("폼 셀렉트/라디오/체크박스 블록도 우측 패널에서 기본
 
   labelInput = page.getByRole("textbox", { name: "그룹 타이틀" });
   nameInput = page.getByRole("textbox", { name: "전송 키" });
-  requiredCheckbox = page.getByRole("checkbox", { name: "필수 필드" });
+  requiredHint = page.getByText("필수 여부는 폼 컨트롤러에서 설정합니다.");
+
+  await expect(requiredHint).toBeVisible();
 
   await labelInput.fill("체크박스 라벨");
   await nameInput.fill("checkbox_field");
-  await requiredCheckbox.check();
 
   // 체크박스 그룹 타이틀 텍스트 필드도 동일하게 동작해야 한다.
 });