@simplysm/solid 13.0.28 → 13.0.30

package/src/components/data/sheet/DataSheet.tsx

@@ -1,4 +1,13 @@
-import { children, createMemo, createSignal, For, type JSX, Show, splitProps, useContext } from "solid-js";
+import {
+  children,
+  createMemo,
+  createSignal,
+  For,
+  type JSX,
+  Show,
+  splitProps,
+  useContext,
+} from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -24,6 +33,7 @@ import type {
 import { isDataSheetColumnDef, DataSheetColumn } from "./DataSheetColumn";
 import { applySorting, buildHeaderTable, collectAllExpandable, flattenTree } from "./sheetUtils";
 import { createControllableSignal } from "../../../hooks/createControllableSignal";
+import { createPointerDrag } from "../../../hooks/createPointerDrag";
 import { Icon } from "../../display/Icon";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { Pagination } from "../Pagination";
@@ -80,8 +90,8 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     "sorts",
     "onSortsChange",
     "autoSort",
-    "pageIndex",
-    "onPageIndexChange",
+    "page",
+    "onPageChange",
     "totalPageCount",
     "itemsPerPage",
     "displayPageCount",
@@ -157,7 +167,9 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
     const { DataSheetConfigDialog } = await import("./DataSheetConfigDialog");
 
-    const allCols = resolved.toArray().filter(isDataSheetColumnDef) as unknown as DataSheetColumnDef<T>[];
+    const allCols = resolved
+      .toArray()
+      .filter(isDataSheetColumnDef) as unknown as DataSheetColumnDef<T>[];
 
     const columnInfos: DataSheetConfigColumnInfo[] = allCols
       .filter((col) => !col.collapse)
@@ -234,8 +246,8 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
   // #region Paging
   const [currentPage, setCurrentPage] = createControllableSignal({
-    value: () => local.pageIndex ?? 0,
-    onChange: () => local.onPageIndexChange,
+    value: () => local.page ?? 1,
+    onChange: () => local.onPageChange,
   });
 
   const effectivePageCount = createMemo(() => {
@@ -252,7 +264,7 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     if ((local.items ?? []).length <= 0) return sortedItems();
 
     const page = currentPage();
-    return sortedItems().slice(page * ipp, (page + 1) * ipp);
+    return sortedItems().slice((page - 1) * ipp, page * ipp);
   });
 
   // #region Feature Column Setup (확장/선택 기능 컬럼 공통)
@@ -356,10 +368,11 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   function onResizerPointerdown(event: PointerEvent, colKey: string): void {
     event.preventDefault();
     const target = event.target as HTMLElement;
-    target.setPointerCapture(event.pointerId);
 
     const th = target.closest("th")!;
-    const container = th.closest("[data-sheet]")!.querySelector("[data-sheet-scroll]") as HTMLElement;
+    const container = th
+      .closest("[data-sheet]")!
+      .querySelector("[data-sheet-scroll]") as HTMLElement;
     const startX = event.clientX;
     const startWidth = th.offsetWidth;
 
@@ -372,32 +385,28 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
       height: `${container.scrollHeight}px`,
     });
 
