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

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

@@ -1,4 +1,6 @@
 // 날짜 관련 utils
 export * from './date-picker';
 // 드롭다운 관련 utils
-export * from './dropdown';
+export * from './dropdown';
+// URL 관련 utils
+export * from './url';

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

@@ -0,0 +1,47 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { isSafeUrl } from '../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://'];
+describe('isSafeUrl — window 없음(SSR)', () => {
+  it('window 가 정의되지 않은 환경이다', () => {
+    expect(typeof window).toBe('undefined');
+  });
+  it.each(SAFE)('허용: %j', url => {
+    expect(isSafeUrl(url)).toBe(true);
+  });
+  it.each(UNSAFE)('차단: %j', url => {
+    expect(isSafeUrl(url)).toBe(false);
+  });
+  it('빈 문자열은 차단한다', () => {
+    expect(isSafeUrl('')).toBe(false);
+  });
+});
+describe('isSafeUrl — window 존재', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+  it('현재 origin 기준으로 상대경로를 해석해 허용한다', () => {
+    vi.stubGlobal('window', {
+      location: {
+        origin: 'https://admin.example.com'
+      }
+    });
+    expect(isSafeUrl('/notice/1')).toBe(true);
+    expect(isSafeUrl('javascript:alert(1)')).toBe(false);
+  });
+  it('origin 이 "null"(about:blank·sandbox iframe)이어도 상대경로를 허용한다', () => {
+    vi.stubGlobal('window', {
+      location: {
+        origin: 'null'
+      }
+    });
+    expect(isSafeUrl('/notice/1')).toBe(true);
+    expect(isSafeUrl(' JavaScript:alert(1)')).toBe(false);
+  });
+});

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

@@ -0,0 +1 @@
+export * from './isSafeUrl';

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

