@sellmate/design-system-react 1.0.61 → 1.0.63

package/lib/components/components.ts

@@ -7,7 +7,7 @@
 
 /* eslint-disable */
 
-import { type CheckedType, type DateRangeValue, type DropdownButtonValue, type Event, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDateRangePickerCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonGroupCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2OptionSelectDetail, type SelectV2Value } from "@sellmate/design-system";
+import { type CheckedType, type DateRangeValue, type DropdownButtonValue, type Event, type RadioValue, type Row, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDateRangePickerCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, type SdGhostButtonCustomEvent, type SdInputCustomEvent, type SdNumberInputCustomEvent, type SdRadioButtonCustomEvent, type SdRadioCustomEvent, type SdRadioGroupCustomEvent, type SdSelectCustomEvent, type SdSelectDropdownCustomEvent, type SdSelectGroupCustomEvent, type SdSelectMultipleCustomEvent, type SdSelectMultipleGroupCustomEvent, type SdSelectOptionCustomEvent, type SdSelectOptionGroupCustomEvent, type SdSelectV2CustomEvent, type SdSelectV2ListItemCustomEvent, type SdSelectV2ListboxCustomEvent, type SdTableCustomEvent, type SdTextareaCustomEvent, type SelectEvents, type SelectMultipleEvents, type SelectOption, type SelectOptionGroup, type SelectV2Option, type SelectV2OptionSelectDetail, type SelectV2Value } from "@sellmate/design-system";
 import { SdActionModal as SdActionModalElement, defineCustomElement as defineSdActionModal } from "@sellmate/design-system/dist/components/sd-action-modal.js";
 import { SdBadge as SdBadgeElement, defineCustomElement as defineSdBadge } from "@sellmate/design-system/dist/components/sd-badge.js";
 import { SdBarcodeInput as SdBarcodeInputElement, defineCustomElement as defineSdBarcodeInput } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
@@ -16,6 +16,7 @@ import { SdButton as SdButtonElement, defineCustomElement as defineSdButton } fr
 import { SdCalendar as SdCalendarElement, defineCustomElement as defineSdCalendar } from "@sellmate/design-system/dist/components/sd-calendar.js";
 import { SdCard as SdCardElement, defineCustomElement as defineSdCard } from "@sellmate/design-system/dist/components/sd-card.js";
 import { SdCheckbox as SdCheckboxElement, defineCustomElement as defineSdCheckbox } from "@sellmate/design-system/dist/components/sd-checkbox.js";
+import { SdCircleProgress as SdCircleProgressElement, defineCustomElement as defineSdCircleProgress } from "@sellmate/design-system/dist/components/sd-circle-progress.js";
 import { SdConfirmModal as SdConfirmModalElement, defineCustomElement as defineSdConfirmModal } from "@sellmate/design-system/dist/components/sd-confirm-modal.js";
 import { SdDateBox as SdDateBoxElement, defineCustomElement as defineSdDateBox } from "@sellmate/design-system/dist/components/sd-date-box.js";
 import { SdDatePickerCalendar as SdDatePickerCalendarElement, defineCustomElement as defineSdDatePickerCalendar } from "@sellmate/design-system/dist/components/sd-date-picker-calendar.js";