-    const onPointerMove = (e: PointerEvent) => {
-      const delta = e.clientX - startX;
-      const newWidth = Math.max(30, startWidth + delta);
-      const currentRect = container.getBoundingClientRect();
-      setResizeIndicatorStyle({
-        display: "block",
-        left: `${th.getBoundingClientRect().left - currentRect.left + container.scrollLeft + newWidth}px`,
-        top: "0",
-        height: `${container.scrollHeight}px`,
-      });
-    };
-
-    const onPointerUp = (e: PointerEvent) => {
-      const delta = e.clientX - startX;
-      // 실제 드래그가 발생한 경우에만 너비 저장 (더블클릭 시 DOM 재생성으로 dblclick 유실 방지)
-      if (delta !== 0) {
+    createPointerDrag(target, event.pointerId, {
+      onMove(e) {
+        const delta = e.clientX - startX;
         const newWidth = Math.max(30, startWidth + delta);
-        saveColumnWidth(colKey, `${newWidth}px`);
-      }
-      setResizeIndicatorStyle({ display: "none" });
-      target.removeEventListener("pointermove", onPointerMove);
-      target.removeEventListener("pointerup", onPointerUp);
-    };
-
-    target.addEventListener("pointermove", onPointerMove);
-    target.addEventListener("pointerup", onPointerUp);
+        const currentRect = container.getBoundingClientRect();
+        setResizeIndicatorStyle({
+          display: "block",
+          left: `${th.getBoundingClientRect().left - currentRect.left + container.scrollLeft + newWidth}px`,
+          top: "0",
+          height: `${container.scrollHeight}px`,
+        });
+      },
+      onEnd(e) {
+        const delta = e.clientX - startX;
+        // 실제 드래그가 발생한 경우에만 너비 저장 (더블클릭 시 DOM 재생성으로 dblclick 유실 방지)
+        if (delta !== 0) {
+          const newWidth = Math.max(30, startWidth + delta);
+          saveColumnWidth(colKey, `${newWidth}px`);
+        }
+        setResizeIndicatorStyle({ display: "none" });
+      },
+    });
   }
 
   function onResizerDoubleClick(colKey: string): void {
@@ -484,7 +493,9 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     if (local.selectMode === "single") {
       setSelectedItems(isSelected ? [] : [item]);
     } else {
-      setSelectedItems(isSelected ? selectedItems().filter((i) => i !== item) : [...selectedItems(), item]);
+      setSelectedItems(
+        isSelected ? selectedItems().filter((i) => i !== item) : [...selectedItems(), item],
+      );
     }
   }
 
@@ -552,7 +563,6 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   function onReorderPointerDown(e: PointerEvent, item: T): void {
     e.preventDefault();
     const target = e.currentTarget as HTMLElement;
-    target.setPointerCapture(e.pointerId);
 
     const tableEl = target.closest("table")!;
     const tbody = tableEl.querySelector("tbody")!;
@@ -560,110 +570,110 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
     setDragState({ draggingItem: item, targetItem: null, position: null });
 
-    const onPointerMove = (ev: PointerEvent) => {
-      let foundTarget: T | null = null;
-      let foundPosition: "before" | "after" | "inside" | null = null;
-
-      for (let i = 0; i < rows.length; i++) {
-        const row = rows[i];
-        const rect = row.getBoundingClientRect();
-        if (ev.clientY < rect.top || ev.clientY > rect.bottom) continue;
+    createPointerDrag(target, e.pointerId, {
+      onMove(ev) {
+        let foundTarget: T | null = null;
+        let foundPosition: "before" | "after" | "inside" | null = null;
 
-        if (i >= displayItems().length) break;
-        const flat = displayItems()[i];
-        if (flat.item === item) break;
+        for (let i = 0; i < rows.length; i++) {
+          const row = rows[i];
+          const rect = row.getBoundingClientRect();
+          if (ev.clientY < rect.top || ev.clientY > rect.bottom) continue;
 
-        // 자기 자신의 하위 항목으로는 드롭 불가
-        if (isDescendant(item, flat.item)) break;
-
-        const relY = ev.clientY - rect.top;
-        const third = rect.height / 3;
-
-        if (relY < third) {
-          foundPosition = "before";
-        } else if (relY > third * 2) {
-          foundPosition = "after";
-        } else {
-          foundPosition = local.getChildren ? "inside" : relY < rect.height / 2 ? "before" : "after";
+          if (i >= displayItems().length) break;
+          const flat = displayItems()[i];
+          if (flat.item === item) break;
+
+          // 자기 자신의 하위 항목으로는 드롭 불가
+          if (isDescendant(item, flat.item)) break;
+
+          const relY = ev.clientY - rect.top;
+          const third = rect.height / 3;
+
+          if (relY < third) {
+            foundPosition = "before";
+          } else if (relY > third * 2) {
+            foundPosition = "after";
+          } else {
+            foundPosition = local.getChildren
+              ? "inside"
+              : relY < rect.height / 2
+                ? "before"
+                : "after";
+          }
+          foundTarget = flat.item;
+          break;
         }
-        foundTarget = flat.item;
-        break;
-      }
 
-      setDragState({ draggingItem: item, targetItem: foundTarget, position: foundPosition });
+        setDragState({ draggingItem: item, targetItem: foundTarget, position: foundPosition });
 
-      // 인디케이터 DOM 업데이트
-      for (let i = 0; i < rows.length; i++) {
-        rows[i].removeAttribute("data-dragging");
-        rows[i].removeAttribute("data-drag-over");
+        // 인디케이터 DOM 업데이트
+        for (let i = 0; i < rows.length; i++) {
+          rows[i].removeAttribute("data-dragging");
+          rows[i].removeAttribute("data-drag-over");
 
-        if (i < displayItems().length) {
-          const flat = displayItems()[i];
-          if (flat.item === item) {
-            rows[i].setAttribute("data-dragging", "");
-          }
-          if (flat.item === foundTarget && foundPosition === "inside") {
-            rows[i].setAttribute("data-drag-over", "inside");
+          if (i < displayItems().length) {
+            const flat = displayItems()[i];
+            if (flat.item === item) {
+              rows[i].setAttribute("data-dragging", "");
+            }
+            if (flat.item === foundTarget && foundPosition === "inside") {
+              rows[i].setAttribute("data-drag-over", "inside");
+            }
           }
         }
-      }
 
-      // before/after 인디케이터
-      const indicatorEl = tableEl
-        .closest("[data-sheet-scroll]")
-        ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
-      if (indicatorEl) {
-        if (foundTarget != null && foundPosition != null && foundPosition !== "inside") {
-          const targetIdx = displayItems().findIndex((f) => f.item === foundTarget);
-          if (targetIdx >= 0) {
-            const targetRow = rows[targetIdx];
-            const containerRect = tableEl.closest("[data-sheet-scroll]")!.getBoundingClientRect();
-            const rowRect = targetRow.getBoundingClientRect();
-            const scrollEl = tableEl.closest("[data-sheet-scroll]") as HTMLElement;
-
-            const top =
-              foundPosition === "before"
-                ? rowRect.top - containerRect.top + scrollEl.scrollTop
-                : rowRect.bottom - containerRect.top + scrollEl.scrollTop;
-
-            indicatorEl.style.display = "block";
-            indicatorEl.style.top = `${top}px`;
+        // before/after 인디케이터
+        const indicatorEl = tableEl
+          .closest("[data-sheet-scroll]")
+          ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
+        if (indicatorEl) {
+          if (foundTarget != null && foundPosition != null && foundPosition !== "inside") {
+            const targetIdx = displayItems().findIndex((f) => f.item === foundTarget);
+            if (targetIdx >= 0) {
+              const targetRow = rows[targetIdx];
+              const containerRect = tableEl.closest("[data-sheet-scroll]")!.getBoundingClientRect();
+              const rowRect = targetRow.getBoundingClientRect();
+              const scrollEl = tableEl.closest("[data-sheet-scroll]") as HTMLElement;
+
+              const top =
+                foundPosition === "before"
+                  ? rowRect.top - containerRect.top + scrollEl.scrollTop
+                  : rowRect.bottom - containerRect.top + scrollEl.scrollTop;
+
+              indicatorEl.style.display = "block";
+              indicatorEl.style.top = `${top}px`;
+            }
+          } else {
+            indicatorEl.style.display = "none";
           }
-        } else {
-          indicatorEl.style.display = "none";
         }
-      }
-    };
-
-    const onPointerUp = () => {
-      const state = dragState();
-      if (state?.targetItem != null && state.position != null) {
-        local.onItemsReorder?.({
-          item: state.draggingItem,
-          targetItem: state.targetItem,
-          position: state.position,
-        } as DataSheetReorderEvent<T>);
-      }
-
-      // 클린업
-      for (const row of rows) {
-        row.removeAttribute("data-dragging");
-        row.removeAttribute("data-drag-over");
-      }
-      const indicatorEl = tableEl
-        .closest("[data-sheet-scroll]")
-        ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
-      if (indicatorEl) {
-        indicatorEl.style.display = "none";
-      }
+      },
+      onEnd() {
+        const state = dragState();
+        if (state?.targetItem != null && state.position != null) {
+          local.onItemsReorder?.({
+            item: state.draggingItem,
+            targetItem: state.targetItem,
+            position: state.position,
+          } as DataSheetReorderEvent<T>);
+        }
 
-      setDragState(null);
-      target.removeEventListener("pointermove", onPointerMove);
-      target.removeEventListener("pointerup", onPointerUp);
-    };
+        // 클린업
+        for (const row of rows) {
+          row.removeAttribute("data-dragging");
+          row.removeAttribute("data-drag-over");
+        }
+        const indicatorEl = tableEl
+          .closest("[data-sheet-scroll]")
+          ?.querySelector("[data-reorder-indicator]") as HTMLElement | null;
+        if (indicatorEl) {
+          indicatorEl.style.display = "none";
+        }
 
-    target.addEventListener("pointermove", onPointerMove);
-    target.addEventListener("pointerup", onPointerUp);
+        setDragState(null);
+      },
+    });
   }
 
   // #region Keyboard Navigation (Enter/Shift+Enter로 행 이동)
@@ -707,7 +717,8 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
     hasExpandFeature() && !hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
 
   // 선택 기능 컬럼이 "마지막 고정"인지 (일반 고정 컬럼이 없고, 선택 컬럼이 가장 오른쪽 기능 컬럼일 때)
-  const isSelectColLastFixed = () => hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
+  const isSelectColLastFixed = () =>
+    hasSelectFeature() && !hasReorderFeature() && lastFixedIndex() < 0;
 
   const isReorderColLastFixed = () => hasReorderFeature() && lastFixedIndex() < 0;
 
@@ -722,20 +733,26 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
   const isAllExpanded = createMemo(() => {
     if (!local.getChildren) return false;
     const allExpandable = collectAllExpandable(pagedItems(), local.getChildren);
-    return allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item));
+    return (
+      allExpandable.length > 0 && allExpandable.every((item) => expandedItems().includes(item))
+    );
   });
 
   return (
     <div
       data-sheet={local.persistKey ?? ""}
-      class={twMerge("flex flex-col", local.inset ? insetContainerClass : defaultContainerClass, local.class)}
+      class={twMerge(
+        "flex flex-col",
+        local.inset ? insetContainerClass : defaultContainerClass,
+        local.class,
+      )}
     >
       <Show when={!local.hideConfigBar && (modal != null || effectivePageCount() > 1)}>
         <div class={toolbarClass}>
           <Show when={effectivePageCount() > 1}>
             <Pagination
-              pageIndex={currentPage()}
-              onPageIndexChange={setCurrentPage}
+              page={currentPage()}
+              onPageChange={setCurrentPage}
               totalPageCount={effectivePageCount()}
               displayPageCount={local.displayPageCount}
               size="sm"
@@ -743,13 +760,22 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
           </Show>
           <div class="flex-1" />
           <Show when={modal != null}>
-            <button class={configButtonClass} onClick={openConfigModal} title="시트 설정" type="button">
+            <button
+              class={configButtonClass}
+              onClick={openConfigModal}
+              title="시트 설정"
+              type="button"
+            >
               <Icon icon={IconSettings} size="1em" />
             </button>
           </Show>
         </div>
       </Show>
-      <div data-sheet-scroll class={twMerge(dataSheetContainerClass, "flex-1 min-h-0")} style={local.contentStyle}>
+      <div
+        data-sheet-scroll
+        class={twMerge(dataSheetContainerClass, "flex-1 min-h-0")}
+        style={local.contentStyle}
+      >
         <table
           class={twMerge(tableClass, local.inset ? insetTableClass : undefined)}
           onKeyDown={onTableKeyDown}
@@ -800,7 +826,10 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                           <Icon
                             icon={IconChevronDown}
                             size="1em"
-                            class={clsx("transition-transform", isAllExpanded() ? "rotate-0" : "-rotate-90")}
+                            class={clsx(
+                              "transition-transform",
+                              isAllExpanded() ? "rotate-0" : "-rotate-90",
+                            )}
                           />
                         </button>
                       </div>
@@ -863,9 +892,13 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                       <Show when={cell}>
                         {(c) => {
                           const isSortable = () =>
-                            c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex!].sortable;
+                            c().isLastRow &&
+                            c().colIndex != null &&
+                            effectiveColumns()[c().colIndex!].sortable;
                           const colKey = () =>
-                            c().colIndex != null ? effectiveColumns()[c().colIndex!].key : undefined;
+                            c().colIndex != null
+                              ? effectiveColumns()[c().colIndex!].key
+                              : undefined;
 
                           // 그룹 헤더의 고정 여부: colspan 범위 내 모든 컬럼이 fixed인지
                           const isGroupFixed = (): boolean => {
@@ -881,12 +914,15 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
 
                           // 셀의 고정 컬럼 여부 (마지막 행이면 colIndex 기반, 그 외 그룹 기반)
                           const isCellFixed = () =>
-                            (c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex!].fixed) ||
+                            (c().isLastRow &&
+                              c().colIndex != null &&
+                              effectiveColumns()[c().colIndex!].fixed) ||
                             isGroupFixed();
 
                           // 셀의 마지막 고정 여부
                           const isCellLastFixed = () => {
-                            if (c().isLastRow && c().colIndex != null) return isLastFixed(c().colIndex!);
+                            if (c().isLastRow && c().colIndex != null)
+                              return isLastFixed(c().colIndex!);
                             if (isGroupFixed()) {
                               const lastCol = cellColIndex() + c().colspan - 1;
                               return isLastFixed(lastCol);
@@ -932,7 +968,11 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                                   : c().text
                               }
                               ref={(el: HTMLElement) => {
-                                if (c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex!].fixed) {
+                                if (
+                                  c().isLastRow &&
+                                  c().colIndex != null &&
+                                  effectiveColumns()[c().colIndex!].fixed
+                                ) {
                                   registerColumnRef(c().colIndex!, el);
                                 }
                               }}
@@ -958,9 +998,15 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                                           <Icon icon={IconSortDescending} size="1em" />
                                         </Show>
                                         <Show when={sortDef() == null}>
-                                          <Icon icon={IconArrowsSort} size="1em" class="opacity-30" />
+                                          <Icon
+                                            icon={IconArrowsSort}
+                                            size="1em"
+                                            class="opacity-30"
+                                          />
+                                        </Show>
+                                        <Show when={sortIndex()}>
+                                          {(idx) => <sub>{idx()}</sub>}
                                         </Show>
-                                        <Show when={sortIndex()}>{(idx) => <sub>{idx()}</sub>}</Show>
                                       </div>
                                     );
                                   }}
@@ -968,13 +1014,17 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                               </div>
                               <Show
                                 when={
-                                  c().isLastRow && c().colIndex != null && effectiveColumns()[c().colIndex!].resizable
+                                  c().isLastRow &&
+                                  c().colIndex != null &&
+                                  effectiveColumns()[c().colIndex!].resizable
                                 }
                               >
                                 <div
                                   class={resizerClass}
                                   onClick={(e) => e.stopPropagation()}
-                                  onPointerDown={(e) => onResizerPointerdown(e, effectiveColumns()[c().colIndex!].key)}
+                                  onPointerDown={(e) =>
+                                    onResizerPointerdown(e, effectiveColumns()[c().colIndex!].key)
+                                  }
                                   onDblClick={(e) => {
                                     e.stopPropagation();
                                     onResizerDoubleClick(effectiveColumns()[c().colIndex!].key);
@@ -1054,7 +1104,11 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                           )}
                         </For>
                         <Show when={flat.hasChildren}>
-                          <button type="button" class={expandToggleClass} onClick={() => toggleExpand(flat.item)}>
+                          <button
+                            type="button"
+                            class={expandToggleClass}
+                            onClick={() => toggleExpand(flat.item)}
+                          >
                             <Icon
                               icon={IconChevronDown}
                               size="1em"
@@ -1092,11 +1146,16 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                             fallback={
                               /* single 모드 */
                               <Show when={selectable() === true}>
-                                <div class={featureCellBodyClickableClass} onClick={() => toggleSelect(flat.item)}>
+                                <div
+                                  class={featureCellBodyClickableClass}
+                                  onClick={() => toggleSelect(flat.item)}
+                                >
                                   <div
                                     class={twMerge(
                                       selectSingleClass,
-                                      isSelected() ? selectSingleSelectedClass : selectSingleUnselectedClass,
+                                      isSelected()
+                                        ? selectSingleSelectedClass
+                                        : selectSingleUnselectedClass,
                                     )}
                                   >
                                     <Icon icon={IconChevronRight} size="1em" />
@@ -1116,7 +1175,11 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                                 }
                                 setLastClickedRow(rowIndex());
                               }}
-                              title={typeof selectable() === "string" ? (selectable() as string) : undefined}
+                              title={
+                                typeof selectable() === "string"
+                                  ? (selectable() as string)
+                                  : undefined
+                              }
                             >
                               <Checkbox
                                 value={isSelected()}
@@ -1148,7 +1211,10 @@ export const DataSheet: DataSheetComponent = <T,>(props: DataSheetProps<T>) => {
                         left: reorderColLeft(),
                       }}
                     >