@@ -0,0 +1,26 @@
+/**
+ * 상대경로 해석용 기본 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`)가 공유한다.
+ */
+export 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/temp/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 = {
@@ -17,7 +17,7 @@ export class FullWidthNotification {
         this.setupAutoClose();
     }
     createElement() {
-        const { title, supportingText, color, className, actions, onClose, supportTextLink, onHidePermanently, hidePermanentlyLabel, } = this.options;
+        const { title, supportingText, color, className, actions, onClose, supportTextLink, supportTextLinkTarget, onHidePermanently, hidePermanentlyLabel, } = this.options;
         const wrapper = createWrapperElement(CLASS_NAMES.FULL_WIDTH.BASE, color, className);
         const iconHtml = FULL_WIDTH_ICON_MAP[color](FULL_WIDTH_SIZES.ICON);
         wrapper.innerHTML = sanitizeHtml(this.buildTemplate({
@@ -30,6 +30,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/temp/assets/scripts/notification/MessageNotification.d.ts

@@ -9,6 +9,8 @@ export declare class MessageNotification {
     private featuredIcon?;
     constructor(options: MessageNotificationOptions);
     private createElement;
+    /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). */
+    private createFeaturedIcon;
     private bindEvents;
     private setupAutoClose;
     getElement(): HTMLElement;

package/dist/temp/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 = {
@@ -18,37 +18,24 @@ export class MessageNotification {
         this.setupAutoClose();
     }
     createElement() {
-        const { title, supportingText, color, className, actions, onClose, onHidePermanently, hidePermanentlyLabel } = 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 { title, supportingText, color, className, actions, onClose, onHidePermanently, hidePermanentlyLabel, variant, supportTextLink, supportTextLinkTarget, } = this.options;
+        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}`);
@@ -58,6 +45,24 @@ 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/temp/assets/scripts/notification/const/classNames.d.ts

@@ -8,6 +8,7 @@ export declare const CLASS_NAMES: {
         readonly TEXT_CONTAINER: "ncua-full-width-notification__text-container";
         readonly TITLE: "ncua-full-width-notification__title";
         readonly SUPPORTING_TEXT: "ncua-full-width-notification__supporting-text";
+        readonly LINK: "ncua-full-width-notification__link";
         readonly ACTIONS_CONTAINER: "ncua-full-width-notification__actions-container";
         readonly ACTIONS: "ncua-full-width-notification__actions";
         readonly CLOSE_BUTTON: "ncua-full-width-notification__close-button";
@@ -25,6 +26,7 @@ export declare const CLASS_NAMES: {
     };
     readonly MESSAGE: {
         readonly BASE: "ncua-message-notification";
+        readonly BLOCK: "ncua-message-notification--block";
         readonly CONTAINER: "ncua-message-notification__container";
         readonly CONTENT: "ncua-message-notification__content";
         readonly CONTENT_WRAPPER: "ncua-message-notification__content-wrapper";
@@ -32,6 +34,7 @@ export declare const CLASS_NAMES: {
         readonly TEXT_CONTAINER: "ncua-message-notification__text-container";
         readonly TITLE: "ncua-message-notification__title";
         readonly SUPPORTING_TEXT: "ncua-message-notification__supporting-text";
+        readonly LINK: "ncua-message-notification__link";
         readonly ACTIONS_CONTAINER: "ncua-message-notification__actions-container";
         readonly ACTIONS: "ncua-message-notification__actions";
         readonly FOOTER_CONTAINER: "ncua-message-notification__footer-container";

package/dist/temp/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/temp/assets/scripts/notification/const/icons.d.ts

@@ -23,3 +23,9 @@ export declare const ICON_MAP: {
     readonly success: (size: string) => string;
     readonly info: (size: string) => string;
 };
+/**
+ * message 타입 아이콘. floating 과 같은 4색에 block 변형 전용 info 를 더한다.
+ * `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어 쓰지 않는다
+ * (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
+ */
+export declare const MESSAGE_ICON_MAP: Partial<Record<NotificationColor, (size: string) => string>>;

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

@@ -23,3 +23,12 @@ export const FULL_WIDTH_ICON_MAP = {
     info: SVG_ICONS['info-circle'],
 };
 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/temp/assets/scripts/notification/const/index.d.ts

@@ -1,5 +1,4 @@
 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 type { BaseNotificationOptions, LegacyNotificationHierarchy, NotificationAction, NotificationActionButtonSize, NotificationColor, NotificationHierarchy, } from './types';
-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';
+export type { BaseNotificationOptions, LegacyNotificationHierarchy, NotificationAction, NotificationActionButtonSize, NotificationColor, NotificationHierarchy, NotificationLinkTarget, NotificationVariant, } from './types';

package/dist/temp/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/temp/assets/scripts/notification/const/sizes.d.ts

@@ -24,6 +24,10 @@ export declare const MESSAGE_SIZES: {
     readonly ICON_PIXEL: "20";
     readonly CLOSE_BUTTON: "20";
 };
+export declare const MESSAGE_BLOCK_SIZES: {
+    readonly FEATURED_ICON: "sm";
+    readonly ICON_PIXEL: "16";
+};
 export declare const getSizes: {
     readonly featuredIcon: (isMobile: boolean) => "sm" | "md";
     readonly iconPixel: (isMobile: boolean) => "20" | "16";

package/dist/temp/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/temp/assets/scripts/notification/const/types.d.ts

@@ -1,4 +1,16 @@
 export type NotificationColor = 'neutral' | 'error' | 'warning' | 'success' | 'info';
+/**
+ * message 타입의 표시 변형. React `NotificationVariant`와 같은 어휘다.
+ * - `'default'`: 기존 message
+ * - `'block'`: 서브 페이지 공지용 (흰 배경, FeaturedIcon sm, 제목 + 텍스트 링크 1행, info 유지)
+ */
+export type NotificationVariant = 'default' | 'block';
+/**
+ * 텍스트 링크(`supportTextLink`)를 여는 대상. React `NotificationLinkTarget`과 같은 어휘다.
+ * - `'_self'`: 같은 탭 (target·rel 미부여)
+ * - `'_blank'`: 새 탭 (`target="_blank"` + `rel="noopener noreferrer"`)
+ */
+export type NotificationLinkTarget = '_self' | '_blank';
 /**
  * 알림 액션 버튼(`ncua-btn`)의 색상 수식자.
  * React `NotificationAction.hierarchy`와 동일한 어휘를 쓴다 — `ButtonTheme`의 부분집합이다.
@@ -31,7 +43,23 @@ export interface BaseNotificationOptions {
     className?: string;
     actions?: NotificationAction[];
     autoClose?: number;
+    /**
+     * supportingText에 대한 링크 URL. full-width 타입, message 타입의 `variant: 'block'`에서 사용 가능.
+     * http/https 만 허용되며 그 외 프로토콜은 링크 없이 텍스트만 렌더된다.
+     */
     supportTextLink?: string;
+    /**
+     * 텍스트 링크를 여는 대상. `supportTextLink`가 렌더될 때만 동작한다.
+     * `'_blank'`이면 새 탭으로 열고 `rel="noopener noreferrer"`를 함께 붙인다.
+     * `'_blank'`가 아닌 값은 모두 `'_self'`(같은 탭)로 취급한다.
+     * @default '_self'
+     */
+    supportTextLinkTarget?: NotificationLinkTarget;
+    /**
+     * message 타입의 표시 변형. message 타입에서만 동작한다.
+     * @default 'default'
+     */
+    variant?: NotificationVariant;
     onHidePermanently?: () => void;
     /**
      * 다시보지 않기 버튼의 라벨. full-width, message 타입에서 사용 가능하며
@@ -44,4 +72,3 @@ export interface BaseNotificationOptions {
      */
     hidePermanentlyLabel?: string;
 }
-export declare const MESSAGE_CLOSE_ICON_COLORS: Record<NotificationColor, string>;

package/dist/temp/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/temp/assets/scripts/notification/messageTemplate.d.ts

@@ -1,7 +1,11 @@
-import type { NotificationAction } from './const';
+import type { NotificationAction, NotificationColor } from './const';
 export interface MessageTemplateParams {
     title: string;
     supportingText?: string;
+    /** 지정 시 `supportingText`를 텍스트 링크로 렌더한다 (block 변형 전용, http/https 만 허용). */
+    supportTextLink?: string;
+    /** 닫기 아이콘 색 결정용. 미지정 시 neutral. */
+    color?: NotificationColor;
     actions?: NotificationAction[];
     onClose?: () => void;
     onHidePermanently?: () => void;

package/dist/temp/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';
 /**
@@ -12,17 +12,17 @@ const ACTION_BUTTON_SIZE = 'xs';
  * 동일한 클래스 트리를 산출해야 한다 — SCSS 한 벌을 두 구현이 공유한다.
  */
 export function buildMessageTemplate(params) {
-    const { title, supportingText, actions, onClose, onHidePermanently, hidePermanentlyLabel } = params;
+    const { title, supportingText, supportTextLink, color, actions, onClose, onHidePermanently, hidePermanentlyLabel } = params;
     return `
     <div class="${CLASS_NAMES.MESSAGE.CONTAINER}">
       <div class="${CLASS_NAMES.MESSAGE.CONTENT}">
         <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 })}
+        ${renderActionsContainer({ actions, onClose, onHidePermanently, hidePermanentlyLabel, color })}
       </div>
     </div>
   `;
@@ -33,22 +33,22 @@ export function buildMessageTemplate(params) {
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
 function renderActionsContainer(params) {
-    const { actions, onClose, onHidePermanently, hidePermanentlyLabel } = params;
+    const { actions, onClose, onHidePermanently, hidePermanentlyLabel, color } = params;
     const actionsHtml = renderActions(actions ?? [], CLASS_NAMES.MESSAGE.ACTIONS, ACTION_BUTTON_SIZE);
-    const footerHtml = renderFooterContainer({ onClose, onHidePermanently, hidePermanentlyLabel });
+    const footerHtml = renderFooterContainer({ onClose, onHidePermanently, hidePermanentlyLabel, color });
     if (!actionsHtml && !footerHtml)
         return '';
     return `<div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">${actionsHtml}${footerHtml}</div>`;
 }
 /** 다시 보지 않기 + 닫기 그룹. 전용 래퍼를 쓰는 이유는 `CLASS_NAMES.MESSAGE.FOOTER_CONTAINER` 참조. */
 function renderFooterContainer(params) {
-    const { onClose, onHidePermanently, hidePermanentlyLabel } = params;
+    const { onClose, onHidePermanently, hidePermanentlyLabel, color } = params;
     if (!onHidePermanently && !onClose)
         return '';
     return `
     <div class="${CLASS_NAMES.MESSAGE.FOOTER_CONTAINER}">
       ${renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
-      ${renderCloseButton(onClose)}
+      ${renderCloseButton(onClose, color)}
     </div>
   `;
 }
@@ -68,12 +68,17 @@ function renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel) {
     </button>
   `;
 }
-function renderCloseButton(onClose) {
+/**
+ * 닫기(X) 버튼. 아이콘 색은 React `<XClose color>`와 같이 svg 의 `color` 속성으로 주고
+ * path 는 `stroke="currentColor"`로 상속받는다 — 두 구현이 같은 마크업을 낸다.
+ */
+function renderCloseButton(onClose, color = '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/temp/assets/scripts/notification/utils.d.ts

@@ -1,7 +1,15 @@
 import type { LegacyNotificationHierarchy, NotificationAction, NotificationActionButtonSize, NotificationColor, NotificationHierarchy } from './const';
 export declare function createWrapperElement(baseClass: string, color: NotificationColor, className?: string): HTMLElement;
 export declare function buildClassName(baseClass: string, color: NotificationColor, className?: string): string;
-export declare function renderSupportingText(supportingText?: string, className?: string, supportTextLink?: string): string;
+export declare function renderSupportingText(supportingText?: string, className?: string, supportTextLink?: string, linkClassName?: string): string;
+/**
+ * `supportTextLinkTarget`이 `'_blank'`이면 `renderSupportingText`가 만든 링크를 새 탭으로 연다.
+ *
+ * target 은 sanitize **이후** 우리가 만든 링크(텍스트 컨테이너의 직계 `<a>`)에만 지정한다.
+ * DOMPurify 에 target 을 전역 허용하면 사용자 입력 HTML 의 `<a target>`까지 rel 없이 통과하기 때문이다.
+ * 런타임 입력이므로 `'_blank'`가 아닌 값은 전부 `'_self'`(속성 미부여)로 취급한다.
+ */
+export declare function applySupportTextLinkTarget(root: HTMLElement, textContainerClassName: string, linkClassName: string, target: unknown): void;
 /**
  * 액션 버튼의 색상 수식자를 현행 어휘로 정규화한다.
  *
@@ -16,8 +24,7 @@ export declare function resolveActionHierarchy(hierarchy?: NotificationHierarchy
 /**
  * 액션 버튼 그룹 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 declare function renderActions(actions: NotificationAction[], wrapperClass: string, size?: NotificationActionButtonSize): string;
 export declare function bindNotificationEvents(element: HTMLElement, actions: NotificationAction[], onClose?: () => void, onRemove?: () => void): void;

package/dist/temp/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,19 +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,7 +22,7 @@ function isSafeUrl(url) {
 function escapeHtmlAttr(str) {
     return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''');
 }
-export function renderSupportingText(supportingText, className, supportTextLink) {
+export function renderSupportingText(supportingText, className, supportTextLink, linkClassName = CLASS_NAMES.FULL_WIDTH.LINK) {
     if (!supportingText)
         return '';
     // 본문(supportingText) 자체는 이 함수의 호출 결과가 wrapper.innerHTML에
@@ -42,11 +30,27 @@ export function renderSupportingText(supportingText, className, supportTextLink)
     // 이렇게 해야 <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';
 /**
@@ -78,10 +82,9 @@ 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, size = 'sm') {
+export function renderActions(actions, wrapperClass, size = 'xs') {
     // 액션이 없으면 빈 문자열 반환
     if (!actions || actions.length === 0) {
         return '';

package/dist/temp/constant/notification.d.ts

@@ -13,3 +13,16 @@ export declare const HIDE_PERMANENTLY_LABEL: {
     readonly message: "다시 보지 않기";
     readonly fullWidth: "다시보지 않기";
 };
+/**
+ * message 타입 닫기(X) 아이콘의 color 별 색.
+ *
+ * React(`MessageNotification.tsx`)와 Vanilla(`messageTemplate.ts`)가 함께 참조하는 단일 출처다.
+ * `info`는 `variant: 'block'`에서만 렌더된다(default 는 neutral 로 폴백).
+ */
+export declare const MESSAGE_CLOSE_ICON_COLOR: {
+    readonly neutral: string;
+    readonly error: string;
+    readonly warning: string;
+    readonly success: string;
+    readonly info: string;
+};

package/dist/temp/constant/notification.js

@@ -1,3 +1,4 @@
+import { COLOR } from './color';
 /**
  * 다시보지 않기 버튼의 타입별 기본 문구.
  *
@@ -13,3 +14,16 @@ 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/temp/src/components/feedback-and-status/badge/Badge.d.ts

@@ -16,4 +16,4 @@ type BadgeProps = {
 };
 declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export { Badge };
-export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };
+export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };