@ncds/ui-admin 1.8.26-alpha.7 → 1.8.26-alpha.8

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

@@ -95,7 +95,10 @@ class FloatingNotification {
             <div class="${_const.CLASS_NAMES.FLOATING.TITLE_WRAPPER}">
               <span class="${_const.CLASS_NAMES.FLOATING.TITLE}">${title}</span>
             </div>
-            ${(0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.FLOATING.SUPPORTING_TEXT)}
+            ${(0, _utils.renderSupportingText)({
+      supportingText,
+      className: _const.CLASS_NAMES.FLOATING.SUPPORTING_TEXT
+    })}
             ${actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.CLASS_NAMES.FLOATING.ACTIONS) : ''}
           </div>
         </div>

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

@@ -72,7 +72,11 @@ class FullWidthNotification {
             <div class="${_const.CLASS_NAMES.FULL_WIDTH.ICON}">${iconHtml}</div>
             <div class="${_const.CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER}">
               <span class="${_const.CLASS_NAMES.FULL_WIDTH.TITLE}">${title}</span>
-              ${(0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT, supportTextLink)}
+              ${(0, _utils.renderSupportingText)({
+      supportingText,
+      className: _const.CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT,
+      supportTextLink
+    })}
             </div>
           </div>
           <div class="${_const.CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">

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

@@ -34,19 +34,13 @@ class MessageNotification {
       onClose,
       hideCloseButton,
       onHidePermanently,
-      hidePermanentlyLabel,
-      variant,
-      supportTextLink,
-      supportTextLinkTarget
+      hidePermanentlyLabel
     } = this.options;
-    const isBlock = variant === 'block';
-    const wrapperClassName = [isBlock ? _const.CLASS_NAMES.MESSAGE.BLOCK : '', className].filter(Boolean).join(' ');
-    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.MESSAGE.BASE, color, wrapperClassName);
-    const featuredIconElement = this.createFeaturedIcon(color, isBlock);
+    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.MESSAGE.BASE, color, className);
+    const featuredIconElement = this.createFeaturedIcon(color);
     wrapper.innerHTML = (0, _sanitize.sanitizeHtml)((0, _messageTemplate.buildMessageTemplate)({
       title,
       supportingText,
-      supportTextLink: isBlock ? supportTextLink : undefined,
       color,
       actions,
       onClose,
@@ -54,7 +48,6 @@ class MessageNotification {
       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}`);
@@ -64,16 +57,14 @@ class MessageNotification {
     }
     return wrapper;
   }
-  /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). info 아이콘만 variant 별로 다르다. */
-  createFeaturedIcon(color, isBlock) {
-    const iconFunction = (isBlock ? _const.MESSAGE_BLOCK_ICON_MAP : _const.MESSAGE_ICON_MAP)[color];
-    const sizes = isBlock ? _const.MESSAGE_BLOCK_SIZES : _const.MESSAGE_SIZES;
+  /** 색상별 FeaturedIcon. md(40px 원 / 20px 아이콘) 고정. */
+  createFeaturedIcon(color) {
     this.featuredIcon = _featuredIcon.FeaturedIcon.create({
-      svgString: iconFunction(sizes.ICON_PIXEL),
+      svgString: _const.MESSAGE_ICON_MAP[color](_const.MESSAGE_SIZES.ICON_PIXEL),
       theme: 'light-circle',
       // FeaturedIcon 에는 info 색이 없다. info 의 violet 톤은 message SCSS 가 덮어쓴다.
       color: color === 'info' ? 'neutral' : color,
-      size: sizes.FEATURED_ICON,
+      size: _const.MESSAGE_SIZES.FEATURED_ICON,
       // React 구현과 동일하게 `__icon`(flex-shrink: 0)을 부여한다.
       // 누락 시 긴 타이틀에서 아이콘이 찌그러진다.
       className: _const.CLASS_NAMES.MESSAGE.ICON

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

@@ -33,7 +33,6 @@ 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',
@@ -41,7 +40,6 @@ 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,12 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SVG_ICONS = exports.MESSAGE_ICON_MAP = exports.MESSAGE_BLOCK_ICON_MAP = exports.ICON_MAP = exports.FULL_WIDTH_ICON_MAP = exports.FLOATING_ICON_MAP = void 0;
-/**
- * message block 변형의 InfoCircle. `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어
- * 쓰지 않는다 (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
- */
-const INFO_CIRCLE_ICON = 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>`;
+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>`,
@@ -41,9 +36,4 @@ const MESSAGE_ICON_MAP = exports.MESSAGE_ICON_MAP = {
   warning: SVG_ICONS['alert-circle'],
   success: SVG_ICONS['check-circle'],
   info: SVG_ICONS['pin-02']
-};
-/** block 변형 아이콘. info 만 InfoCircle 로 다르다 (#536 유지). */
-const MESSAGE_BLOCK_ICON_MAP = exports.MESSAGE_BLOCK_ICON_MAP = {
-  ...MESSAGE_ICON_MAP,
-  info: INFO_CIRCLE_ICON
 };

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

@@ -57,18 +57,6 @@ Object.defineProperty(exports, "ICON_PIXEL_SIZES", {
     return _sizes.ICON_PIXEL_SIZES;
   }
 });
-Object.defineProperty(exports, "MESSAGE_BLOCK_ICON_MAP", {
-  enumerable: true,
-  get: function () {
-    return _icons.MESSAGE_BLOCK_ICON_MAP;
-  }
-});
-Object.defineProperty(exports, "MESSAGE_BLOCK_SIZES", {
-  enumerable: true,
-  get: function () {
-    return _sizes.MESSAGE_BLOCK_SIZES;
-  }
-});
 Object.defineProperty(exports, "MESSAGE_ICON_MAP", {
   enumerable: true,
   get: function () {

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.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;
+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;
 // 알림 컴포넌트 사이즈 관련 상수들
 // FeaturedIcon 사이즈
 const FEATURED_ICON_SIZES = exports.FEATURED_ICON_SIZES = {
@@ -39,11 +39,6 @@ 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/messageTemplate.js

@@ -21,7 +21,6 @@ function buildMessageTemplate(params) {
   const {
     title,
     supportingText,
-    supportTextLink,
     color,
     actions,
     onClose,
@@ -35,7 +34,10 @@ 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, supportTextLink, _const.CLASS_NAMES.MESSAGE.LINK)}
+            ${(0, _utils.renderSupportingText)({
+    supportingText,
+    className: _const.CLASS_NAMES.MESSAGE.SUPPORTING_TEXT
+  })}
           </div>
         </div>
         ${renderActionsContainer({

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

@@ -9,7 +9,7 @@ exports.buildClassName = buildClassName;
 exports.createWrapperElement = createWrapperElement;
 exports.isMobile = void 0;
 exports.renderActions = renderActions;
-exports.renderSupportingText = renderSupportingText;
+exports.renderSupportingText = void 0;
 exports.resolveActionHierarchy = resolveActionHierarchy;
 exports.setupAutoClose = setupAutoClose;
 var _breakpoint = require("../../../src/constant/breakpoint");
@@ -36,19 +36,26 @@ function buildClassName(baseClass, color, className) {
 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;
+/**
+ * 보조 텍스트 HTML을 만든다. `supportTextLink` 링크는 full-width 전용 클래스(`CLASS_NAMES.FULL_WIDTH.LINK`)로 렌더한다.
+ */
+const renderSupportingText = _ref => {
+  let {
+    supportingText,
+    className,
+    supportTextLink
+  } = _ref;
   if (!supportingText) return '';
   // 본문(supportingText) 자체는 이 함수의 호출 결과가 wrapper.innerHTML에
   // 들어가기 전에 DOMPurify로 sanitize되므로 별도 이스케이프하지 않는다.
   // 이렇게 해야 <br>, <strong> 등 서식용 태그가 그대로 동작한다.
   if (supportTextLink && (0, _url.isSafeUrl)(supportTextLink)) {
     const safeLink = escapeHtmlAttr(supportTextLink);
-    return `<a href="${safeLink}" class="${linkClassName}"><span class="${className}">${supportingText}</span></a>`;
+    return `<a href="${safeLink}" class="${_const.CLASS_NAMES.FULL_WIDTH.LINK}"><span class="${className}">${supportingText}</span></a>`;
   }
   // unsafe URL이거나 link가 없으면 링크 없이 텍스트만 렌더링
   return `<span class="${className}">${supportingText}</span>`;
-}
+};
 /**
  * `supportTextLinkTarget`이 `'_blank'`이면 `renderSupportingText`가 만든 링크를 새 탭으로 연다.
  *
@@ -56,6 +63,7 @@ function renderSupportingText(supportingText, className, supportTextLink) {
  * DOMPurify 에 target 을 전역 허용하면 사용자 입력 HTML 의 `<a target>`까지 rel 없이 통과하기 때문이다.
  * 런타임 입력이므로 `'_blank'`가 아닌 값은 전부 `'_self'`(속성 미부여)로 취급한다.
  */
+exports.renderSupportingText = renderSupportingText;
 function applySupportTextLinkTarget(root, textContainerClassName, linkClassName, target) {
   if (target !== '_blank') return;
   const link = root.querySelector(`.${textContainerClassName} > a.${linkClassName}`);

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

@@ -17,14 +17,9 @@ const DEFAULT_ICON_MAP = {
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertCircle,
   success: _uiAdminIcon.CheckCircle,
-  // 디자인 기준 default 의 info 는 neutral 과 같은 핀이다.
+  // 디자인 기준 info 는 neutral 과 같은 핀이다.
   info: _uiAdminIcon.Pin02
 };
-// block 의 info 는 InfoCircle 을 유지한다 (#536).
-const BLOCK_ICON_MAP = {
-  ...DEFAULT_ICON_MAP,
-  info: _uiAdminIcon.InfoCircle
-};
 const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     title,
@@ -38,13 +33,8 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
     actions,
     onHidePermanently,
     hidePermanentlyLabel,
-    variant = 'default',
-    supportTextLink,
-    supportTextLinkTarget,
     ...rest
   } = _ref;
-  const isBlock = variant === 'block';
-  const iconMap = isBlock ? BLOCK_ICON_MAP : DEFAULT_ICON_MAP;
   // FeaturedIcon 에는 info 색이 없다. info 의 violet 톤은 message SCSS 가 덮어쓴다.
   const featuredIconColor = color === 'info' ? 'neutral' : color;
   // message 는 부모가 언마운트로 닫으므로 hideCloseButton 기본 autoClose 를 적용하지 않는다.
@@ -57,9 +47,7 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
   }
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${color}`, {
-      'ncua-message-notification--block': isBlock
-    }, className),
+    className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${color}`, className),
     role: "alert",
     ...rest,
     children: (0, _jsxRuntime.jsx)("div", {
@@ -69,11 +57,8 @@ 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[color],
-          iconColor: featuredIconColor,
-          iconSize: isBlock ? 'sm' : 'md'
+          icon: Icon || DEFAULT_ICON_MAP[color],
+          iconColor: featuredIconColor
         }), (0, _jsxRuntime.jsx)(_MessageNotificationParts.MessageNotificationActions, {
           actions: actions,
           onClose: onClose,

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

@@ -7,31 +7,22 @@ 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 _url = require("../../../utils/url");
 var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
-var _linkTarget = require("./linkTarget");
 var _NotificationActionButtons = require("./NotificationActionButtons");
-/** 아이콘 + 제목/서포팅 텍스트(또는 텍스트 링크) 영역. */
+/** 아이콘 + 제목/서포팅 텍스트 영역. FeaturedIcon 은 md(40px 원 / 20px 아이콘) 고정. */
 const MessageNotificationContent = _ref => {
   let {
     title,
     supportingText,
-    supportTextLink,
-    supportTextLinkTarget,
     icon,
-    iconColor,
-    iconSize
+    iconColor
   } = _ref;
   const featuredIconProps = {
     icon: icon || _uiAdminIcon.Pin02,
-    size: iconSize,
+    size: 'md',
     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: [(0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, {
@@ -42,12 +33,10 @@ const MessageNotificationContent = _ref => {
       children: [(0, _jsxRuntime.jsx)("span", {
         className: "ncua-message-notification__title",
         children: title
-      }), supportTextLink && (0, _url.isSafeUrl)(supportTextLink) && supportingTextNode ? (0, _jsxRuntime.jsx)("a", {
-        href: supportTextLink,
-        className: "ncua-message-notification__link",
-        ...(0, _linkTarget.getLinkTargetAttributes)(supportTextLinkTarget),
-        children: supportingTextNode
-      }) : supportingTextNode]
+      }), supportingText && (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-message-notification__supporting-text",
+        children: supportingText
+      })]
     })]
   });
 };

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

@@ -20,9 +20,13 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
     width,
     supportTextLink,
     supportTextLinkTarget,
-    variant,
-    ...rest
+    ...props
   } = _ref;
+  // #580 에서 제거된 message `variant` 가 런타임에 넘어와도 DOM 속성으로 새지 않게 어떤 type 에도 전달하지 않는다.
+  const {
+    variant: _variant,
+    ...rest
+  } = props;
   if (type === 'floating') {
     return (0, _jsxRuntime.jsx)(_FloatingNotification.FloatingNotification, {
       color: color,
@@ -42,9 +46,6 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
   if (type === 'message') {
     return (0, _jsxRuntime.jsx)(_MessageNotification.MessageNotification, {
       color: color,
-      variant: variant,
-      supportTextLink: supportTextLink,
-      supportTextLinkTarget: supportTextLinkTarget,
       ...rest,
       ref: ref
     });

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

@@ -159,7 +159,7 @@ function renderedIconPathD(container) {
 });
 (0, _vitest.describe)('MessageNotification (React) — color="info" (#568)', () => {
   (0, _vitest.it)('R-01: color="info" 는 neutral 로 폴백하지 않고 --info 수식자로 렌더한다', () => {
-    // Given/When: variant 미지정, info 색상으로 렌더하면
+    // Given/When: info 색상으로 렌더하면
     const root = renderMessageNotification({
       color: 'info'
     }).querySelector(SELECTOR.ROOT);
@@ -168,7 +168,7 @@ function renderedIconPathD(container) {
     (0, _vitest.expect)(root?.classList.contains('ncua-message-notification--neutral')).toBe(false);
   });
   (0, _vitest.it)('R-02: 기본 info 아이콘은 neutral 과 같은 Pin02 다', () => {
-    // Given/When: variant 미지정, info 색상으로 렌더하면
+    // Given/When: info 색상으로 렌더하면
     const container = renderMessageNotification({
       color: 'info'
     });
@@ -178,7 +178,7 @@ function renderedIconPathD(container) {
     (0, _vitest.expect)(renderedIconPathD(container)).toBe(expected);
   });
   (0, _vitest.it)('R-03: info 의 FeaturedIcon 은 neutral·md 로 렌더한다 (violet 톤은 SCSS 가 덮는다)', () => {
-    // Given/When: variant 미지정, info 색상으로 렌더하면
+    // Given/When: info 색상으로 렌더하면
     const icon = renderMessageNotification({
       color: 'info'
     }).querySelector(SELECTOR.ICON);
@@ -186,14 +186,14 @@ function renderedIconPathD(container) {
     (0, _vitest.expect)(icon?.classList.contains('ncua-featured-icon--neutral')).toBe(true);
     (0, _vitest.expect)(icon?.classList.contains('ncua-featured-icon--md')).toBe(true);
   });
-  (0, _vitest.it)('R-04: block 의 info 아이콘은 InfoCircle 을 유지한다', () => {
-    // Given/When: block 변형에 info 색상으로 렌더하면
+  (0, _vitest.it)('R-04: 런타임에 variant="block" 이 넘어와도 info 아이콘은 Pin02 다 (#580 Block 변형 제거)', () => {
+    // Given/When: 제거된 variant prop 을 런타임 입력으로 넘겨 info 색상으로 렌더하면
     const container = renderMessageNotification({
       variant: 'block',
       color: 'info'
     });
-    // Then: 아이콘 path 가 InfoCircle 과 같다 (#536 회귀)
-    const expected = iconPathD(_uiAdminIcon.InfoCircle);
+    // Then: 아이콘 path 가 Pin02 와 같다
+    const expected = iconPathD(_uiAdminIcon.Pin02);
     (0, _vitest.expect)(expected).not.toBeNull();
     (0, _vitest.expect)(renderedIconPathD(container)).toBe(expected);
   });

package/dist/cjs/src/components/overlays/notification/__tests__/Notification.test.js

@@ -75,6 +75,14 @@ const render = props => {
     });
     (0, _vitest.expect)(element?.hasAttribute('supporttextlink')).toBe(false);
   });
+  _vitest.it.each(['floating', 'full-width', 'message'])('type=%s 에 제거된 variant="block" 을 주어도 DOM 속성으로 새지 않는다 (#580)', type => {
+    const element = render({
+      type,
+      variant: 'block'
+    });
+    (0, _vitest.expect)(element).not.toBeNull();
+    (0, _vitest.expect)(element?.hasAttribute('variant')).toBe(false);
+  });
   (0, _vitest.it)('정의되지 않은 type 은 아무것도 렌더하지 않는다', () => {
     const element = render({
       type: 'banner'

package/dist/cjs/src/components/overlays/notification/__tests__/supportTextLink.test.js

@@ -5,7 +5,6 @@ var _client = require("react-dom/client");
 var _testUtils = require("react-dom/test-utils");
 var _vitest = require("vitest");
 var _FullWidthNotification = require("../FullWidthNotification");
-var _MessageNotification = require("../MessageNotification");
 // @vitest-environment jsdom
 
 /**
@@ -30,12 +29,7 @@ function mount(element) {
   });
   return container;
 }
-const IMPLEMENTATIONS = [['MessageNotification(block)', supportTextLink => mount(/*#__PURE__*/(0, _react.createElement)(_MessageNotification.MessageNotification, {
-  title: '공지',
-  variant: 'block',
-  supportingText: '자세히 보기',
-  supportTextLink
-})), '.ncua-message-notification__supporting-text'], ['FullWidthNotification', supportTextLink => mount(/*#__PURE__*/(0, _react.createElement)(_FullWidthNotification.FullWidthNotification, {
+const IMPLEMENTATIONS = [['FullWidthNotification', supportTextLink => mount(/*#__PURE__*/(0, _react.createElement)(_FullWidthNotification.FullWidthNotification, {
   title: '공지',
   supportingText: '자세히 보기',
   supportTextLink