-                      <div class={reorderCellWrapperClass} onPointerDown={(e) => onReorderPointerDown(e, flat.item)}>
+                      <div
+                        class={reorderCellWrapperClass}
+                        onPointerDown={(e) => onReorderPointerDown(e, flat.item)}
+                      >
                         <div class={reorderHandleClass}>
                           <Icon icon={IconGripVertical} size="1em" />
                         </div>

package/src/components/data/sheet/DataSheetColumn.tsx

@@ -3,7 +3,11 @@ import type { DataSheetColumnDef, DataSheetColumnProps } from "./types";
 import { normalizeHeader } from "./sheetUtils";
 
 export function isDataSheetColumnDef(value: unknown): value is DataSheetColumnDef<unknown> {
-  return value != null && typeof value === "object" && (value as Record<string, unknown>)["__type"] === "sheet-column";
+  return (
+    value != null &&
+    typeof value === "object" &&
+    (value as Record<string, unknown>)["__type"] === "sheet-column"
+  );
 }
 
 /* eslint-disable solid/reactivity -- plain object 반환 패턴으로 reactive context 불필요 */

package/src/components/data/sheet/DataSheetConfigDialog.tsx

@@ -2,7 +2,12 @@ import { type Component } from "solid-js";
 import { createStore, reconcile } from "solid-js/store";
 import clsx from "clsx";
 import { useDialogInstance } from "../../disclosure/DialogInstanceContext";