@@ -32,14 +33,15 @@ import { SdGhostButton as SdGhostButtonElement, defineCustomElement as defineSdG
 import { SdGuide as SdGuideElement, defineCustomElement as defineSdGuide } from "@sellmate/design-system/dist/components/sd-guide.js";
 import { SdIcon as SdIconElement, defineCustomElement as defineSdIcon } from "@sellmate/design-system/dist/components/sd-icon.js";
 import { SdInput as SdInputElement, defineCustomElement as defineSdInput } from "@sellmate/design-system/dist/components/sd-input.js";
-import { SdLoadingSpinner as SdLoadingSpinnerElement, defineCustomElement as defineSdLoadingSpinner } from "@sellmate/design-system/dist/components/sd-loading-spinner.js";
+import { SdLoadingContainer as SdLoadingContainerElement, defineCustomElement as defineSdLoadingContainer } from "@sellmate/design-system/dist/components/sd-loading-container.js";
+import { SdLoadingModal as SdLoadingModalElement, defineCustomElement as defineSdLoadingModal } from "@sellmate/design-system/dist/components/sd-loading-modal.js";
 import { SdModalContainer as SdModalContainerElement, defineCustomElement as defineSdModalContainer } from "@sellmate/design-system/dist/components/sd-modal-container.js";
 import { SdNumberInput as SdNumberInputElement, defineCustomElement as defineSdNumberInput } from "@sellmate/design-system/dist/components/sd-number-input.js";
 import { SdPagination as SdPaginationElement, defineCustomElement as defineSdPagination } from "@sellmate/design-system/dist/components/sd-pagination.js";
 import { SdPopover as SdPopoverElement, defineCustomElement as defineSdPopover } from "@sellmate/design-system/dist/components/sd-popover.js";
 import { SdPortal as SdPortalElement, defineCustomElement as defineSdPortal } from "@sellmate/design-system/dist/components/sd-portal.js";
 import { SdProgress as SdProgressElement, defineCustomElement as defineSdProgress } from "@sellmate/design-system/dist/components/sd-progress.js";
-import { SdRadioButtonGroup as SdRadioButtonGroupElement, defineCustomElement as defineSdRadioButtonGroup } from "@sellmate/design-system/dist/components/sd-radio-button-group.js";
+import { SdRadioButton as SdRadioButtonElement, defineCustomElement as defineSdRadioButton } from "@sellmate/design-system/dist/components/sd-radio-button.js";
 import { SdRadioGroup as SdRadioGroupElement, defineCustomElement as defineSdRadioGroup } from "@sellmate/design-system/dist/components/sd-radio-group.js";
 import { SdRadio as SdRadioElement, defineCustomElement as defineSdRadio } from "@sellmate/design-system/dist/components/sd-radio.js";
 import { SdSelectDropdown as SdSelectDropdownElement, defineCustomElement as defineSdSelectDropdown } from "@sellmate/design-system/dist/components/sd-select-dropdown.js";
@@ -55,15 +57,21 @@ import { SdSelectV2Listbox as SdSelectV2ListboxElement, defineCustomElement as d
 import { SdSelectV2Trigger as SdSelectV2TriggerElement, defineCustomElement as defineSdSelectV2Trigger } from "@sellmate/design-system/dist/components/sd-select-v2-trigger.js";
 import { SdSelectV2 as SdSelectV2Element, defineCustomElement as defineSdSelectV2 } from "@sellmate/design-system/dist/components/sd-select-v2.js";
 import { SdSelect as SdSelectElement, defineCustomElement as defineSdSelect } from "@sellmate/design-system/dist/components/sd-select.js";
+import { SdSwitch as SdSwitchElement, defineCustomElement as defineSdSwitch } from "@sellmate/design-system/dist/components/sd-switch.js";
+import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from "@sellmate/design-system/dist/components/sd-table.js";
 import { SdTabs as SdTabsElement, defineCustomElement as defineSdTabs } from "@sellmate/design-system/dist/components/sd-tabs.js";
 import { SdTag as SdTagElement, defineCustomElement as defineSdTag } from "@sellmate/design-system/dist/components/sd-tag.js";
+import { SdTbody as SdTbodyElement, defineCustomElement as defineSdTbody } from "@sellmate/design-system/dist/components/sd-tbody.js";
+import { SdTd as SdTdElement, defineCustomElement as defineSdTd } from "@sellmate/design-system/dist/components/sd-td.js";
 import { SdTextLink as SdTextLinkElement, defineCustomElement as defineSdTextLink } from "@sellmate/design-system/dist/components/sd-text-link.js";
 import { SdTextarea as SdTextareaElement, defineCustomElement as defineSdTextarea } from "@sellmate/design-system/dist/components/sd-textarea.js";
+import { SdThead as SdTheadElement, defineCustomElement as defineSdThead } from "@sellmate/design-system/dist/components/sd-thead.js";
 import { SdToastContainer as SdToastContainerElement, defineCustomElement as defineSdToastContainer } from "@sellmate/design-system/dist/components/sd-toast-container.js";
 import { SdToast as SdToastElement, defineCustomElement as defineSdToast } from "@sellmate/design-system/dist/components/sd-toast.js";
-import { SdToggleButton as SdToggleButtonElement, defineCustomElement as defineSdToggleButton } from "@sellmate/design-system/dist/components/sd-toggle-button.js";
 import { SdToggle as SdToggleElement, defineCustomElement as defineSdToggle } from "@sellmate/design-system/dist/components/sd-toggle.js";
 import { SdTooltip as SdTooltipElement, defineCustomElement as defineSdTooltip } from "@sellmate/design-system/dist/components/sd-tooltip.js";
+import { SdTr as SdTrElement, defineCustomElement as defineSdTr } from "@sellmate/design-system/dist/components/sd-tr.js";
+import { TableTest as TableTestElement, defineCustomElement as defineTableTest } from "@sellmate/design-system/dist/components/table-test.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
@@ -176,6 +184,17 @@ export const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEven
     defineCustomElement: defineSdCheckbox
 });
 
