@ncds/ui-admin 1.8.25 → 1.8.26-alpha.1

package/dist/cjs/assets/scripts/notification/FullWidthNotification.js

@@ -31,6 +31,7 @@ class FullWidthNotification {
       actions,
       onClose,
       supportTextLink,
+      supportTextLinkTarget,
       onHidePermanently,
       hidePermanentlyLabel
     } = this.options;
@@ -46,6 +47,7 @@ class FullWidthNotification {
       onHidePermanently,
       hidePermanentlyLabel
     }));
+    (0, _utils.applySupportTextLinkTarget)(wrapper, _const.CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER, _const.CLASS_NAMES.FULL_WIDTH.LINK, supportTextLinkTarget);
     return wrapper;
   }
   buildTemplate(params) {

package/dist/cjs/assets/scripts/notification/MessageNotification.js

@@ -32,38 +32,28 @@ class MessageNotification {
       actions,
       onClose,
       onHidePermanently,
-      hidePermanentlyLabel
+      hidePermanentlyLabel,
+      variant,
+      supportTextLink,
+      supportTextLinkTarget
     } = this.options;
-    // message 타입은 neutral, error, warning, success 4가지 색상만 지원
-    let actualColor = color;
-    if (color === 'info') {
-      actualColor = 'neutral';
-    }
-    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.MESSAGE.BASE, actualColor, className);
-    const iconFunction = _const.FLOATING_ICON_MAP[actualColor];
-    // FeaturedIcon 생성
-    let featuredIconElement = null;
-    if (iconFunction) {
-      const iconSvg = iconFunction(_const.MESSAGE_SIZES.ICON_PIXEL);
-      this.featuredIcon = _featuredIcon.FeaturedIcon.create({
-        svgString: iconSvg,
-        theme: 'light-circle',
-        color: actualColor,
-        size: _const.MESSAGE_SIZES.FEATURED_ICON,
-        // React 구현과 동일하게 `__icon`(flex-shrink: 0)을 부여한다.
-        // 누락 시 긴 타이틀에서 아이콘이 찌그러진다.
-        className: _const.CLASS_NAMES.MESSAGE.ICON
-      });
-      featuredIconElement = this.featuredIcon.getElement();
-    }
+    const isBlock = variant === 'block';
+    // default 는 neutral, error, warning, success 4가지 색상만 지원 — info 는 block 에서만 유지한다.
+    const actualColor = !isBlock && color === 'info' ? 'neutral' : color;
+    const wrapperClassName = [isBlock ? _const.CLASS_NAMES.MESSAGE.BLOCK : '', className].filter(Boolean).join(' ');
+    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.MESSAGE.BASE, actualColor, wrapperClassName);
+    const featuredIconElement = this.createFeaturedIcon(actualColor, isBlock);
     wrapper.innerHTML = (0, _sanitize.sanitizeHtml)((0, _messageTemplate.buildMessageTemplate)({
       title,
       supportingText,
+      supportTextLink: isBlock ? supportTextLink : undefined,
+      color: actualColor,
       actions,
       onClose,
       onHidePermanently,
       hidePermanentlyLabel
     }));
+    (0, _utils.applySupportTextLinkTarget)(wrapper, _const.CLASS_NAMES.MESSAGE.TEXT_CONTAINER, _const.CLASS_NAMES.MESSAGE.LINK, supportTextLinkTarget);
     // FeaturedIcon을 content-wrapper에 추가
     if (featuredIconElement) {
       const contentWrapper = wrapper.querySelector(`.${_const.CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}`);
@@ -73,6 +63,23 @@ class MessageNotification {
     }
     return wrapper;
   }