-import type { DataSheetConfig, DataSheetConfigColumn, DataSheetConfigColumnInfo, DataSheetReorderEvent } from "./types";
+import type {
+  DataSheetConfig,
+  DataSheetConfigColumn,
+  DataSheetConfigColumnInfo,
+  DataSheetReorderEvent,
+} from "./types";
 import { DataSheet } from "./DataSheet";
 import { Checkbox } from "../../form-control/checkbox/Checkbox";
 import { TextInput } from "../../form-control/field/TextInput";
@@ -66,7 +71,11 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
     setEditItems(reconcile(items));
   }
 
-  function updateItem(key: string, field: keyof EditColumnItem, value: EditColumnItem[keyof EditColumnItem]): void {
+  function updateItem(
+    key: string,
+    field: keyof EditColumnItem,
+    value: EditColumnItem[keyof EditColumnItem],
+  ): void {
     const index = editItems.findIndex((item) => item.key === key);
     if (index >= 0) {
       setEditItems(index, { [field]: value } as Partial<EditColumnItem>);
@@ -104,17 +113,30 @@ export const DataSheetConfigDialog: Component<DataSheetConfigDialogProps> = (pro
     <div class={containerClass}>
       <div class={sheetWrapperClass}>
         <DataSheet items={editItems} inset hideConfigBar onItemsReorder={handleReorder}>
-          <DataSheet.Column<EditColumnItem> key="header" header="컬럼" class="px-2 py-1" sortable={false}>
+          <DataSheet.Column<EditColumnItem>
+            key="header"
+            header="컬럼"
+            class="px-2 py-1"
+            sortable={false}
+          >
             {(ctx) => ctx.item.headerText}
           </DataSheet.Column>
           <DataSheet.Column<EditColumnItem> key="fixed" header="고정" sortable={false}>
             {(ctx) => (
-              <Checkbox inset value={ctx.item.fixed} onValueChange={(v) => updateItem(ctx.item.key, "fixed", v)} />
+              <Checkbox
+                inset
+                value={ctx.item.fixed}
+                onValueChange={(v) => updateItem(ctx.item.key, "fixed", v)}
+              />
             )}
           </DataSheet.Column>
           <DataSheet.Column<EditColumnItem> key="hidden" header="숨김" sortable={false}>
             {(ctx) => (
-              <Checkbox inset value={ctx.item.hidden} onValueChange={(v) => updateItem(ctx.item.key, "hidden", v)} />
+              <Checkbox
+                inset
+                value={ctx.item.hidden}
+                onValueChange={(v) => updateItem(ctx.item.key, "hidden", v)}
+              />
             )}
           </DataSheet.Column>
           <DataSheet.Column<EditColumnItem> key="width" header="너비" sortable={false}>