sellmate-design-system-react 2.1.0 → 2.1.2

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

@@ -13,8 +13,9 @@ export interface SConfirmModalProps {
     modalTitle?: string;
     /** 제목 엘리먼트에 추가할 클래스 (sd-confirm-modal titleClass) */
     titleClass?: string;
-    /** 제목 위/아래 메시지 목록 */
+    /** 콘텐츠 박스 상단 메시지 목록 (각 항목이 한 줄, HTML 문자열 허용 — innerHTML 렌더링) */
     topMessage?: string[];
+    /** 콘텐츠 박스 하단 메시지 목록 (각 항목이 한 줄, HTML 문자열 허용 — innerHTML 렌더링) */
     bottomMessage?: string[];
     /** tag 슬롯 기본 태그 레이블 (tagSlot 미지정 시) */
     tagLabel?: string;
@@ -22,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

@@ -3142,11 +3142,17 @@ function SModalContainer({
                 /* @__PURE__ */ jsx(InsideModalProvider, { value: true, children: /* @__PURE__ */ jsx(PortalContainerProvider, { value: portalContainer, children }) })
               ]
             }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: setPortalContainer,
+              className: "pointer-events-auto fixed left-0 top-0 z-[1001]"
+            }
           )
         ]
       }
-    ) }),
-    /* @__PURE__ */ jsx("div", { ref: setPortalContainer, className: "pointer-events-auto fixed left-0 top-0 z-[1001]" })
+    ) })
   ] }) });
 }
 
@@ -3315,6 +3321,75 @@ var SButton = forwardRef(function SButton2({
     }
   );
 });
+
+// src/lib/sanitize-inline-html.ts
+var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
+var ALLOWED_ATTRS_BY_TAG = {
+  A: /* @__PURE__ */ new Set(["href", "target", "rel", "class"])
+};
+var COMMON_ALLOWED_ATTRS = /* @__PURE__ */ new Set(["class"]);
+var SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
+var DROP_CONTENT_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "IFRAME",
+  "OBJECT",
+  "EMBED",
+  "META",
+  "LINK",
+  "BASE",
+  "NOSCRIPT",
+  // SVG/MATH 는 foreign-content 파싱 모드로 전환되어 재직렬화 시 다른 트리로
+  // 재파싱될 수 있다(mXSS 벡터). 인라인 라벨에 필요 없으므로 통째로 제거한다.
+  "SVG",
+  "MATH",
+  "TEMPLATE"
+]);
+var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var sanitizeNode = (node) => {
+  if (node.nodeType === Node.COMMENT_NODE) {
+    node.remove();
+    return;
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return;
+  const element = node;
+  const tagName = element.tagName;
+  if (DROP_CONTENT_TAGS.has(tagName)) {
+    element.remove();
+    return;
+  }
+  Array.from(element.childNodes).forEach((child) => sanitizeNode(child));
+  if (ALLOWED_INLINE_TAGS.has(tagName)) {
+    if (element.hasAttribute("className")) {
+      const val = element.getAttribute("className");
+      element.removeAttribute("className");
+      if (!element.hasAttribute("class")) element.setAttribute("class", val);
+    }
+    const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
+    Array.from(element.attributes).forEach((attr) => {
+      if (!allowedAttrs.has(attr.name)) element.removeAttribute(attr.name);
+    });
+    if (tagName === "A") {
+      const href = element.getAttribute("href");
+      if (href !== null && href !== "" && !SAFE_HREF_RE.test(href)) element.removeAttribute("href");
+      if (element.hasAttribute("target")) {
+        element.setAttribute("rel", "noopener noreferrer");
+      }
+    }
+    return;
+  }
+  const parent = element.parentNode;
+  if (parent == null) return;
+  while (element.firstChild) parent.insertBefore(element.firstChild, element);
+  parent.removeChild(element);
+};
+var sanitizeInlineHtml = (value) => {
+  if (typeof document === "undefined") return escapeHtml(value);
+  const template = document.createElement("template");
+  template.innerHTML = value;
+  Array.from(template.content.childNodes).forEach((child) => sanitizeNode(child));
+  return template.innerHTML;
+};
 var TYPE_ICON = {
   positive: "notificationOutline",
   negative: "warningOutline",
@@ -3364,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,
     {
@@ -3391,11 +3467,28 @@ function SConfirmModal({
             )
           ] }),
           hasBody && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[20px] text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-modal-confirm-message-color)] w-full", children: [
-            topMessage.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: topMessage.map((m, i) => /* @__PURE__ */ jsx("p", { className: "m-0", children: m }, 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 }),
-            bottomMessage.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: bottomMessage.map((m, i) => /* @__PURE__ */ jsx("p", { className: "m-0", children: m }, i)) }),
-            optionNode != null && optionNode
+            topMessage.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: topMessage.map((m, i) => /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "m-0",
+                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m) }
+              },
+              i
+            )) }),
+            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",
+              {
+                className: "m-0",
+                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(m) }
+              },
+              i
+            )) })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 gap-[8px]", children: [