sellmate-design-system-react 0.12.0 → 1.1.0

package/dist/components/SModal/SModal.d.ts

@@ -6,29 +6,41 @@ export type SConfirmOptions = Omit<SConfirmModalProps, 'open' | 'onOpenChange' |
 /** SModal.loading 옵션 — 제어 흐름을 서비스가 담당하므로 관련 props 는 제외 */
 export type SLoadingOptions = Omit<SLoadingModalProps, 'open' | 'onOpenChange' | 'onClose' | 'onButtonClick'>;
 /**
- * create() 가 커스텀 컴포넌트에 주입하는 prop.
+ * create() 가 컴포넌트에 주입하는 prop.
+ *
+ * 컴포넌트는 `open`/`onOpenChange`/`onClose` 를 루트의 SActionModal 에 **그대로 전달**해야 한다.
+ * 전달하지 않으면 모달이 열리지도, 닫히지도 않는다.
+ *
  * (컴포넌트 문서 생성기 docs:gen 은 `*Props` interface 를 "컴포넌트"로 취급하므로,
  *  서비스인 SModal 이 컴포넌트로 잘못 문서화되지 않도록 type 별칭으로 둔다. README 는 수작성.)
  */
 export type SModalCreateComponentProps = {
+    /** 표시 여부 — SActionModal 의 open 에 그대로 전달 */
+    open: boolean;
+    /** 표시 상태 변경 — SActionModal 의 onOpenChange 에 그대로 전달 */
+    onOpenChange: (open: boolean) => void;
+    /** 닫기(X) 클릭 — SActionModal 의 onClose 에 그대로 전달 */
+    onClose: () => void;
     /** 모달 제어 핸들. 컴포넌트에서 ok()/cancel()/close()/submit()/onSubmit() 호출 */
     modalRef: SModalRef;
 };