+export type SdCircleProgressEvents = NonNullable<unknown>;
+
+export const SdCircleProgress: StencilReactComponent<SdCircleProgressElement, SdCircleProgressEvents> = /*@__PURE__*/ createComponent<SdCircleProgressElement, SdCircleProgressEvents>({
+    tagName: 'sd-circle-progress',
+    elementClass: SdCircleProgressElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as SdCircleProgressEvents,
+    defineCustomElement: defineSdCircleProgress
+});
+
 export type SdConfirmModalEvents = {
     onSdClose: EventName<CustomEvent<void>>,
     onSdCancel: EventName<CustomEvent<void>>,
@@ -321,7 +340,10 @@ export const SdField: StencilReactComponent<SdFieldElement, SdFieldEvents> = /*@
 
 export type SdFilePickerEvents = {
     onSdUpdate: EventName<SdFilePickerCustomEvent<File[] | File | null>>,
-    onSdReject: EventName<SdFilePickerCustomEvent<{ files: File[]; reason: 'max-file-size' | 'max-total-size' | 'max-files' }>>
+    onSdReject: EventName<SdFilePickerCustomEvent<{
+        files: File[];
+        reason: 'max-file-size' | 'max-total-size' | 'max-files';
+    }>>
 };
 
 export const SdFilePicker: StencilReactComponent<SdFilePickerElement, SdFilePickerEvents> = /*@__PURE__*/ createComponent<SdFilePickerElement, SdFilePickerEvents>({
@@ -416,15 +438,26 @@ export const SdInput: StencilReactComponent<SdInputElement, SdInputEvents> = /*@
     defineCustomElement: defineSdInput
 });
 
-export type SdLoadingSpinnerEvents = NonNullable<unknown>;
+export type SdLoadingContainerEvents = NonNullable<unknown>;
+
+export const SdLoadingContainer: StencilReactComponent<SdLoadingContainerElement, SdLoadingContainerEvents> = /*@__PURE__*/ createComponent<SdLoadingContainerElement, SdLoadingContainerEvents>({
+    tagName: 'sd-loading-container',
+    elementClass: SdLoadingContainerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as SdLoadingContainerEvents,
+    defineCustomElement: defineSdLoadingContainer
+});
+
+export type SdLoadingModalEvents = { onSdClick: EventName<CustomEvent<void>> };
 
-export const SdLoadingSpinner: StencilReactComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents> = /*@__PURE__*/ createComponent<SdLoadingSpinnerElement, SdLoadingSpinnerEvents>({
-    tagName: 'sd-loading-spinner',
-    elementClass: SdLoadingSpinnerElement,
+export const SdLoadingModal: StencilReactComponent<SdLoadingModalElement, SdLoadingModalEvents> = /*@__PURE__*/ createComponent<SdLoadingModalElement, SdLoadingModalEvents>({
+    tagName: 'sd-loading-modal',
+    elementClass: SdLoadingModalElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {} as SdLoadingSpinnerEvents,
-    defineCustomElement: defineSdLoadingSpinner
+    events: { onSdClick: 'sdClick' } as SdLoadingModalEvents,
+    defineCustomElement: defineSdLoadingModal
 });
 
 export type SdModalContainerEvents = NonNullable<unknown>;
@@ -512,15 +545,15 @@ export const SdRadio: StencilReactComponent<SdRadioElement, SdRadioEvents> = /*@
     defineCustomElement: defineSdRadio
 });
 
-export type SdRadioButtonGroupEvents = { onSdUpdate: EventName<SdRadioButtonGroupCustomEvent<RadioValue>> };
+export type SdRadioButtonEvents = { onSdUpdate: EventName<SdRadioButtonCustomEvent<RadioValue>> };
 
-export const SdRadioButtonGroup: StencilReactComponent<SdRadioButtonGroupElement, SdRadioButtonGroupEvents> = /*@__PURE__*/ createComponent<SdRadioButtonGroupElement, SdRadioButtonGroupEvents>({
-    tagName: 'sd-radio-button-group',
-    elementClass: SdRadioButtonGroupElement,
+export const SdRadioButton: StencilReactComponent<SdRadioButtonElement, SdRadioButtonEvents> = /*@__PURE__*/ createComponent<SdRadioButtonElement, SdRadioButtonEvents>({
+    tagName: 'sd-radio-button',
+    elementClass: SdRadioButtonElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: { onSdUpdate: 'sdUpdate' } as SdRadioButtonGroupEvents,
-    defineCustomElement: defineSdRadioButtonGroup
+    events: { onSdUpdate: 'sdUpdate' } as SdRadioButtonEvents,
+    defineCustomElement: defineSdRadioButton
 });
 
 export type SdRadioGroupEvents = { onSdUpdate: EventName<SdRadioGroupCustomEvent<RadioValue>> };
@@ -744,6 +777,48 @@ export const SdSelectV2Trigger: StencilReactComponent<SdSelectV2TriggerElement,
     defineCustomElement: defineSdSelectV2Trigger
 });
 
+export type SdSwitchEvents = { onSdUpdate: EventName<CustomEvent<boolean>> };
+
+export const SdSwitch: StencilReactComponent<SdSwitchElement, SdSwitchEvents> = /*@__PURE__*/ createComponent<SdSwitchElement, SdSwitchEvents>({
+    tagName: 'sd-switch',
+    elementClass: SdSwitchElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onSdUpdate: 'sdUpdate' } as SdSwitchEvents,
+    defineCustomElement: defineSdSwitch
+});
+
+export type SdTableEvents = {
+    onSdSelectChange: EventName<SdTableCustomEvent<Row[]>>,
+    onSdPageChange: EventName<CustomEvent<number>>,
+    onSdRowsPerPageChange: EventName<CustomEvent<number>>,
+    onSdVirtualUpdate: EventName<CustomEvent<{
+        from: number;
+        to: number;
+    }>>,
+    onSdVirtualReachEnd: EventName<CustomEvent<{
+        from: number;
+        to: number;
+        rowCount: number;
+        threshold: number;
+    }>>
+};
+
+export const SdTable: StencilReactComponent<SdTableElement, SdTableEvents> = /*@__PURE__*/ createComponent<SdTableElement, SdTableEvents>({
+    tagName: 'sd-table',
+    elementClass: SdTableElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onSdSelectChange: 'sdSelectChange',
+        onSdPageChange: 'sdPageChange',
+        onSdRowsPerPageChange: 'sdRowsPerPageChange',
+        onSdVirtualUpdate: 'sdVirtualUpdate',
+        onSdVirtualReachEnd: 'sdVirtualReachEnd'
+    } as SdTableEvents,
+    defineCustomElement: defineSdTable
+});
+
 export type SdTabsEvents = { onSdUpdate: EventName<CustomEvent<string>> };
 
 export const SdTabs: StencilReactComponent<SdTabsElement, SdTabsEvents> = /*@__PURE__*/ createComponent<SdTabsElement, SdTabsEvents>({
@@ -766,6 +841,28 @@ export const SdTag: StencilReactComponent<SdTagElement, SdTagEvents> = /*@__PURE
     defineCustomElement: defineSdTag
 });
 
+export type SdTbodyEvents = NonNullable<unknown>;
+
+export const SdTbody: StencilReactComponent<SdTbodyElement, SdTbodyEvents> = /*@__PURE__*/ createComponent<SdTbodyElement, SdTbodyEvents>({
+    tagName: 'sd-tbody',
+    elementClass: SdTbodyElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as SdTbodyEvents,
+    defineCustomElement: defineSdTbody
+});
+
+export type SdTdEvents = NonNullable<unknown>;
+
+export const SdTd: StencilReactComponent<SdTdElement, SdTdEvents> = /*@__PURE__*/ createComponent<SdTdElement, SdTdEvents>({
+    tagName: 'sd-td',
+    elementClass: SdTdElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as SdTdEvents,
+    defineCustomElement: defineSdTd
+});
+
 export type SdTextLinkEvents = { onSdClick: EventName<CustomEvent<void>> };
 
 export const SdTextLink: StencilReactComponent<SdTextLinkElement, SdTextLinkEvents> = /*@__PURE__*/ createComponent<SdTextLinkElement, SdTextLinkEvents>({
@@ -796,6 +893,17 @@ export const SdTextarea: StencilReactComponent<SdTextareaElement, SdTextareaEven
     defineCustomElement: defineSdTextarea
 });
 
+export type SdTheadEvents = NonNullable<unknown>;
+
+export const SdThead: StencilReactComponent<SdTheadElement, SdTheadEvents> = /*@__PURE__*/ createComponent<SdTheadElement, SdTheadEvents>({
+    tagName: 'sd-thead',
+    elementClass: SdTheadElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as SdTheadEvents,
+    defineCustomElement: defineSdThead
+});
+
 export type SdToastEvents = { onSdClose: EventName<CustomEvent<void>> };
 
 export const SdToast: StencilReactComponent<SdToastElement, SdToastEvents> = /*@__PURE__*/ createComponent<SdToastElement, SdToastEvents>({
@@ -835,17 +943,6 @@ export const SdToggle: StencilReactComponent<SdToggleElement, SdToggleEvents> =
     defineCustomElement: defineSdToggle
 });
 
-export type SdToggleButtonEvents = { onSdUpdate: EventName<CustomEvent<boolean>> };
-
-export const SdToggleButton: StencilReactComponent<SdToggleButtonElement, SdToggleButtonEvents> = /*@__PURE__*/ createComponent<SdToggleButtonElement, SdToggleButtonEvents>({
-    tagName: 'sd-toggle-button',
-    elementClass: SdToggleButtonElement,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onSdUpdate: 'sdUpdate' } as SdToggleButtonEvents,
-    defineCustomElement: defineSdToggleButton
-});
-
 export type SdTooltipEvents = NonNullable<unknown>;
 
 export const SdTooltip: StencilReactComponent<SdTooltipElement, SdTooltipEvents> = /*@__PURE__*/ createComponent<SdTooltipElement, SdTooltipEvents>({
@@ -856,3 +953,25 @@ export const SdTooltip: StencilReactComponent<SdTooltipElement, SdTooltipEvents>
     events: {} as SdTooltipEvents,
     defineCustomElement: defineSdTooltip
 });
+
+export type SdTrEvents = NonNullable<unknown>;
+
+export const SdTr: StencilReactComponent<SdTrElement, SdTrEvents> = /*@__PURE__*/ createComponent<SdTrElement, SdTrEvents>({
+    tagName: 'sd-tr',
+    elementClass: SdTrElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as SdTrEvents,
+    defineCustomElement: defineSdTr
+});
+
+export type TableTestEvents = { onTableReady: EventName<CustomEvent<void>> };
+
+export const TableTest: StencilReactComponent<TableTestElement, TableTestEvents> = /*@__PURE__*/ createComponent<TableTestElement, TableTestEvents>({
+    tagName: 'table-test',
+    elementClass: TableTestElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onTableReady: 'tableReady' } as TableTestEvents,
+    defineCustomElement: defineTableTest
+});

package/lib/hooks/useSdTableVirtualScroll.ts

@@ -0,0 +1,82 @@
+import { useEffect, useMemo, useState, type RefObject } from 'react';
+
+export interface VirtualRow<T = Record<string, any>> {
+  /** 전체 rows 기준 절대 인덱스 — SdTr의 rowKey로 사용 */
+  index: number;
+  row: T;
+}
+
+interface SdVirtualUpdateDetail {
+  from: number;
+  to: number;
+}
+
+export function useSdTableVirtualScroll<T extends Record<string, any>>(
+  tableRef: RefObject<HTMLElement | null>,
+  rows: T[],
+) {
+  const [range, setRange] = useState<{ from: number; to: number } | null>(null);
+
+  useEffect(() => {
+    let targetEl: HTMLElement | null = null;
+    let rafId = 0;
+
+    const onVirtualUpdate = (e: Event) => {
+      const { from, to } = (e as CustomEvent<SdVirtualUpdateDetail>).detail;
+      setRange({ from, to });
+    };
+
+    const syncRange = (el: HTMLElement): boolean => {
+      const currentRange = (el as any).getVirtualScrollRangeSync?.();
+      if (
+        currentRange &&
+        typeof currentRange.from === 'number' &&
+        typeof currentRange.to === 'number'
+      ) {
+        setRange({ from: currentRange.from, to: currentRange.to });
+        return true;
+      }
+      return false;
+    };
+
+    const attachWhenReady = () => {
+      const el = tableRef.current;
+      if (!el) {
+        rafId = requestAnimationFrame(attachWhenReady);
+        return;
+      }
+
+      targetEl = el;
+      targetEl.addEventListener('sdVirtualUpdate', onVirtualUpdate);
+
+      const trySync = () => {
+        if (!targetEl) return;
+        if (!syncRange(targetEl)) {
+          rafId = requestAnimationFrame(trySync);
+        }
+      };
+
+      trySync();
+    };
+
+    attachWhenReady();
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      targetEl?.removeEventListener('sdVirtualUpdate', onVirtualUpdate);
+    };
+  }, [tableRef]);
+
+  const virtualRows = useMemo<VirtualRow<T>[]>(() => {
+    if (!range) return [];
+    return rows
+      .slice(range.from, range.to)
+      .map((row, i) => ({ index: range.from + i, row }));
+  }, [rows, range]);
+
+  return {
+    virtualRows,
+    from: range?.from ?? 0,
+    to: range?.to ?? 0,
+  };
+}

package/lib/index.ts

@@ -1,16 +1,17 @@
 'use client';
 
 export * from './components/components.js';
+export { useSdTableVirtualScroll } from './hooks/useSdTableVirtualScroll';
+export type { VirtualRow } from './hooks/useSdTableVirtualScroll';
 export { defineCustomElements } from '@sellmate/design-system/loader';
-export { SdTable } from './SdTable';
-export type { SdTableProps } from './SdTable';
 export { sdModal } from './sdModal';
 export type { SdModalCreateOption } from './sdModal';
+export { sdLoading } from '@sellmate/design-system/utils';
+export type { SdLoadingShowOptions } from '@sellmate/design-system/utils';
 
 // Export commonly used types for React usage
 export type {
   // Table types
-  SdTableSortDir,
   SdTableColumn,
   Row as SdTableRow,
   // Select types

package/lib/sdModal.ts

@@ -8,6 +8,7 @@ import {
   _createSdModalRef,
   _attachSdModalWithRef,
   type ConfirmModalOptions,
+  type LoadingModalOptions,
   type ModalDialogRef,
   type SdModalCreateOption as CoreSdModalCreateOption,
   type SdModalGlobalOptions,
@@ -44,15 +45,7 @@ function mountReactComponent(
     root.render(createElement(component, componentProps));
   });
 
-  const el = host.firstElementChild as HTMLElement | null;
-  if (!el) {
-    root.unmount();
-    throw new Error(
-      '[sdModal] 전달한 React 컴포넌트의 루트는 단일 요소여야 합니다.',
-    );
-  }
-
-  return { el, host, root };
+  return { el: host, host, root };
 }
 
 /**
@@ -74,6 +67,10 @@ export const sdModal = {
     return coreSdModal.confirm(options);
   },
 
+  loading(options: LoadingModalOptions = {}): ModalDialogRef {
+    return coreSdModal.loading(options);
+  },
+
   configure(options: SdModalGlobalOptions): void {
     coreSdModal.configure(options);
   },

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@sellmate/design-system-react",
- "version": "1.0.61",
+ "version": "1.0.63",
  "description": "Design System - React Component Wrappers",
  "keywords": [
   "react",
@@ -54,7 +54,7 @@
   "dev": "tsc --watch"
  },
  "dependencies": {
-  "@sellmate/design-system": "^1.0.61",
+  "@sellmate/design-system": "^1.0.63",
   "@stencil/react-output-target": "^1.2.0"
  },
  "peerDependencies": {

package/dist/SdTable.d.ts

@@ -1,40 +0,0 @@
-import React from 'react';
-import type { Row as SdTableRow, SdTableColumn } from '@sellmate/design-system';
-import { SdTable as SdTableElement } from '@sellmate/design-system/dist/components/sd-table.js';
-import { type EventName } from '@stencil/react-output-target/runtime';
-type TablePagination = {
-    page: number;
-    rowsPerPage: number;
-    lastPage?: number;
-};
-type HeaderRenderContext = {
-    column: SdTableColumn;
-};
-type CellRenderContext<RowType extends SdTableRow> = {
-    column: SdTableColumn;
-    row: RowType;
-    rowIndex: number;
-    value: any;
-};
-type HeaderRendererMap = Partial<Record<string, (context: HeaderRenderContext) => React.ReactNode>>;
-type CellRendererMap<RowType extends SdTableRow> = Partial<Record<string, (context: CellRenderContext<RowType>) => React.ReactNode>>;
-type SdTableBaseEvents = {
-    onSdSelectChange: EventName<CustomEvent<SdTableRow[]>>;
-    onSdPageChange: EventName<CustomEvent<number>>;
-    onSdRowsPerPageChange: EventName<CustomEvent<number>>;
-};
-declare const SdTableBase: import("@stencil/react-output-target/runtime").StencilReactComponent<SdTableElement, SdTableBaseEvents>;
-export type SdTableProps<RowType extends SdTableRow = SdTableRow> = Omit<React.ComponentProps<typeof SdTableBase>, 'columns' | 'rows' | 'selected' | 'children'> & {
-    columns: SdTableColumn[];
-    rows?: RowType[] | null;
-    selected?: RowType[];
-    pagination?: TablePagination;
-    useInternalPagination?: boolean;
-    headerRenderers?: HeaderRendererMap;
-    cellRenderers?: CellRendererMap<RowType>;
-    renderHeader?: (context: HeaderRenderContext) => React.ReactNode;
-    renderCell?: (context: CellRenderContext<RowType>) => React.ReactNode;
-    noDataContent?: React.ReactNode;
-};
-export declare function SdTable<RowType extends SdTableRow = SdTableRow>({ columns, rows, selected, pagination, useInternalPagination, headerRenderers, cellRenderers, renderHeader, renderCell, noDataContent, onSdPageChange, onSdRowsPerPageChange, ...props }: SdTableProps<RowType>): React.JSX.Element;
-export default SdTable;

package/dist/SdTable.js

@@ -1,74 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import { SdTable as SdTableElement, defineCustomElement as defineSdTable } from '@sellmate/design-system/dist/components/sd-table.js';
-import { createComponent } from '@stencil/react-output-target/runtime';
-const SLOT_WRAPPER_STYLE = {
-    display: 'contents',
-};
-const SdTableBase = /* @__PURE__ */ createComponent({
-    tagName: 'sd-table',
-    elementClass: SdTableElement,
-    react: React,
-    events: {
-        onSdSelectChange: 'sdSelectChange',
-        onSdPageChange: 'sdPageChange',
-        onSdRowsPerPageChange: 'sdRowsPerPageChange',
-    },
-    defineCustomElement: defineSdTable,
-});
-const getCellValue = (column, row) => {
-    const { field, format, name } = column;
-    const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
-    return format ? format(value, row) : value;
-};
-export function SdTable({ columns, rows, selected, pagination, useInternalPagination = false, headerRenderers, cellRenderers, renderHeader, renderCell, noDataContent, onSdPageChange, onSdRowsPerPageChange, ...props }) {
-    const normalizedRows = rows ?? [];
-    const [currentPage, setCurrentPage] = useState(pagination?.page || 1);
-    const [currentRowsPerPage, setCurrentRowsPerPage] = useState(pagination?.rowsPerPage || normalizedRows.length || 0);
-    useEffect(() => {
-        setCurrentPage(pagination?.page || 1);
-        setCurrentRowsPerPage(pagination?.rowsPerPage || normalizedRows.length || 0);
-    }, [pagination?.page, pagination?.rowsPerPage, normalizedRows.length]);
-    const renderedRows = useInternalPagination && currentRowsPerPage
-        ? normalizedRows.slice((currentPage - 1) * currentRowsPerPage, currentPage * currentRowsPerPage)
-        : normalizedRows;
-    const slotChildren = [];
-    if (noDataContent !== undefined) {
-        slotChildren.push(React.createElement("span", { key: "no-data", slot: "no-data", style: SLOT_WRAPPER_STYLE }, noDataContent));
-    }
-    columns.forEach(column => {
-        const renderer = headerRenderers?.[column.name] || renderHeader;
-        if (!renderer)
-            return;
-        const rendered = renderer({ column });
-        if (rendered == null)
-            return;
-        slotChildren.push(React.createElement("span", { key: `header-${column.name}`, slot: `header-cell-${column.name}`, style: SLOT_WRAPPER_STYLE }, rendered));
-    });
-    renderedRows.forEach((row, rowIndex) => {
-        columns.forEach(column => {
-            const renderer = cellRenderers?.[column.name] || renderCell;
-            if (!renderer)
-                return;
-            const rendered = renderer({
-                column,
-                row,
-                rowIndex,
-                value: getCellValue(column, row),
-            });
-            if (rendered == null)
-                return;
-            slotChildren.push(React.createElement("span", { key: `cell-${column.name}-${rowIndex}`, slot: `body-cell-${column.name}-${rowIndex}`, style: SLOT_WRAPPER_STYLE }, rendered));
-        });
-    });
-    return (React.createElement(SdTableBase, { ...props, columns: columns, rows: normalizedRows, selected: selected, pagination: pagination, useInternalPagination: useInternalPagination, onSdPageChange: event => {
-            setCurrentPage(event.detail);
-            onSdPageChange?.(event);
-        }, onSdRowsPerPageChange: event => {
-            setCurrentRowsPerPage(event.detail);
-            const lastPage = Math.max(1, Math.ceil(normalizedRows.length / event.detail));
-            setCurrentPage(previousPage => Math.min(previousPage, lastPage));
-            onSdRowsPerPageChange?.(event);
-        } }, slotChildren));
-}
-export default SdTable;