feat(spreadsheet): C 격자 — 시트 기본값 반영 · data-addr · 판별 editorSlot · 메모 세모 · 시험 틀

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VVM3xZ1aUPcUTuW2WZSnwg
2026-09-27 20:45:30 +09:00
parent b8312343eb
commit 7d9fc6eea5
6 changed files with 226 additions and 8 deletions
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <title>C 격자 시험 틀</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+      }
+      #app {
+        position: fixed;
+        inset: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./spreadsheet_grid_test.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,161 @@
+/* =============================================================================
+ * spreadsheet_grid_test.ts
+ * C(격자) 화면 시험 틀 — 병합 · 틀고정 · 숨김 · 폭 · hair 선 · 균등 분할 · 선택 영역 가운데 ·
+ * [Red] 음수 서식 · 1만 행 스크롤 때 DOM 칸 수를 ORCA 로 확인. D · 엔진이 없으니 이 파일이
+ * `SpreadsheetContext` 를 최소로 흉내 낸다(엔진 값은 안 씀 — 식 칸이 없음).
+ * ========================================================================== */
+
+import { createGrid } from "../../../A00_Common/spreadsheet/spreadsheet_grid";
+import type {
+  CalcEngine,
+  Command,
+  History,
+  Sheet,
+  Workbook,
+} from "../../../A00_Common/spreadsheet/spreadsheet_types";
+import { colIndex } from "../../../A00_Common/spreadsheet/spreadsheet_address";
+import type {
+  GridHandle,
+  SpreadsheetContext,
+} from "../../../A00_Common/spreadsheet/spreadsheet_view_types";
+
+const sheet: Sheet = {
+  id: "s1",
+  이름: "시험",
+  칸: {
+    A1: { 값: "□격자 시험 — 병합 · 틀고정 · 숨김 · hair 선", 서식: 1 },
+    A3: { 값: "공종", 서식: 2 },
+    B3: { 값: "규격", 서식: 2 },
+    C3: { 값: "산출 내역", 서식: 2 },
+    G3: { 값: "단위", 서식: 2 },
+    H3: { 값: "수량", 서식: 2 },
+    A4: { 값: "터파기", 서식: 3 },
+    C4: { 값: "균등 분할 정렬 보기 글", 서식: 4 },
+    H4: { 값: -12.5, 서식: 6 },
+    A6: { 값: "선택 영역 가운데(centerContinuous) 보기", 서식: 5 },
+    A8: { 값: "hair 테두리 칸", 서식: 3 },
+    B8: { 값: 3.14159, 서식: 7 },
+    J10000: { 값: "맨 끝 칸(1만 행 스크롤 확인용)" },
+  },
+  comments: { H4: "메모 — ROUNDDOWN 끝수 확인" },
+  병합: ["A1:H1", "B8:C9"],
+  열: { A: { 폭: 14 }, D: { 숨김: true } },
+  행: { "1": { 높이: 22 }, "5": { 숨김: true } },
+  틀고정: { 행: 3, 열: 1 },
+  보기: { 눈금선: true },
+};
+
+const book: Workbook = {
+  종류: "통합문서",
+  판: 1,
+  열: "test",
+  기본: { 글꼴: "굴림", 크기: 10, 열폭: 8.43, 행높이: 15 },
+  서식: [
+    {},
+    { 크기: 14, 굵게: true },
+    {
+      가로: "center",
+      세로: "center",
+      채움: "#F2F2F2",
+      테두리: {
+        위: { 선: "thin" },
+        아래: { 선: "thin" },
+        왼: { 선: "thin" },
+        오른: { 선: "thin" },
+      },
+    },
+    { 세로: "center", 테두리: { 위: { 선: "hair" }, 아래: { 선: "hair" } } },
+    { 가로: "distributed", 세로: "center" },
+    { 가로: "centerContinuous", 세로: "center" },
+    { 형식: "0.00;[Red]-0.00" },
+    {
+      형식: "0.0000",
+      테두리: {
+        위: { 선: "hair" },
+        아래: { 선: "hair" },
+        왼: { 선: "hair" },
+        오른: { 선: "hair" },
+      },
+    },
+  ],
+  시트: [sheet],
+  활성: "s1",
+};
+
+function noopEngine(): CalcEngine {
+  return {
+    update: () => [],
+    rebuild: () => {},
+    value: () => null,
+    precedents: () => [],
+    snapshot: () => ({}),
+  };
+}
+
+function noopHistory(): History {
+  return {
+    push: () => {},
+    undo: () => null,
+    redo: () => null,
+    canUndo: () => false,
+    canRedo: () => false,
+    clear: () => {},
+  };
+}
+
+let grid!: GridHandle;
+
+const ctx: SpreadsheetContext = {
+  root: document.getElementById("app")!,
+  book,
+  readOnly: false,
+  engine: noopEngine(),
+  history: noopHistory(),
+  selection: {
+    시트: "s1",
+    범위: [{ r0: 2, c0: 2, r1: 2, c1: 2 }],
+    활성: { r: 2, c: 2 },
+    기준: { r: 2, c: 2 },
+  },
+  sheet: () => sheet,
+  dispatch: (command: Command) => {
+    if (command.종류 === "열폭") {
+      const c0 = command.열[0];
+      const key = c0 >= 0 ? String.fromCharCode(65 + c0) : "A"; // 시험 데이터가 A~J 안쪽이라 단순 변환으로 충분
+      sheet.열 = { ...sheet.열, [key]: { ...sheet.열?.[key], 폭: command.폭 ?? undefined } };
+    } else if (command.종류 === "행높이") {
+      const r0 = command.행[0];
+      sheet.행 = {
+        ...sheet.행,
+        [String(r0 + 1)]: { ...sheet.행?.[String(r0 + 1)], 높이: command.높이 ?? undefined },
+      };
+    }
+    grid.render();
+  },
+  undo: () => {},
+  redo: () => {},
+  select: () => grid.renderSelection(),
+  showSheet: () => {},
+  get grid() {
+    return grid;
+  },
+  editor: {
+    editing: () => false,
+    begin: () => {},
+    commit: () => {},
+    cancel: () => {},
+    sync: () => {},
+  },
+} as SpreadsheetContext;
+
+grid = createGrid(ctx);
+ctx.root.append(grid.root);
+
+// ORCA 수치 확인용 — 눈에 안 보이는 전역에 걸어 둠(콘솔 · eval 로 셈).
+(window as unknown as { __gridTest: unknown }).__gridTest = {
+  grid,
+  sheet,
+  book,
+  colIndex,
+  countCells: () => grid.root.querySelectorAll(".aislo-cell").length,
+};