@simplysm/solid 13.0.70 → 13.0.72

package/tests/components/feedback/print/Print.spec.tsx

@@ -2,7 +2,7 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect } from "vitest";
 import { Print } from "../../../../src/components/feedback/print/Print";
 
-describe("Print 컴포넌트", () => {
+describe("Print", () => {
   describe("basic rendering", () => {
     it("renders children", () => {
       const { getByText } = render(() => <Print>테스트 내용</Print>);
@@ -11,7 +11,7 @@ describe("Print 컴포넌트", () => {
   });
 
   describe("Print.Page", () => {
-    it("data-print-page 속성이 렌더링된다", () => {
+    it("renders with data-print-page attribute", () => {
       const { container } = render(() => (
         <Print>
           <Print.Page>페이지 1</Print.Page>
@@ -21,7 +21,7 @@ describe("Print 컴포넌트", () => {
       expect(page).toBeTruthy();
     });
 
-    it("여러 Print.Page가 각각 data-print-page를 가진다", () => {
+    it("each Print.Page has data-print-page attribute", () => {
       const { container } = render(() => (
         <Print>
           <Print.Page>페이지 1</Print.Page>
@@ -33,7 +33,7 @@ describe("Print 컴포넌트", () => {
       expect(pages.length).toBe(3);
     });
 
-    it("Print.Page children이 렌더링된다", () => {
+    it("renders Print.Page children", () => {
       const { getByText } = render(() => (
         <Print>
           <Print.Page>페이지 내용</Print.Page>

package/tests/components/form-control/Button.spec.tsx

@@ -2,23 +2,23 @@ import { render, fireEvent } from "@solidjs/testing-library";
 import { describe, it, expect, vi } from "vitest";
 import { Button } from "../../../src/components/form-control/Button";
 
-describe("Button 컴포넌트", () => {
+describe("Button component", () => {
   describe("basic rendering", () => {
-    it("children이 버튼 내부에 표시된다", () => {
+    it("renders children inside the button", () => {
       const { getByRole } = render(() => <Button>Click Me</Button>);
       const button = getByRole("button");
 
       expect(button.textContent).toBe("Click Me");
     });
 
-    it("type 속성 기본값은 button이다", () => {
+    it("defaults type to button", () => {
       const { getByRole } = render(() => <Button>Click</Button>);
       const button = getByRole("button");
 
       expect(button.getAttribute("type")).toBe("button");
     });
 
-    it("type 속성을 submit으로 오버라이드할 수 있다", () => {
+    it("overrides type with submit", () => {
       const { getByRole } = render(() => <Button type="submit">Submit</Button>);
       const button = getByRole("button");
 
@@ -26,8 +26,8 @@ describe("Button 컴포넌트", () => {
     });
   });
 
-  describe("theme 속성", () => {
-    it("theme prop에 따라 스타일이 달라진다", () => {
+  describe("theme prop", () => {
+    it("applies different styles per theme", () => {
       const { getByRole: getDefault } = render(() => <Button>Click</Button>);
       const { getByRole: getThemed } = render(() => <Button theme="danger">Click</Button>);
 
@@ -35,8 +35,8 @@ describe("Button 컴포넌트", () => {
     });
   });
 
-  describe("variant 속성", () => {
-    it("variant prop에 따라 스타일이 달라진다", () => {
+  describe("variant prop", () => {
+    it("applies different styles per variant", () => {
       const { getByRole: getOutline } = render(() => <Button>Click</Button>);
       const { getByRole: getSolid } = render(() => <Button variant="solid">Click</Button>);
       const { getByRole: getGhost } = render(() => <Button variant="ghost">Click</Button>);
@@ -51,8 +51,8 @@ describe("Button 컴포넌트", () => {
     });
   });
 
-  describe("size 속성", () => {
-    it("size prop에 따라 스타일이 달라진다", () => {
+  describe("size prop", () => {
+    it("applies different styles per size", () => {
       const { getByRole: getDefault } = render(() => <Button>Click</Button>);
       const { getByRole: getSm } = render(() => <Button size="sm">Click</Button>);
       const { getByRole: getLg } = render(() => <Button size="lg">Click</Button>);
@@ -67,8 +67,8 @@ describe("Button 컴포넌트", () => {
     });
   });
 
-  describe("inset 속성", () => {
-    it("inset prop에 따라 스타일이 달라진다", () => {
+  describe("inset prop", () => {
+    it("applies different styles when inset", () => {
       const { getByRole: getDefault } = render(() => <Button>Click</Button>);
       const { getByRole: getInset } = render(() => <Button inset>Click</Button>);
 
@@ -76,23 +76,23 @@ describe("Button 컴포넌트", () => {
     });
   });
 
-  describe("disabled 속성", () => {
-    it("disabled prop에 따라 스타일이 달라진다", () => {
+  describe("disabled prop", () => {
+    it("applies different styles when disabled", () => {
       const { getByRole: getDefault } = render(() => <Button>Click</Button>);
       const { getByRole: getDisabled } = render(() => <Button disabled>Click</Button>);
 
       expect(getDefault("button").className).not.toBe(getDisabled("button").className);
     });
 
-    it("disabled=true일 때 HTML disabled 속성이 설정된다", () => {
+    it("sets HTML disabled attribute when disabled=true", () => {
       const { getByRole } = render(() => <Button disabled>Click</Button>);
 
       expect(getByRole("button").hasAttribute("disabled")).toBe(true);
     });
   });
 
-  describe("이벤트 핸들링", () => {
-    it("onClick handler가 버튼 클릭 시 호출된다", () => {
+  describe("event handling", () => {
+    it("calls onClick handler on click", () => {
       const handleClick = vi.fn();
       const { getByRole } = render(() => <Button onClick={handleClick}>Click</Button>);
 
@@ -101,7 +101,7 @@ describe("Button 컴포넌트", () => {
       expect(handleClick).toHaveBeenCalledTimes(1);
     });
 
-    it("disabled 상태에서는 클릭이 차단된다", () => {
+    it("blocks click when disabled", () => {
       const { getByRole } = render(() => <Button disabled>Click</Button>);
 
       expect(getByRole("button").hasAttribute("disabled")).toBe(true);

package/tests/components/form-control/checkbox/Checkbox.spec.tsx

@@ -3,26 +3,26 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { Checkbox } from "../../../../src/components/form-control/checkbox/Checkbox";
 
-describe("Checkbox 컴포넌트", () => {
+describe("Checkbox component", () => {
   describe("basic rendering", () => {
-    it("checkbox role로 렌더링된다", () => {
+    it("renders with checkbox role", () => {
       const { getByRole } = render(() => <Checkbox />);
       expect(getByRole("checkbox")).toBeTruthy();
     });
 
-    it("children이 라벨로 표시된다", () => {
+    it("renders children as label", () => {
       const { getByText } = render(() => <Checkbox>동의합니다</Checkbox>);
       expect(getByText("동의합니다")).toBeTruthy();
     });
 
-    it("기본값은 unchecked이다", () => {
+    it("defaults to unchecked", () => {
       const { getByRole } = render(() => <Checkbox />);
       expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
     });
   });
 
   describe("click behavior", () => {
-    it("클릭하면 checked 상태가 토글된다", () => {
+    it("toggles checked state on click", () => {
       const { getByRole } = render(() => <Checkbox />);
       const checkbox = getByRole("checkbox");
 
@@ -33,7 +33,7 @@ describe("Checkbox 컴포넌트", () => {
       expect(checkbox.getAttribute("aria-checked")).toBe("false");
     });
 
-    it("disabled 상태에서는 클릭해도 변경되지 않는다", () => {
+    it("does not change when disabled", () => {
       const { getByRole } = render(() => <Checkbox disabled />);
       const checkbox = getByRole("checkbox");
 
@@ -42,8 +42,8 @@ describe("Checkbox 컴포넌트", () => {
     });
   });
 
-  describe("키보드 동작", () => {
-    it("Space 키로 토글된다", () => {
+  describe("keyboard behavior", () => {
+    it("toggles with Space key", () => {
       const { getByRole } = render(() => <Checkbox />);
       const checkbox = getByRole("checkbox");
 
@@ -55,13 +55,13 @@ describe("Checkbox 컴포넌트", () => {
     });
   });
 
-  describe("controlled 패턴", () => {
-    it("value prop이 checked 상태로 반영된다", () => {
+  describe("controlled pattern", () => {
+    it("reflects value prop as checked state", () => {
       const { getByRole } = render(() => <Checkbox value={true} />);
       expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("true");
     });
 
-    it("onValueChange가 클릭 시 호출된다", () => {
+    it("calls onValueChange on click", () => {
       const handleChange = vi.fn();
       const { getByRole } = render(() => <Checkbox value={false} onValueChange={handleChange} />);
 
@@ -69,7 +69,7 @@ describe("Checkbox 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith(true);
     });
 
-    it("외부 상태 변경 시 업데이트된다", () => {
+    it("updates when external state changes", () => {
       const [value, setValue] = createSignal(false);
       const { getByRole } = render(() => <Checkbox value={value()} onValueChange={setValue} />);
 
@@ -80,22 +80,22 @@ describe("Checkbox 컴포넌트", () => {
     });
   });
 
-  describe("스타일 변형", () => {
-    it("size prop에 따라 스타일이 달라진다", () => {
+  describe("style variants", () => {
+    it("applies different styles per size", () => {
       const { getByRole: getDefault } = render(() => <Checkbox />);
       const { getByRole: getSm } = render(() => <Checkbox size="sm" />);
 
       expect(getDefault("checkbox").className).not.toBe(getSm("checkbox").className);
     });
 
-    it("inset prop에 따라 스타일이 달라진다", () => {
+    it("applies different styles when inset", () => {
       const { getByRole: getDefault } = render(() => <Checkbox />);
       const { getByRole: getInset } = render(() => <Checkbox inset />);
 
       expect(getDefault("checkbox").className).not.toBe(getInset("checkbox").className);
     });
 
-    it("disabled 스타일이 적용된다", () => {
+    it("applies disabled style", () => {
       const { getByRole } = render(() => <Checkbox disabled />);
       expect(getByRole("checkbox").classList.contains("opacity-30")).toBe(true);
     });
@@ -110,25 +110,25 @@ describe("Checkbox 컴포넌트", () => {
   });
 
   describe("validation", () => {
-    it("required일 때 체크되지 않으면 에러 메시지가 설정된다", () => {
+    it("sets error message when required and unchecked", () => {
       const { container } = render(() => <Checkbox required value={false} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("This is a required selection");
     });
 
-    it("required일 때 체크되면 유효하다", () => {
+    it("is valid when required and checked", () => {
       const { container } = render(() => <Checkbox required value={true} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
-    it("validate 함수가 에러 메시지를 반환하면 설정된다", () => {
+    it("sets error message returned by validate function", () => {
       const { container } = render(() => <Checkbox value={true} validate={() => "커스텀 에러"} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("커스텀 에러");
     });
 
-    it("validate 함수가 undefined를 반환하면 유효하다", () => {
+    it("is valid when validate function returns undefined", () => {
       const { container } = render(() => <Checkbox value={true} validate={() => undefined} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);

package/tests/components/form-control/checkbox/CheckboxGroup.spec.tsx

@@ -3,9 +3,9 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { CheckboxGroup } from "../../../../src/components/form-control/checkbox/CheckboxGroup";
 
-describe("CheckboxGroup 컴포넌트", () => {
+describe("CheckboxGroup component", () => {
   describe("basic rendering", () => {
-    it("컨테이너가 렌더링된다", () => {
+    it("renders the container", () => {
       const { container } = render(() => (
         <CheckboxGroup>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -14,7 +14,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(container.querySelector("div")).toBeTruthy();
     });
 
-    it("아이템이 체크박스로 렌더링된다", () => {
+    it("renders items as checkboxes", () => {
       const { getAllByRole } = render(() => (
         <CheckboxGroup>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -25,8 +25,8 @@ describe("CheckboxGroup 컴포넌트", () => {
     });
   });
 
-  describe("controlled 패턴", () => {
-    it("value prop이 선택 상태로 반영된다", () => {
+  describe("controlled pattern", () => {
+    it("reflects value prop as selected state", () => {
       const { getAllByRole } = render(() => (
         <CheckboxGroup value={["a"]}>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -38,7 +38,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(checkboxes[1].getAttribute("aria-checked")).toBe("false");
     });
 
-    it("onValueChange가 토글 시 호출된다", () => {
+    it("calls onValueChange on toggle", () => {
       const handleChange = vi.fn();
       const { getAllByRole } = render(() => (
         <CheckboxGroup value={[]} onValueChange={handleChange}>
@@ -49,7 +49,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith(["a"]);
     });
 
-    it("외부 상태 변경 시 업데이트된다", () => {
+    it("updates when external state changes", () => {
       const [value, setValue] = createSignal<string[]>([]);
       const { getAllByRole } = render(() => (
         <CheckboxGroup value={value()} onValueChange={setValue}>
@@ -63,13 +63,13 @@ describe("CheckboxGroup 컴포넌트", () => {
   });
 
   describe("validation", () => {
-    // 그룹의 Invalid hidden input은 자식 Checkbox들의 hidden input들보다 뒤에 위치한다
+    // The group's hidden input is positioned after the children's hidden inputs
     const getGroupHiddenInput = (container: HTMLElement) => {
       const inputs = container.querySelectorAll("input[aria-hidden='true']");
       return inputs[inputs.length - 1] as HTMLInputElement;
     };
 
-    it("required일 때 선택 항목이 없으면 에러 메시지가 설정된다", () => {
+    it("sets error message when required and no item selected", () => {
       const { container } = render(() => (
         <CheckboxGroup required value={[]}>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -78,7 +78,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validationMessage).toBe("Please select an item");
     });
 
-    it("required일 때 선택 항목이 있으면 유효하다", () => {
+    it("is valid when required and item is selected", () => {
       const { container } = render(() => (
         <CheckboxGroup required value={["a"]}>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -87,7 +87,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validity.valid).toBe(true);
     });
 
-    it("validate 함수가 에러 메시지를 반환하면 설정된다", () => {
+    it("sets error message returned by validate function", () => {
       const { container } = render(() => (
         <CheckboxGroup value={["a"]} validate={() => "커스텀 에러"}>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
@@ -96,7 +96,7 @@ describe("CheckboxGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validationMessage).toBe("커스텀 에러");
     });
 
-    it("validate 함수가 undefined를 반환하면 유효하다", () => {
+    it("is valid when validate function returns undefined", () => {
       const { container } = render(() => (
         <CheckboxGroup value={["a"]} validate={() => undefined}>
           <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>

package/tests/components/form-control/checkbox/Radio.spec.tsx

@@ -3,26 +3,26 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { Radio } from "../../../../src/components/form-control/checkbox/Radio";
 
-describe("Radio 컴포넌트", () => {
+describe("Radio component", () => {
   describe("basic rendering", () => {
-    it("radio role로 렌더링된다", () => {
+    it("renders with radio role", () => {
       const { getByRole } = render(() => <Radio />);
       expect(getByRole("radio")).toBeTruthy();
     });
 
-    it("children이 라벨로 표시된다", () => {
+    it("renders children as label", () => {
       const { getByText } = render(() => <Radio>옵션 A</Radio>);
       expect(getByText("옵션 A")).toBeTruthy();
     });
 
-    it("기본값은 unchecked이다", () => {
+    it("defaults to unchecked", () => {
       const { getByRole } = render(() => <Radio />);
       expect(getByRole("radio").getAttribute("aria-checked")).toBe("false");
     });
   });
 
   describe("click behavior", () => {
-    it("클릭하면 선택된다", () => {
+    it("selects on click", () => {
       const { getByRole } = render(() => <Radio />);
       const radio = getByRole("radio");
 
@@ -30,7 +30,7 @@ describe("Radio 컴포넌트", () => {
       expect(radio.getAttribute("aria-checked")).toBe("true");
     });
 
-    it("이미 선택된 상태에서 다시 클릭해도 선택 해제되지 않는다", () => {
+    it("does not deselect when already selected", () => {
       const { getByRole } = render(() => <Radio value={true} />);
       const radio = getByRole("radio");
 
@@ -38,7 +38,7 @@ describe("Radio 컴포넌트", () => {
       expect(radio.getAttribute("aria-checked")).toBe("true");
     });
 
-    it("disabled 상태에서는 클릭해도 변경되지 않는다", () => {
+    it("does not change when disabled", () => {
       const { getByRole } = render(() => <Radio disabled />);
       const radio = getByRole("radio");
 
@@ -47,8 +47,8 @@ describe("Radio 컴포넌트", () => {
     });
   });
 
-  describe("키보드 동작", () => {
-    it("Space 키로 선택된다", () => {
+  describe("keyboard behavior", () => {
+    it("selects with Space key", () => {
       const { getByRole } = render(() => <Radio />);
       const radio = getByRole("radio");
 
@@ -57,13 +57,13 @@ describe("Radio 컴포넌트", () => {
     });
   });
 
-  describe("controlled 패턴", () => {
-    it("value prop이 checked 상태로 반영된다", () => {
+  describe("controlled pattern", () => {
+    it("reflects value prop as checked state", () => {
       const { getByRole } = render(() => <Radio value={true} />);
       expect(getByRole("radio").getAttribute("aria-checked")).toBe("true");
     });
 
-    it("onValueChange가 클릭 시 호출된다", () => {
+    it("calls onValueChange on click", () => {
       const handleChange = vi.fn();
       const { getByRole } = render(() => <Radio value={false} onValueChange={handleChange} />);
 
@@ -71,7 +71,7 @@ describe("Radio 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith(true);
     });
 
-    it("외부 상태 변경 시 업데이트된다", () => {
+    it("updates when external state changes", () => {
       const [value, setValue] = createSignal(false);
       const { getByRole } = render(() => <Radio value={value()} onValueChange={setValue} />);
 
@@ -82,21 +82,21 @@ describe("Radio 컴포넌트", () => {
     });
   });
 
-  describe("스타일 변형", () => {
-    it("인디케이터가 원형이다", () => {
+  describe("style variants", () => {
+    it("indicator is circular", () => {
       const { getByRole } = render(() => <Radio />);
       const indicator = getByRole("radio").querySelector("div") as HTMLElement;
       expect(indicator.classList.contains("rounded-full")).toBe(true);
     });
 
-    it("size prop에 따라 스타일이 달라진다", () => {
+    it("applies different styles per size", () => {
       const { getByRole: getDefault } = render(() => <Radio />);
       const { getByRole: getSm } = render(() => <Radio size="sm" />);
 
       expect(getDefault("radio").className).not.toBe(getSm("radio").className);
     });
 
-    it("disabled 스타일이 적용된다", () => {
+    it("applies disabled style", () => {
       const { getByRole } = render(() => <Radio disabled />);
       expect(getByRole("radio").classList.contains("opacity-30")).toBe(true);
     });
@@ -111,25 +111,25 @@ describe("Radio 컴포넌트", () => {
   });
 
   describe("validation", () => {
-    it("required일 때 선택되지 않으면 에러 메시지가 설정된다", () => {
+    it("sets error message when required and not selected", () => {
       const { container } = render(() => <Radio required value={false} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("This is a required selection");
     });
 
-    it("required일 때 선택되면 유효하다", () => {
+    it("is valid when required and selected", () => {
       const { container } = render(() => <Radio required value={true} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
-    it("validate 함수가 에러 메시지를 반환하면 설정된다", () => {
+    it("sets error message returned by validate function", () => {
       const { container } = render(() => <Radio value={true} validate={() => "커스텀 에러"} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("커스텀 에러");
     });
 
-    it("validate 함수가 undefined를 반환하면 유효하다", () => {
+    it("is valid when validate function returns undefined", () => {
       const { container } = render(() => <Radio value={true} validate={() => undefined} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);

package/tests/components/form-control/checkbox/RadioGroup.spec.tsx

@@ -3,9 +3,9 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { RadioGroup } from "../../../../src/components/form-control/checkbox/RadioGroup";
 
-describe("RadioGroup 컴포넌트", () => {
+describe("RadioGroup component", () => {
   describe("basic rendering", () => {
-    it("컨테이너가 렌더링된다", () => {
+    it("renders the container", () => {
       const { container } = render(() => (
         <RadioGroup>
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -14,7 +14,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(container.querySelector("div")).toBeTruthy();
     });
 
-    it("아이템이 radio로 렌더링된다", () => {
+    it("renders items as radios", () => {
       const { getAllByRole } = render(() => (
         <RadioGroup>
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -25,8 +25,8 @@ describe("RadioGroup 컴포넌트", () => {
     });
   });
 
-  describe("controlled 패턴", () => {
-    it("value prop이 선택 상태로 반영된다", () => {
+  describe("controlled pattern", () => {
+    it("reflects value prop as selected state", () => {
       const { getAllByRole } = render(() => (
         <RadioGroup value="a">
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -38,7 +38,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(radios[1].getAttribute("aria-checked")).toBe("false");
     });
 
-    it("onValueChange가 선택 시 호출된다", () => {
+    it("calls onValueChange on selection", () => {
       const handleChange = vi.fn();
       const { getAllByRole } = render(() => (
         <RadioGroup value={undefined} onValueChange={handleChange}>
@@ -49,7 +49,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith("a");
     });
 
-    it("외부 상태 변경 시 업데이트된다", () => {
+    it("updates when external state changes", () => {
       const [value, setValue] = createSignal<string | undefined>(undefined);
       const { getAllByRole } = render(() => (
         <RadioGroup value={value()} onValueChange={setValue}>
@@ -63,13 +63,13 @@ describe("RadioGroup 컴포넌트", () => {
   });
 
   describe("validation", () => {
-    // 그룹의 Invalid hidden input은 자식 Radio들의 hidden input들보다 뒤에 위치한다
+    // The group's hidden input is positioned after the children's hidden inputs
     const getGroupHiddenInput = (container: HTMLElement) => {
       const inputs = container.querySelectorAll("input[aria-hidden='true']");
       return inputs[inputs.length - 1] as HTMLInputElement;
     };
 
-    it("required일 때 선택 항목이 없으면 에러 메시지가 설정된다", () => {
+    it("sets error message when required and no item selected", () => {
       const { container } = render(() => (
         <RadioGroup required value={undefined}>
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -78,7 +78,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validationMessage).toBe("Please select an item");
     });
 
-    it("required일 때 선택 항목이 있으면 유효하다", () => {
+    it("is valid when required and item is selected", () => {
       const { container } = render(() => (
         <RadioGroup required value="a">
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -87,7 +87,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validity.valid).toBe(true);
     });
 
-    it("validate 함수가 에러 메시지를 반환하면 설정된다", () => {
+    it("sets error message returned by validate function", () => {
       const { container } = render(() => (
         <RadioGroup value="a" validate={() => "커스텀 에러"}>
           <RadioGroup.Item value="a">A</RadioGroup.Item>
@@ -96,7 +96,7 @@ describe("RadioGroup 컴포넌트", () => {
       expect(getGroupHiddenInput(container).validationMessage).toBe("커스텀 에러");
     });
 
-    it("validate 함수가 undefined를 반환하면 유효하다", () => {
+    it("is valid when validate function returns undefined", () => {
       const { container } = render(() => (
         <RadioGroup value="a" validate={() => undefined}>
           <RadioGroup.Item value="a">A</RadioGroup.Item>