sellmate-design-system-react 9.0.0-beta.69 → 9.0.0-beta.70

package/AGENTS.md

@@ -874,13 +874,15 @@ SModal.create({ component: OrderModal, componentProps: { orderId } })
 | | `persistent` 기본값 | 기본 닫기 경로 | 백드롭·ESC |
 | --- | --- | --- | --- |
 | `SActionModal` · `SLoadingModal` | `true` | X 버튼, 모달 안의 버튼 | 막힘 (흔들림) |
+| ↳ `SActionModal` 에 `showClose={false}` | `true` | **모달 안의 버튼만** | 막힘 (흔들림) |
 | `SDrawer` | `true` | X 버튼, footer 버튼 | 막힘 (흔들림) |
 | `SConfirmModal` | `false` | X 버튼, 확인 버튼 | **닫힌다** |
 | `SPopover` · `STooltip` · `SSelect` 등 floating | — | 바깥 클릭·ESC | **막지 않는다** — 이 규칙의 대상이 아니다 |
 
 따라서 다음을 지킨다.
 
-- **닫을 수단을 반드시 하나는 둔다.** `SActionModal` 에 `showClose` 도 `button`/`footerLeft` 도 없으면 사용자가 모달을 닫을 방법이 없다. 백드롭이 더 이상 탈출구가 아니다.
+- **닫을 수단을 반드시 하나는 둔다.** X 버튼은 기본으로 서 있으므로, 이 규칙이 걸리는 것은 `SActionModal` 에 `showClose={false}` 를 준 경우다. 그때 `button` 도 `footerLeft` 도 없으면 사용자가 모달을 닫을 방법이 없다 — 백드롭이 더 이상 탈출구가 아니기 때문이다. 개발 중 콘솔 경고가 뜬다.
+- **`SActionModal` 의 `showClose={false}` 는 액션을 끝내야만 나갈 수 있는 모달에만.** 필수 약관 동의, 필수 정보 입력처럼 **중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우**로 한정한다. 그 외에는 기본값(X 가 있는 상태)을 그대로 둔다 — "집중시키고 싶다"는 이유로 X 를 없애지 않는다. `persistent` 기본값(true)과 합쳐져 나가는 길이 버튼 하나뿐이 되므로, 그 버튼은 **비활성 상태로 시작하더라도 사용자가 스스로 풀 수 있는 조건**이어야 한다(동의 체크 등). 서버 응답을 기다려야 푸는 조건이면 실패 시 사용자가 갇힌다.
 - **기본값과 같은 `persistent` 를 직접 주지 않는다.** 중복이다.
 - **`SActionModal`·`SDrawer` 에 `persistent={false}` 는 잃을 입력이 없을 때만.** 단순 알림처럼 임의로 닫혀도 아무것도 사라지지 않는 경우로 한정한다.
 - **`SConfirmModal` 에 `persistent` 를 켜는 것은 반드시 답을 받아야 할 때만.** 되돌릴 수 없는 파괴적 작업의 확인처럼, 임의로 닫히면 안 되는 경우로 한정한다.

package/dist/components/SActionModal/README.md

@@ -10,6 +10,7 @@
 |------|------|---------|-------------|
 | `open?` | `boolean` | — |  |
 | `persistent?` | `boolean` | — | 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** |
+| `showClose?` | `boolean` | `true` | 우측 상단 닫기(X) 버튼. **기본값 true** `false` 는 **액션을 끝내야만 나갈 수 있는 모달**에만 준다 — 필수 약관 동의, 필수 정보 입력처럼 중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우다. `persistent` 기본값(true)과 겹치면 나가는 길이 모달 안의 버튼 하나뿐이 되므로, `button` 이나 `footerLeft` 로 그 길을 반드시 둔다. |
 | `modalTitle?` | `string` | `''` |  |
 | `description?` | `ReactNode` | — | 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯). 문자열이면 서브텍스트 스타일로 렌더하고, 노드를 넘기면 그대로 배치한다. |
 | `button?` | `SFooterButton` | — | 하단 액션 버튼 (주 액션 1개). 의도적으로 단수다 — 보조 버튼(취소·삭제 등)은 `footerLeft` 슬롯에 직접 배치한다. |