-/** SModal.create 옵션 — 커스텀 React 컴포넌트를 SModalContainer(딤+카드) 안에 렌더 */
+/**
+ * SModal.create 옵션 — SActionModal 을 루트로 렌더하는 컴포넌트를 띄운다.
+ *
+ * 디자인 시스템이 띄우는 모달은 SActionModal / SConfirmModal / SLoadingModal 세 가지뿐이고,
+ * 서비스 메서드가 1:1 로 대응한다 — create → SActionModal, confirm → SConfirmModal,
+ * loading → SLoadingModal. create 는 컨테이너를 덧씌우지 않고 component 를 그대로 렌더하며,
+ * 표시 제어(open/onOpenChange/onClose/modalRef)만 주입하고 닫힘 후 정리를 담당한다.
+ */
 export interface SCreateOptions<P extends object = Record<string, never>> {
-    /** 모달 본문으로 렌더할 컴포넌트. modalRef 가 prop 으로 주입된다. */
+    /**
+     * 띄울 컴포넌트. **루트에 SActionModal 을 렌더**하고 주입받은 open/onOpenChange/onClose 를
+     * 그대로 전달해야 한다. 모달 껍데기 없이 본문만 렌더하면 딤·카드 없이 콘텐츠가 그대로
+     * 화면에 붙는다 — 개발 모드에서는 이를 감지해 경고한다.
+     */
     component: ComponentType<P & SModalCreateComponentProps>;
-    /** component 에 전달할 추가 props (modalRef 제외) */
+    /** component 에 전달할 추가 props (주입 prop 과 이름이 겹치면 주입 쪽이 이긴다) */
     componentProps?: P;
-    /** 백드롭·ESC 로 안 닫히고 흔들림 */
-    persistent?: boolean;
-    /** 우측 상단 닫기(X) 버튼 (기본 false) */
-    showClose?: boolean;
-    width?: number | string;
-    height?: number | string;
-    className?: string;
-    /** 접근성 제목 (스크린리더용) */
-    ariaTitle?: string;
 }
 /**
  * SModal.confirm / loading / create 반환 핸들 — 체이닝 콜백 등록 + 트리거/update/close.
@@ -81,10 +93,16 @@ export interface SModalRef {
  * catch { ref.update({ state: 'error', message: '업로드 실패' }).onClick(() => retry()); }
  *
  * @example
- * // 커스텀 컴포넌트 모달 — 컴포넌트가 modalRef 로 자기 모달 제어
- * SModal.create({ component: OrderFormModal, componentProps: { orderId }, persistent: true })
- *   .onSubmit(async () => { await save(); ref.ok(); })
- *   .onDismissed(() => {});
+ * // SActionModal 을 루트로 렌더하는 컴포넌트를 만들어 넘긴다 — 주입 prop 은 그대로 전달
+ * function OrderModal({ open, onOpenChange, onClose, modalRef, orderId }: OrderModalProps) {
+ *   return (
+ *     <SActionModal open={open} onOpenChange={onOpenChange} onClose={onClose}
+ *       modalTitle="주문 처리" button={{ label: '처리', onClick: () => modalRef.ok() }}>
+ *       <OrderBody orderId={orderId} />
+ *     </SActionModal>
+ *   );
+ * }
+ * SModal.create({ component: OrderModal, componentProps: { orderId } }).onOk(() => refetch());
  */
 export declare const SModal: {
     /** 확인/취소 모달을 즉시 띄운다. 반환 핸들에 onOk/onCancel/onClose/onDismissed 체이닝. */
@@ -95,8 +113,9 @@ export declare const SModal: {
      */
     loading(options?: SLoadingOptions): SModalRef;
     /**
-     * 커스텀 React 컴포넌트를 SModalContainer(딤+카드) 안에 띄운다. component 에 modalRef 가
-     * prop 으로 주입되어 컴포넌트가 ok()/cancel()/close()/submit()/onSubmit() 으로 자기 모달을 제어한다.
+     * SActionModal 을 루트로 렌더하는 컴포넌트를 띄운다. 컨테이너를 덧씌우지 않고 표시 제어
+     * (open/onOpenChange/onClose)와 modalRef 만 주입하며, 닫힘 애니메이션 종료 후 자동으로
+     * 언마운트한다. 컴포넌트가 모달을 띄우지 않으면 개발 모드에서 경고한다.
      */
     create<P extends object = Record<string, never>>(options: SCreateOptions<P>): SModalRef;
 };

package/dist/components/SModal/SModal.js

@@ -3112,7 +3112,7 @@ function SModalContainer({
             "div",
             {
               className: cn(
-                "relative overflow-hidden rounded-[var(--cmp-modal-radius)] bg-[var(--cmp-modal-bg)] shadow-normal-md",
+                "relative flex max-h-[calc(100dvh-48px)] flex-col overflow-hidden rounded-[var(--cmp-modal-radius)] bg-[var(--cmp-modal-bg)] shadow-normal-md",
                 shaking && "animate-modal-shake",
                 className
               ),
@@ -3370,8 +3370,8 @@ function SConfirmModal({
       showClose: true,
       onClose,
       className: "w-fit min-w-[520px]",
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[40px] px-[32px] py-[40px]", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-[20px]", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-auto flex-col items-center gap-[40px] px-[32px] py-[40px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full min-h-0 flex-col items-center gap-[20px] overflow-y-auto", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[12px]", children: [
             iconName && /* @__PURE__ */ jsx(SIcon, { name: iconName, size: 32, color: TYPE_ICON_COLOR[type] }),
             /* @__PURE__ */ jsx(
@@ -3393,7 +3393,7 @@ function SConfirmModal({
             optionNode != null && optionNode
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-[8px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 gap-[8px]", children: [
           subButtonLabel && /* @__PURE__ */ jsx(
             SButton,
             {
@@ -3569,7 +3569,7 @@ function SLoadingModal({
       ariaTitle: lines[0] || "\uB85C\uB529 \uC911",
       width,
       height,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-[20px] px-[32px]", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-auto flex-col overflow-y-auto px-[32px]", children: /* @__PURE__ */ jsxs("div", { className: "m-auto flex flex-col items-center gap-[20px]", children: [
         state === "loading" ? progress !== void 0 ? /* @__PURE__ */ jsx(SCircleProgress, { value: progress }) : /* @__PURE__ */ jsx(SCircleProgress, { indeterminate: true }) : /* @__PURE__ */ jsx(SIcon, { name: "warningOutline", size: 80, color: "var(--cmp-modal-confirm-negative-icon)" }),
         lines.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: lines.map((m, i) => /* @__PURE__ */ jsx(
           "p",
@@ -3592,7 +3592,7 @@ function SLoadingModal({
             label: buttonLabel ?? DEFAULT_BUTTON_LABEL[state]
           }
         )
-      ] })
+      ] }) })
     }
   );
 }
@@ -3675,6 +3675,10 @@ var SModalRefImpl = class {
     this.root = root;
     this.host = host;
   }
+  /** @internal create 의 마운트 검사용 host 조회 */
+  _getHost() {
+    return this.host;
+  }
   /** @internal 닫힘 시작 표시 — 컴포넌트 버튼·백드롭·ESC 닫힘 경로가 호출(중복 트리거 방지) */
   _markDismissed() {
     this.dismissRequested = true;
@@ -3770,46 +3774,35 @@ function LoadingMount({ options, refImpl }) {
     }
   );
 }
+function warnIfNotModal(host, component) {
+  if (typeof process !== "undefined" && process?.env?.NODE_ENV === "production") return;
+  if (!host || host.childElementCount === 0) return;
+  const name = component?.name || "component";
+  console.warn(
+    `[SModal.create] ${name} \uC774(\uAC00) \uBAA8\uB2EC\uC744 \uB744\uC6B0\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4. create \uB294 \uCEE8\uD14C\uC774\uB108\uB97C \uB367\uC50C\uC6B0\uC9C0 \uC54A\uC73C\uBBC0\uB85C component \uB294 \uB8E8\uD2B8\uC5D0 SActionModal \uC744 \uB80C\uB354\uD558\uACE0, \uC8FC\uC785\uBC1B\uC740 open/onOpenChange/onClose \uB97C \uADF8\uB300\uB85C \uC804\uB2EC\uD574\uC57C \uD569\uB2C8\uB2E4. \uD655\uC778/\uCDE8\uC18C\uB294 SModal.confirm, \uB85C\uB529\uC740 SModal.loading \uC744 \uC0AC\uC6A9\uD558\uC138\uC694.`
+  );
+}
 function CreateMount({ options, refImpl }) {
-  const {
-    component: Component,
-    componentProps,
-    persistent,
-    showClose,
-    width,
-    height,
-    className,
-    ariaTitle
-  } = options;
+  const { component: Component, componentProps } = options;
   const [open, setOpen] = useState(true);
   useEffect(() => {
     refImpl._bindClose(() => setOpen(false));
     refImpl._bindUpdate(() => {
     });
-  }, [refImpl]);
+    warnIfNotModal(refImpl._getHost(), Component);
+  }, [refImpl, Component]);
   useExitTeardown(open, refImpl);
   const componentAllProps = {
     ...componentProps,
+    open,
+    onOpenChange: (o) => {
+      if (!o) refImpl._markDismissed();
+      setOpen(o);
+    },
+    onClose: () => refImpl._emitClose(),
     modalRef: refImpl
   };
-  return /* @__PURE__ */ jsx(
-    SModalContainer,
-    {
-      open,
-      onOpenChange: (o) => {
-        if (!o) refImpl._markDismissed();
-        setOpen(o);
-      },
-      persistent,
-      showClose,
-      onClose: () => refImpl.close(),
-      ariaTitle,
-      width,
-      height,
-      className,
-      children: /* @__PURE__ */ jsx(Component, { ...componentAllProps })
-    }
-  );
+  return /* @__PURE__ */ jsx(Component, { ...componentAllProps });
 }
 function mount(render) {
   const host = document.createElement("div");
@@ -3833,8 +3826,9 @@ var SModal = {
     return mount((refImpl) => /* @__PURE__ */ jsx(LoadingMount, { options: { persistent: true, ...options }, refImpl }));
   },
   /**
-   * 커스텀 React 컴포넌트를 SModalContainer(딤+카드) 안에 띄운다. component 에 modalRef 가
-   * prop 으로 주입되어 컴포넌트가 ok()/cancel()/close()/submit()/onSubmit() 으로 자기 모달을 제어한다.
+   * SActionModal 을 루트로 렌더하는 컴포넌트를 띄운다. 컨테이너를 덧씌우지 않고 표시 제어
+   * (open/onOpenChange/onClose)와 modalRef 만 주입하며, 닫힘 애니메이션 종료 후 자동으로
+   * 언마운트한다. 컴포넌트가 모달을 띄우지 않으면 개발 모드에서 경고한다.
    */
   create(options) {
     return mount((refImpl) => /* @__PURE__ */ jsx(CreateMount, { options, refImpl }));