i18n 적용

tests/unit/ProjectPropertiesPanel.spec.tsx

@@ -7,7 +7,7 @@ let mockState: { projectConfig: ProjectConfig; updateProjectConfig: ReturnType<t
 
 beforeEach(() => {
   const baseConfig: ProjectConfig = {
-    title: "프로젝트",
+    title: "Project",
     slug: "project",
     canvasPreset: "full",
     canvasWidthPx: 1024,
@@ -37,7 +37,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비 프리셋을 변경하면 canvasPreset/canvasWidthPx 가 업데이트되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement;
+    const select = screen.getByLabelText("Canvas width 프리셋") as HTMLSelectElement;
 
     fireEvent.change(select, { target: { value: "mobile" } });
 
@@ -47,7 +47,7 @@ describe("ProjectPropertiesPanel", () => {
   it("태블릿 프리셋을 선택하면 canvasPreset=tablet 과 canvasWidthPx=768 로 업데이트되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement;
+    const select = screen.getByLabelText("Canvas width 프리셋") as HTMLSelectElement;
 
     fireEvent.change(select, { target: { value: "tablet" } });
 
@@ -57,7 +57,7 @@ describe("ProjectPropertiesPanel", () => {
   it("데스크톱 프리셋을 선택하면 canvasPreset=desktop 과 canvasWidthPx=1200 으로 업데이트되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const select = screen.getByLabelText("캔버스 너비 프리셋") as HTMLSelectElement;
+    const select = screen.getByLabelText("Canvas width 프리셋") as HTMLSelectElement;
 
     fireEvent.change(select, { target: { value: "desktop" } });
 
@@ -67,7 +67,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 390 으로 입력하면 mobile 프리셋으로 동기화되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "390" } });
 
@@ -77,7 +77,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 768 로 입력하면 tablet 프리셋으로 동기화되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "768" } });
 
@@ -87,7 +87,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 1200 으로 입력하면 desktop 프리셋으로 동기화되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "1200" } });
 
@@ -97,7 +97,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 너비를 커스텀 값으로 입력하면 canvasPreset=custom 과 함께 canvasWidthPx 가 설정되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("캔버스 너비 커스텀 (px)") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas width 커스텀 (px)") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "1000" } });
 
@@ -107,7 +107,7 @@ describe("ProjectPropertiesPanel", () => {
   it("캔버스 배경색 HEX 입력을 변경하면 canvasBgColorHex 가 업데이트되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("캔버스 배경색 HEX") as HTMLInputElement;
+    const input = screen.getByLabelText("Canvas background HEX") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "#123456" } });
 
@@ -117,35 +117,35 @@ describe("ProjectPropertiesPanel", () => {
   it("페이지 배경색 HEX 입력을 변경하면 bodyBgColorHex 가 업데이트되어야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("페이지 배경색 HEX") as HTMLInputElement;
+    const input = screen.getByLabelText("Page background HEX") as HTMLInputElement;
 
     fireEvent.change(input, { target: { value: "#654321" } });
 
     expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ bodyBgColorHex: "#654321" });
   });
 
-	it("캔버스 배경색 팔레트에서 \"없음\" 을 선택하면 canvasBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
+	it("캔버스 배경색 팔레트에서 \"None\" 을 선택하면 canvasBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
 		render(<ProjectPropertiesPanel />);
 
 		// 첫 번째 ColorPickerField(캔버스 배경색)의 팔레트 버튼을 연다.
-		const paletteButtons = screen.getAllByText("색상 팔레트");
+		const paletteButtons = screen.getAllByText("Color palette");
 		fireEvent.click(paletteButtons[0].closest("button") as HTMLButtonElement);
 
-		// 팔레트에서 "없음" 항목을 선택한다.
-		const noneButton = screen.getByText("없음");
+		// 팔레트에서 "None" 항목을 선택한다.
+		const noneButton = screen.getByText("None");
 		fireEvent.click(noneButton);
 
 		expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ canvasBgColorHex: "" });
 	});
 
-	it("페이지 배경색 팔레트에서 \"없음\" 을 선택하면 bodyBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
+	it("페이지 배경색 팔레트에서 \"None\" 을 선택하면 bodyBgColorHex 가 빈 문자열로 업데이트되어야 한다", () => {
 		render(<ProjectPropertiesPanel />);
 	
-		// 두 번째 ColorPickerField(페이지 배경색)의 팔레트 버튼은 기본 선택 팔레트 라벨("어두운 텍스트")를 기준으로 찾는다.
-		const darkLabel = screen.getByText("어두운 텍스트");
+		// 두 번째 ColorPickerField(페이지 배경색)의 팔레트 버튼은 기본 선택 팔레트 라벨("Dark text")를 기준으로 찾는다.
+		const darkLabel = screen.getByText("Dark text");
 		fireEvent.click(darkLabel.closest("button") as HTMLButtonElement);
 
-		const noneButton = screen.getByText("없음");
+		const noneButton = screen.getByText("None");
 		fireEvent.click(noneButton);
 
 		expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ bodyBgColorHex: "" });
@@ -154,7 +154,7 @@ describe("ProjectPropertiesPanel", () => {
   it("프로젝트 제목 입력은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
     render(<ProjectPropertiesPanel />);
 
-    const input = screen.getByLabelText("프로젝트 제목") as HTMLInputElement;
+    const input = screen.getByLabelText("Project title") as HTMLInputElement;
     const className = input.getAttribute("class") ?? "";
 
     // 라이트 모드: 흰 배경 + 어두운 텍스트