package/dist/components/SActionModal/SActionModal.d.ts

@@ -7,6 +7,14 @@ export interface SActionModalProps {
     onClose?: () => void;
     /** 백드롭·ESC로 안 닫히고 흔들림 (sd-modal-container persistent). **기본값 true** */
     persistent?: boolean;
+    /**
+     * 우측 상단 닫기(X) 버튼. **기본값 true**
+     *
+     * `false` 는 **액션을 끝내야만 나갈 수 있는 모달**에만 준다 — 필수 약관 동의, 필수 정보 입력처럼
+     * 중간에 빠져나가면 앱이 정의되지 않은 상태로 남는 경우다. `persistent` 기본값(true)과 겹치면
+     * 나가는 길이 모달 안의 버튼 하나뿐이 되므로, `button` 이나 `footerLeft` 로 그 길을 반드시 둔다.
+     */
+    showClose?: boolean;
     modalTitle?: string;
     /**
      * 제목 오른쪽에 붙는 보조 설명 (sd-action-modal 의 header-sub-title 슬롯).
@@ -36,4 +44,4 @@ export interface SActionModalProps {
  * `button` 은 의도적으로 단수다. 주 액션은 오른쪽에 하나만 두고, 보조 버튼은 `footerLeft` 슬롯에
  * 소비자가 직접 배치한다. (buttons 배열 API 를 추가하지 말 것)
  */
-export declare function SActionModal({ open, onOpenChange, onClose, persistent, modalTitle, description, button, footerLeft, width, height, children, }: SActionModalProps): import("react").JSX.Element;
+export declare function SActionModal({ open, onOpenChange, onClose, persistent, modalTitle, description, button, footerLeft, showClose, width, height, children, }: SActionModalProps): import("react").JSX.Element;

package/dist/index.cjs

@@ -10225,7 +10225,7 @@ function SModalContainer({
                 "div",
                 {
                   className: cn(
-                    "relative flex max-h-[calc(100dvh-48px)] max-w-[calc(100dvw-48px)] flex-col overflow-hidden rounded-[var(--cmp-modal-radius)] bg-[var(--cmp-modal-bg)] shadow-normal-md",
+                    "relative isolate flex max-h-[calc(100dvh-48px)] max-w-[calc(100dvw-48px)] flex-col overflow-hidden rounded-[var(--cmp-modal-radius)] bg-[var(--cmp-modal-bg)] shadow-normal-md",
                     shaking && "animate-modal-shake",
                     className
                   ),
@@ -10476,10 +10476,16 @@ function SActionModal({
   description,
   button,
   footerLeft,
+  showClose = true,
   width,
   height,
   children
 }) {
+  if (!showClose && !button && !footerLeft && typeof console !== "undefined") {
+    console.warn(
+      "[SActionModal] showClose={false} \uC778\uB370 button\xB7footerLeft \uAC00 \uBAA8\uB450 \uC5C6\uC2B5\uB2C8\uB2E4. \uC0AC\uC6A9\uC790\uAC00 \uBAA8\uB2EC\uC744 \uB2EB\uC744 \uBC29\uBC95\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     SModalContainer,
     {
@@ -10488,12 +10494,19 @@ function SActionModal({
       onClose,
       persistent,
       ariaTitle: modalTitle,
-      showClose: true,
+      showClose,
       width,
       height,
       className: "w-fit min-w-[min(480px,calc(100dvw-48px))] min-h-[min(320px,calc(100dvh-48px))]",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-auto flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SOverlayHeader, { title: modalTitle, description, reserveCloseSpace: true }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SOverlayHeader,
+          {
+            title: modalTitle,
+            description,
+            reserveCloseSpace: showClose
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto px-[var(--cmp-modal-action-body-paddingX)] pb-[var(--cmp-modal-action-body-paddingBottom)]", children }),
         (button || footerLeft) && /* @__PURE__ */ jsxRuntime.jsx(SFooter, { bg: "grey", left: footerLeft, button })
       ] })