@sellmate/design-system-react 1.0.46 → 1.0.47

package/dist/components/components.d.ts

@@ -3,6 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, 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 { SdActionModal as SdActionModalElement } from "@sellmate/design-system/dist/components/sd-action-modal.js";
 import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
 import { SdBarcodeInput as SdBarcodeInputElement } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
 import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
@@ -55,6 +56,11 @@ import { SdToggleButton as SdToggleButtonElement } from "@sellmate/design-system
 import { SdToggle as SdToggleElement } from "@sellmate/design-system/dist/components/sd-toggle.js";
 import { SdTooltip as SdTooltipElement } from "@sellmate/design-system/dist/components/sd-tooltip.js";
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+export type SdActionModalEvents = {
+    onSdClose: EventName<CustomEvent<void>>;
+    onSdOk: EventName<CustomEvent<void>>;
+};
+export declare const SdActionModal: StencilReactComponent<SdActionModalElement, SdActionModalEvents>;
 export type SdBadgeEvents = NonNullable<unknown>;
 export declare const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents>;
 export type SdBarcodeInputEvents = {
@@ -87,6 +93,7 @@ export type SdCheckboxEvents = {
 export declare const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEvents>;
 export type SdConfirmModalEvents = {
     onSdClose: EventName<CustomEvent<void>>;
+    onSdCancel: EventName<CustomEvent<void>>;
     onSdOk: EventName<CustomEvent<void>>;
 };
 export declare const SdConfirmModal: StencilReactComponent<SdConfirmModalElement, SdConfirmModalEvents>;

package/dist/components/components.js

@@ -1,4 +1,5 @@
 'use client';
+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";
 import { SdButtonV2 as SdButtonV2Element, defineCustomElement as defineSdButtonV2 } from "@sellmate/design-system/dist/components/sd-button-v2.js";
@@ -52,6 +53,17 @@ import { SdToggle as SdToggleElement, defineCustomElement as defineSdToggle } fr
 import { SdTooltip as SdTooltipElement, defineCustomElement as defineSdTooltip } from "@sellmate/design-system/dist/components/sd-tooltip.js";
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
+export const SdActionModal = /*@__PURE__*/ createComponent({
+    tagName: 'sd-action-modal',
+    elementClass: SdActionModalElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onSdClose: 'sdClose',
+        onSdOk: 'sdOk'
+    },
+    defineCustomElement: defineSdActionModal
+});
 export const SdBadge = /*@__PURE__*/ createComponent({
     tagName: 'sd-badge',
     elementClass: SdBadgeElement,
@@ -122,6 +134,7 @@ export const SdConfirmModal = /*@__PURE__*/ createComponent({
     react: React,
     events: {
         onSdClose: 'sdClose',
+        onSdCancel: 'sdCancel',
         onSdOk: 'sdOk'
     },
     defineCustomElement: defineSdConfirmModal

package/dist/components/components.server.d.ts

@@ -3,6 +3,7 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import { type CheckedType, type DropdownButtonValue, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, 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 { SdActionModal as SdActionModalElement } from "@sellmate/design-system/dist/components/sd-action-modal.js";
 import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
 import { SdBarcodeInput as SdBarcodeInputElement } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
 import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
@@ -57,6 +58,11 @@ import { SdTooltip as SdTooltipElement } from "@sellmate/design-system/dist/comp
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
 export declare const serializeShadowRoot: SerializeShadowRootOptions;
+export type SdActionModalEvents = {
+    onSdClose: EventName<CustomEvent<void>>;
+    onSdOk: EventName<CustomEvent<void>>;
+};
+export declare const SdActionModal: StencilReactComponent<SdActionModalElement, SdActionModalEvents>;
 export type SdBadgeEvents = NonNullable<unknown>;
 export declare const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents>;
 export type SdBarcodeInputEvents = {
@@ -89,6 +95,7 @@ export type SdCheckboxEvents = {
 export declare const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEvents>;
 export type SdConfirmModalEvents = {
     onSdClose: EventName<CustomEvent<void>>;
+    onSdCancel: EventName<CustomEvent<void>>;
     onSdOk: EventName<CustomEvent<void>>;
 };
 export declare const SdConfirmModal: StencilReactComponent<SdConfirmModalElement, SdConfirmModalEvents>;

package/dist/components/components.server.js

@@ -7,6 +7,16 @@
 import * as clientComponents from '@sellmate/design-system-react';
 import { createComponent } from '@stencil/react-output-target/ssr';
 export const serializeShadowRoot = { default: "declarative-shadow-dom" };
+export const SdActionModal = /*@__PURE__*/ createComponent({
+    tagName: 'sd-action-modal',
+    properties: {
+        title: 'title',
+        buttonLabel: 'button-label'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate'),
+    clientModule: clientComponents.SdActionModal,
+    serializeShadowRoot,
+});
 export const SdBadge = /*@__PURE__*/ createComponent({
     tagName: 'sd-badge',
     properties: {

package/dist/index.d.ts

@@ -2,4 +2,6 @@ export * from './components/components.js';
 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 type { SdTableSortDir, SdTableColumn, Row as SdTableRow, SelectOption, SelectOptionGroup, SelectEvents, SelectMultipleEvents, SelectStyleProps, RadioValue, RadioOption, ButtonVariant, ButtonSize, ButtonV2Name, DropdownButtonItem, DropdownButtonName, DropdownButtonSize, DropdownButtonValue, Rule, ValidatableField, SdTooltipProps, TagName, ToastType, CheckedType, Type as DateBoxType, TabOption, } from '@sellmate/design-system';

package/dist/index.js

@@ -2,3 +2,4 @@
 export * from './components/components.js';
 export { defineCustomElements } from '@sellmate/design-system/loader';
 export { SdTable } from './SdTable';
+export { sdModal } from './sdModal';

package/dist/sdModal.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentType } from 'react';
+import { type ConfirmModalOptions, type ModalDialogChain, type SdModalCreateOption as CoreSdModalCreateOption, type SdModalGlobalOptions } from '@sellmate/design-system/utils';
+/**
+ * `sdModal.create` 에 넘기는 입력.
+ *
+ * - `component` 에 HTMLElement 를 넘기면 core `sdModal.create` 로 바로 위임합니다.
+ *   이 경우 `componentProps` 는 무시됩니다.
+ * - `component` 에 React 컴포넌트(`ComponentType`) 를 넘기면 `componentProps` 로
+ *   props 를 지정해 `createRoot + flushSync` 로 렌더한 뒤 core 로 위임합니다.
+ * - `persist` 는 core 옵션을 그대로 전달합니다.
+ */
+export interface SdModalCreateOption extends Omit<CoreSdModalCreateOption, 'component'> {
+    component: HTMLElement | ComponentType<any>;
+    componentProps?: Record<string, unknown>;
+}
+/**
+ * React-aware `sdModal`.
+ *
+ * - `sdModal.confirm(options)` — core 와 동일
+ * - `sdModal.create({ component, componentProps?, persist? })` —
+ *   `component` 가 HTMLElement 면 core 로 위임, React 컴포넌트면
+ *   `createRoot + flushSync` 로 렌더한 뒤 위임합니다. 모달이 닫히면
+ *   자동으로 언마운트됩니다.
+ *
+ * 주의: React 의 `createRoot` 는 새 React 트리를 만들기 때문에 부모 트리의
+ * Context Provider(Redux store, React Router, Theme 등) 를 상속받지 못합니다.
+ * 모달 내부에서 Context 가 필요하면 전달하는 컴포넌트 내부에서 직접 Provider 로
+ * 감싸주세요.
+ */
+export declare const sdModal: {
+    confirm(options: ConfirmModalOptions): ModalDialogChain;
+    configure(options: SdModalGlobalOptions): void;
+    create(input: SdModalCreateOption): ModalDialogChain;
+};
+export default sdModal;

package/dist/sdModal.js

@@ -0,0 +1,60 @@
+'use client';
+import { createElement } from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
+import { sdModal as coreSdModal, } from '@sellmate/design-system/utils';
+function isHTMLElement(value) {
+    return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;
+}
+function mountReactComponent(component, componentProps) {
+    const host = document.createElement('div');
+    const root = createRoot(host);
+    // flushSync 로 동기 렌더 → firstElementChild 즉시 접근 가능
+    flushSync(() => {
+        root.render(createElement(component, componentProps));
+    });
+    const el = host.firstElementChild;
+    if (!el) {
+        root.unmount();
+        throw new Error('[sdModal] 전달한 React 컴포넌트의 루트는 단일 요소여야 합니다.');
+    }
+    return { el, host, root };
+}
+/**
+ * React-aware `sdModal`.
+ *
+ * - `sdModal.confirm(options)` — core 와 동일
+ * - `sdModal.create({ component, componentProps?, persist? })` —
+ *   `component` 가 HTMLElement 면 core 로 위임, React 컴포넌트면
+ *   `createRoot + flushSync` 로 렌더한 뒤 위임합니다. 모달이 닫히면
+ *   자동으로 언마운트됩니다.
+ *
+ * 주의: React 의 `createRoot` 는 새 React 트리를 만들기 때문에 부모 트리의
+ * Context Provider(Redux store, React Router, Theme 등) 를 상속받지 못합니다.
+ * 모달 내부에서 Context 가 필요하면 전달하는 컴포넌트 내부에서 직접 Provider 로
+ * 감싸주세요.
+ */
+export const sdModal = {
+    confirm(options) {
+        return coreSdModal.confirm(options);
+    },
+    configure(options) {
+        coreSdModal.configure(options);
+    },
+    create(input) {
+        const { component, componentProps = {}, persist } = input;
+        // HTMLElement 오버로드: core 로 바로 위임
+        if (isHTMLElement(component)) {
+            return coreSdModal.create({ component, persist });
+        }
+        // React 컴포넌트 오버로드
+        const { el, host, root } = mountReactComponent(component, componentProps);
+        const chain = coreSdModal.create({ component: el, persist });
+        chain.onDismissed(() => {
+            root.unmount();
+            host.remove();
+        });
+        return chain;
+    },
+};
+export default sdModal;

package/lib/components/components.server.ts

@@ -9,6 +9,7 @@
 import * as clientComponents from '@sellmate/design-system-react';
 
 import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, 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 { SdActionModal as SdActionModalElement } from "@sellmate/design-system/dist/components/sd-action-modal.js";
 import { SdBadge as SdBadgeElement } from "@sellmate/design-system/dist/components/sd-badge.js";
 import { SdBarcodeInput as SdBarcodeInputElement } from "@sellmate/design-system/dist/components/sd-barcode-input.js";
 import { SdButtonV2 as SdButtonV2Element } from "@sellmate/design-system/dist/components/sd-button-v2.js";
@@ -65,6 +66,22 @@ import { createComponent, type HydrateModule, type ReactWebComponent, type Seria
 
 export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative-shadow-dom" };
 
+export type SdActionModalEvents = {
+    onSdClose: EventName<CustomEvent<void>>,
+    onSdOk: EventName<CustomEvent<void>>
+};
+
+export const SdActionModal: StencilReactComponent<SdActionModalElement, SdActionModalEvents> = /*@__PURE__*/ createComponent<SdActionModalElement, SdActionModalEvents>({
+    tagName: 'sd-action-modal',
+    properties: {
+        title: 'title',
+        buttonLabel: 'button-label'
+    },
+    hydrateModule: import('@sellmate/design-system/hydrate') as Promise<HydrateModule>,
+    clientModule: clientComponents.SdActionModal as ReactWebComponent<SdActionModalElement, SdActionModalEvents>,
+    serializeShadowRoot,
+});
+
 export type SdBadgeEvents = NonNullable<unknown>;
 
 export const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents> = /*@__PURE__*/ createComponent<SdBadgeElement, SdBadgeEvents>({
@@ -195,6 +212,7 @@ export const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEven
 
 export type SdConfirmModalEvents = {
     onSdClose: EventName<CustomEvent<void>>,
+    onSdCancel: EventName<CustomEvent<void>>,
     onSdOk: EventName<CustomEvent<void>>
 };
 

package/lib/components/components.ts

@@ -8,6 +8,7 @@
 /* eslint-disable */
 
 import { type CheckedType, type DropdownButtonValue, type Event, type RadioValue, type SdBarcodeInputCustomEvent, type SdButtonCustomEvent, type SdButtonV2CustomEvent, type SdCheckboxCustomEvent, type SdDropdownButtonCustomEvent, type SdFilePickerCustomEvent, 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 { 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";
 import { SdButtonV2 as SdButtonV2Element, defineCustomElement as defineSdButtonV2 } from "@sellmate/design-system/dist/components/sd-button-v2.js";
@@ -63,6 +64,23 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
 
+export type SdActionModalEvents = {
+    onSdClose: EventName<CustomEvent<void>>,
+    onSdOk: EventName<CustomEvent<void>>
+};
+
+export const SdActionModal: StencilReactComponent<SdActionModalElement, SdActionModalEvents> = /*@__PURE__*/ createComponent<SdActionModalElement, SdActionModalEvents>({
+    tagName: 'sd-action-modal',
+    elementClass: SdActionModalElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onSdClose: 'sdClose',
+        onSdOk: 'sdOk'
+    } as SdActionModalEvents,
+    defineCustomElement: defineSdActionModal
+});
+
 export type SdBadgeEvents = NonNullable<unknown>;
 
 export const SdBadge: StencilReactComponent<SdBadgeElement, SdBadgeEvents> = /*@__PURE__*/ createComponent<SdBadgeElement, SdBadgeEvents>({
@@ -156,6 +174,7 @@ export const SdCheckbox: StencilReactComponent<SdCheckboxElement, SdCheckboxEven
 
 export type SdConfirmModalEvents = {
     onSdClose: EventName<CustomEvent<void>>,
+    onSdCancel: EventName<CustomEvent<void>>,
     onSdOk: EventName<CustomEvent<void>>
 };
 
@@ -166,6 +185,7 @@ export const SdConfirmModal: StencilReactComponent<SdConfirmModalElement, SdConf
     react: React,
     events: {
         onSdClose: 'sdClose',
+        onSdCancel: 'sdCancel',
         onSdOk: 'sdOk'
     } as SdConfirmModalEvents,
     defineCustomElement: defineSdConfirmModal

package/lib/index.ts

@@ -4,43 +4,45 @@ export * from './components/components.js';
 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 commonly used types for React usage
 export type {
- // Table types
- SdTableSortDir,
- SdTableColumn,
- Row as SdTableRow,
- // Select types
- SelectOption,
- SelectOptionGroup,
- SelectEvents,
- SelectMultipleEvents,
- SelectStyleProps,
- // Radio types
- RadioValue,
- RadioOption,
- // Button types
- ButtonVariant,
- ButtonSize,
- ButtonV2Name,
- DropdownButtonItem,
- DropdownButtonName,
- DropdownButtonSize,
- DropdownButtonValue,
- // Form types
- Rule,
- ValidatableField,
- // Tooltip types
- SdTooltipProps,
- // Tag types
- TagName,
- // Toast types
- ToastType,
- // Checkbox types
- CheckedType,
- // Date types
- Type as DateBoxType,
- // Tab types
- TabOption,
+  // Table types
+  SdTableSortDir,
+  SdTableColumn,
+  Row as SdTableRow,
+  // Select types
+  SelectOption,
+  SelectOptionGroup,
+  SelectEvents,
+  SelectMultipleEvents,
+  SelectStyleProps,
+  // Radio types
+  RadioValue,
+  RadioOption,
+  // Button types
+  ButtonVariant,
+  ButtonSize,
+  ButtonV2Name,
+  DropdownButtonItem,
+  DropdownButtonName,
+  DropdownButtonSize,
+  DropdownButtonValue,
+  // Form types
+  Rule,
+  ValidatableField,
+  // Tooltip types
+  SdTooltipProps,
+  // Tag types
+  TagName,
+  // Toast types
+  ToastType,
+  // Checkbox types
+  CheckedType,
+  // Date types
+  Type as DateBoxType,
+  // Tab types
+  TabOption,
 } from '@sellmate/design-system';

package/lib/sdModal.ts

@@ -0,0 +1,99 @@
+'use client';
+
+import { createElement, type ComponentType } from 'react';
+import { flushSync } from 'react-dom';
+import { createRoot, type Root } from 'react-dom/client';
+import {
+  sdModal as coreSdModal,
+  type ConfirmModalOptions,
+  type ModalDialogChain,
+  type SdModalCreateOption as CoreSdModalCreateOption,
+  type SdModalGlobalOptions,
+} from '@sellmate/design-system/utils';
+
+/**
+ * `sdModal.create` 에 넘기는 입력.
+ *
+ * - `component` 에 HTMLElement 를 넘기면 core `sdModal.create` 로 바로 위임합니다.
+ *   이 경우 `componentProps` 는 무시됩니다.
+ * - `component` 에 React 컴포넌트(`ComponentType`) 를 넘기면 `componentProps` 로
+ *   props 를 지정해 `createRoot + flushSync` 로 렌더한 뒤 core 로 위임합니다.
+ * - `persist` 는 core 옵션을 그대로 전달합니다.
+ */
+export interface SdModalCreateOption
+  extends Omit<CoreSdModalCreateOption, 'component'> {
+  component: HTMLElement | ComponentType<any>;
+  componentProps?: Record<string, unknown>;
+}
+
+function isHTMLElement(value: unknown): value is HTMLElement {
+  return typeof HTMLElement !== 'undefined' && value instanceof HTMLElement;
+}
+
+function mountReactComponent(
+  component: ComponentType<any>,
+  componentProps: Record<string, unknown>,
+): { el: HTMLElement; host: HTMLElement; root: Root } {
+  const host = document.createElement('div');
+  const root = createRoot(host);
+
+  // flushSync 로 동기 렌더 → firstElementChild 즉시 접근 가능
+  flushSync(() => {
+    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 };
+}
+
+/**
+ * React-aware `sdModal`.
+ *
+ * - `sdModal.confirm(options)` — core 와 동일
+ * - `sdModal.create({ component, componentProps?, persist? })` —
+ *   `component` 가 HTMLElement 면 core 로 위임, React 컴포넌트면
+ *   `createRoot + flushSync` 로 렌더한 뒤 위임합니다. 모달이 닫히면
+ *   자동으로 언마운트됩니다.
+ *
+ * 주의: React 의 `createRoot` 는 새 React 트리를 만들기 때문에 부모 트리의
+ * Context Provider(Redux store, React Router, Theme 등) 를 상속받지 못합니다.
+ * 모달 내부에서 Context 가 필요하면 전달하는 컴포넌트 내부에서 직접 Provider 로
+ * 감싸주세요.
+ */
+export const sdModal = {
+  confirm(options: ConfirmModalOptions): ModalDialogChain {
+    return coreSdModal.confirm(options);
+  },
+
+  configure(options: SdModalGlobalOptions): void {
+    coreSdModal.configure(options);
+  },
+
+  create(input: SdModalCreateOption): ModalDialogChain {
+    const { component, componentProps = {}, persist } = input;
+
+    // HTMLElement 오버로드: core 로 바로 위임
+    if (isHTMLElement(component)) {
+      return coreSdModal.create({ component, persist });
+    }
+
+    // React 컴포넌트 오버로드
+    const { el, host, root } = mountReactComponent(component, componentProps);
+    const chain = coreSdModal.create({ component: el, persist });
+    chain.onDismissed(() => {
+      root.unmount();
+      host.remove();
+    });
+
+    return chain;
+  },
+};
+
+export default sdModal;

package/package.json

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