에디터 인라인/속성 패널 리팩터링 및 폼 전송 기본 기능 추가

tests/unit/PropertyControls.spec.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { PropertySliderField } from "@/features/editor/components/PropertySliderField";
+import { ColorPickerField } from "@/features/editor/components/ColorPickerField";
+
+// 슬라이더 필드가 라벨과 슬라이더, 입력 박스를 렌더링하고 onChange를 호출하는지 테스트
+
+describe("PropertySliderField", () => {
+  it("라벨과 슬라이더, 텍스트 입력을 렌더링한다", () => {
+    const handleChange = vi.fn();
+
+    render(
+      <PropertySliderField
+        label="글자 크기"
+        ariaLabelSlider="글자 크기 슬라이더"
+        ariaLabelInput="글자 크기 커스텀"
+        value={16}
+        min={10}
+        max={72}
+        step={1}
+        onChange={handleChange}
+      />,
+    );
+
+    expect(screen.getByText("글자 크기")).toBeInTheDocument();
+    expect(screen.getByLabelText("글자 크기 슬라이더")).toBeInTheDocument();
+    expect(screen.getByLabelText("글자 크기 커스텀")).toBeInTheDocument();
+  });
+
+  it("슬라이더 변경 시 onChange가 호출된다", () => {
+    const handleChange = vi.fn();
+
+    render(
+      <PropertySliderField
+        label="줄 간격"
+        ariaLabelSlider="줄 간격 슬라이더"
+        ariaLabelInput="줄 간격 커스텀"
+        value={1.5}
+        min={0.5}
+        max={3}
+        step={0.1}
+        onChange={handleChange}
+      />,
+    );
+
+    const slider = screen.getByLabelText("줄 간격 슬라이더") as HTMLInputElement;
+    fireEvent.change(slider, { target: { value: "2" } });
+
+    expect(handleChange).toHaveBeenCalledWith(2);
+  });
+});
+
+// 컬러 피커 필드가 컬러 인풋과 텍스트 입력, 팔레트 버튼을 렌더링하고 상호작용 되는지 테스트
+
+describe("ColorPickerField", () => {
+  it("HEX 인풋과 컬러 인풋을 렌더링한다", () => {
+    const handleChange = vi.fn();
+
+    render(
+      <ColorPickerField
+        label="텍스트 색상"
+        ariaLabelColorInput="텍스트 색상 피커"
+        ariaLabelHexInput="텍스트 색상 HEX"
+        value="#ffffff"
+        onChange={handleChange}
+        palette={[{ id: "default", label: "기본", color: "#e5e7eb" }]}
+      />,
+    );
+
+    expect(screen.getByText("텍스트 색상")).toBeInTheDocument();
+    expect(screen.getByLabelText("텍스트 색상 피커")).toBeInTheDocument();
+    expect(screen.getByLabelText("텍스트 색상 HEX")).toBeInTheDocument();
+  });
+
+  it("컬러 인풋 변경 시 onChange가 호출된다", () => {
+    const handleChange = vi.fn();
+
+    render(
+      <ColorPickerField
+        label="텍스트 색상"
+        ariaLabelColorInput="텍스트 색상 피커"
+        ariaLabelHexInput="텍스트 색상 HEX"
+        value="#ffffff"
+        onChange={handleChange}
+        palette={[{ id: "default", label: "기본", color: "#e5e7eb" }]}
+      />,
+    );
+
+    const colorInput = screen.getByLabelText("텍스트 색상 피커") as HTMLInputElement;
+    fireEvent.change(colorInput, { target: { value: "#000000" } });
+
+    expect(handleChange).toHaveBeenCalledWith("#000000");
+  });
+});

tests/unit/editorStore.spec.ts

@@ -25,6 +25,27 @@ describe("editorStore", () => {
     expect(selectedBlockId).toBe(blocks[0].id);
   });
 
+  it("텍스트 블록에 글자 간격(letterSpacingCustom)을 em 단위로 설정할 수 있어야 한다", () => {
+    const store = createEditorStore();
+
+    store.getState().addTextBlock();
+
+    const { blocks } = store.getState();
+    const textBlock = blocks[0];
+    const textProps = textBlock.props as TextBlockProps;
+
+    expect(textProps.letterSpacingCustom).toBeUndefined();
+
+    store.getState().updateBlock(textBlock.id, {
+      letterSpacingCustom: "0.05em",
+    } as any);
+
+    const { blocks: updatedBlocks } = store.getState();
+    const updatedTextProps = updatedBlocks[0].props as TextBlockProps;
+
+    expect(updatedTextProps.letterSpacingCustom).toBe("0.05em");
+  });
+
   it("구분선 블록을 추가하면 기본 align/thickness 와 함께 추가되고 선택되어야 한다", () => {
     const store = createEditorStore();