sellmate-design-system-react 2.1.1 → 2.2.0

package/dist/components/SConfirmModal/SConfirmModal.d.ts

@@ -23,11 +23,11 @@ export interface SConfirmModalProps {
     tagShape?: STagShape;
     tagSize?: STagSize;
     tagColor?: STagColor;
-    /** option 슬롯 기본 텍스트 (optionSlot 미지정 시) */
+    /** 콘텐츠 박스에서 태그 오른쪽에 오는 텍스트 (optionSlot 미지정 시) */
     slotLabel?: string;
     /** 콘텐츠 박스 tag 위치 커스텀 콘텐츠 (미지정 시 tagLabel 기반 STag) */
     tagSlot?: ReactNode;
-    /** 콘텐츠 박스 option 위치 커스텀 콘텐츠 (미지정 시 slotLabel 텍스트) */
+    /** 콘텐츠 박스에서 태그 오른쪽 커스텀 콘텐츠 (미지정 시 slotLabel 텍스트) */
     optionSlot?: ReactNode;
     /** 메인 버튼 */
     mainButtonLabel?: string;

package/dist/components/SConfirmModal/SConfirmModal.js

@@ -3439,7 +3439,8 @@ function SConfirmModal({
   const mainStyle = MAIN_BUTTON_STYLE[mainButtonName ?? DEFAULT_MAIN_BUTTON[type]];
   const tagNode = tagSlot ?? (tagLabel ? /* @__PURE__ */ jsx(STag, { shape: tagShape, size: tagSize, color: tagColor, label: tagLabel }) : null);
   const optionNode = optionSlot ?? (slotLabel ? /* @__PURE__ */ jsx("span", { children: slotLabel }) : null);
-  const hasBody = topMessage.length > 0 || bottomMessage.length > 0 || tagNode != null || optionNode != null;
+  const hasContentBox = tagNode != null || optionNode != null;
+  const hasBody = topMessage.length > 0 || bottomMessage.length > 0 || hasContentBox;
   return /* @__PURE__ */ jsx(
     SModalContainer,
     {
@@ -3474,8 +3475,12 @@ function SConfirmModal({
               },
               i
             )) }),
-            tagNode != null && // tag 위치 content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
-            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px] w-full", children: tagNode }),
+            hasContentBox && // content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
+            // tag 왼쪽, slotLabel/optionSlot 이 그 오른쪽에 gap 8 로 나란히 놓인다
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px] w-full", children: [
+              tagNode,
+              optionNode
+            ] }),
             bottomMessage.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: bottomMessage.map((m, i) => /* @__PURE__ */ jsx(
               "p",
               {
@@ -3483,8 +3488,7 @@ function SConfirmModal({
                 dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m) }
               },
               i
-            )) }),
-            optionNode != null && optionNode
+            )) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 gap-[8px]", children: [