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

package/dist/cjs/src/utils/index.js

@@ -24,4 +24,15 @@ Object.keys(_dropdown).forEach(function (key) {
       return _dropdown[key];
     }
   });
+});
+var _url = require("./url");
+Object.keys(_url).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _url[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _url[key];
+    }
+  });
 });

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _isSafeUrl = require("../isSafeUrl");
+/**
+ * 알림 텍스트 링크(`supportTextLink`)의 href 허용 여부.
+ * React·Vanilla 가 이 함수 하나를 공유한다 (#538 리뷰 H2).
+ *
+ * 이 파일은 vitest 기본 환경(node)에서 돈다 — `window` 가 없는 SSR 상황 자체가 검증 대상이다.
+ */
+const SAFE = ['https://example.com/notice/1', 'http://example.com', 'HTTPS://EXAMPLE.COM', '/notice/1', 'notice/1', '../notice', '?page=2', '#section', '  https://example.com  '];
+const UNSAFE = ['javascript:alert(1)', 'JavaScript:alert(1)', ' JavaScript:alert(1)', '\tjavascript:alert(1)', 'java\nscript:alert(1)', 'data:text/html,<script>alert(1)</script>', 'DATA:text/html;base64,PHNjcmlwdD4=', 'vbscript:msgbox(1)', 'file:///etc/passwd', 'mailto:a@example.com', 'http://'];
+(0, _vitest.describe)('isSafeUrl — window 없음(SSR)', () => {
+  (0, _vitest.it)('window 가 정의되지 않은 환경이다', () => {
+    (0, _vitest.expect)(typeof window).toBe('undefined');
+  });
+  _vitest.it.each(SAFE)('허용: %j', url => {
+    (0, _vitest.expect)((0, _isSafeUrl.isSafeUrl)(url)).toBe(true);
+  });
+  _vitest.it.each(UNSAFE)('차단: %j', url => {
+    (0, _vitest.expect)((0, _isSafeUrl.isSafeUrl)(url)).toBe(false);
+  });
+  (0, _vitest.it)('빈 문자열은 차단한다', () => {
+    (0, _vitest.expect)((0, _isSafeUrl.isSafeUrl)('')).toBe(false);
+  });
+});
+(0, _vitest.describe)('isSafeUrl — window 존재', () => {
+  (0, _vitest.afterEach)(() => {
+    _vitest.vi.unstubAllGlobals();
+  });
+  (0, _vitest.it)('현재 origin 기준으로 상대경로를 해석해 허용한다', () => {
+    _vitest.vi.stubGlobal('window', {
+      location: {
+        origin: 'https://admin.example.com'
+      }
+    });
+    (0, _vitest.expect)((0, _isSafeUrl.isSafeUrl)('/notice/1')).toBe(true);
+    (0, _vitest.expect)((0, _isSafeUrl.isSafeUrl)('javascript:alert(1)')).toBe(false);
+  });
+  (0, _vitest.it)('origin 이 "null"(about:blank·sandbox iframe)이어도 상대경로를 허용한다', () => {
+    _vitest.vi.stubGlobal('window', {
+      location: {
+        origin: 'null'
+      }
+    });
+    (0, _vitest.expect)((0, _isSafeUrl.isSafeUrl)('/notice/1')).toBe(true);
+    (0, _vitest.expect)((0, _isSafeUrl.isSafeUrl)(' JavaScript:alert(1)')).toBe(false);
+  });
+});

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _isSafeUrl = require("./isSafeUrl");
+Object.keys(_isSafeUrl).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _isSafeUrl[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _isSafeUrl[key];
+    }
+  });
+});

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSafeUrl = isSafeUrl;
+/**
+ * 상대경로 해석용 기본 origin. `window` 가 없거나(SSR) origin 이 불투명(`"null"` — about:blank,
+ * sandbox iframe)일 때 쓴다. 판정은 프로토콜만 보므로 실제 호스트와 무관하다.
+ */
+const FALLBACK_ORIGIN = 'http://localhost';
+function resolveBaseOrigin() {
+  if (typeof window === 'undefined') return FALLBACK_ORIGIN;
+  const origin = window.location?.origin;
+  return origin && origin !== 'null' ? origin : FALLBACK_ORIGIN;
+}
+/**
+ * 링크 href 로 넣어도 안전한 URL 인지 판정한다. http/https 및 상대경로만 허용한다.
+ * javascript:, data:, file: 등 위험 프로토콜로 인한 XSS / 외부 페이로드 로딩을 차단.
+ *
+ * URL 파서가 앞뒤 공백·탭·개행 제거와 scheme 소문자화를 하므로 ` JavaScript:` 같은 우회도 막힌다.
+ * React(`MessageNotificationParts`·`FullWidthNotification`)와 Vanilla(`renderSupportingText`)가 공유한다.
+ */
+function isSafeUrl(url) {
+  if (!url.trim()) return false;
+  try {
+    const parsed = new URL(url, resolveBaseOrigin());
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}

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

@@ -1,7 +1,7 @@
 import { HIDE_PERMANENTLY_LABEL } from '../../../constant/notification';
 import { sanitizeHtml } from '../utils/sanitize';
 import { CLASS_NAMES, FULL_WIDTH_ICON_MAP, FULL_WIDTH_SIZES, SVG_ICONS } from './const';
-import { bindNotificationEvents, createWrapperElement, renderActions, renderSupportingText, setupAutoClose } from './utils';
+import { applySupportTextLinkTarget, bindNotificationEvents, createWrapperElement, renderActions, renderSupportingText, setupAutoClose } from './utils';
 export class FullWidthNotification {
   constructor(options) {
     this.options = {
@@ -25,6 +25,7 @@ export class FullWidthNotification {
       actions,
       onClose,
       supportTextLink,
+      supportTextLinkTarget,
       onHidePermanently,
       hidePermanentlyLabel
     } = this.options;
@@ -40,6 +41,7 @@ export class FullWidthNotification {
       onHidePermanently,
       hidePermanentlyLabel
     }));
+    applySupportTextLinkTarget(wrapper, CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER, CLASS_NAMES.FULL_WIDTH.LINK, supportTextLinkTarget);
     return wrapper;
   }
   buildTemplate(params) {

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

@@ -1,8 +1,8 @@
 import { FeaturedIcon } from '../featuredIcon';
 import { sanitizeHtml } from '../utils/sanitize';
-import { CLASS_NAMES, FLOATING_ICON_MAP, MESSAGE_SIZES } from './const';
+import { CLASS_NAMES, MESSAGE_BLOCK_SIZES, MESSAGE_ICON_MAP, MESSAGE_SIZES } from './const';
 import { buildMessageTemplate } from './messageTemplate';
-import { bindNotificationEvents, createWrapperElement, setupAutoClose } from './utils';
+import { applySupportTextLinkTarget, bindNotificationEvents, createWrapperElement, setupAutoClose } from './utils';
 export class MessageNotification {
   constructor(options) {
     this.options = {
@@ -26,38 +26,28 @@ export 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 = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, className);
-    const iconFunction = FLOATING_ICON_MAP[actualColor];
-    // FeaturedIcon 생성
-    let featuredIconElement = null;
-    if (iconFunction) {
-      const iconSvg = iconFunction(MESSAGE_SIZES.ICON_PIXEL);
-      this.featuredIcon = FeaturedIcon.create({
-        svgString: iconSvg,
-        theme: 'light-circle',
-        color: actualColor,
-        size: MESSAGE_SIZES.FEATURED_ICON,
-        // React 구현과 동일하게 `__icon`(flex-shrink: 0)을 부여한다.
-        // 누락 시 긴 타이틀에서 아이콘이 찌그러진다.
-        className: 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 ? CLASS_NAMES.MESSAGE.BLOCK : '', className].filter(Boolean).join(' ');
+    const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, wrapperClassName);
+    const featuredIconElement = this.createFeaturedIcon(actualColor, isBlock);
     wrapper.innerHTML = sanitizeHtml(buildMessageTemplate({
       title,
       supportingText,
+      supportTextLink: isBlock ? supportTextLink : undefined,
+      color: actualColor,
       actions,
       onClose,
       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}`);
@@ -67,6 +57,23 @@ export class MessageNotification {
     }
     return wrapper;
   }
+  /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). */
+  createFeaturedIcon(color, isBlock) {
+    const iconFunction = MESSAGE_ICON_MAP[color];
+    if (!iconFunction) return null;
+    const sizes = isBlock ? MESSAGE_BLOCK_SIZES : MESSAGE_SIZES;
+    this.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: CLASS_NAMES.MESSAGE.ICON
+    });
+    return this.featuredIcon.getElement();
+  }
   bindEvents() {
     bindNotificationEvents(this.element, this.options.actions, this.options.onClose, () => this.remove());
     // 다시보지 않기 버튼 이벤트 바인딩

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

@@ -9,6 +9,7 @@ export const 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'
@@ -26,6 +27,7 @@ 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',
@@ -33,6 +35,7 @@ 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

@@ -22,4 +22,13 @@ export const FULL_WIDTH_ICON_MAP = {
   success: SVG_ICONS['check-circle'],
   info: SVG_ICONS['info-circle']
 };
-export const ICON_MAP = FULL_WIDTH_ICON_MAP;
+export const ICON_MAP = FULL_WIDTH_ICON_MAP;
+/**
+ * message 타입 아이콘. floating 과 같은 4색에 block 변형 전용 info 를 더한다.
+ * `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어 쓰지 않는다
+ * (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
+ */
+export const 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/esm/assets/scripts/notification/const/index.js

@@ -1,5 +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, 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';
-export { MESSAGE_CLOSE_ICON_COLORS } from './types';
+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_BLOCK_SIZES, MESSAGE_SIZES } from './sizes';

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

@@ -33,6 +33,11 @@ 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/const/types.js

@@ -1,8 +1 @@
-// Message Notification 닫기 버튼 아이콘 색상 맵
-export const MESSAGE_CLOSE_ICON_COLORS = {
-  neutral: '#6B7280',
-  error: '#EF4444',
-  warning: '#F97316',
-  success: '#16A34A',
-  info: '#6B7280' // info는 message 타입에서 지원하지 않지만 fallback용
-};
+export {};

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

@@ -1,9 +1,9 @@
-import { HIDE_PERMANENTLY_LABEL } from '../../../constant/notification';
+import { HIDE_PERMANENTLY_LABEL, MESSAGE_CLOSE_ICON_COLOR } from '../../../constant/notification';
 import { CLASS_NAMES, MESSAGE_SIZES, SVG_ICONS } from './const';
 import { renderActions, renderSupportingText } from './utils';
 /**
  * message 타입 액션 버튼 사이즈. TO-BE 규격 28px이며 React `<Button size="xs">`와 같다.
- * floating / full-width는 이 값을 쓰지 않고 `renderActions`의 기본값('sm')을 유지한다.
+ * `renderActions` 기본값도 'xs'(#535)지만 message 규격을 명시적으로 고정해 둔다.
  */
 const ACTION_BUTTON_SIZE = 'xs';
 /**
@@ -15,6 +15,8 @@ export function buildMessageTemplate(params) {
   const {
     title,
     supportingText,
+    supportTextLink,
+    color,
     actions,
     onClose,
     onHidePermanently,
@@ -26,14 +28,15 @@ 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)}
+            ${renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT, supportTextLink, CLASS_NAMES.MESSAGE.LINK)}
           </div>
         </div>
         ${renderActionsContainer({
     actions,
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   })}
       </div>
     </div>
@@ -49,13 +52,15 @@ function renderActionsContainer(params) {
     actions,
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   } = params;
   const actionsHtml = renderActions(actions ?? [], CLASS_NAMES.MESSAGE.ACTIONS, ACTION_BUTTON_SIZE);
   const footerHtml = renderFooterContainer({
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   });
   if (!actionsHtml && !footerHtml) return '';
   return `<div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">${actionsHtml}${footerHtml}</div>`;
@@ -65,13 +70,14 @@ function renderFooterContainer(params) {
   const {
     onClose,
     onHidePermanently,
-    hidePermanentlyLabel
+    hidePermanentlyLabel,
+    color
   } = params;
   if (!onHidePermanently && !onClose) return '';
   return `
     <div class="${CLASS_NAMES.MESSAGE.FOOTER_CONTAINER}">
       ${renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
-      ${renderCloseButton(onClose)}
+      ${renderCloseButton(onClose, color)}
     </div>
   `;
 }
@@ -90,11 +96,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 = MESSAGE_CLOSE_ICON_COLOR[color];
   return `
     <button type="button" class="${CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">
-      ${SVG_ICONS['x-close'](MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', 'stroke="#2F2F30"')}
+      ${SVG_ICONS['x-close'](MESSAGE_SIZES.CLOSE_BUTTON).replace('<svg ', `<svg color="${iconColor}" `)}
     </button>
   `;
 }

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

@@ -1,4 +1,5 @@
 import { BREAKPOINT } from '../../../src/constant/breakpoint';
+import { isSafeUrl } from '../../../src/utils/url';
 import { CLASS_NAMES } from './const';
 // 공통 유틸리티 함수들
 export function createWrapperElement(baseClass, color, className) {
@@ -14,18 +15,6 @@ export 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="..."`)을 방지.
@@ -34,17 +23,32 @@ 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;
   if (!supportingText) return '';
   // 본문(supportingText) 자체는 이 함수의 호출 결과가 wrapper.innerHTML에
   // 들어가기 전에 DOMPurify로 sanitize되므로 별도 이스케이프하지 않는다.
   // 이렇게 해야 <br>, <strong> 등 서식용 태그가 그대로 동작한다.
   if (supportTextLink && 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'`(속성 미부여)로 취급한다.
+ */
+export 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';
 /**
@@ -76,11 +80,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">`와 같다.
  */
 export 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/esm/constant/notification.js

@@ -1,3 +1,4 @@
+import { COLOR } from './color';
 /**
  * 다시보지 않기 버튼의 타입별 기본 문구.
  *
@@ -12,4 +13,17 @@
 export const HIDE_PERMANENTLY_LABEL = {
   message: '다시 보지 않기',
   fullWidth: '다시보지 않기'
+};
+/**
+ * message 타입 닫기(X) 아이콘의 color 별 색.
+ *
+ * React(`MessageNotification.tsx`)와 Vanilla(`messageTemplate.ts`)가 함께 참조하는 단일 출처다.
+ * `info`는 `variant: 'block'`에서만 렌더된다(default 는 neutral 로 폴백).
+ */
+export const MESSAGE_CLOSE_ICON_COLOR = {
+  neutral: COLOR.gray700,
+  error: COLOR.red500,
+  warning: COLOR.orange500,
+  success: COLOR.green600,
+  info: COLOR.violet600
 };

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

@@ -9,7 +9,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/esm/src/components/overlays/notification/FloatingNotification.js

@@ -5,12 +5,12 @@ import { forwardRef, useEffect, useId, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { MEDIA_QUERY } from '../../../constant/breakpoint';
 import { useMediaQuery } from '../../../hooks/useMediaQuery';
-import { Button } from '../../action/button';
 import { ButtonCloseX } from '../../action/button/ButtonCloseX';
 import { FeaturedIcon } from '../../image-and-icons/featured-icon/FeaturedIcon';
 // 호스트 싱글톤은 vanilla/React 양쪽이 동일한 함수를 공유한다 — host.ts 가 가까운 진입점 역할을
 // 하므로 React 컴포넌트는 deep relative path 로 vanilla internals 를 직접 import 하지 않는다.
 import { mountFloatingNotificationHost } from './host';
+import { NotificationActionButtons } from './NotificationActionButtons';
 /**
  * 색상별 a11y role.
  *   - error/warning → role="alert"  (implicit aria-live="assertive": 즉시 발화)
@@ -149,12 +149,9 @@ const FloatingNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
             children: supportingText
           }), actions && _jsx("div", {
             className: "ncua-floating-notification__actions",
-            children: actions.map(action => _jsx(Button, {
-              size: "xs",
-              hierarchy: action.hierarchy || 'text',
-              label: action.label,
-              onClick: action?.onClick
-            }, `${action.label}-${action.hierarchy}`))
+            children: _jsx(NotificationActionButtons, {
+              actions: actions
+            })
           })]
         })]
       })

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

@@ -4,6 +4,9 @@ import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../../constant/color';
 import { HIDE_PERMANENTLY_LABEL } from '../../../../constant/notification';
+import { isSafeUrl } from '../../../utils/url';
+import { getLinkTargetAttributes } from './linkTarget';
+import { NotificationActionButtons } from './NotificationActionButtons';
 const iconMap = {
   neutral: MessageChatSquare,
   error: AlertTriangle,
@@ -28,11 +31,14 @@ const FullWidthNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
     actions,
     autoClose = 0,
     supportTextLink,
+    supportTextLinkTarget,
     onHidePermanently,
     hidePermanentlyLabel = HIDE_PERMANENTLY_LABEL.fullWidth,
     ...rest
   } = _ref;
   const [shouldRemove, setShouldRemove] = useState(false);
+  // unsafe URL(javascript: 등)이면 링크 없이 텍스트만 렌더한다 — Vanilla `renderSupportingText` 와 같은 정책.
+  const safeSupportTextLink = supportTextLink && isSafeUrl(supportTextLink) ? supportTextLink : undefined;
   const closeIconSize = {
     width: 20,
     height: 20
@@ -86,12 +92,13 @@ const FullWidthNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
             children: [_jsx("span", {
               className: "ncua-full-width-notification__title",
               children: title
-            }), !supportTextLink && supportingText && _jsx("span", {
+            }), !safeSupportTextLink && supportingText && _jsx("span", {
               className: "ncua-full-width-notification__supporting-text",
               children: supportingText
-            }), supportTextLink && supportingText && _jsx("a", {
-              href: supportTextLink,
+            }), safeSupportTextLink && supportingText && _jsx("a", {
+              href: safeSupportTextLink,
               className: "ncua-full-width-notification__link",
+              ...getLinkTargetAttributes(supportTextLinkTarget),
               children: _jsx("span", {
                 className: "ncua-full-width-notification__supporting-text",
                 children: supportingText
@@ -102,11 +109,9 @@ const FullWidthNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
           className: "ncua-full-width-notification__actions-container",
           children: [actions && _jsx("div", {
             className: "ncua-full-width-notification__actions",
-            children: actions.map(action => _jsx("button", {
-              onClick: action.onClick,
-              className: classNames('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`),
-              children: action.label
-            }, `${action.label}-${action.hierarchy}`))
+            children: _jsx(NotificationActionButtons, {
+              actions: actions
+            })
           }), onHidePermanently && _jsx("button", {
             type: "button",
             className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),