@simplysm/solid 13.0.70 → 13.0.72

package/tests/components/data/List.spec.tsx

@@ -4,9 +4,9 @@ import { createSignal } from "solid-js";
 import { IconCheck } from "@tabler/icons-solidjs";
 import { List } from "../../../src/components/data/list/List";
 
-describe("List 컴포넌트", () => {
+describe("List component", () => {
   describe("basic rendering", () => {
-    it("children이 List 내부에 표시된다", () => {
+    it("renders children inside List", () => {
       const { getByText } = render(() => (
         <List>
           <List.Item>Item 1</List.Item>
@@ -16,7 +16,7 @@ describe("List 컴포넌트", () => {
       expect(getByText("Item 1")).toBeTruthy();
     });
 
-    it("role=tree 속성이 적용된다", () => {
+    it("applies role=tree", () => {
       const { getByRole } = render(() => (
         <List>
           <List.Item>Item</List.Item>
@@ -26,7 +26,7 @@ describe("List 컴포넌트", () => {
       expect(getByRole("tree")).toBeTruthy();
     });
 
-    it("data-list 속성이 적용된다", () => {
+    it("applies data-list attribute", () => {
       const { container } = render(() => (
         <List>
           <List.Item>Item</List.Item>
@@ -37,8 +37,8 @@ describe("List 컴포넌트", () => {
     });
   });
 
-  describe("inset 속성", () => {
-    it("inset prop에 따라 스타일이 달라진다", () => {
+  describe("inset prop", () => {
+    it("applies different styles based on inset prop", () => {
       const { container: defaultContainer } = render(() => (
         <List>
           <List.Item>Item</List.Item>
@@ -57,8 +57,8 @@ describe("List 컴포넌트", () => {
     });
   });
 
-  describe("키보드 네비게이션", () => {
-    it("ArrowDown 키로 다음 항목으로 포커스 이동", () => {
+  describe("keyboard navigation", () => {
+    it("ArrowDown moves focus to next item", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item>Item 1</List.Item>
@@ -75,7 +75,7 @@ describe("List 컴포넌트", () => {
       expect(document.activeElement).toBe(items[1]);
     });
 
-    it("ArrowUp 키로 이전 항목으로 포커스 이동", () => {
+    it("ArrowUp moves focus to previous item", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item>Item 1</List.Item>
@@ -92,7 +92,7 @@ describe("List 컴포넌트", () => {
       expect(document.activeElement).toBe(items[0]);
     });
 
-    it("Home 키로 첫 번째 항목으로 포커스 이동", () => {
+    it("Home moves focus to first item", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item>Item 1</List.Item>
@@ -109,7 +109,7 @@ describe("List 컴포넌트", () => {
       expect(document.activeElement).toBe(items[0]);
     });
 
-    it("End 키로 마지막 항목으로 포커스 이동", () => {
+    it("End moves focus to last item", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item>Item 1</List.Item>
@@ -126,7 +126,7 @@ describe("List 컴포넌트", () => {
       expect(document.activeElement).toBe(items[2]);
     });
 
-    it("Space 키로 항목 토글", () => {
+    it("Space toggles item", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item>
@@ -148,7 +148,7 @@ describe("List 컴포넌트", () => {
       expect(items[0].getAttribute("aria-expanded")).toBe("true");
     });
 
-    it("Enter 키로 항목 토글", () => {
+    it("Enter toggles item", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item>
@@ -168,7 +168,7 @@ describe("List 컴포넌트", () => {
       expect(items[0].getAttribute("aria-expanded")).toBe("true");
     });
 
-    it("ArrowRight 키로 닫힌 항목 열기", () => {
+    it("ArrowRight opens a closed item", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item>
@@ -190,7 +190,7 @@ describe("List 컴포넌트", () => {
       expect(items[0].getAttribute("aria-expanded")).toBe("true");
     });
 
-    it("ArrowRight 키로 열린 항목에서 첫 자식으로 포커스 이동", () => {
+    it("ArrowRight moves focus to first child when item is open", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item open>
@@ -210,7 +210,7 @@ describe("List 컴포넌트", () => {
       expect(document.activeElement).toBe(items[1]);
     });
 
-    it("ArrowLeft 키로 열린 항목 닫기", () => {
+    it("ArrowLeft closes an open item", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item open>
@@ -232,7 +232,7 @@ describe("List 컴포넌트", () => {
       expect(items[0].getAttribute("aria-expanded")).toBe("false");
     });
 
-    it("ArrowLeft 키로 닫힌 항목에서 부모로 포커스 이동", () => {
+    it("ArrowLeft moves focus to parent from a closed item", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item open>
@@ -254,9 +254,9 @@ describe("List 컴포넌트", () => {
   });
 });
 
-describe("List.Item 컴포넌트", () => {
+describe("List.Item component", () => {
   describe("basic rendering", () => {
-    it("children이 List.Item 내부에 표시된다", () => {
+    it("renders children inside List.Item", () => {
       const { getByText } = render(() => (
         <List>
           <List.Item>Test Item</List.Item>
@@ -266,7 +266,7 @@ describe("List.Item 컴포넌트", () => {
       expect(getByText("Test Item")).toBeTruthy();
     });
 
-    it("role=treeitem 속성이 적용된다", () => {
+    it("applies role=treeitem", () => {
       const { getByRole } = render(() => (
         <List>
           <List.Item>Item</List.Item>
@@ -276,7 +276,7 @@ describe("List.Item 컴포넌트", () => {
       expect(getByRole("treeitem")).toBeTruthy();
     });
 
-    it("data-list-item 속성이 적용된다", () => {
+    it("applies data-list-item attribute", () => {
       const { container } = render(() => (
         <List>
           <List.Item>Item</List.Item>
@@ -287,8 +287,8 @@ describe("List.Item 컴포넌트", () => {
     });
   });
 
-  describe("중첩 리스트", () => {
-    it("List.Item.Children이 있을 때 클릭 시 collapse 토글", () => {
+  describe("nested list", () => {
+    it("toggles collapse on click when List.Item.Children is present", () => {
       const { getByRole } = render(() => (
         <List>
           <List.Item>
@@ -313,7 +313,7 @@ describe("List.Item 컴포넌트", () => {
       expect(item.getAttribute("aria-expanded")).toBe("false");
     });
 
-    it("List.Item.Children이 있을 때 chevron 아이콘이 표시된다", () => {
+    it("shows chevron icon when List.Item.Children is present", () => {
       const { container } = render(() => (
         <List>
           <List.Item>
@@ -329,7 +329,7 @@ describe("List.Item 컴포넌트", () => {
       expect(svg).toBeTruthy();
     });
 
-    it("List.Item.Children이 없을 때 chevron 아이콘이 숨겨진다", () => {
+    it("hides chevron icon when List.Item.Children is absent", () => {
       const { container } = render(() => (
         <List>
           <List.Item>Simple Item</List.Item>
@@ -341,7 +341,7 @@ describe("List.Item 컴포넌트", () => {
       expect(svg).toBeFalsy();
     });
 
-    it("aria-expanded가 없으면 List.Item.Children이 없는 것으로 간주", () => {
+    it("no aria-expanded means no List.Item.Children", () => {
       const { getByRole } = render(() => (
         <List>
           <List.Item>Simple Item</List.Item>
@@ -352,7 +352,7 @@ describe("List.Item 컴포넌트", () => {
       expect(item.hasAttribute("aria-expanded")).toBe(false);
     });
 
-    it("List.Item.Children 내부에 role=group이 적용된다", () => {
+    it("applies role=group inside List.Item.Children", () => {
       const { getByRole } = render(() => (
         <List>
           <List.Item open>
@@ -368,8 +368,8 @@ describe("List.Item 컴포넌트", () => {
     });
   });
 
-  describe("selected 상태", () => {
-    it("selected prop에 따라 스타일이 달라진다", () => {
+  describe("selected state", () => {
+    it("applies different styles based on selected prop", () => {
       const { container: defaultContainer } = render(() => (
         <List>
           <List.Item>Item</List.Item>
@@ -389,7 +389,7 @@ describe("List.Item 컴포넌트", () => {
       expect(defaultClass).not.toBe(selectedClass);
     });
 
-    it("aria-selected가 설정된다", () => {
+    it("sets aria-selected", () => {
       const { getByRole } = render(() => (
         <List>
           <List.Item selected>Selected Item</List.Item>
@@ -401,8 +401,8 @@ describe("List.Item 컴포넌트", () => {
     });
   });
 
-  describe("readonly 상태", () => {
-    it("readonly=true일 때 클릭해도 onClick이 호출되지 않음", () => {
+  describe("readonly state", () => {
+    it("does not call onClick when readonly=true", () => {
       const onClick = vi.fn();
       const { getByRole } = render(() => (
         <List>
@@ -418,7 +418,7 @@ describe("List.Item 컴포넌트", () => {
       expect(onClick).not.toHaveBeenCalled();
     });
 
-    it("readonly prop에 따라 스타일이 달라진다", () => {
+    it("applies different styles based on readonly prop", () => {
       const { container: defaultContainer } = render(() => (
         <List>
           <List.Item>Item</List.Item>
@@ -440,7 +440,7 @@ describe("List.Item 컴포넌트", () => {
   });
 
   describe("disabled state", () => {
-    it("disabled prop에 따라 스타일이 달라진다", () => {
+    it("applies different styles based on disabled prop", () => {
       const { container: defaultContainer } = render(() => (
         <List>
           <List.Item>Item</List.Item>
@@ -460,7 +460,7 @@ describe("List.Item 컴포넌트", () => {
       expect(defaultClass).not.toBe(disabledClass);
     });
 
-    it("disabled=true일 때 클릭 불가", () => {
+    it("not clickable when disabled=true", () => {
       const onClick = vi.fn();
       const { getByRole } = render(() => (
         <List>
@@ -476,7 +476,7 @@ describe("List.Item 컴포넌트", () => {
       expect(onClick).not.toHaveBeenCalled();
     });
 
-    it("disabled=true일 때 tabindex=-1이 적용된다", () => {
+    it("applies tabindex=-1 when disabled=true", () => {
       const { getByRole } = render(() => (
         <List>
           <List.Item disabled>Disabled Item</List.Item>
@@ -487,7 +487,7 @@ describe("List.Item 컴포넌트", () => {
       expect(item.getAttribute("tabindex")).toBe("-1");
     });
 
-    it("aria-disabled가 설정된다", () => {
+    it("sets aria-disabled", () => {
       const { getByRole } = render(() => (
         <List>
           <List.Item disabled>Disabled Item</List.Item>
@@ -500,7 +500,7 @@ describe("List.Item 컴포넌트", () => {
   });
 
   describe("selectedIcon", () => {
-    it("selectedIcon이 제공되고 List.Item.Children이 없을 때 아이콘이 표시된다", () => {
+    it("shows icon when selectedIcon is provided and no List.Item.Children", () => {
       const { container } = render(() => (
         <List>
           <List.Item selectedIcon={IconCheck}>Item</List.Item>
@@ -511,7 +511,7 @@ describe("List.Item 컴포넌트", () => {
       expect(svg).toBeTruthy();
     });
 
-    it("selectedIcon과 selected 상태에 따라 아이콘 스타일이 달라진다", () => {
+    it("applies different icon styles based on selectedIcon and selected state", () => {
       const { container: unselectedContainer } = render(() => (
         <List>
           <List.Item selectedIcon={IconCheck}>Item</List.Item>
@@ -531,7 +531,7 @@ describe("List.Item 컴포넌트", () => {
       expect(unselectedSvg?.className).not.toBe(selectedSvg?.className);
     });
 
-    it("selectedIcon이 제공되고 List.Item.Children이 있을 때 아이콘이 숨겨진다", () => {
+    it("hides selectedIcon when List.Item.Children is present", () => {
       const { container } = render(() => (
         <List>
           <List.Item selectedIcon={IconCheck}>
@@ -546,13 +546,13 @@ describe("List.Item 컴포넌트", () => {
       const button = container.querySelector("[data-list-item]") as HTMLElement;
       const svgs = button.querySelectorAll("svg");
 
-      // chevron만 있어야 함 (selectedIcon은 숨겨짐)
+      // only chevron should be present (selectedIcon is hidden)
       expect(svgs.length).toBe(1);
     });
   });
 
   describe("onClick", () => {
-    it("List.Item.Children이 없고 onClick이 제공될 때 클릭 시 호출된다", () => {
+    it("calls onClick on click when no List.Item.Children", () => {
       const onClick = vi.fn();
       const { getByRole } = render(() => (
         <List>
@@ -566,7 +566,7 @@ describe("List.Item 컴포넌트", () => {
       expect(onClick).toHaveBeenCalledTimes(1);
     });
 
-    it("List.Item.Children이 있을 때는 onClick 대신 collapse 토글이 발생한다", () => {
+    it("toggles collapse instead of onClick when List.Item.Children is present", () => {
       const onClick = vi.fn();
       const { getByRole } = render(() => (
         <List>
@@ -587,8 +587,8 @@ describe("List.Item 컴포넌트", () => {
     });
   });
 
-  describe("controlled 모드", () => {
-    it("open과 onOpenChange가 제공되면 controlled 모드로 동작", () => {
+  describe("controlled mode", () => {
+    it("operates in controlled mode when open and onOpenChange are provided", () => {
       const onOpenChange = vi.fn();
 
       const { getByRole } = render(() => (
@@ -606,11 +606,11 @@ describe("List.Item 컴포넌트", () => {
       fireEvent.click(item);
 
       expect(onOpenChange).toHaveBeenCalledWith(true);
-      // controlled 모드이므로 실제 상태는 변경되지 않음
+      // controlled mode: actual state does not change
       expect(item.getAttribute("aria-expanded")).toBe("false");
     });
 
-    it("open prop 변경 시 상태가 반영된다", () => {
+    it("reflects state change when open prop changes", () => {
       const [open, setOpen] = createSignal(false);
 
       const { getByRole } = render(() => (
@@ -635,7 +635,7 @@ describe("List.Item 컴포넌트", () => {
   });
 
   describe("aria-level", () => {
-    it("aria-level이 중첩 수준에 따라 설정된다", () => {
+    it("sets aria-level based on nesting depth", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item open>
@@ -661,7 +661,7 @@ describe("List.Item 컴포넌트", () => {
   });
 
   describe("Roving tabindex", () => {
-    it("포커스 시 현재 항목만 tabindex=0이 된다", () => {
+    it("only focused item gets tabindex=0", () => {
       const { getAllByRole } = render(() => (
         <List>
           <List.Item>Item 1</List.Item>
@@ -672,15 +672,15 @@ describe("List.Item 컴포넌트", () => {
 
       const items = getAllByRole("treeitem");
 
-      // 초기 상태: 모든 항목이 tabindex=0
+      // initial state: all items have tabindex=0
       items.forEach((item) => {
         expect(item.getAttribute("tabindex")).toBe("0");
       });
 
-      // 두 번째 항목 포커스
+      // focus second item
       fireEvent.focus(items[1]);
 
-      // 포커스된 항목만 tabindex=0, 나머지는 -1
+      // only focused item has tabindex=0, others are -1
       expect(items[0].getAttribute("tabindex")).toBe("-1");
       expect(items[1].getAttribute("tabindex")).toBe("0");
       expect(items[2].getAttribute("tabindex")).toBe("-1");

package/tests/components/data/Pagination.spec.tsx

@@ -3,21 +3,21 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { Pagination } from "../../../src/components/data/Pagination";
 
-describe("Pagination 컴포넌트", () => {
+describe("Pagination component", () => {
   describe("basic rendering", () => {
-    it("nav 요소로 렌더링된다", () => {
+    it("renders as nav element", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={5} />);
 
       expect(container.querySelector("nav")).toBeTruthy();
     });
 
-    it("data-pagination 속성이 적용된다", () => {
+    it("applies data-pagination attribute", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={5} />);
 
       expect(container.querySelector("[data-pagination]")).toBeTruthy();
     });
 
-    it("4개의 네비게이션 버튼과 페이지 버튼이 렌더링된다", () => {
+    it("renders 4 navigation buttons and page buttons", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={5} />);
 
       const buttons = container.querySelectorAll("[data-button]");
@@ -25,7 +25,7 @@ describe("Pagination 컴포넌트", () => {
       expect(buttons.length).toBe(9);
     });
 
-    it("페이지 번호가 1-based로 표시된다", () => {
+    it("displays page numbers as 1-based", () => {
       const { getByText } = render(() => <Pagination page={1} totalPageCount={3} />);
 
       expect(getByText("1")).toBeTruthy();
@@ -33,7 +33,7 @@ describe("Pagination 컴포넌트", () => {
       expect(getByText("3")).toBeTruthy();
     });
 
-    it("custom class가 nav 요소에 전달된다", () => {
+    it("passes custom class to nav element", () => {
       const { container } = render(() => (
         // eslint-disable-next-line tailwindcss/no-custom-classname
         <Pagination page={1} totalPageCount={5} class="my-custom" />
@@ -44,8 +44,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("displayPageCount 기본값", () => {
-    it("displayPageCount 기본값은 10이다", () => {
+  describe("displayPageCount default", () => {
+    it("default displayPageCount is 10", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={25} />);
 
       const buttons = container.querySelectorAll("[data-button]");
@@ -53,7 +53,7 @@ describe("Pagination 컴포넌트", () => {
       expect(buttons.length).toBe(14);
     });
 
-    it("displayPageCount=5로 설정하면 5개의 페이지 버튼이 표시된다", () => {
+    it("displays 5 page buttons when displayPageCount=5", () => {
       const { container } = render(() => (
         <Pagination page={1} totalPageCount={25} displayPageCount={5} />
       ));
@@ -64,12 +64,12 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("현재 페이지 표시", () => {
-    it("현재 페이지 버튼은 다른 variant를 가진다", () => {
+  describe("current page display", () => {
+    it("current page button has a different variant", () => {
       const { container } = render(() => <Pagination page={3} totalPageCount={5} />);
 
       const buttons = container.querySelectorAll("[data-button]");
-      // buttons[0]=<<, [1]=<, [2]=page1, [3]=page2, [4]=page3(현재), [5]=page4, [6]=page5, [7]=>, [8]=>>
+      // buttons[0]=<<, [1]=<, [2]=page1, [3]=page2, [4]=page3(current), [5]=page4, [6]=page5, [7]=>, [8]=>>
       const currentButton = buttons[4]; // page 3 (1-based page=3)
       const otherButton = buttons[2]; // page 1
 
@@ -77,8 +77,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("페이지 그룹 계산", () => {
-    it("page=1, displayPageCount=5일 때 페이지 1~5가 표시된다", () => {
+  describe("page group calculation", () => {
+    it("displays pages 1-5 when page=1, displayPageCount=5", () => {
       const { getByText, queryByText } = render(() => (
         <Pagination page={1} totalPageCount={20} displayPageCount={5} />
       ));
@@ -91,7 +91,7 @@ describe("Pagination 컴포넌트", () => {
       expect(queryByText("6")).toBeFalsy();
     });
 
-    it("page=6, displayPageCount=5일 때 페이지 6~10이 표시된다", () => {
+    it("displays pages 6-10 when page=6, displayPageCount=5", () => {
       const { getByText, queryByText } = render(() => (
         <Pagination page={6} totalPageCount={20} displayPageCount={5} />
       ));
@@ -105,7 +105,7 @@ describe("Pagination 컴포넌트", () => {
       expect(queryByText("11")).toBeFalsy();
     });
 
-    it("page=13, displayPageCount=10일 때 페이지 11~20이 표시된다", () => {
+    it("displays pages 11-20 when page=13, displayPageCount=10", () => {
       const { getByText, queryByText } = render(() => (
         <Pagination page={13} totalPageCount={25} displayPageCount={10} />
       ));
@@ -116,7 +116,7 @@ describe("Pagination 컴포넌트", () => {
       expect(queryByText("21")).toBeFalsy();
     });
 
-    it("마지막 그룹에서 totalPageCount보다 적은 페이지만 표시된다", () => {
+    it("displays only remaining pages in the last group below totalPageCount", () => {
       const { container, getByText, queryByText } = render(() => (
         <Pagination page={8} totalPageCount={8} displayPageCount={5} />
       ));
@@ -133,8 +133,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("네비게이션 버튼 비활성화", () => {
-    it("첫 번째 그룹일 때 first/prev 버튼이 비활성화된다", () => {
+  describe("navigation button disabled state", () => {
+    it("disables first/prev buttons in the first group", () => {
       const { container } = render(() => (
         <Pagination page={1} totalPageCount={20} displayPageCount={5} />
       ));
@@ -147,7 +147,7 @@ describe("Pagination 컴포넌트", () => {
       expect(prevBtn.hasAttribute("disabled")).toBe(true);
     });
 
-    it("마지막 그룹일 때 next/last 버튼이 비활성화된다", () => {
+    it("disables next/last buttons in the last group", () => {
       const { container } = render(() => (
         <Pagination page={19} totalPageCount={20} displayPageCount={5} />
       ));
@@ -160,7 +160,7 @@ describe("Pagination 컴포넌트", () => {
       expect(lastBtn.hasAttribute("disabled")).toBe(true);
     });
 
-    it("중간 그룹일 때 모든 네비게이션 버튼이 활성화된다", () => {
+    it("all navigation buttons are enabled in a middle group", () => {
       const { container } = render(() => (
         <Pagination page={6} totalPageCount={20} displayPageCount={5} />
       ));
@@ -178,8 +178,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("페이지 클릭", () => {
-    it("페이지 버튼 클릭 시 onPageChange가 호출된다", () => {
+  describe("page click", () => {
+    it("calls onPageChange when a page button is clicked", () => {
       const onPageChange = vi.fn();
       const { getByText } = render(() => (
         <Pagination page={1} totalPageCount={5} onPageChange={onPageChange} />
@@ -190,7 +190,7 @@ describe("Pagination 컴포넌트", () => {
       expect(onPageChange).toHaveBeenCalledWith(3); // 1-based
     });
 
-    it("현재 페이지 클릭 시에도 onPageChange가 호출된다", () => {
+    it("calls onPageChange even when clicking the current page", () => {
       const onPageChange = vi.fn();
       const { getByText } = render(() => (
         <Pagination page={1} totalPageCount={5} onPageChange={onPageChange} />
@@ -202,8 +202,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("first 버튼 (<<)", () => {
-    it("first 버튼 클릭 시 page 1으로 이동한다", () => {
+  describe("first button (<<)", () => {
+    it("navigates to page 1 when first button is clicked", () => {
       const onPageChange = vi.fn();
       const { container } = render(() => (
         <Pagination
@@ -221,8 +221,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("last 버튼 (>>)", () => {
-    it("last 버튼 클릭 시 마지막 페이지로 이동한다", () => {
+  describe("last button (>>)", () => {
+    it("navigates to last page when last button is clicked", () => {
       const onPageChange = vi.fn();
       const { container } = render(() => (
         <Pagination page={1} totalPageCount={20} displayPageCount={5} onPageChange={onPageChange} />
@@ -235,8 +235,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("prev 그룹 버튼 (<)", () => {
-    it("prev 버튼 클릭 시 이전 그룹의 마지막 페이지로 이동한다", () => {
+  describe("prev group button (<)", () => {
+    it("navigates to last page of previous group when prev button is clicked", () => {
       const onPageChange = vi.fn();
       const { container } = render(() => (
         <Pagination page={8} totalPageCount={20} displayPageCount={5} onPageChange={onPageChange} />
@@ -251,8 +251,8 @@ describe("Pagination 컴포넌트", () => {
     });
   });
 
-  describe("next 그룹 버튼 (>)", () => {
-    it("next 버튼 클릭 시 다음 그룹의 첫 페이지로 이동한다", () => {
+  describe("next group button (>)", () => {
+    it("navigates to first page of next group when next button is clicked", () => {
       const onPageChange = vi.fn();
       const { container } = render(() => (
         <Pagination page={4} totalPageCount={20} displayPageCount={5} onPageChange={onPageChange} />
@@ -268,7 +268,7 @@ describe("Pagination 컴포넌트", () => {
   });
 
   describe("size prop", () => {
-    it("size prop이 전달되면 스타일이 달라진다", () => {
+    it("applies different styles when size prop is provided", () => {
       const { container: defaultContainer } = render(() => (
         <Pagination page={1} totalPageCount={5} />
       ));
@@ -283,34 +283,34 @@ describe("Pagination 컴포넌트", () => {
       const smNav = smContainer.querySelector("nav");
       const lgNav = lgContainer.querySelector("nav");
 
-      // sm과 lg는 default와 다른 클래스를 가져야 한다
+      // sm and lg should have different classes from default
       expect(smNav?.className).not.toBe(defaultNav?.className);
       expect(lgNav?.className).not.toBe(defaultNav?.className);
     });
   });
 
-  describe("반응형 동작", () => {
-    it("page가 시그널로 변경되면 UI가 업데이트된다", () => {
+  describe("reactive behavior", () => {
+    it("updates UI when page signal changes", () => {
       const [page, setPage] = createSignal(1);
 
       const { container, getByText } = render(() => (
         <Pagination page={page()} totalPageCount={20} displayPageCount={5} onPageChange={setPage} />
       ));
 
-      // 초기 상태: 페이지 1~5 표시
+      // initial state: pages 1-5 are displayed
       expect(getByText("1")).toBeTruthy();
 
-      // next 그룹으로 이동 (> 클릭 → page 6)
+      // navigate to next group (> click → page 6)
       const buttons = container.querySelectorAll("[data-button]");
-      fireEvent.click(buttons[buttons.length - 2]); // > 클릭 → page 6
+      fireEvent.click(buttons[buttons.length - 2]); // > click → page 6
 
-      // 페이지가 변경되면 6~10 그룹이 표시되어야 한다
+      // after page change, group 6-10 should be displayed
       expect(getByText("6")).toBeTruthy();
     });
   });
 
-  describe("엣지 케이스", () => {
-    it("totalPageCount=1일 때 네비게이션 버튼이 모두 비활성화된다", () => {
+  describe("edge cases", () => {
+    it("all navigation buttons are disabled when totalPageCount=1", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={1} />);
 
       const buttons = container.querySelectorAll("[data-button]");
@@ -325,7 +325,7 @@ describe("Pagination 컴포넌트", () => {
       expect(lastBtn.hasAttribute("disabled")).toBe(true);
     });
 
-    it("totalPageCount=0일 때 페이지 버튼이 표시되지 않는다", () => {
+    it("no page buttons displayed when totalPageCount=0", () => {
       const { container } = render(() => <Pagination page={1} totalPageCount={0} />);
 
       const buttons = container.querySelectorAll("[data-button]");