@leviosa-ai/detail-page-editor 0.1.0

package/lib/detail-page/table/defaults.ts

@@ -0,0 +1,344 @@
+/**
+ * 표 기본값과 프리셋.
+ *
+ * **프리셋은 브랜드 상세페이지 실물에서 뽑았다.** 범용 표 라이브러리 기본값(굵은 격자·
+ * 회색 머리글)은 상세페이지에 얹는 순간 "AI티"가 난다. 근거가 되는 마크업은
+ * `docs/detail-page-table-element-plan.md` §0.2에 파일·줄 번호로 적어 뒀다.
+ *
+ * 구조(첫 칸 190px 고정, 행 구분선, 위 굵은 선)는 브랜드 값을 그대로 쓰고, **색은 중립
+ * 먹빛**으로 둔다. 브랜드 색을 그대로 구우면 다른 문서에 넣었을 때 혼자 튄다 — 색은
+ * 인스펙터에서 문서 팔레트에 맞춘다.
+ */
+
+import type { CellAlign, TableSpec, TableStyle } from "./types";
+
+/** 문서에서 폰트를 못 고를 때의 마지막 기본값. */
+export const FALLBACK_TABLE_FONT = "Pretendard";
+
+const INK = "#1F2124";
+const BODY = "#3C4043";
+const LINE = "#E3E5E8";
+const LINE_SOFT = "#EFF1F3";
+const CELL = "#F5F6F8";
+
+/**
+ * 브랜드 두 곳이 똑같이 쓰는 골격.
+ *
+ * 첫 칸 190px · 글자 18px · 좌우 여백 22px · 상하 여백 20px.
+ */
+export const DEFAULT_TABLE_STYLE: TableStyle = {
+  fontFamily: FALLBACK_TABLE_FONT,
+  fontSize: 18,
+  color: BODY,
+  padX: 22,
+  padY: 20,
+
+  firstWidth: 190,
+  columnWidths: null,
+  firstFill: null,
+  firstAlign: "left",
+  firstColor: INK,
+  firstWeight: 700,
+  firstFontFamily: null,
+  firstSize: null,
+
+  columnRule: null,
+  rowRule: { color: LINE_SOFT, width: 1 },
+  topRule: { color: INK, width: 1.5 },
+  outerBorder: null,
+
+  bodyFill: null,
+  zebraFill: LINE_SOFT,
+  headerFill: null,
+  headerColor: INK,
+  headerWeight: 700,
+};
+
+export const DEFAULT_TABLE_DATA = {
+  columns: ["항목", "내용"],
+  rows: [
+    ["용량", "50ml"],
+    ["제형", "가볍게 발리는 젤 크림"],
+    ["사용 시점", "아침 · 저녁 세안 후"],
+  ],
+};
+
+export type CreateTableOptions = {
+  kind?: TableSpec["kind"];
+  width?: number;
+  data?: TableSpec["data"];
+  style?: Partial<TableStyle>;
+  options?: Partial<TableSpec["options"]>;
+};
+
+export function createTableSpec({
+  kind = "keyvalue",
+  width = 646,
+  data = DEFAULT_TABLE_DATA,
+  style = {},
+  options = {},
+}: CreateTableOptions = {}): TableSpec {
+  return {
+    v: 1,
+    kind,
+    frame: { width, height: 0 },
+    data: {
+      columns: [...data.columns],
+      rows: data.rows.map((row) => [...row]),
+    },
+    options: {
+      headerRow: true,
+      align: [],
+      zebra: false,
+      ...options,
+    },
+    style: { ...DEFAULT_TABLE_STYLE, ...style },
+  };
+}
+
+export type TablePreset = {
+  id: string;
+  /** 로케일 키(`detailPage.table.preset.*`). */
+  labelKey: string;
+  kind: TableSpec["kind"];
+  style: Partial<TableStyle>;
+  options?: Partial<TableSpec["options"]>;
+  data?: TableSpec["data"];
+};
+
+const SPEC_DATA = DEFAULT_TABLE_DATA;
+
+const RIGHT_ALIGNED: CellAlign[] = ["left", "right"];
+
+const SIZE_DATA = {
+  columns: ["SIZE", "총장", "어깨", "가슴"],
+  rows: [
+    ["S", "120", "32", "96"],
+    ["M", "123", "33", "102"],
+    ["L", "126", "34", "108"],
+  ],
+};
+
+/**
+ * 좌측 패널에 뜨는 프리셋.
+ *
+ * 1·2번이 브랜드 두 판이다 — **구조는 같고 스타일 값 네 개만 다르다**
+ * (`firstFill` · `columnRule` · `outerBorder` · `bodyFill`). 렌더러에 브랜드 분기가
+ * 없다는 걸 이 둘이 증명한다.
+ */
+const PRESETS: TablePreset[] = [
+  {
+    // 헤어라인 스펙표 — 위 굵은 선 + 행 구분선만. 채움도 테두리도 없다.
+    id: "spec-hairline",
+    labelKey: "detailPage.table.preset.specHairline",
+    kind: "keyvalue",
+    style: {},
+    data: SPEC_DATA,
+  },
+  {
+    // 칸 구분 스펙표 — 이름 칸에 바탕을 깔고 세로선으로 가른다. 긴 값(전성분)에서
+    // 어느 줄의 값인지 눈으로 따라가려면 이 판이 필요하다.
+    id: "spec-celled",
+    labelKey: "detailPage.table.preset.specCelled",
+    kind: "keyvalue",
+    style: {
+      firstFill: CELL,
+      columnRule: { color: LINE, width: 1 },
+      rowRule: { color: LINE, width: 1 },
+      outerBorder: { color: LINE, width: 1, radius: 4 },
+      bodyFill: "#FFFFFF",
+    },
+    data: SPEC_DATA,
+  },
+  {
+    // 값 우측정렬 목록 — 수치를 오른쪽 끝에 세워 자릿수를 맞춘다.
+    id: "spec-right",
+    labelKey: "detailPage.table.preset.specRight",
+    kind: "keyvalue",
+    style: { firstWidth: 200, rowRule: { color: LINE, width: 1 } },
+    options: { align: RIGHT_ALIGNED },
+    data: {
+      columns: ["항목", "값"],
+      rows: [
+        ["보습 지속", "12시간"],
+        ["임상 만족도", "94%"],
+        ["끈적임 없음", "97%"],
+      ],
+    },
+  },
+  {
+    // 가운데 정렬 타입표 — 이름 칸을 가운데로 세우고 강조색을 준다(피부 타입·라인업).
+    id: "type-centered",
+    labelKey: "detailPage.table.preset.typeCentered",
+    kind: "keyvalue",
+    style: {
+      firstWidth: 168,
+      firstAlign: "center",
+      firstFill: CELL,
+      firstWeight: 700,
+      columnRule: { color: LINE, width: 1 },
+      rowRule: { color: LINE, width: 1 },
+      outerBorder: { color: LINE, width: 1, radius: 4 },
+      bodyFill: "#FFFFFF",
+      topRule: null,
+    },
+    data: {
+      columns: ["타입", "이렇게 쓰세요"],
+      rows: [
+        ["건성", "밤에 한 번 더 덧발라 주세요"],
+        ["지성", "얇게 한 겹만 펴 발라 주세요"],
+        ["복합성", "볼에만 덧발라 주세요"],
+      ],
+    },
+  },
+  {
+    // 머리글 있는 N열 그리드 — 사이즈표·비교표.
+    id: "grid-header",
+    labelKey: "detailPage.table.preset.gridHeader",
+    kind: "grid",
+    style: {
+      firstWidth: null,
+      headerFill: CELL,
+      rowRule: { color: LINE, width: 1 },
+      outerBorder: { color: LINE, width: 1, radius: 4 },
+      bodyFill: "#FFFFFF",
+      topRule: null,
+      padX: 16,
+    },
+    options: { headerRow: true, align: ["center", "center", "center", "center"] },
+    data: SIZE_DATA,
+  },
+  {
+    // 얼룩 그리드 — 행이 많은 비교표에서 줄을 눈으로 따라가게 한다.
+    id: "grid-zebra",
+    labelKey: "detailPage.table.preset.gridZebra",
+    kind: "grid",
+    style: {
+      firstWidth: null,
+      headerFill: INK,
+      headerColor: "#FFFFFF",
+      rowRule: null,
+      outerBorder: { color: LINE, width: 1, radius: 4 },
+      bodyFill: "#FFFFFF",
+      topRule: null,
+      padX: 16,
+    },
+    options: { headerRow: true, zebra: true, align: ["left", "center", "center", "center"] },
+    data: SIZE_DATA,
+  },
+  {
+    // 비교표 — 첫 열은 항목, 우리 칸에 바탕을 깔아 눈이 먼저 간다.
+    id: "grid-compare",
+    labelKey: "detailPage.table.preset.gridCompare",
+    kind: "grid",
+    style: {
+      firstWidth: 200,
+      headerFill: CELL,
+      rowRule: { color: LINE, width: 1 },
+      columnRule: { color: LINE, width: 1 },
+      outerBorder: { color: LINE, width: 1, radius: 4 },
+      topRule: null,
+      padX: 16,
+    },
+    options: { headerRow: true, align: ["left", "center", "center"] },
+    data: {
+      columns: ["비교 항목", "본 제품", "일반 제품"],
+      rows: [
+        ["보습 지속", "12시간", "6시간"],
+        ["끈적임", "없음", "있음"],
+        ["향료", "무첨가", "첨가"],
+      ],
+    },
+  },
+  {
+    // 체크 비교표 — 값 대신 기호만 세운다. 스펙 숫자가 없을 때 쓰는 판.
+    id: "grid-check",
+    labelKey: "detailPage.table.preset.gridCheck",
+    kind: "grid",
+    style: {
+      firstWidth: 240,
+      headerFill: INK,
+      headerColor: "#FFFFFF",
+      rowRule: { color: LINE_SOFT, width: 1 },
+      outerBorder: { color: LINE, width: 1, radius: 4 },
+      topRule: null,
+      padX: 16,
+    },
+    options: { headerRow: true, align: ["left", "center", "center"] },
+    data: {
+      columns: ["기능", "본 제품", "일반 제품"],
+      rows: [
+        ["저자극 테스트", "O", "X"],
+        ["비건 인증", "O", "X"],
+        ["국내 생산", "O", "O"],
+      ],
+    },
+  },
+  {
+    // 선 없는 여백형 — 표처럼 안 보이는 표. 감성 톤 상세페이지의 스펙 자리다.
+    id: "spec-airy",
+    labelKey: "detailPage.table.preset.specAiry",
+    kind: "keyvalue",
+    style: {
+      firstWidth: 170,
+      firstColor: "#8A8F96",
+      firstWeight: 500,
+      rowRule: null,
+      topRule: null,
+      padY: 14,
+    },
+    data: SPEC_DATA,
+  },
+  {
+    // 상자형 스펙표 — 큰 라운드 테두리 안에 넣는다. 섹션 하나를 통째로 채울 때.
+    id: "spec-boxed",
+    labelKey: "detailPage.table.preset.specBoxed",
+    kind: "keyvalue",
+    style: {
+      firstWidth: 180,
+      firstFill: CELL,
+      rowRule: { color: LINE, width: 1 },
+      outerBorder: { color: LINE, width: 1, radius: 14 },
+      topRule: null,
+      padX: 24,
+      padY: 22,
+    },
+    data: SPEC_DATA,
+  },
+  {
+    // 가격표 — 수치 열을 오른쪽 끝에 세워 자릿수를 맞춘다.
+    id: "grid-price",
+    labelKey: "detailPage.table.preset.gridPrice",
+    kind: "grid",
+    style: {
+      firstWidth: null,
+      headerFill: CELL,
+      rowRule: { color: LINE_SOFT, width: 1 },
+      outerBorder: { color: LINE, width: 1, radius: 4 },
+      topRule: null,
+      padX: 16,
+    },
+    options: { headerRow: true, align: ["left", "center", "right"] },
+    data: {
+      columns: ["구성", "수량", "정상가"],
+      rows: [
+        ["단품", "1개", "32,000"],
+        ["2개 세트", "2개", "58,000"],
+        ["선물 세트", "3개", "84,000"],
+      ],
+    },
+  },
+];
+
+/**
+ * 좌측 패널이 읽는 최종 목록. 바탕을 안 정한 프리셋에는 흰 바탕을 깐다.
+ *
+ * 표는 선과 글자뿐이라 바탕이 없으면 섹션 배경을 그대로 탄다 — 어두운 섹션에 놓는
+ * 순간 먹빛 글씨가 사라지고, 흰 패널 위에서 그려진 미리보기와 결과가 달라진다.
+ * 기본값(``DEFAULT_TABLE_STYLE``)이 아니라 **프리셋에만** 건다. 기본값을 바꾸면 이미
+ * 문서에 박힌 표들이 다시 그려질 때 같이 변한다.
+ */
+export const TABLE_PRESETS: TablePreset[] = PRESETS.map((preset) => ({
+  ...preset,
+  style: { bodyFill: "#FFFFFF", ...preset.style },
+}));

package/lib/detail-page/table/edit.ts

@@ -0,0 +1,312 @@
+/**
+ * 표 데이터를 고치는 순수 함수들.
+ *
+ * 인스펙터(우측 패널)와 캔버스 오버레이가 **같은 함수**를 쓴다. 원래는 인스펙터 안에
+ * 있었는데, 캔버스에서도 행·열을 넣고 빼게 되면서 두 벌로 갈라질 뻔했다 — 한쪽만
+ * ``align``을 따라 옮기는 순간 열을 지웠을 때 뒤 열들의 정렬이 한 칸씩 밀린다.
+ *
+ * 두 층으로 나눠 둔다:
+ * - ``with*`` — ``TableData``만 다룬다(인스펙터의 입력 칸들이 쓴다).
+ * - ``insertRow``/``removeColumn`` … — 스펙 전체를 받아 ``align``·상한까지 맞춘다.
+ *   캔버스 핸들은 이쪽을 쓴다. 눌렀을 때 할 일이 한 번에 끝나야 하기 때문이다.
+ */
+
+import {
+  MAX_COLUMNS,
+  MAX_ROWS,
+  MIN_COLUMN_WIDTH,
+  columnWidths,
+  resolveTable,
+} from "./normalize";
+import type { CellAlign, TableData, TableSpec } from "./types";
+
+/** 지금 행들이 실제로 쓰는 칸 수. 새 행을 만들 때 폭을 맞추는 기준이다. */
+function widthOf(data: TableData): number {
+  return Math.max(1, data.columns.length, data.rows[0]?.length ?? 0);
+}
+
+function emptyRow(width: number): string[] {
+  return Array.from({ length: width }, () => "");
+}
+
+/** 범위를 벗어난 삽입 위치를 양끝으로 접는다(핸들이 경계에서 눌릴 수 있다). */
+function clampIndex(index: number, length: number): number {
+  if (!Number.isFinite(index)) return length;
+  return Math.min(length, Math.max(0, Math.trunc(index)));
+}
+
+// ── TableData 층 ─────────────────────────────────────────────────────────────
+
+export function withCell(
+  data: TableData,
+  row: number,
+  column: number,
+  value: string,
+): TableData {
+  return {
+    ...data,
+    rows: data.rows.map((cells, r) =>
+      r === row ? cells.map((cell, c) => (c === column ? value : cell)) : cells,
+    ),
+  };
+}
+
+export function withColumnName(data: TableData, column: number, name: string): TableData {
+  const columns = [...data.columns];
+  while (columns.length <= column) columns.push("");
+  columns[column] = name;
+  return { ...data, columns };
+}
+
+export function withRowAdded(data: TableData): TableData {
+  return { ...data, rows: [...data.rows, emptyRow(widthOf(data))] };
+}
+
+/** ``index`` 자리에 빈 행을 끼운다. ``index === rows.length``면 맨 뒤. */
+export function withRowInsertedAt(data: TableData, index: number): TableData {
+  const at = clampIndex(index, data.rows.length);
+  const rows = [...data.rows];
+  rows.splice(at, 0, emptyRow(widthOf(data)));
+  return { ...data, rows };
+}
+
+export function withRowRemoved(data: TableData, index: number): TableData {
+  return { ...data, rows: data.rows.filter((_, i) => i !== index) };
+}
+
+export function withColumnAdded(data: TableData): TableData {
+  return {
+    columns: [...data.columns, ""],
+    rows: data.rows.map((cells) => [...cells, ""]),
+  };
+}
+
+/**
+ * ``index`` 자리에 빈 열을 끼운다.
+ *
+ * 행마다 길이가 다를 수 있다(정규화는 렌더용 사본에서만 한다). 짧은 행은 삽입 위치까지
+ * 채운 뒤 끼워야 값이 옆 열로 밀리지 않는다.
+ */
+export function withColumnInsertedAt(data: TableData, index: number): TableData {
+  const at = clampIndex(index, widthOf(data));
+  const columns = [...data.columns];
+  while (columns.length < at) columns.push("");
+  columns.splice(at, 0, "");
+  return {
+    columns,
+    rows: data.rows.map((cells) => {
+      const next = [...cells];
+      while (next.length < at) next.push("");
+      next.splice(at, 0, "");
+      return next;
+    }),
+  };
+}
+
+export function withColumnRemoved(data: TableData, index: number): TableData {
+  return {
+    columns: data.columns.filter((_, i) => i !== index),
+    rows: data.rows.map((cells) => cells.filter((_, i) => i !== index)),
+  };
+}
+
+/** 열을 지우면 그 열의 정렬 설정도 같이 빠져야 뒤 열들이 밀리지 않는다. */
+export function alignAfterColumnRemove(align: CellAlign[], removed: number): CellAlign[] {
+  return align.filter((_, i) => i !== removed);
+}
+
+/** 열을 끼우면 정렬도 같은 자리에서 벌어져야 한다(새 열은 기본 정렬). */
+export function alignAfterColumnInsert(align: CellAlign[], inserted: number): CellAlign[] {
+  const at = clampIndex(inserted, align.length);
+  const next = [...align];
+  while (next.length < at) next.push("left");
+  next.splice(at, 0, "left");
+  return next;
+}
+
+// ── TableSpec 층(캔버스 핸들이 쓰는 한 방 짜리) ──────────────────────────────
+
+/** 행을 더 넣을 수 있는가. 상한에 닿으면 핸들의 ``+``를 숨긴다. */
+export function canInsertRow(spec: TableSpec): boolean {
+  return spec.data.rows.length < MAX_ROWS;
+}
+
+/**
+ * 열을 더 넣을 수 있는가.
+ *
+ * ``keyvalue``는 이름·값 두 칸으로 **그리는** 종류라 열을 늘려도 화면이 안 변한다.
+ * 캔버스에서는 안 되는 걸 눌러 보게 두지 않고 아예 핸들을 감춘다.
+ */
+export function canInsertColumn(spec: TableSpec): boolean {
+  return spec.kind === "grid" && resolveTable(spec).columnCount < MAX_COLUMNS;
+}
+
+/** 마지막 하나는 못 지운다 — 행이 0이면 표가 아니라 빈 상자가 된다. */
+export function canRemoveRow(spec: TableSpec): boolean {
+  return spec.data.rows.length > 1;
+}
+
+export function canRemoveColumn(spec: TableSpec): boolean {
+  return spec.kind === "grid" && resolveTable(spec).columnCount > 1;
+}
+
+export function insertRow(spec: TableSpec, index: number): TableSpec {
+  if (!canInsertRow(spec)) return spec;
+  return { ...spec, data: withRowInsertedAt(spec.data, index) };
+}
+
+export function removeRow(spec: TableSpec, index: number): TableSpec {
+  if (!canRemoveRow(spec)) return spec;
+  return { ...spec, data: withRowRemoved(spec.data, index) };
+}
+
+/**
+ * 열을 넣고 뺄 때 **잡아 둔 폭도 같이 움직여야** 한다.
+ *
+ * 안 옮기면 폭 배열의 길이가 열 수와 어긋나 통째로 무시되고(자동으로 되돌아간다),
+ * 길이가 우연히 맞으면 더 나쁘다 — 엉뚱한 열이 남의 폭을 입는다.
+ */
+function widthsAfterInsert(widths: number[] | null, at: number): number[] | null {
+  if (!widths) return null;
+  const next = [...widths];
+  const index = clampIndex(at, next.length);
+  // 새 열은 이웃만큼 준다. 남는 폭은 정규화가 알아서 다시 나눈다.
+  next.splice(index, 0, next[index] ?? next[index - 1] ?? MIN_COLUMN_WIDTH);
+  return next;
+}
+
+function widthsAfterRemove(widths: number[] | null, at: number): number[] | null {
+  if (!widths) return null;
+  return widths.filter((_, i) => i !== at);
+}
+
+export function insertColumn(spec: TableSpec, index: number): TableSpec {
+  if (!canInsertColumn(spec)) return spec;
+  return {
+    ...spec,
+    data: withColumnInsertedAt(spec.data, index),
+    options: {
+      ...spec.options,
+      align: alignAfterColumnInsert(spec.options.align, index),
+    },
+    style: {
+      ...spec.style,
+      columnWidths: widthsAfterInsert(spec.style.columnWidths, index),
+    },
+  };
+}
+
+export function removeColumn(spec: TableSpec, index: number): TableSpec {
+  if (!canRemoveColumn(spec)) return spec;
+  return {
+    ...spec,
+    data: withColumnRemoved(spec.data, index),
+    options: {
+      ...spec.options,
+      align: alignAfterColumnRemove(spec.options.align, index),
+    },
+    style: {
+      ...spec.style,
+      columnWidths: widthsAfterRemove(spec.style.columnWidths, index),
+    },
+  };
+}
+
+// ── 열 폭 ────────────────────────────────────────────────────────────────────
+
+/** 배열에서 한 칸을 빼 다른 자리에 꽂는다. */
+function moveAt<T>(list: T[], from: number, to: number): T[] {
+  const next = [...list];
+  const [taken] = next.splice(from, 1);
+  next.splice(to, 0, taken);
+  return next;
+}
+
+/**
+ * 열 경계 하나를 ``deltaPx``만큼 민 스펙.
+ *
+ * ``boundary``는 **경계 번호**(1 = 첫 열과 둘째 열 사이). 인접한 두 열만 주고받으므로
+ * 표 전체 폭은 안 변한다 — 하나를 넓히면 옆이 좁아지는, 엑셀·Canva와 같은 동작이다.
+ *
+ * 처음 끄는 순간 지금 화면에 보이는 자동 배치값으로 ``columnWidths``를 채운다. 그래야
+ * 자동 → 수동으로 넘어갈 때 표가 안 튄다.
+ */
+export function resizeColumn(
+  spec: TableSpec,
+  boundary: number,
+  deltaPx: number,
+): TableSpec {
+  const resolved = resolveTable(spec);
+  if (boundary < 1 || boundary > resolved.columnCount - 1) return spec;
+
+  const current = columnWidths(spec, resolved);
+  const left = current[boundary - 1];
+  const right = current[boundary];
+  if (left === undefined || right === undefined) return spec;
+
+  // 두 열의 합은 보존한다. 어느 쪽도 최소 폭 아래로는 못 간다.
+  const pair = left + right;
+  const nextLeft = Math.min(
+    pair - MIN_COLUMN_WIDTH,
+    Math.max(MIN_COLUMN_WIDTH, left + deltaPx),
+  );
+  if (Math.abs(nextLeft - left) < 0.5) return spec;
+
+  const widths = [...current];
+  widths[boundary - 1] = nextLeft;
+  widths[boundary] = pair - nextLeft;
+  return { ...spec, style: { ...spec.style, columnWidths: widths } };
+}
+
+/** 열 폭을 자동으로 되돌린다(첫 칸만 ``firstWidth``, 나머지 균등). */
+export function autoColumnWidths(spec: TableSpec): TableSpec {
+  if (spec.style.columnWidths === null) return spec;
+  return { ...spec, style: { ...spec.style, columnWidths: null } };
+}
+
+// ── 순서 바꾸기 ──────────────────────────────────────────────────────────────
+
+export function moveRow(spec: TableSpec, from: number, to: number): TableSpec {
+  const count = spec.data.rows.length;
+  if (from === to || from < 0 || from >= count || to < 0 || to >= count) return spec;
+  return { ...spec, data: { ...spec.data, rows: moveAt(spec.data.rows, from, to) } };
+}
+
+/**
+ * 열 순서를 바꾼다.
+ *
+ * 데이터만 옮기면 안 된다 — 정렬(``align``)과 잡아 둔 폭은 **열에 붙은 성질**이라
+ * 같이 따라가야 한다. 안 그러면 수치 열을 왼쪽으로 옮겼을 때 우측정렬이 원래 자리에
+ * 남는다.
+ */
+export function moveColumn(spec: TableSpec, from: number, to: number): TableSpec {
+  const count = resolveTable(spec).columnCount;
+  if (from === to || from < 0 || from >= count || to < 0 || to >= count) return spec;
+
+  const align = [...spec.options.align];
+  while (align.length < count) align.push("left");
+
+  return {
+    ...spec,
+    data: {
+      columns: moveAt(spec.data.columns, from, to),
+      rows: spec.data.rows.map((cells) =>
+        // 짧은 행은 자리를 채운 뒤 옮겨야 값이 옆 열로 새지 않는다.
+        moveAt(
+          cells.length < count
+            ? [...cells, ...Array.from({ length: count - cells.length }, () => "")]
+            : cells,
+          from,
+          to,
+        ),
+      ),
+    },
+    options: { ...spec.options, align: moveAt(align, from, to) },
+    style: {
+      ...spec.style,
+      columnWidths: spec.style.columnWidths
+        ? moveAt(spec.style.columnWidths, from, to)
+        : null,
+    },
+  };
+}