+  /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). */
+  createFeaturedIcon(color, isBlock) {
+    const iconFunction = _const.MESSAGE_ICON_MAP[color];
+    if (!iconFunction) return null;
+    const sizes = isBlock ? _const.MESSAGE_BLOCK_SIZES : _const.MESSAGE_SIZES;
+    this.featuredIcon = _featuredIcon.FeaturedIcon.create({
+      svgString: iconFunction(sizes.ICON_PIXEL),
+      theme: 'light-circle',
+      // FeaturedIcon 에는 info 색이 없다. block+info 의 violet 톤은 message SCSS 가 덮어쓴다.
+      color: color === 'info' ? 'neutral' : color,
+      size: sizes.FEATURED_ICON,
+      // React 구현과 동일하게 `__icon`(flex-shrink: 0)을 부여한다.
+      // 누락 시 긴 타이틀에서 아이콘이 찌그러진다.
+      className: _const.CLASS_NAMES.MESSAGE.ICON
+    });
+    return this.featuredIcon.getElement();
+  }
   bindEvents() {
     (0, _utils.bindNotificationEvents)(this.element, this.options.actions, this.options.onClose, () => this.remove());
     // 다시보지 않기 버튼 이벤트 바인딩

package/dist/cjs/assets/scripts/notification/const/classNames.js

@@ -15,6 +15,7 @@ const CLASS_NAMES = exports.CLASS_NAMES = {
     TEXT_CONTAINER: 'ncua-full-width-notification__text-container',
     TITLE: 'ncua-full-width-notification__title',
     SUPPORTING_TEXT: 'ncua-full-width-notification__supporting-text',
+    LINK: 'ncua-full-width-notification__link',
     ACTIONS_CONTAINER: 'ncua-full-width-notification__actions-container',
     ACTIONS: 'ncua-full-width-notification__actions',
     CLOSE_BUTTON: 'ncua-full-width-notification__close-button'
@@ -32,6 +33,7 @@ const CLASS_NAMES = exports.CLASS_NAMES = {
   },
   MESSAGE: {
     BASE: 'ncua-message-notification',
+    BLOCK: 'ncua-message-notification--block',
     CONTAINER: 'ncua-message-notification__container',
     CONTENT: 'ncua-message-notification__content',
     CONTENT_WRAPPER: 'ncua-message-notification__content-wrapper',
@@ -39,6 +41,7 @@ const CLASS_NAMES = exports.CLASS_NAMES = {
     TEXT_CONTAINER: 'ncua-message-notification__text-container',
     TITLE: 'ncua-message-notification__title',
     SUPPORTING_TEXT: 'ncua-message-notification__supporting-text',
+    LINK: 'ncua-message-notification__link',
     ACTIONS_CONTAINER: 'ncua-message-notification__actions-container',
     ACTIONS: 'ncua-message-notification__actions',
     // 다시 보지 않기 + 닫기 그룹 전용 래퍼. ACTIONS_CONTAINER를 재사용하면

package/dist/cjs/assets/scripts/notification/const/icons.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SVG_ICONS = exports.ICON_MAP = exports.FULL_WIDTH_ICON_MAP = exports.FLOATING_ICON_MAP = void 0;
+exports.SVG_ICONS = exports.MESSAGE_ICON_MAP = exports.ICON_MAP = exports.FULL_WIDTH_ICON_MAP = exports.FLOATING_ICON_MAP = void 0;
 // SVG 아이콘들 (크기는 동적으로 설정)
 const SVG_ICONS = exports.SVG_ICONS = {
   'pin-02': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167"></path></svg>`,
@@ -28,4 +28,13 @@ const FULL_WIDTH_ICON_MAP = exports.FULL_WIDTH_ICON_MAP = {
   success: SVG_ICONS['check-circle'],
   info: SVG_ICONS['info-circle']
 };
-const ICON_MAP = exports.ICON_MAP = FULL_WIDTH_ICON_MAP;
+const ICON_MAP = exports.ICON_MAP = FULL_WIDTH_ICON_MAP;
+/**
+ * message 타입 아이콘. floating 과 같은 4색에 block 변형 전용 info 를 더한다.
+ * `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어 쓰지 않는다
+ * (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
+ */
+const MESSAGE_ICON_MAP = exports.MESSAGE_ICON_MAP = {
+  ...FLOATING_ICON_MAP,
+  info: size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`
+};

package/dist/cjs/assets/scripts/notification/const/index.js

@@ -57,10 +57,16 @@ Object.defineProperty(exports, "ICON_PIXEL_SIZES", {
     return _sizes.ICON_PIXEL_SIZES;
   }
 });
-Object.defineProperty(exports, "MESSAGE_CLOSE_ICON_COLORS", {
+Object.defineProperty(exports, "MESSAGE_BLOCK_SIZES", {
   enumerable: true,
   get: function () {
-    return _types.MESSAGE_CLOSE_ICON_COLORS;
+    return _sizes.MESSAGE_BLOCK_SIZES;
+  }
+});
+Object.defineProperty(exports, "MESSAGE_ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _icons.MESSAGE_ICON_MAP;
   }
 });
 Object.defineProperty(exports, "MESSAGE_SIZES", {
@@ -83,5 +89,4 @@ Object.defineProperty(exports, "getSizes", {
 });
 var _classNames = require("./classNames");
 var _icons = require("./icons");
-var _sizes = require("./sizes");
-var _types = require("./types");
+var _sizes = require("./sizes");

package/dist/cjs/assets/scripts/notification/const/sizes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSizes = exports.MESSAGE_SIZES = exports.ICON_PIXEL_SIZES = exports.FULL_WIDTH_SIZES = exports.FEATURED_ICON_SIZES = exports.CLOSE_BUTTON_SVG_SIZES = exports.CLOSE_BUTTON_SIZES = void 0;
+exports.getSizes = exports.MESSAGE_SIZES = exports.MESSAGE_BLOCK_SIZES = exports.ICON_PIXEL_SIZES = exports.FULL_WIDTH_SIZES = exports.FEATURED_ICON_SIZES = exports.CLOSE_BUTTON_SVG_SIZES = exports.CLOSE_BUTTON_SIZES = void 0;
 // 알림 컴포넌트 사이즈 관련 상수들
 // FeaturedIcon 사이즈
 const FEATURED_ICON_SIZES = exports.FEATURED_ICON_SIZES = {
@@ -39,6 +39,11 @@ const MESSAGE_SIZES = exports.MESSAGE_SIZES = {
   ICON_PIXEL: '20',
   CLOSE_BUTTON: '20'
 };
+// Message 알림 Block 변형 사이즈. 'sm' = 32px 원 / 16px 아이콘. 닫기 버튼은 default 와 같다.
+const MESSAGE_BLOCK_SIZES = exports.MESSAGE_BLOCK_SIZES = {
+  FEATURED_ICON: 'sm',
+  ICON_PIXEL: '16'
+};
 // 사이즈 유틸리티 함수들
 const getSizes = exports.getSizes = {
   featuredIcon: isMobile => isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP,

package/dist/cjs/assets/scripts/notification/const/types.js

@@ -2,13 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-exports.MESSAGE_CLOSE_ICON_COLORS = void 0;
-// Message Notification 닫기 버튼 아이콘 색상 맵
-const MESSAGE_CLOSE_ICON_COLORS = exports.MESSAGE_CLOSE_ICON_COLORS = {
-  neutral: '#6B7280',
-  error: '#EF4444',
-  warning: '#F97316',
-  success: '#16A34A',
-  info: '#6B7280' // info는 message 타입에서 지원하지 않지만 fallback용
-};
+});

package/dist/cjs/assets/scripts/notification/messageTemplate.js

@@ -9,7 +9,7 @@ var _const = require("./const");
 var _utils = require("./utils");
 /**
  * message 타입 액션 버튼 사이즈. TO-BE 규격 28px이며 React `<Button size="xs">`와 같다.
- * floating / full-width는 이 값을 쓰지 않고 `renderActions`의 기본값('sm')을 유지한다.
+ * `renderActions` 기본값도 'xs'(#535)지만 message 규격을 명시적으로 고정해 둔다.
  */
 const ACTION_BUTTON_SIZE = 'xs';
 /**
@@ -21,6 +21,8 @@ function buildMessageTemplate(params) {
   const {
     title,
     supportingText,
+    supportTextLink,
+    color,
     actions,
     onClose,
     onHidePermanently,
@@ -32,14 +34,15 @@ function buildMessageTemplate(params) {
         <div class="${_const.CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}">
           <div class="${_const.CLASS_NAMES.MESSAGE.TEXT_CONTAINER}">
             <span class="${_const.CLASS_NAMES.MESSAGE.TITLE}">${title}</span>
-            ${(0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.MESSAGE.SUPPORTING_TEXT)}
+            ${(0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.MESSAGE.SUPPORTING_TEXT, supportTextLink, _const.CLASS_NAMES.MESSAGE.LINK)}
           </div>
         </div>
         ${renderActionsContainer({
     actions,
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   })}
       </div>
     </div>
@@ -55,13 +58,15 @@ function renderActionsContainer(params) {
     actions,
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   } = params;
   const actionsHtml = (0, _utils.renderActions)(actions ?? [], _const.CLASS_NAMES.MESSAGE.ACTIONS, ACTION_BUTTON_SIZE);
   const footerHtml = renderFooterContainer({
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   });
   if (!actionsHtml && !footerHtml) return '';
   return `<div class="${_const.CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">${actionsHtml}${footerHtml}</div>`;
@@ -71,13 +76,14 @@ function renderFooterContainer(params) {
   const {
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   } = params;
   if (!onHidePermanently && !onClose) return '';
   return `
     <div class="${_const.CLASS_NAMES.MESSAGE.FOOTER_CONTAINER}">
       ${renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
-      ${renderCloseButton(onClose)}
+      ${renderCloseButton(onClose, color)}
     </div>
   `;
 }
@@ -96,11 +102,17 @@ function renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel) {
     </button>
   `;
 }
+/**
+ * 닫기(X) 버튼. 아이콘 색은 React `<XClose color>`와 같이 svg 의 `color` 속성으로 주고
+ * path 는 `stroke="currentColor"`로 상속받는다 — 두 구현이 같은 마크업을 낸다.
+ */
 function renderCloseButton(onClose) {
+  let color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'neutral';
   if (!onClose) return '';
+  const iconColor = _notification.MESSAGE_CLOSE_ICON_COLOR[color];
   return `
     <button type="button" class="${_const.CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">
-      ${_const.SVG_ICONS['x-close'](_const.MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', 'stroke="#2F2F30"')}
+      ${_const.SVG_ICONS['x-close'](_const.MESSAGE_SIZES.CLOSE_BUTTON).replace('<svg ', `<svg color="${iconColor}" `)}
     </button>
   `;
 }

package/dist/cjs/assets/scripts/notification/utils.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.applySupportTextLinkTarget = applySupportTextLinkTarget;
 exports.bindNotificationEvents = bindNotificationEvents;
 exports.buildClassName = buildClassName;
 exports.createWrapperElement = createWrapperElement;
@@ -12,6 +13,7 @@ exports.renderSupportingText = renderSupportingText;
 exports.resolveActionHierarchy = resolveActionHierarchy;
 exports.setupAutoClose = setupAutoClose;
 var _breakpoint = require("../../../src/constant/breakpoint");
+var _url = require("../../../src/utils/url");
 var _const = require("./const");
 // 공통 유틸리티 함수들
 function createWrapperElement(baseClass, color, className) {
@@ -27,18 +29,6 @@ function buildClassName(baseClass, color, className) {
   }
   return classes.join(' ');
 }
-/**
- * http/https 프로토콜만 허용한다.
- * javascript:, data:, file: 등 위험 프로토콜로 인한 XSS / 외부 페이로드 로딩을 차단.
- */
-function isSafeUrl(url) {
-  try {
-    const parsed = new URL(url, window.location.origin);
-    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
-  } catch {
-    return false;
-  }
-}
 /**
  * HTML 속성 값에 안전하게 삽입하기 위한 최소 이스케이프.
  * 본문(body)이 아닌 속성 컨텍스트에서의 따옴표 탈출(`" onclick="..."`)을 방지.
@@ -47,17 +37,32 @@ function escapeHtmlAttr(str) {
   return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''');
 }
 function renderSupportingText(supportingText, className, supportTextLink) {
+  let linkClassName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _const.CLASS_NAMES.FULL_WIDTH.LINK;
   if (!supportingText) return '';
   // 본문(supportingText) 자체는 이 함수의 호출 결과가 wrapper.innerHTML에
   // 들어가기 전에 DOMPurify로 sanitize되므로 별도 이스케이프하지 않는다.
   // 이렇게 해야 <br>, <strong> 등 서식용 태그가 그대로 동작한다.
-  if (supportTextLink && isSafeUrl(supportTextLink)) {
+  if (supportTextLink && (0, _url.isSafeUrl)(supportTextLink)) {
     const safeLink = escapeHtmlAttr(supportTextLink);
-    return `<a href="${safeLink}" class="ncua-full-width-notification__link" rel="noopener noreferrer" target="_blank"><span class="${className}">${supportingText}</span></a>`;
+    return `<a href="${safeLink}" class="${linkClassName}"><span class="${className}">${supportingText}</span></a>`;
   }
   // unsafe URL이거나 link가 없으면 링크 없이 텍스트만 렌더링
   return `<span class="${className}">${supportingText}</span>`;
 }
+/**
+ * `supportTextLinkTarget`이 `'_blank'`이면 `renderSupportingText`가 만든 링크를 새 탭으로 연다.
+ *
+ * target 은 sanitize **이후** 우리가 만든 링크(텍스트 컨테이너의 직계 `<a>`)에만 지정한다.
+ * DOMPurify 에 target 을 전역 허용하면 사용자 입력 HTML 의 `<a target>`까지 rel 없이 통과하기 때문이다.
+ * 런타임 입력이므로 `'_blank'`가 아닌 값은 전부 `'_self'`(속성 미부여)로 취급한다.
+ */
+function applySupportTextLinkTarget(root, textContainerClassName, linkClassName, target) {
+  if (target !== '_blank') return;
+  const link = root.querySelector(`.${textContainerClassName} > a.${linkClassName}`);
+  if (!link) return;
+  link.setAttribute('target', '_blank');
+  link.setAttribute('rel', 'noopener noreferrer');
+}
 /** 액션 버튼 색상을 지정하지 않았을 때의 기본값. React `MessageNotificationParts`와 같다. */
 const DEFAULT_ACTION_HIERARCHY = 'text';
 /**
@@ -89,11 +94,10 @@ function buildActionKey(action) {
 /**
  * 액션 버튼 그룹 HTML을 만든다.
  *
- * `size` 기본값 'sm'은 floating / full-width 타입의 기존 렌더링을 그대로 보존하기 위한 것이다.
- * message 타입만 TO-BE 규격(28px)에 맞춰 'xs'를 넘긴다 — React `<Button size="xs">`와 동일.
+ * `size` 기본값 'xs'는 디자인 기준(#535 — 모든 type 액션 버튼 xs)이며 React `<Button size="xs">`와 같다.
  */
 function renderActions(actions, wrapperClass) {
-  let size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'sm';
+  let size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'xs';
   // 액션이 없으면 빈 문자열 반환
   if (!actions || actions.length === 0) {
     return '';

package/dist/cjs/constant/notification.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HIDE_PERMANENTLY_LABEL = void 0;
+exports.MESSAGE_CLOSE_ICON_COLOR = exports.HIDE_PERMANENTLY_LABEL = void 0;
+var _color = require("./color");
 /**
  * 다시보지 않기 버튼의 타입별 기본 문구.
  *
@@ -18,4 +19,17 @@ exports.HIDE_PERMANENTLY_LABEL = void 0;
 const HIDE_PERMANENTLY_LABEL = exports.HIDE_PERMANENTLY_LABEL = {
   message: '다시 보지 않기',
   fullWidth: '다시보지 않기'
+};
+/**
+ * message 타입 닫기(X) 아이콘의 color 별 색.
+ *
+ * React(`MessageNotification.tsx`)와 Vanilla(`messageTemplate.ts`)가 함께 참조하는 단일 출처다.
+ * `info`는 `variant: 'block'`에서만 렌더된다(default 는 neutral 로 폴백).
+ */
+const MESSAGE_CLOSE_ICON_COLOR = exports.MESSAGE_CLOSE_ICON_COLOR = {
+  neutral: _color.COLOR.gray700,
+  error: _color.COLOR.red500,
+  warning: _color.COLOR.orange500,
+  success: _color.COLOR.green600,
+  info: _color.COLOR.violet600
 };

package/dist/cjs/src/components/feedback-and-status/badge/Badge.js

@@ -16,7 +16,7 @@ const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
 const NEW_BADGE_ICON_SIZE = {
   sm: 12,
-  md: 16
+  md: 14
 };
 const Badge = _ref => {
   let {

package/dist/cjs/src/components/overlays/notification/FloatingNotification.js

@@ -11,10 +11,10 @@ var _react = require("react");
 var _reactDom = require("react-dom");
 var _breakpoint = require("../../../constant/breakpoint");
 var _useMediaQuery = require("../../../hooks/useMediaQuery");
-var _button = require("../../action/button");
 var _ButtonCloseX = require("../../action/button/ButtonCloseX");
 var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
 var _host = require("./host");
+var _NotificationActionButtons = require("./NotificationActionButtons");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // 호스트 싱글톤은 vanilla/React 양쪽이 동일한 함수를 공유한다 — host.ts 가 가까운 진입점 역할을
 // 하므로 React 컴포넌트는 deep relative path 로 vanilla internals 를 직접 import 하지 않는다.
@@ -157,12 +157,9 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
             children: supportingText
           }), actions && (0, _jsxRuntime.jsx)("div", {
             className: "ncua-floating-notification__actions",
-            children: actions.map(action => (0, _jsxRuntime.jsx)(_button.Button, {
-              size: "xs",
-              hierarchy: action.hierarchy || 'text',
-              label: action.label,
-              onClick: action?.onClick
-            }, `${action.label}-${action.hierarchy}`))
+            children: (0, _jsxRuntime.jsx)(_NotificationActionButtons.NotificationActionButtons, {
+              actions: actions
+            })
           })]
         })]
       })

package/dist/cjs/src/components/overlays/notification/FullWidthNotification.js

@@ -10,6 +10,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _color = require("../../../../constant/color");
 var _notification = require("../../../../constant/notification");
+var _url = require("../../../utils/url");
+var _linkTarget = require("./linkTarget");
+var _NotificationActionButtons = require("./NotificationActionButtons");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.MessageChatSquare,
@@ -35,11 +38,14 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
     actions,
     autoClose = 0,
     supportTextLink,
+    supportTextLinkTarget,
     onHidePermanently,
     hidePermanentlyLabel = _notification.HIDE_PERMANENTLY_LABEL.fullWidth,
     ...rest
   } = _ref;
   const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
+  // unsafe URL(javascript: 등)이면 링크 없이 텍스트만 렌더한다 — Vanilla `renderSupportingText` 와 같은 정책.
+  const safeSupportTextLink = supportTextLink && (0, _url.isSafeUrl)(supportTextLink) ? supportTextLink : undefined;
   const closeIconSize = {
     width: 20,
     height: 20
@@ -93,12 +99,13 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
             children: [(0, _jsxRuntime.jsx)("span", {
               className: "ncua-full-width-notification__title",
               children: title
-            }), !supportTextLink && supportingText && (0, _jsxRuntime.jsx)("span", {
+            }), !safeSupportTextLink && supportingText && (0, _jsxRuntime.jsx)("span", {
               className: "ncua-full-width-notification__supporting-text",
               children: supportingText
-            }), supportTextLink && supportingText && (0, _jsxRuntime.jsx)("a", {
-              href: supportTextLink,
+            }), safeSupportTextLink && supportingText && (0, _jsxRuntime.jsx)("a", {
+              href: safeSupportTextLink,
               className: "ncua-full-width-notification__link",
+              ...(0, _linkTarget.getLinkTargetAttributes)(supportTextLinkTarget),
               children: (0, _jsxRuntime.jsx)("span", {
                 className: "ncua-full-width-notification__supporting-text",
                 children: supportingText
@@ -109,11 +116,9 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
           className: "ncua-full-width-notification__actions-container",
           children: [actions && (0, _jsxRuntime.jsx)("div", {
             className: "ncua-full-width-notification__actions",
-            children: actions.map(action => (0, _jsxRuntime.jsx)("button", {
-              onClick: action.onClick,
-              className: (0, _classnames.default)('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`),
-              children: action.label
-            }, `${action.label}-${action.hierarchy}`))
+            children: (0, _jsxRuntime.jsx)(_NotificationActionButtons.NotificationActionButtons, {
+              actions: actions
+            })
           }), onHidePermanently && (0, _jsxRuntime.jsx)("button", {
             type: "button",
             className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),

package/dist/cjs/src/components/overlays/notification/MessageNotification.js

@@ -8,20 +8,16 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _color = require("../../../../constant/color");
+var _notification = require("../../../../constant/notification");
 var _MessageNotificationParts = require("./MessageNotificationParts");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.Pin02,
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertCircle,
-  success: _uiAdminIcon.CheckCircle
-};
-const iconColorMap = {
-  neutral: 'gray700',
-  error: 'red500',
-  warning: 'orange500',
-  success: 'green600'
+  success: _uiAdminIcon.CheckCircle,
+  // info 는 variant="block" 에서만 도달한다 (default 는 neutral 로 폴백).
+  info: _uiAdminIcon.InfoCircle
 };
 const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
@@ -34,13 +30,21 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
     actions,
     onHidePermanently,
     hidePermanentlyLabel,
+    variant = 'default',
+    supportTextLink,
+    supportTextLinkTarget,
     ...rest
   } = _ref;
-  // message 타입은 neutral, error, warning, success 4가지 색상만 지원
-  const validColor = color === 'info' ? 'neutral' : color;
+  const isBlock = variant === 'block';
+  // default 는 neutral, error, warning, success 4가지 색상만 지원 — info 는 block 에서만 유지한다.
+  const validColor = !isBlock && color === 'info' ? 'neutral' : color;
+  // FeaturedIcon 에는 info 색이 없다. block+info 의 violet 톤은 message SCSS 가 덮어쓴다.
+  const featuredIconColor = validColor === 'info' ? 'neutral' : validColor;
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${validColor}`, className),
+    className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${validColor}`, {
+      'ncua-message-notification--block': isBlock
+    }, className),
     role: "alert",
     ...rest,
     children: (0, _jsxRuntime.jsx)("div", {
@@ -50,15 +54,17 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
         children: [(0, _jsxRuntime.jsx)(_MessageNotificationParts.MessageNotificationContent, {
           title: title,
           supportingText: supportingText,
+          supportTextLink: isBlock ? supportTextLink : undefined,
+          supportTextLinkTarget: supportTextLinkTarget,
           icon: Icon || iconMap[validColor],
-          iconColor: validColor,
-          showIcon: Boolean(iconMap[validColor])
+          iconColor: featuredIconColor,
+          iconSize: isBlock ? 'sm' : 'md'
         }), (0, _jsxRuntime.jsx)(_MessageNotificationParts.MessageNotificationActions, {
           actions: actions,
           onClose: onClose,
           onHidePermanently: onHidePermanently,
           hidePermanentlyLabel: hidePermanentlyLabel,
-          closeIconColor: _color.COLOR[iconColorMap[validColor] || 'gray700']
+          closeIconColor: _notification.MESSAGE_CLOSE_ICON_COLOR[validColor]
         })]
       })
     })

package/dist/cjs/src/components/overlays/notification/MessageNotificationParts.js

@@ -7,26 +7,34 @@ exports.MessageNotificationContent = exports.MessageNotificationActions = void 0
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _notification = require("../../../../constant/notification");
-var _button = require("../../action/button");
+var _url = require("../../../utils/url");
 var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
-/** 아이콘 + 제목/서포팅 텍스트 영역. */
+var _linkTarget = require("./linkTarget");
+var _NotificationActionButtons = require("./NotificationActionButtons");
+/** 아이콘 + 제목/서포팅 텍스트(또는 텍스트 링크) 영역. */
 const MessageNotificationContent = _ref => {
   let {
     title,
     supportingText,
+    supportTextLink,
+    supportTextLinkTarget,
     icon,
     iconColor,
-    showIcon
+    iconSize
   } = _ref;
   const featuredIconProps = {
     icon: icon || _uiAdminIcon.Pin02,
-    size: 'md',
+    size: iconSize,
     color: iconColor,
     theme: 'light-circle'
   };
+  const supportingTextNode = supportingText && (0, _jsxRuntime.jsx)("span", {
+    className: "ncua-message-notification__supporting-text",
+    children: supportingText
+  });
   return (0, _jsxRuntime.jsxs)("div", {
     className: "ncua-message-notification__content-wrapper",
-    children: [showIcon && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, {
+    children: [(0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, {
       ...featuredIconProps,
       className: "ncua-message-notification__icon"
     }), (0, _jsxRuntime.jsxs)("div", {
@@ -34,10 +42,12 @@ const MessageNotificationContent = _ref => {
       children: [(0, _jsxRuntime.jsx)("span", {
         className: "ncua-message-notification__title",
         children: title
-      }), supportingText && (0, _jsxRuntime.jsx)("span", {
-        className: "ncua-message-notification__supporting-text",
-        children: supportingText
-      })]
+      }), supportTextLink && (0, _url.isSafeUrl)(supportTextLink) && supportingTextNode ? (0, _jsxRuntime.jsx)("a", {
+        href: supportTextLink,
+        className: "ncua-message-notification__link",
+        ...(0, _linkTarget.getLinkTargetAttributes)(supportTextLinkTarget),
+        children: supportingTextNode
+      }) : supportingTextNode]
     })]
   });
 };
@@ -62,12 +72,9 @@ const MessageNotificationActions = _ref2 => {
     className: "ncua-message-notification__actions-container",
     children: [hasActions && (0, _jsxRuntime.jsx)("div", {
       className: "ncua-message-notification__actions",
-      children: actions?.map(action => (0, _jsxRuntime.jsx)(_button.Button, {
-        size: "xs",
-        hierarchy: action.hierarchy || 'text',
-        label: action.label,
-        onClick: action?.onClick
-      }, `${action.label}-${action.hierarchy}`))
+      children: (0, _jsxRuntime.jsx)(_NotificationActionButtons.NotificationActionButtons, {
+        actions: actions ?? []
+      })
     }), hasFooter && (0, _jsxRuntime.jsxs)("div", {
       className: "ncua-message-notification__footer-container",
       children: [onHidePermanently && (0, _jsxRuntime.jsx)("button", {