@simplysm/solid 13.0.28 → 13.0.30

package/src/components/data/sheet/sheetUtils.ts

@@ -7,7 +7,9 @@ export function normalizeHeader(header?: string | string[]): string[] {
   return header;
 }
 
-export function buildHeaderTable<TItem>(columns: DataSheetColumnDef<TItem>[]): (HeaderDef | null)[][] {
+export function buildHeaderTable<TItem>(
+  columns: DataSheetColumnDef<TItem>[],
+): (HeaderDef | null)[][] {
   if (columns.length === 0) return [];
 
   const maxDepth = Math.max(...columns.map((c) => c.header.length));
@@ -84,7 +86,13 @@ export function buildHeaderTable<TItem>(columns: DataSheetColumnDef<TItem>[]): (
 }
 
 // 같은 병합 그룹에 속하는지 확인 (행 0~endRow까지 같은 텍스트 시퀀스)
-function isSameGroup(padded: string[][], colA: number, colB: number, startRow: number, endRow: number): boolean {
+function isSameGroup(
+  padded: string[][],
+  colA: number,
+  colB: number,
+  startRow: number,
+  endRow: number,
+): boolean {
   for (let r = startRow; r < endRow; r++) {
     if (padded[colA][r] !== padded[colB][r]) return false;
   }
@@ -152,7 +160,8 @@ export function applySorting<TItem>(items: TItem[], sorts: SortingDef[]): TItem[
 
   let result = [...items];
   for (const sort of [...sorts].reverse()) {
-    const selector = (item: TItem) => objGetChainValue(item, sort.key) as string | number | undefined;
+    const selector = (item: TItem) =>
+      objGetChainValue(item, sort.key) as string | number | undefined;
     result = sort.desc ? result.orderByDesc(selector) : result.orderBy(selector);
   }
   return result;

package/src/components/data/sheet/types.ts

@@ -15,8 +15,8 @@ export interface DataSheetProps<TItem> {
   autoSort?: boolean;
 
   // 페이지네이션
-  pageIndex?: number;
-  onPageIndexChange?: (pageIndex: number) => void;
+  page?: number;
+  onPageChange?: (page: number) => void;
   totalPageCount?: number;
   itemsPerPage?: number;
   displayPageCount?: number;

package/src/components/disclosure/Collapse.tsx

@@ -1,4 +1,11 @@
-import { type JSX, type ParentComponent, splitProps, createSignal, onMount, onCleanup } from "solid-js";
+import {
+  type JSX,
+  type ParentComponent,
+  splitProps,
+  createSignal,
+  onMount,
+  onCleanup,
+} from "solid-js";
 import { createElementSize } from "@solid-primitives/resize-observer";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -23,7 +30,12 @@ export interface CollapseProps extends JSX.HTMLAttributes<HTMLDivElement> {
   open?: boolean;
 }
 
-const transitionClass = clsx("transition-[margin-top]", "duration-200", "ease-out", "motion-reduce:transition-none");
+const transitionClass = clsx(
+  "transition-[margin-top]",
+  "duration-200",
+  "ease-out",
+  "motion-reduce:transition-none",
+);
 
 export const Collapse: ParentComponent<CollapseProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "style", "open"]);
@@ -54,7 +66,6 @@ export const Collapse: ParentComponent<CollapseProps> = (props) => {
       data-collapse
       class={twMerge("block", local.class)}
       style={mergeStyles(local.style, { overflow: "hidden" })}
-      aria-hidden={!isOpen()}
     >
       <div
         ref={setContentRef}

package/src/components/disclosure/Dialog.tsx

@@ -1,10 +1,20 @@
-import { type JSX, type ParentComponent, createEffect, onCleanup, Show, splitProps, For, useContext } from "solid-js";
+import {
+  type JSX,
+  type ParentComponent,
+  createEffect,
+  onCleanup,
+  Show,
+  splitProps,
+  For,
+  useContext,
+} from "solid-js";
 import { Portal } from "solid-js/web";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { IconX } from "@tabler/icons-solidjs";
 import { createControllableSignal } from "../../hooks/createControllableSignal";
 import { createMountTransition } from "../../hooks/createMountTransition";
+import { createPointerDrag } from "../../hooks/createPointerDrag";
 import { mergeStyles } from "../../helpers/mergeStyles";
 import { Icon } from "../display/Icon";
 import { borderSubtle } from "../../styles/tokens.styles";
@@ -34,14 +44,14 @@ export interface DialogProps {
   float?: boolean;
   /** 전체 화면 모드 */
   fill?: boolean;
-  /** 너비 (px) */
-  widthPx?: number;
-  /** 높이 (px) */
-  heightPx?: number;
-  /** 최소 너비 (px) */
-  minWidthPx?: number;
-  /** 최소 높이 (px) */
-  minHeightPx?: number;
+  /** 너비 */
+  width?: number;
+  /** 높이 */
+  height?: number;
+  /** 최소 너비 */
+  minWidth?: number;
+  /** 최소 높이 */
+  minHeight?: number;
   /** 고정 위치 */
   position?: "bottom-right" | "top-right";
   /** 헤더 스타일 */
@@ -58,7 +68,15 @@ export interface DialogProps {
   children: JSX.Element;
 }
 
-type ResizeDirection = "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type ResizeDirection =
+  | "left"
+  | "right"
+  | "top"
+  | "bottom"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
 
 const RESIZE_DIRECTIONS: ResizeDirection[] = [
   "left",
@@ -126,10 +144,10 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
     "movable",
     "float",
     "fill",
-    "widthPx",
-    "heightPx",
-    "minWidthPx",
-    "minHeightPx",
+    "width",
+    "height",
+    "minWidth",
+    "minHeight",
     "position",
     "headerStyle",
     "headerAction",
@@ -171,7 +189,8 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
   let wrapperRef: HTMLDivElement | undefined;
 
   const closeOnEscape = () => local.closeOnEscape ?? dialogDefaults?.().closeOnEscape ?? true;
-  const closeOnBackdrop = () => local.closeOnBackdrop ?? dialogDefaults?.().closeOnBackdrop ?? false;
+  const closeOnBackdrop = () =>
+    local.closeOnBackdrop ?? dialogDefaults?.().closeOnBackdrop ?? false;
 
   // Escape 키 감지
   createEffect(() => {
@@ -238,8 +257,6 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
     if ((event.target as HTMLElement).closest("button")) return;
 
     const target = event.currentTarget as HTMLElement;
-    target.setPointerCapture(event.pointerId);
-
     const dialogEl = dialogRef;
     const wrapperEl = wrapperRef;
 
@@ -248,42 +265,37 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
     const startTop = dialogEl.offsetTop;
     const startLeft = dialogEl.offsetLeft;
 
-    const doDrag = (e: PointerEvent): void => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      dialogEl.style.position = "absolute";
-      dialogEl.style.left = `${startLeft + e.clientX - startX}px`;
-      dialogEl.style.top = `${startTop + e.clientY - startY}px`;
-      dialogEl.style.right = "auto";
-      dialogEl.style.bottom = "auto";
-      dialogEl.style.margin = "0";
-
-      // 화면 밖 방지
-      if (dialogEl.offsetLeft > wrapperEl.offsetWidth - 100) {
-        dialogEl.style.left = wrapperEl.offsetWidth - 100 + "px";
-      }
-      if (dialogEl.offsetTop > wrapperEl.offsetHeight - 100) {
-        dialogEl.style.top = wrapperEl.offsetHeight - 100 + "px";
-      }
-      if (dialogEl.offsetTop < 0) {
-        dialogEl.style.top = "0";
-      }
-      if (dialogEl.offsetLeft < -dialogEl.offsetWidth + 100) {
-        dialogEl.style.left = -dialogEl.offsetWidth + 100 + "px";
-      }
-    };
-
-    const stopDrag = (e: PointerEvent): void => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      target.removeEventListener("pointermove", doDrag);
-      target.removeEventListener("pointerup", stopDrag);
-    };
-
-    target.addEventListener("pointermove", doDrag);
-    target.addEventListener("pointerup", stopDrag);
+    createPointerDrag(target, event.pointerId, {
+      onMove(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        dialogEl.style.position = "absolute";
+        dialogEl.style.left = `${startLeft + e.clientX - startX}px`;
+        dialogEl.style.top = `${startTop + e.clientY - startY}px`;
+        dialogEl.style.right = "auto";
+        dialogEl.style.bottom = "auto";
+        dialogEl.style.margin = "0";
+
+        // 화면 밖 방지
+        if (dialogEl.offsetLeft > wrapperEl.offsetWidth - 100) {
+          dialogEl.style.left = wrapperEl.offsetWidth - 100 + "px";
+        }
+        if (dialogEl.offsetTop > wrapperEl.offsetHeight - 100) {
+          dialogEl.style.top = wrapperEl.offsetHeight - 100 + "px";
+        }
+        if (dialogEl.offsetTop < 0) {
+          dialogEl.style.top = "0";
+        }
+        if (dialogEl.offsetLeft < -dialogEl.offsetWidth + 100) {
+          dialogEl.style.left = -dialogEl.offsetWidth + 100 + "px";
+        }
+      },
+      onEnd(e) {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+    });
   };
 
   // 리사이즈
@@ -292,8 +304,6 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
     if (!dialogRef) return;
 
     const target = event.currentTarget as HTMLElement;
-    target.setPointerCapture(event.pointerId);
-
     const dialogEl = dialogRef;
 
     const startX = event.clientX;
@@ -303,47 +313,42 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
     const startTop = dialogEl.offsetTop;
     const startLeft = dialogEl.offsetLeft;
 
-    const doDrag = (e: PointerEvent): void => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      if (direction === "top" || direction === "top-right" || direction === "top-left") {
-        if (dialogEl.style.position === "absolute") {
-          dialogEl.style.top = startTop + (e.clientY - startY) + "px";
-          dialogEl.style.bottom = "auto";
+    createPointerDrag(target, event.pointerId, {
+      onMove(e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (direction === "top" || direction === "top-right" || direction === "top-left") {
+          if (dialogEl.style.position === "absolute") {
+            dialogEl.style.top = startTop + (e.clientY - startY) + "px";
+            dialogEl.style.bottom = "auto";
+          }
+          dialogEl.style.height = `${Math.max(startHeight - (e.clientY - startY), local.minHeight ?? 0)}px`;
         }
-        dialogEl.style.height = `${Math.max(startHeight - (e.clientY - startY), local.minHeightPx ?? 0)}px`;
-      }
-      if (direction === "bottom" || direction === "bottom-right" || direction === "bottom-left") {
-        dialogEl.style.height = `${Math.max(startHeight + e.clientY - startY, local.minHeightPx ?? 0)}px`;
-      }
-      if (direction === "right" || direction === "bottom-right" || direction === "top-right") {
-        dialogEl.style.width = `${Math.max(
-          startWidth + (e.clientX - startX) * (dialogEl.style.position === "absolute" ? 1 : 2),
-          local.minWidthPx ?? 0,
-        )}px`;
-      }
-      if (direction === "left" || direction === "bottom-left" || direction === "top-left") {
-        if (dialogEl.style.position === "absolute") {
-          dialogEl.style.left = startLeft + (e.clientX - startX) + "px";
+        if (direction === "bottom" || direction === "bottom-right" || direction === "bottom-left") {
+          dialogEl.style.height = `${Math.max(startHeight + e.clientY - startY, local.minHeight ?? 0)}px`;
         }
-        dialogEl.style.width = `${Math.max(
-          startWidth - (e.clientX - startX) * (dialogEl.style.position === "absolute" ? 1 : 2),
-          local.minWidthPx ?? 0,
-        )}px`;
-      }
-    };
-
-    const stopDrag = (e: PointerEvent): void => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      target.removeEventListener("pointermove", doDrag);
-      target.removeEventListener("pointerup", stopDrag);
-    };
-
-    target.addEventListener("pointermove", doDrag);
-    target.addEventListener("pointerup", stopDrag);
+        if (direction === "right" || direction === "bottom-right" || direction === "top-right") {
+          dialogEl.style.width = `${Math.max(
+            startWidth + (e.clientX - startX) * (dialogEl.style.position === "absolute" ? 1 : 2),
+            local.minWidth ?? 0,
+          )}px`;
+        }
+        if (direction === "left" || direction === "bottom-left" || direction === "top-left") {
+          if (dialogEl.style.position === "absolute") {
+            dialogEl.style.left = startLeft + (e.clientX - startX) + "px";
+          }
+          dialogEl.style.width = `${Math.max(
+            startWidth - (e.clientX - startX) * (dialogEl.style.position === "absolute" ? 1 : 2),
+            local.minWidth ?? 0,
+          )}px`;
+        }
+      },
+      onEnd(e) {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+    });
   };
 
   // dialog 인라인 스타일 계산
@@ -354,19 +359,19 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
       style.width = "100%";
       style.height = "100%";
     } else {
-      if (local.widthPx !== undefined) {
-        style.width = `${local.widthPx}px`;
+      if (local.width !== undefined) {
+        style.width = `${local.width}px`;
       }
-      if (local.heightPx !== undefined) {
-        style.height = `${local.heightPx}px`;
+      if (local.height !== undefined) {
+        style.height = `${local.height}px`;
       }
     }
 
-    if (local.minWidthPx !== undefined) {
-      style["min-width"] = `${local.minWidthPx}px`;
+    if (local.minWidth !== undefined) {
+      style["min-width"] = `${local.minWidth}px`;
     }
-    if (local.minHeightPx !== undefined) {
-      style["min-height"] = `${local.minHeightPx}px`;
+    if (local.minHeight !== undefined) {
+      style["min-height"] = `${local.minHeight}px`;
     }
 
     // position 모드
@@ -423,7 +428,9 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
       "mx-auto",
       "w-fit min-w-[200px]",
       "bg-white dark:bg-base-800",
-      local.float ? clsx("shadow-md dark:shadow-black/30", "border", borderSubtle) : "shadow-2xl dark:shadow-black/40",
+      local.float
+        ? clsx("shadow-md dark:shadow-black/30", "border", borderSubtle)
+        : "shadow-2xl dark:shadow-black/40",
       local.fill ? "rounded-none border-none" : "rounded-lg",
       "overflow-hidden",
       "flex flex-col",
@@ -470,10 +477,14 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
               <div
                 data-modal-header
                 class={clsx(headerClass(), "touch-none")}
-                style={typeof local.headerStyle === "string" ? mergeStyles(local.headerStyle) : local.headerStyle}
+                style={
+                  typeof local.headerStyle === "string"
+                    ? mergeStyles(local.headerStyle)
+                    : local.headerStyle
+                }
                 onPointerDown={handleHeaderPointerDown}
               >
-                <h5 class={clsx("flex-1", "px-4 py-2", "text-sm font-semibold")}>{local.title}</h5>
+                <h5 class={clsx("flex-1", "px-4 py-2", "text-sm font-bold")}>{local.title}</h5>
                 {local.headerAction}
                 <Show when={local.closable ?? true}>
                   <button
@@ -506,7 +517,12 @@ export const Dialog: ParentComponent<DialogProps> = (props) => {
                 {(direction) => (
                   <div
                     data-resize-bar={direction}
-                    class={clsx("absolute", "touch-none", resizePositionMap[direction], resizeCursorMap[direction])}
+                    class={clsx(
+                      "absolute",
+                      "touch-none",
+                      resizePositionMap[direction],
+                      resizeCursorMap[direction],
+                    )}
                     onPointerDown={(e) => handleResizeBarPointerDown(e, direction)}
                   />
                 )}

package/src/components/disclosure/DialogContext.ts

@@ -17,17 +17,20 @@ export interface DialogShowOptions {
   movable?: boolean;
   float?: boolean;
   fill?: boolean;
-  widthPx?: number;
-  heightPx?: number;
-  minWidthPx?: number;
-  minHeightPx?: number;
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  minHeight?: number;
   position?: "bottom-right" | "top-right";
   headerStyle?: JSX.CSSProperties | string;
   canDeactivate?: () => boolean;
 }
 
 export interface DialogContextValue {
-  show<T = undefined>(factory: () => JSX.Element, options: DialogShowOptions): Promise<T | undefined>;
+  show<T = undefined>(
+    factory: () => JSX.Element,
+    options: DialogShowOptions,
+  ): Promise<T | undefined>;
 }
 
 export const DialogContext = createContext<DialogContextValue>();

package/src/components/disclosure/DialogProvider.tsx

@@ -1,4 +1,11 @@
-import { type Accessor, type ParentComponent, createSignal, For, splitProps, type JSX } from "solid-js";
+import {
+  type Accessor,
+  type ParentComponent,
+  createSignal,
+  For,
+  splitProps,
+  type JSX,
+} from "solid-js";
 import {
   DialogContext,
   DialogDefaultsContext,
@@ -46,7 +53,10 @@ export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
 
   const [entries, setEntries] = createSignal<DialogEntry[]>([]);
 
-  const show = <T,>(factory: () => JSX.Element, options: DialogShowOptions): Promise<T | undefined> => {
+  const show = <T,>(
+    factory: () => JSX.Element,
+    options: DialogShowOptions,
+  ): Promise<T | undefined> => {
     return new Promise<T | undefined>((resolve) => {
       const id = String(nextId++);
       const [open, setOpen] = createSignal(true);
@@ -114,15 +124,17 @@ export const DialogProvider: ParentComponent<DialogProviderProps> = (props) => {
                 movable={entry.options.movable}
                 float={entry.options.float}
                 fill={entry.options.fill}
-                widthPx={entry.options.widthPx}
-                heightPx={entry.options.heightPx}
-                minWidthPx={entry.options.minWidthPx}
-                minHeightPx={entry.options.minHeightPx}
+                width={entry.options.width}
+                height={entry.options.height}
+                minWidth={entry.options.minWidth}
+                minHeight={entry.options.minHeight}
                 position={entry.options.position}
                 headerStyle={entry.options.headerStyle}
                 canDeactivate={entry.options.canDeactivate}
               >
-                <DialogInstanceContext.Provider value={instance}>{entry.factory()}</DialogInstanceContext.Provider>
+                <DialogInstanceContext.Provider value={instance}>
+                  {entry.factory()}
+                </DialogInstanceContext.Provider>
               </Dialog>
             );
           }}

package/src/components/disclosure/Dropdown.tsx

@@ -1,4 +1,12 @@
-import { type JSX, type ParentComponent, createSignal, createEffect, onCleanup, Show, splitProps } from "solid-js";
+import {
+  type JSX,
+  type ParentComponent,
+  createSignal,
+  createEffect,
+  onCleanup,
+  Show,
+  splitProps,
+} from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import { createMountTransition } from "../../hooks/createMountTransition";
 import { Portal } from "solid-js/web";
@@ -261,7 +269,9 @@ export const Dropdown: ParentComponent<DropdownProps> = (props) => {
 
     const dir = direction();
     const focusables = [
-      ...popup.querySelectorAll<HTMLElement>('[tabindex]:not([tabindex="-1"]), button, [data-list-item]'),
+      ...popup.querySelectorAll<HTMLElement>(
+        '[tabindex]:not([tabindex="-1"]), button, [data-list-item]',
+      ),
     ];
 
     if (dir === "down") {

package/src/components/disclosure/Tabs.tsx

@@ -40,11 +40,18 @@ function TabsTabInner(props: TabsTabProps) {
     }
   };
 
-  const baseClass = clsx("relative cursor-pointer select-none font-medium", "transition-colors", "-mb-px");
+  const baseClass = clsx(
+    "relative cursor-pointer select-none font-medium",
+    "transition-colors",
+    "-mb-px",
+  );
 
   const stateClass = () =>
     isSelected()
-      ? clsx("border-b-2 border-primary-500 text-primary-600", "dark:border-primary-400 dark:text-primary-400")
+      ? clsx(
+          "border-b-2 border-primary-500 text-primary-600",
+          "dark:border-primary-400 dark:text-primary-400",
+        )
       : clsx(
           "border-b-2 border-transparent",
           "text-base-500 hover:border-base-300 hover:text-base-700",
@@ -60,7 +67,13 @@ function TabsTabInner(props: TabsTabProps) {
       aria-selected={isSelected()}
       aria-disabled={props.disabled ?? false}
       tabIndex={props.disabled ? -1 : 0}
-      class={twMerge(baseClass, sizeClasses(), stateClass(), props.disabled && disabledClass, props.class)}
+      class={twMerge(
+        baseClass,
+        sizeClasses(),
+        stateClass(),
+        props.disabled && disabledClass,
+        props.class,
+      )}
       onClick={() => {
         if (!props.disabled) {
           ctx.select(props.value);
@@ -97,7 +110,14 @@ interface TabsComponent {
 }
 
 const TabsInner: ParentComponent<TabsProps> = (props) => {
-  const [local, rest] = splitProps(props, ["value", "onValueChange", "size", "class", "style", "children"]);
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onValueChange",
+    "size",
+    "class",
+    "style",
+    "children",
+  ]);
 
   const [value, setValue] = createControllableSignal<string | undefined>({
     value: () => local.value,
@@ -112,7 +132,11 @@ const TabsInner: ParentComponent<TabsProps> = (props) => {
     size: () => local.size,
   };
 
-  const baseClass = clsx("inline-flex items-center gap-1", "border-b border-base-200", "dark:border-base-700");
+  const baseClass = clsx(
+    "inline-flex items-center gap-1",
+    "border-b border-base-200",
+    "dark:border-base-700",
+  );
 
   return (
     <TabsContext.Provider value={contextValue}>

package/src/components/display/Alert.tsx

@@ -11,10 +11,9 @@ export interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
 
 const baseClass = clsx("block", "p-3", "rounded");
 
-const themeClasses = Object.fromEntries(Object.entries(themeTokens).map(([theme, t]) => [theme, t.light])) as Record<
-  AlertTheme,
-  string
->;
+const themeClasses = Object.fromEntries(
+  Object.entries(themeTokens).map(([theme, t]) => [theme, t.light]),
+) as Record<AlertTheme, string>;
 
 export const Alert: ParentComponent<AlertProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "theme"]);

package/src/components/display/Card.tsx

@@ -1,7 +1,6 @@
 import { type JSX, type ParentComponent, splitProps } from "solid-js";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-import "./Card.css";
 
 export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {}
 
@@ -12,7 +11,7 @@ const baseClass = clsx(
   "shadow focus-within:shadow-md hover:shadow-md",
   "dark:shadow-black/20 dark:focus-within:shadow-black/30 dark:hover:shadow-black/30",
   "transition-shadow duration-300",
-  "animate-card-in",
+  "animate-fade-in",
 );
 
 export const Card: ParentComponent<CardProps> = (props) => {

package/src/components/display/Echarts.tsx

@@ -1,4 +1,11 @@
-import { type Component, createEffect, createSignal, onCleanup, splitProps, type JSX } from "solid-js";
+import {
+  type Component,
+  createEffect,
+  createSignal,
+  onCleanup,
+  splitProps,
+  type JSX,
+} from "solid-js";
 import { createResizeObserver } from "@solid-primitives/resize-observer";
 import type * as echartsType from "echarts";
 import clsx from "clsx";
@@ -6,13 +13,13 @@ import { twMerge } from "tailwind-merge";
 
 export interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
   option: echartsType.EChartsOption;
-  loading?: boolean;
+  busy?: boolean;
 }
 
 const baseClass = clsx("block", "size-full");
 
 export const Echarts: Component<EchartsProps> = (props) => {
-  const [local, rest] = splitProps(props, ["option", "loading", "class"]);
+  const [local, rest] = splitProps(props, ["option", "busy", "class"]);
   let containerRef!: HTMLDivElement;
   let chart: echartsType.EChartsType | undefined;
   const [ready, setReady] = createSignal(false);
@@ -33,10 +40,10 @@ export const Echarts: Component<EchartsProps> = (props) => {
     chart!.setOption(local.option);
   });
 
-  // loading 상태 변경 감지
+  // busy 상태 변경 감지
   createEffect(() => {
     if (!ready()) return;
-    if (local.loading) {
+    if (local.busy) {
       chart!.showLoading();
     } else {
       chart!.hideLoading();