레이아웃 시스템: 섹션/컬럼 및 컬럼 간 DnD 구현

tests/e2e/editor.spec.ts

@@ -253,3 +253,41 @@ test("버튼 블록을 추가하고 라벨과 링크를 수정할 수 있어야
   const updatedButton = canvas.getByRole("button", { name: "자세히 보기" });
   await expect(updatedButton).toBeVisible();
 });
+
+test("2컬럼 섹션에서 블록을 다른 컬럼 영역으로 드래그하면 컬럼이 변경되어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  // 섹션을 하나 추가하고 레이아웃을 2컬럼으로 변경한다.
+  await page.getByRole("button", { name: "섹션 블록 추가" }).click();
+
+  // 섹션을 선택한다 (캔버스 첫 블록).
+  const sectionBlock = canvas.getByTestId("editor-block").nth(0);
+  await sectionBlock.click();
+
+  const layoutSelect = page.getByRole("combobox", { name: "섹션 레이아웃" });
+  await layoutSelect.selectOption("2col");
+
+  // 왼쪽 컬럼에 텍스트 블록을 하나 추가한다.
+  await page.getByRole("button", { name: "텍스트 블록 추가" }).click();
+
+  const leftColumn = canvas.locator('[data-section-id][data-column-id]').nth(0);
+  const rightColumn = canvas.locator('[data-section-id][data-column-id]').nth(1);
+
+  // 왼쪽 컬럼 안에 텍스트 블록이 존재하는지 확인한다.
+  const leftBlocks = leftColumn.getByTestId("editor-block");
+  await expect(leftBlocks).toHaveCount(1);
+
+  // 왼쪽 컬럼의 첫 블록을 오른쪽 컬럼 droppable 영역으로 드래그한다.
+  const leftBlock = leftBlocks.nth(0);
+  const handle = leftBlock.getByRole("button", { name: "블록 드래그 핸들" });
+  await handle.dragTo(rightColumn);
+
+  // 드래그 이후, 오른쪽 컬럼 안에 블록이 존재해야 하고 왼쪽 컬럼은 비어 있어야 한다.
+  const rightBlocks = rightColumn.getByTestId("editor-block");
+  await expect(rightBlocks).toHaveCount(1);
+
+  // 왼쪽 컬럼에는 더 이상 블록이 없어야 한다.
+  await expect(leftColumn.getByTestId("editor-block")).toHaveCount(0);
+});

tests/unit/editorStore.spec.ts

@@ -77,4 +77,101 @@ describe("editorStore", () => {
     expect(updatedButtonProps.href).toBe("https://example.com");
     expect(selectedBlockId).toBe(updatedBlocks[0].id);
   });
+
+  it("섹션이 선택된 상태에서 텍스트 블록을 추가하면 해당 섹션의 첫 컬럼에 배치되어야 한다", () => {
+    const store = createEditorStore();
+
+    // 섹션 블록을 하나 추가하고 기본 1컬럼 레이아웃을 사용한다.
+    store.getState().addSectionBlock();
+
+    const { blocks: afterSection } = store.getState();
+    expect(afterSection).toHaveLength(1);
+    const sectionBlock = afterSection[0];
+    expect(sectionBlock.type).toBe("section");
+
+    const sectionProps = sectionBlock.props as any;
+    expect(Array.isArray(sectionProps.columns)).toBe(true);
+    expect(sectionProps.columns.length).toBeGreaterThan(0);
+
+    // 섹션을 선택한 후 텍스트 블록을 추가한다.
+    store.getState().selectBlock(sectionBlock.id);
+    store.getState().addTextBlock();
+
+    const { blocks: finalBlocks } = store.getState();
+    expect(finalBlocks).toHaveLength(2);
+
+    const textBlock = finalBlocks.find((b) => b.type === "text")!;
+
+    // 새 텍스트 블록의 sectionId/columnId가 선택된 섹션과 첫 컬럼을 가리켜야 한다.
+    expect((textBlock as any).sectionId).toBe(sectionBlock.id);
+    expect((textBlock as any).columnId).toBe(sectionProps.columns[0].id);
+  });
+
+  it("블록이 선택된 상태에서 새 텍스트 블록을 추가하면 동일한 섹션/컬럼에 배치되어야 한다", () => {
+    const store = createEditorStore();
+
+    // 섹션 + 텍스트 블록을 만든다.
+    store.getState().addSectionBlock();
+    const { blocks: afterSection } = store.getState();
+    const sectionBlock = afterSection[0];
+    const sectionProps = sectionBlock.props as any;
+
+    store.getState().selectBlock(sectionBlock.id);
+    store.getState().addTextBlock();
+
+    let { blocks } = store.getState();
+    const firstText = blocks.find((b) => b.type === "text")!;
+
+    // 첫 텍스트 블록의 위치를 기준으로 한다.
+    store.getState().selectBlock(firstText.id);
+    store.getState().addTextBlock();
+
+    blocks = store.getState().blocks;
+    const textBlocks = blocks.filter((b) => b.type === "text");
+    expect(textBlocks).toHaveLength(2);
+
+    const [t1, t2] = textBlocks as any[];
+
+    // 두 번째 텍스트 블록도 같은 섹션/컬럼에 있어야 한다.
+    expect(t1.sectionId).toBe(sectionBlock.id);
+    expect(t2.sectionId).toBe(sectionBlock.id);
+    expect(t1.columnId).toBe(sectionProps.columns[0].id);
+    expect(t2.columnId).toBe(sectionProps.columns[0].id);
+  });
+
+  it("moveBlock 호출 시 블록의 sectionId/columnId가 변경되어야 한다", () => {
+    const store = createEditorStore();
+
+    // 섹션 + 텍스트 블록 1개를 만든다.
+    store.getState().addSectionBlock();
+    const { blocks: afterSection } = store.getState();
+    const sectionBlock = afterSection[0];
+    const sectionProps = sectionBlock.props as any;
+
+    store.getState().selectBlock(sectionBlock.id);
+    store.getState().addTextBlock();
+
+    let { blocks } = store.getState();
+    const textBlock = blocks.find((b) => b.type === "text") as any;
+
+    // 초기 위치는 섹션의 첫 컬럼이어야 한다.
+    expect(textBlock.sectionId).toBe(sectionBlock.id);
+    expect(textBlock.columnId).toBe(sectionProps.columns[0].id);
+
+    // 섹션 레이아웃을 2컬럼으로 바꾸고 두 번째 컬럼으로 이동시킨다.
+    const updatedColumns = [
+      { id: `${sectionBlock.id}_col_1`, span: 6 },
+      { id: `${sectionBlock.id}_col_2`, span: 6 },
+    ];
+
+    store.getState().updateBlock(sectionBlock.id, { columns: updatedColumns } as any);
+
+    store.getState().moveBlock(textBlock.id, sectionBlock.id, updatedColumns[1].id);
+
+    blocks = store.getState().blocks;
+    const moved = blocks.find((b) => b.id === textBlock.id) as any;
+
+    expect(moved.sectionId).toBe(sectionBlock.id);
+    expect(moved.columnId).toBe(updatedColumns[1].id);
+  });
 });