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

package/dist/cjs/src/utils/url/isSafeUrl.js

@@ -19,7 +19,7 @@ function resolveBaseOrigin() {
  * javascript:, data:, file: 등 위험 프로토콜로 인한 XSS / 외부 페이로드 로딩을 차단.
  *
  * URL 파서가 앞뒤 공백·탭·개행 제거와 scheme 소문자화를 하므로 ` JavaScript:` 같은 우회도 막힌다.
- * React(`MessageNotificationParts`·`FullWidthNotification`)와 Vanilla(`renderSupportingText`)가 공유한다.
+ * React(`FullWidthNotification`)와 Vanilla(`renderSupportingText`)가 공유한다.
  */
 function isSafeUrl(url) {
   if (!url.trim()) return false;

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

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

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

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

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

@@ -1,8 +1,8 @@
 import { FeaturedIcon } from '../featuredIcon';
 import { sanitizeHtml } from '../utils/sanitize';
-import { CLASS_NAMES, MESSAGE_BLOCK_ICON_MAP, MESSAGE_BLOCK_SIZES, MESSAGE_ICON_MAP, MESSAGE_SIZES } from './const';
+import { CLASS_NAMES, MESSAGE_ICON_MAP, MESSAGE_SIZES } from './const';
 import { buildMessageTemplate } from './messageTemplate';
-import { applySupportTextLinkTarget, bindNotificationEvents, createWrapperElement, setupAutoClose } from './utils';
+import { bindNotificationEvents, createWrapperElement, setupAutoClose } from './utils';
 export class MessageNotification {
   constructor(options) {
     this.options = {
@@ -28,19 +28,13 @@ export class MessageNotification {
       onClose,
       hideCloseButton,
       onHidePermanently,
-      hidePermanentlyLabel,
-      variant,
-      supportTextLink,
-      supportTextLinkTarget
+      hidePermanentlyLabel
     } = this.options;
-    const isBlock = variant === 'block';
-    const wrapperClassName = [isBlock ? CLASS_NAMES.MESSAGE.BLOCK : '', className].filter(Boolean).join(' ');
-    const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, color, wrapperClassName);
-    const featuredIconElement = this.createFeaturedIcon(color, isBlock);
+    const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, color, className);
+    const featuredIconElement = this.createFeaturedIcon(color);
     wrapper.innerHTML = sanitizeHtml(buildMessageTemplate({
       title,
       supportingText,
-      supportTextLink: isBlock ? supportTextLink : undefined,
       color,
       actions,
       onClose,
@@ -48,7 +42,6 @@ export class MessageNotification {
       onHidePermanently,
       hidePermanentlyLabel
     }));
-    applySupportTextLinkTarget(wrapper, CLASS_NAMES.MESSAGE.TEXT_CONTAINER, CLASS_NAMES.MESSAGE.LINK, supportTextLinkTarget);
     // FeaturedIcon을 content-wrapper에 추가
     if (featuredIconElement) {
       const contentWrapper = wrapper.querySelector(`.${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}`);
@@ -58,16 +51,14 @@ export class MessageNotification {
     }
     return wrapper;
   }
-  /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). info 아이콘만 variant 별로 다르다. */
-  createFeaturedIcon(color, isBlock) {
-    const iconFunction = (isBlock ? MESSAGE_BLOCK_ICON_MAP : MESSAGE_ICON_MAP)[color];
-    const sizes = isBlock ? MESSAGE_BLOCK_SIZES : MESSAGE_SIZES;
+  /** 색상별 FeaturedIcon. md(40px 원 / 20px 아이콘) 고정. */
+  createFeaturedIcon(color) {
     this.featuredIcon = FeaturedIcon.create({
-      svgString: iconFunction(sizes.ICON_PIXEL),
+      svgString: MESSAGE_ICON_MAP[color](MESSAGE_SIZES.ICON_PIXEL),
       theme: 'light-circle',
       // FeaturedIcon 에는 info 색이 없다. info 의 violet 톤은 message SCSS 가 덮어쓴다.
       color: color === 'info' ? 'neutral' : color,
-      size: sizes.FEATURED_ICON,
+      size: MESSAGE_SIZES.FEATURED_ICON,
       // React 구현과 동일하게 `__icon`(flex-shrink: 0)을 부여한다.
       // 누락 시 긴 타이틀에서 아이콘이 찌그러진다.
       className: CLASS_NAMES.MESSAGE.ICON

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

@@ -27,7 +27,6 @@ export const 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',
@@ -35,7 +34,6 @@ export const 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/esm/assets/scripts/notification/const/icons.js

@@ -1,8 +1,3 @@
-/**
- * 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>`;
 // SVG 아이콘들 (크기는 동적으로 설정)
 export const 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>`,
@@ -35,9 +30,4 @@ export const MESSAGE_ICON_MAP = {
   warning: SVG_ICONS['alert-circle'],
   success: SVG_ICONS['check-circle'],
   info: SVG_ICONS['pin-02']
-};
-/** block 변형 아이콘. info 만 InfoCircle 로 다르다 (#536 유지). */
-export const MESSAGE_BLOCK_ICON_MAP = {
-  ...MESSAGE_ICON_MAP,
-  info: INFO_CIRCLE_ICON
 };

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

@@ -1,4 +1,4 @@
 // Re-export all constants and types from separate files
 export { CLASS_NAMES } from './classNames';
-export { FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP, MESSAGE_BLOCK_ICON_MAP, MESSAGE_ICON_MAP, SVG_ICONS } from './icons';
-export { CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FEATURED_ICON_SIZES, FULL_WIDTH_SIZES, getSizes, ICON_PIXEL_SIZES, MESSAGE_BLOCK_SIZES, MESSAGE_SIZES } from './sizes';
+export { FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP, MESSAGE_ICON_MAP, SVG_ICONS } from './icons';
+export { CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FEATURED_ICON_SIZES, FULL_WIDTH_SIZES, getSizes, ICON_PIXEL_SIZES, MESSAGE_SIZES } from './sizes';

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

@@ -33,11 +33,6 @@ export const MESSAGE_SIZES = {
   ICON_PIXEL: '20',
   CLOSE_BUTTON: '20'
 };
-// Message 알림 Block 변형 사이즈. 'sm' = 32px 원 / 16px 아이콘. 닫기 버튼은 default 와 같다.
-export const MESSAGE_BLOCK_SIZES = {
-  FEATURED_ICON: 'sm',
-  ICON_PIXEL: '16'
-};
 // 사이즈 유틸리티 함수들
 export const getSizes = {
   featuredIcon: isMobile => isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP,

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

@@ -15,7 +15,6 @@ export function buildMessageTemplate(params) {
   const {
     title,
     supportingText,
-    supportTextLink,
     color,
     actions,
     onClose,
@@ -29,7 +28,10 @@ export function buildMessageTemplate(params) {
         <div class="${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}">
           <div class="${CLASS_NAMES.MESSAGE.TEXT_CONTAINER}">
             <span class="${CLASS_NAMES.MESSAGE.TITLE}">${title}</span>
-            ${renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT, supportTextLink, CLASS_NAMES.MESSAGE.LINK)}
+            ${renderSupportingText({
+    supportingText,
+    className: CLASS_NAMES.MESSAGE.SUPPORTING_TEXT
+  })}
           </div>
         </div>
         ${renderActionsContainer({

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

@@ -22,19 +22,26 @@ export function buildClassName(baseClass, color, className) {
 function escapeHtmlAttr(str) {
   return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''');
 }
-export function renderSupportingText(supportingText, className, supportTextLink) {
-  let linkClassName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : CLASS_NAMES.FULL_WIDTH.LINK;
+/**
+ * 보조 텍스트 HTML을 만든다. `supportTextLink` 링크는 full-width 전용 클래스(`CLASS_NAMES.FULL_WIDTH.LINK`)로 렌더한다.
+ */
+export const renderSupportingText = _ref => {
+  let {
+    supportingText,
+    className,
+    supportTextLink
+  } = _ref;
   if (!supportingText) return '';
   // 본문(supportingText) 자체는 이 함수의 호출 결과가 wrapper.innerHTML에
   // 들어가기 전에 DOMPurify로 sanitize되므로 별도 이스케이프하지 않는다.
   // 이렇게 해야 <br>, <strong> 등 서식용 태그가 그대로 동작한다.
   if (supportTextLink && isSafeUrl(supportTextLink)) {
     const safeLink = escapeHtmlAttr(supportTextLink);
-    return `<a href="${safeLink}" class="${linkClassName}"><span class="${className}">${supportingText}</span></a>`;
+    return `<a href="${safeLink}" class="${CLASS_NAMES.FULL_WIDTH.LINK}"><span class="${className}">${supportingText}</span></a>`;
   }
   // unsafe URL이거나 link가 없으면 링크 없이 텍스트만 렌더링
   return `<span class="${className}">${supportingText}</span>`;
-}
+};
 /**
  * `supportTextLinkTarget`이 `'_blank'`이면 `renderSupportingText`가 만든 링크를 새 탭으로 연다.
  *

package/dist/esm/src/components/navigation/pagination/Pagination.js

@@ -29,28 +29,28 @@ export const Pagination = _ref => {
   };
   useEffect(() => {
     const lastGroupStart = Math.max(1, Math.floor((totalPage - 1) / pageCount) * pageCount + 1);
-    // totalPage/pageCount 가 줄어 start 가 마지막 그룹을 넘으면 마지막 그룹으로 보정한다.
+    // totalPage/pageCount 가 줄어 start 가 마지막 그룹을 넘으면 마지막 그룹에서 시작해 아래 규칙을 계속 적용한다.
     // (예: 100→50 페이지로 축소 시 start 가 91 에 머물러 범위 밖 버튼을 표시하던 문제)
-    if (start > lastGroupStart) {
-      setStart(lastGroupStart);
-      return;
+    // 바로 return 하면 새 검색으로 currentPage 가 1 이 돼도 1 이 목록에 없다 (PR #603 리뷰).
+    const baseStart = Math.min(start, lastGroupStart);
+    let nextStart = baseStart;
+    if (currentPage === baseStart + pageCount) {
+      nextStart = baseStart + pageCount;
     }
-    if (currentPage === start + pageCount) {
-      setStart(start + pageCount);
+    if (currentPage > baseStart + pageCount) {
+      nextStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
     }
-    if (currentPage > start + pageCount) {
-      const newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
-      setStart(newStart);
-    }
-    if (currentPage < start) {
-      setStart(Math.max(1, start - pageCount));
+    if (currentPage < baseStart) {
+      nextStart = Math.max(1, baseStart - pageCount);
     }
     if (currentPage === 1) {
-      setStart(1);
+      nextStart = 1;
     }
     if (currentPage === totalPage) {
-      setStart(lastGroupStart);
+      nextStart = lastGroupStart;
     }
+    // currentPage 가 totalPage 를 넘는 값이어도 마지막 그룹을 넘지 않는다
+    setStart(Math.min(nextStart, lastGroupStart));
     // start 는 이 effect 가 setStart 로 갱신하는 대상이라 deps 에서 제외한다(넣으면 자기 갱신으로
     // 재실행). currentPage 외에 totalPage/pageCount 도 추적해, 이들이 줄어 start 가 범위를 벗어나면
     // 위에서 보정한다.

package/dist/esm/src/components/navigation/pagination/__tests__/Pagination.test.js

@@ -64,6 +64,23 @@ describe('#332 Pagination — totalPage 축소 시 start 보정', () => {
     expect(nums[0]).toBe(GROUP_START_50_PAGES);
     expect(Math.max(...nums)).toBeLessThanOrEqual(LAST_PAGE_50);
   });
+  it('totalPage 가 줄면서 currentPage 가 1 로 돌아오면 1 이 든 첫 그룹을 보인다 (PR #603 리뷰)', () => {
+    // 50 페이지 중 35 페이지(31~40 그룹) → 새 검색으로 25 페이지 결과의 1 페이지
+    const el = render({
+      totalCount: 750,
+      itemCountPerPage: 15,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 35
+    });
+    render({
+      totalCount: 375,
+      itemCountPerPage: 15,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 1
+    });
+    expect(pageNums(el)[0]).toBe(1);
+    expect(el.querySelector('.ncua-pagination__page-num.is-current')?.textContent).toBe('1');
+  });
 });
 describe('Pagination — mo 모드 이전/다음 버튼 노출', () => {
   it('페이지가 그룹 크기 이하여도 mo 에서는 이전·다음 버튼이 노출된다', () => {

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircle, AlertTriangle, CheckCircle, InfoCircle, Pin02 } from '@ncds/ui-admin-icon';
+import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { MESSAGE_CLOSE_ICON_COLOR } from '../../../../constant/notification';
@@ -10,14 +10,9 @@ const DEFAULT_ICON_MAP = {
   error: AlertTriangle,
   warning: AlertCircle,
   success: CheckCircle,
-  // 디자인 기준 default 의 info 는 neutral 과 같은 핀이다.
+  // 디자인 기준 info 는 neutral 과 같은 핀이다.
   info: Pin02
 };
-// block 의 info 는 InfoCircle 을 유지한다 (#536).
-const BLOCK_ICON_MAP = {
-  ...DEFAULT_ICON_MAP,
-  info: InfoCircle
-};
 const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     title,
@@ -31,13 +26,8 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
     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 를 적용하지 않는다.
@@ -50,9 +40,7 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
   }
   return _jsx("div", {
     ref: ref,
-    className: classNames('ncua-message-notification', `ncua-message-notification--${color}`, {
-      'ncua-message-notification--block': isBlock
-    }, className),
+    className: classNames('ncua-message-notification', `ncua-message-notification--${color}`, className),
     role: "alert",
     ...rest,
     children: _jsx("div", {
@@ -62,11 +50,8 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
         children: [_jsx(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
         }), _jsx(MessageNotificationActions, {
           actions: actions,
           onClose: onClose,

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

@@ -1,31 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Pin02, XClose } from '@ncds/ui-admin-icon';
 import { HIDE_PERMANENTLY_LABEL } from '../../../../constant/notification';
-import { isSafeUrl } from '../../../utils/url';
 import { FeaturedIcon } from '../../image-and-icons/featured-icon/FeaturedIcon';
-import { getLinkTargetAttributes } from './linkTarget';
 import { NotificationActionButtons } from './NotificationActionButtons';
-/** 아이콘 + 제목/서포팅 텍스트(또는 텍스트 링크) 영역. */
+/** 아이콘 + 제목/서포팅 텍스트 영역. FeaturedIcon 은 md(40px 원 / 20px 아이콘) 고정. */
 const MessageNotificationContent = _ref => {
   let {
     title,
     supportingText,
-    supportTextLink,
-    supportTextLinkTarget,
     icon,
-    iconColor,
-    iconSize
+    iconColor
   } = _ref;
   const featuredIconProps = {
     icon: icon || Pin02,
-    size: iconSize,
+    size: 'md',
     color: iconColor,
     theme: 'light-circle'
   };
-  const supportingTextNode = supportingText && _jsx("span", {
-    className: "ncua-message-notification__supporting-text",
-    children: supportingText
-  });
   return _jsxs("div", {
     className: "ncua-message-notification__content-wrapper",
     children: [_jsx(FeaturedIcon, {
@@ -36,12 +27,10 @@ const MessageNotificationContent = _ref => {
       children: [_jsx("span", {
         className: "ncua-message-notification__title",
         children: title
-      }), supportTextLink && isSafeUrl(supportTextLink) && supportingTextNode ? _jsx("a", {
-        href: supportTextLink,
-        className: "ncua-message-notification__link",
-        ...getLinkTargetAttributes(supportTextLinkTarget),
-        children: supportingTextNode
-      }) : supportingTextNode]
+      }), supportingText && _jsx("span", {
+        className: "ncua-message-notification__supporting-text",
+        children: supportingText
+      })]
     })]
   });
 };

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

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

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

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { InfoCircle, Pin02 } from '@ncds/ui-admin-icon';
+import { Pin02 } from '@ncds/ui-admin-icon';
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
@@ -156,7 +156,7 @@ describe('MessageNotification (React) — DOM 구조 계약', () => {
 });
 describe('MessageNotification (React) — color="info" (#568)', () => {
   it('R-01: color="info" 는 neutral 로 폴백하지 않고 --info 수식자로 렌더한다', () => {
-    // Given/When: variant 미지정, info 색상으로 렌더하면
+    // Given/When: info 색상으로 렌더하면
     const root = renderMessageNotification({
       color: 'info'
     }).querySelector(SELECTOR.ROOT);
@@ -165,7 +165,7 @@ describe('MessageNotification (React) — color="info" (#568)', () => {
     expect(root?.classList.contains('ncua-message-notification--neutral')).toBe(false);
   });
   it('R-02: 기본 info 아이콘은 neutral 과 같은 Pin02 다', () => {
-    // Given/When: variant 미지정, info 색상으로 렌더하면
+    // Given/When: info 색상으로 렌더하면
     const container = renderMessageNotification({
       color: 'info'
     });
@@ -175,7 +175,7 @@ describe('MessageNotification (React) — color="info" (#568)', () => {
     expect(renderedIconPathD(container)).toBe(expected);
   });
   it('R-03: info 의 FeaturedIcon 은 neutral·md 로 렌더한다 (violet 톤은 SCSS 가 덮는다)', () => {
-    // Given/When: variant 미지정, info 색상으로 렌더하면
+    // Given/When: info 색상으로 렌더하면
     const icon = renderMessageNotification({
       color: 'info'
     }).querySelector(SELECTOR.ICON);
@@ -183,14 +183,14 @@ describe('MessageNotification (React) — color="info" (#568)', () => {
     expect(icon?.classList.contains('ncua-featured-icon--neutral')).toBe(true);
     expect(icon?.classList.contains('ncua-featured-icon--md')).toBe(true);
   });
-  it('R-04: block 의 info 아이콘은 InfoCircle 을 유지한다', () => {
-    // Given/When: block 변형에 info 색상으로 렌더하면
+  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(InfoCircle);
+    // Then: 아이콘 path 가 Pin02 와 같다
+    const expected = iconPathD(Pin02);
     expect(expected).not.toBeNull();
     expect(renderedIconPathD(container)).toBe(expected);
   });

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

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

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

@@ -4,7 +4,6 @@ import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { afterEach, describe, expect, it } from 'vitest';
 import { FullWidthNotification } from '../FullWidthNotification';
-import { MessageNotification } from '../MessageNotification';
 /**
  * React 텍스트 링크(`supportTextLink`)의 프로토콜 검사 (#538 리뷰 H2).
  * Vanilla `renderSupportingText` 와 같은 정책 — unsafe URL 이면 링크 없이 텍스트만 렌더한다.
@@ -27,12 +26,7 @@ function mount(element) {
   });
   return container;
 }
-const IMPLEMENTATIONS = [['MessageNotification(block)', supportTextLink => mount(/*#__PURE__*/createElement(MessageNotification, {
-  title: '공지',
-  variant: 'block',
-  supportingText: '자세히 보기',
-  supportTextLink
-})), '.ncua-message-notification__supporting-text'], ['FullWidthNotification', supportTextLink => mount(/*#__PURE__*/createElement(FullWidthNotification, {
+const IMPLEMENTATIONS = [['FullWidthNotification', supportTextLink => mount(/*#__PURE__*/createElement(FullWidthNotification, {
   title: '공지',
   supportingText: '자세히 보기',
   supportTextLink