@ncds/ui-admin 1.8.25-alpha.3 → 1.8.26-alpha.0

package/dist/temp/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": 즉시 발화)
@@ -110,7 +110,7 @@ const FloatingNotification = forwardRef(({ title, supportingText, color = 'neutr
     const card = (
     // a11y/예측가능성 — caller 가 className/id 등 일부는 덮어쓸 수 있게 {...rest} 를 먼저 펼치고,
     // role/aria-labelledby/aria-describedby 같은 컴포넌트 본질 prop 은 그 뒤에 두어 우선 적용.
-    _jsxs("div", { ...rest, ref: ref, className: classNames('ncua-floating-notification', `ncua-floating-notification--${color}`, className), role: role, "aria-labelledby": titleId, "aria-describedby": supportingText ? descId : undefined, children: [_jsx("div", { className: "ncua-floating-notification__content", children: _jsxs("div", { className: "ncua-floating-notification__container", children: [iconMap[color] && _jsx(FeaturedIcon, { ...featuredIconProps, size: isMobile ? 'md' : 'sm' }), _jsxs("div", { className: "ncua-floating-notification__text-container", children: [_jsx("div", { className: "ncua-floating-notification__title-wrapper", children: _jsx("span", { id: titleId, className: "ncua-floating-notification__title", children: title }) }), supportingText && (_jsx("span", { id: descId, className: "ncua-floating-notification__supporting-text", 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}`))) }))] })] }) }), onClose && (_jsx(ButtonCloseX, { theme: "light", className: "ncua-floating-notification__close-button", size: isMobile ? 'sm' : 'xs', onClick: onClose }))] }));
+    _jsxs("div", { ...rest, ref: ref, className: classNames('ncua-floating-notification', `ncua-floating-notification--${color}`, className), role: role, "aria-labelledby": titleId, "aria-describedby": supportingText ? descId : undefined, children: [_jsx("div", { className: "ncua-floating-notification__content", children: _jsxs("div", { className: "ncua-floating-notification__container", children: [iconMap[color] && _jsx(FeaturedIcon, { ...featuredIconProps, size: isMobile ? 'md' : 'sm' }), _jsxs("div", { className: "ncua-floating-notification__text-container", children: [_jsx("div", { className: "ncua-floating-notification__title-wrapper", children: _jsx("span", { id: titleId, className: "ncua-floating-notification__title", children: title }) }), supportingText && (_jsx("span", { id: descId, className: "ncua-floating-notification__supporting-text", children: supportingText })), actions && (_jsx("div", { className: "ncua-floating-notification__actions", children: _jsx(NotificationActionButtons, { actions: actions }) }))] })] }) }), onClose && (_jsx(ButtonCloseX, { theme: "light", className: "ncua-floating-notification__close-button", size: isMobile ? 'sm' : 'xs', onClick: onClose }))] }));
     // 기본은 인라인 렌더 — 부모 JSX 트리에 카드를 그대로 둔다.
     if (!portal) {
         return card;

package/dist/temp/src/components/overlays/notification/FullWidthNotification.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import type { NotificationAction, NotificationColor } from './Notification';
+import type { NotificationAction, NotificationColor, NotificationLinkTarget } from './Notification';
 interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
      * 알림 제목 텍스트
@@ -36,6 +36,11 @@ interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'
      * info 링크 영역 (선택사항)
      */
     supportTextLink?: string;
+    /**
+     * 텍스트 링크를 여는 대상 (선택사항). `'_blank'`이면 새 탭 + `rel="noopener noreferrer"`
+     * @default '_self'
+     */
+    supportTextLinkTarget?: NotificationLinkTarget;
     /**
      * 다시보지 않기 이벤트 핸들러 (선택사항)
      */

package/dist/temp/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,
@@ -18,8 +21,10 @@ const iconColorMap = {
     success: 'green600',
     info: 'violet600',
 };
-const FullWidthNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, actions, autoClose = 0, supportTextLink, onHidePermanently, hidePermanentlyLabel = HIDE_PERMANENTLY_LABEL.fullWidth, ...rest }, ref) => {
+const FullWidthNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, 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,
@@ -52,6 +57,6 @@ const FullWidthNotification = forwardRef(({ title, supportingText, color = 'neut
     return (_jsx("div", { ref: ref, className: classNames('ncua-full-width-notification', `ncua-full-width-notification--${color}`, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-full-width-notification__container", children: _jsxs("div", { className: "ncua-full-width-notification__content", children: [_jsxs("div", { className: "ncua-full-width-notification__content-wrapper", children: [(() => {
                                 const IconComponent = iconMap[color];
                                 return (_jsx(IconComponent, { width: 16, height: 16, color: COLOR[iconColorMap[color]], className: "ncua-full-width-notification__icon" }));
-                            })(), _jsxs("div", { className: "ncua-full-width-notification__text-container", children: [_jsx("span", { className: "ncua-full-width-notification__title", children: title }), !supportTextLink && supportingText && (_jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText })), supportTextLink && supportingText && (_jsx("a", { href: supportTextLink, className: "ncua-full-width-notification__link", children: _jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText }) }))] })] }), _jsxs("div", { 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}`))) })), onHidePermanently && (_jsx("button", { type: "button", className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'), onClick: onHidePermanently, children: hidePermanentlyLabel })), onClose && (_jsx("button", { type: "button", className: "ncua-full-width-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { ...closeIconSize, color: COLOR[iconColorMap[color]] }) }))] })] }) }) }));
+                            })(), _jsxs("div", { className: "ncua-full-width-notification__text-container", children: [_jsx("span", { className: "ncua-full-width-notification__title", children: title }), !safeSupportTextLink && supportingText && (_jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText })), 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 }) }))] })] }), _jsxs("div", { className: "ncua-full-width-notification__actions-container", children: [actions && (_jsx("div", { className: "ncua-full-width-notification__actions", 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'), onClick: onHidePermanently, children: hidePermanentlyLabel })), onClose && (_jsx("button", { type: "button", className: "ncua-full-width-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { ...closeIconSize, color: COLOR[iconColorMap[color]] }) }))] })] }) }) }));
 });
 export { FullWidthNotification };

package/dist/temp/src/components/overlays/notification/MessageNotification.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import type { SlotIconComponent } from '../../../types/side-slot';
-import type { NotificationAction, NotificationColor } from './Notification';
+import type { NotificationAction, NotificationColor, NotificationLinkTarget, NotificationVariant } from './Notification';
 interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
      * 알림 제목 텍스트
@@ -41,6 +41,20 @@ interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      * @default '다시 보지 않기'
      */
     hidePermanentlyLabel?: ReactNode;
+    /**
+     * 표시 변형. `'block'`은 서브 페이지 공지용(흰 배경, FeaturedIcon sm, 제목 + 텍스트 링크 1행, info 유지)
+     * @default 'default'
+     */
+    variant?: NotificationVariant;
+    /**
+     * 텍스트 링크 URL. `variant="block"`에서만 동작하며 `supportingText`가 링크 텍스트가 된다.
+     */
+    supportTextLink?: string;
+    /**
+     * 텍스트 링크를 여는 대상. `'_blank'`이면 새 탭 + `rel="noopener noreferrer"`
+     * @default '_self'
+     */
+    supportTextLinkTarget?: NotificationLinkTarget;
 }
 declare const MessageNotification: import("react").ForwardRefExoticComponent<MessageNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { MessageNotificationProps };

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

@@ -1,25 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
+import { AlertCircle, AlertTriangle, CheckCircle, InfoCircle, Pin02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-import { COLOR } from '../../../../constant/color';
+import { MESSAGE_CLOSE_ICON_COLOR } from '../../../../constant/notification';
 import { MessageNotificationActions, MessageNotificationContent } from './MessageNotificationParts';
 const iconMap = {
     neutral: Pin02,
     error: AlertTriangle,
     warning: AlertCircle,
     success: CheckCircle,
+    // info 는 variant="block" 에서만 도달한다 (default 는 neutral 로 폴백).
+    info: InfoCircle,
 };
-const iconColorMap = {
-    neutral: 'gray700',
-    error: 'red500',
-    warning: 'orange500',
-    success: 'green600',
-};
-const MessageNotification = forwardRef(({ title, supportingText, icon: Icon, color = 'neutral', onClose, className, actions, onHidePermanently, hidePermanentlyLabel, ...rest }, ref) => {
-    // message 타입은 neutral, error, warning, success 4가지 색상만 지원
-    const validColor = color === 'info' ? 'neutral' : color;
-    return (_jsx("div", { ref: ref, className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-message-notification__container", children: _jsxs("div", { className: "ncua-message-notification__content", children: [_jsx(MessageNotificationContent, { title: title, supportingText: supportingText, icon: Icon || iconMap[validColor], iconColor: validColor, showIcon: Boolean(iconMap[validColor]) }), _jsx(MessageNotificationActions, { actions: actions, onClose: onClose, onHidePermanently: onHidePermanently, hidePermanentlyLabel: hidePermanentlyLabel, closeIconColor: COLOR[iconColorMap[validColor] || 'gray700'] })] }) }) }));
+const MessageNotification = forwardRef(({ title, supportingText, icon: Icon, color = 'neutral', onClose, className, actions, onHidePermanently, hidePermanentlyLabel, variant = 'default', supportTextLink, supportTextLinkTarget, ...rest }, ref) => {
+    const isBlock = variant === 'block';
+    // default 는 neutral, error, warning, success 4가지 색상만 지원 — info 는 block 에서만 유지한다.
+    const validColor = !isBlock && color === 'info' ? 'neutral' : color;
+    // FeaturedIcon 에는 info 색이 없다. block+info 의 violet 톤은 message SCSS 가 덮어쓴다.
+    const featuredIconColor = validColor === 'info' ? 'neutral' : validColor;
+    return (_jsx("div", { ref: ref, className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, { 'ncua-message-notification--block': isBlock }, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-message-notification__container", children: _jsxs("div", { className: "ncua-message-notification__content", children: [_jsx(MessageNotificationContent, { title: title, supportingText: supportingText, supportTextLink: isBlock ? supportTextLink : undefined, supportTextLinkTarget: supportTextLinkTarget, icon: Icon || iconMap[validColor], iconColor: featuredIconColor, iconSize: isBlock ? 'sm' : 'md' }), _jsx(MessageNotificationActions, { actions: actions, onClose: onClose, onHidePermanently: onHidePermanently, hidePermanentlyLabel: hidePermanentlyLabel, closeIconColor: MESSAGE_CLOSE_ICON_COLOR[validColor] })] }) }) }));
 });
 MessageNotification.displayName = 'MessageNotification';
 export { MessageNotification };

package/dist/temp/src/components/overlays/notification/MessageNotificationParts.d.ts

@@ -1,16 +1,21 @@
 import type { ReactNode } from 'react';
 import type { SlotIconComponent } from '../../../types/side-slot';
-import { type FeaturedIconColor } from '../../image-and-icons/featured-icon/FeaturedIcon';
-import type { NotificationAction } from './Notification';
+import { type FeaturedIconColor, type FeaturedIconSize } from '../../image-and-icons/featured-icon/FeaturedIcon';
+import type { NotificationAction, NotificationLinkTarget } from './Notification';
 interface MessageNotificationContentProps {
     title: ReactNode;
     supportingText?: ReactNode;
+    /** 지정 시 `supportingText`를 이 URL 의 텍스트 링크로 렌더한다 (block 변형 전용). http/https·상대경로가 아니면 텍스트만 렌더. */
+    supportTextLink?: string;
+    /** 텍스트 링크를 여는 대상. `'_blank'`이면 새 탭 + `rel="noopener noreferrer"`. */
+    supportTextLinkTarget?: NotificationLinkTarget;
     icon?: SlotIconComponent;
     iconColor: FeaturedIconColor;
-    showIcon: boolean;
+    /** default 는 md(40/20), block 은 sm(32/16). */
+    iconSize: FeaturedIconSize;
 }
-/** 아이콘 + 제목/서포팅 텍스트 영역. */
-declare const MessageNotificationContent: ({ title, supportingText, icon, iconColor, showIcon, }: MessageNotificationContentProps) => import("react/jsx-runtime").JSX.Element;
+/** 아이콘 + 제목/서포팅 텍스트(또는 텍스트 링크) 영역. */
+declare const MessageNotificationContent: ({ title, supportingText, supportTextLink, supportTextLinkTarget, icon, iconColor, iconSize, }: MessageNotificationContentProps) => import("react/jsx-runtime").JSX.Element;
 interface MessageNotificationActionsProps {
     actions?: NotificationAction[];
     onClose?: () => void;

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

@@ -1,17 +1,20 @@
 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 { Button } from '../../action/button';
+import { isSafeUrl } from '../../../utils/url';
 import { FeaturedIcon, } from '../../image-and-icons/featured-icon/FeaturedIcon';
-/** 아이콘 + 제목/서포팅 텍스트 영역. */
-const MessageNotificationContent = ({ title, supportingText, icon, iconColor, showIcon, }) => {
+import { getLinkTargetAttributes } from './linkTarget';
+import { NotificationActionButtons } from './NotificationActionButtons';
+/** 아이콘 + 제목/서포팅 텍스트(또는 텍스트 링크) 영역. */
+const MessageNotificationContent = ({ title, supportingText, supportTextLink, supportTextLinkTarget, icon, iconColor, iconSize, }) => {
     const featuredIconProps = {
         icon: icon || Pin02,
-        size: 'md',
+        size: iconSize,
         color: iconColor,
         theme: 'light-circle',
     };
-    return (_jsxs("div", { className: "ncua-message-notification__content-wrapper", children: [showIcon && _jsx(FeaturedIcon, { ...featuredIconProps, className: "ncua-message-notification__icon" }), _jsxs("div", { className: "ncua-message-notification__text-container", children: [_jsx("span", { className: "ncua-message-notification__title", children: title }), supportingText && _jsx("span", { className: "ncua-message-notification__supporting-text", children: supportingText })] })] }));
+    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, { ...featuredIconProps, className: "ncua-message-notification__icon" }), _jsxs("div", { className: "ncua-message-notification__text-container", 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)] })] }));
 };
 /**
  * 액션 버튼 그룹 + 닫기 그룹을 감싸는 우측 영역.
@@ -23,6 +26,6 @@ const MessageNotificationActions = ({ actions, onClose, onHidePermanently, hideP
     const hasFooter = Boolean(onHidePermanently || onClose);
     if (!hasActions && !hasFooter)
         return null;
-    return (_jsxs("div", { className: "ncua-message-notification__actions-container", children: [hasActions && (_jsx("div", { className: "ncua-message-notification__actions", children: actions?.map((action) => (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action?.onClick }, `${action.label}-${action.hierarchy}`))) })), hasFooter && (_jsxs("div", { className: "ncua-message-notification__footer-container", children: [onHidePermanently && (_jsx("button", { type: "button", className: "ncua-notification__action-button ncua-message-notification__hide-link", onClick: onHidePermanently, children: hidePermanentlyLabel })), onClose && (_jsx("button", { type: "button", className: "ncua-message-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { width: 20, height: 20, color: closeIconColor }) }))] }))] }));
+    return (_jsxs("div", { className: "ncua-message-notification__actions-container", children: [hasActions && (_jsx("div", { className: "ncua-message-notification__actions", children: _jsx(NotificationActionButtons, { actions: actions ?? [] }) })), hasFooter && (_jsxs("div", { className: "ncua-message-notification__footer-container", children: [onHidePermanently && (_jsx("button", { type: "button", className: "ncua-notification__action-button ncua-message-notification__hide-link", onClick: onHidePermanently, children: hidePermanentlyLabel })), onClose && (_jsx("button", { type: "button", className: "ncua-message-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { width: 20, height: 20, color: closeIconColor }) }))] }))] }));
 };
 export { MessageNotificationActions, MessageNotificationContent };

package/dist/temp/src/components/overlays/notification/Notification.d.ts

@@ -6,6 +6,9 @@ import { type CalloutNotificationProps, type CalloutNotificationWidth } from './
 type NotificationType = 'floating' | 'full-width' | 'message' | 'callout';
 type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
 type NotificationSize = 'desktop' | 'mobile';
+type NotificationVariant = 'default' | 'block';
+/** 텍스트 링크(`supportTextLink`)를 여는 대상. `'_blank'`이면 새 탭 + `rel="noopener noreferrer"`. */
+type NotificationLinkTarget = '_self' | '_blank';
 interface NotificationAction {
     /**
      * 액션 버튼 텍스트
@@ -78,9 +81,27 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
     hidePermanentlyLabel?: ReactNode;
     /**
      * supportingText 에 연결할 링크 URL (선택사항)
-     * full-width 타입에서 사용 가능
+     * full-width 타입, message 타입의 `variant="block"`에서 사용 가능
      */
     supportTextLink?: string;
+    /**
+     * 텍스트 링크를 여는 대상 (선택사항). `supportTextLink`가 렌더될 때만 동작한다.
+     * `'_blank'`이면 새 탭으로 열고 `rel="noopener noreferrer"`를 함께 붙인다.
+     * full-width 타입, message 타입의 `variant="block"`에서 사용 가능
+     * @default '_self'
+     */
+    supportTextLinkTarget?: NotificationLinkTarget;
+    /**
+     * message 타입의 표시 변형 (선택사항). message 타입에서만 동작한다.
+     *
+     * - `'default'`: 기존 message (color 별 배경·테두리, 제목 + 본문 2행, info → neutral 폴백)
+     * - `'block'`: 서브 페이지 공지용. 흰 배경·gray-100 테두리·shadow-sm, FeaturedIcon sm,
+     *   제목 + 텍스트 링크 1행(`supportingText` 가 링크 텍스트, `supportTextLink` 가 href).
+     *   `color="info"` 를 그대로 렌더한다.
+     *
+     * @default 'default'
+     */
+    variant?: NotificationVariant;
     /**
      * 너비 동작 (선택사항)
      * callout 타입에서만 사용 가능. 미지정 시 부모 너비를 채운다(100%). 'fit' 은 콘텐츠 너비에 맞춘다
@@ -101,6 +122,6 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
     portal?: boolean;
 }
 declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
-export type { NotificationType, NotificationColor, NotificationSize, NotificationAction, NotificationProps };
+export type { NotificationType, NotificationColor, NotificationSize, NotificationVariant, NotificationLinkTarget, NotificationAction, NotificationProps, };
 export type { CalloutNotificationProps, CalloutNotificationWidth };
 export { Notification };

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

@@ -7,15 +7,15 @@ import { MessageNotification } from './MessageNotification';
 const Notification = forwardRef(
 // 단일 type 에만 유효한 prop 은 rest 에서 분리해 해당 분기로만 명시 전달한다.
 // rest 에 남기면 다른 type 의 하위 컴포넌트가 div 로 스프레드해 DOM 속성으로 출력된다.
-({ type = 'floating', color = 'neutral', width, supportTextLink, ...rest }, ref) => {
+({ type = 'floating', color = 'neutral', width, supportTextLink, supportTextLinkTarget, variant, ...rest }, ref) => {
     if (type === 'floating') {
         return _jsx(FloatingNotification, { color: color, ...rest, ref: ref });
     }
     if (type === 'full-width') {
-        return (_jsx(FullWidthNotification, { color: color, supportTextLink: supportTextLink, ...rest, ref: ref }));
+        return (_jsx(FullWidthNotification, { color: color, supportTextLink: supportTextLink, supportTextLinkTarget: supportTextLinkTarget, ...rest, ref: ref }));
     }
     if (type === 'message') {
-        return _jsx(MessageNotification, { color: color, ...rest, ref: ref });
+        return (_jsx(MessageNotification, { color: color, variant: variant, supportTextLink: supportTextLink, supportTextLinkTarget: supportTextLinkTarget, ...rest, ref: ref }));
     }
     if (type === 'callout') {
         // 나머지 3개 type 이 공유하는 prop 은 callout 이 지원하지 않으므로 여기서 제외한다.

package/dist/temp/src/components/overlays/notification/NotificationActionButtons.d.ts

@@ -0,0 +1,12 @@
+import type { NotificationAction } from './Notification';
+interface NotificationActionButtonsProps {
+    actions: NotificationAction[];
+}
+/**
+ * 알림 액션 버튼 목록. 모든 type 이 같은 규격(`ncua-btn--xs` + hierarchy, 기본 `text`)을 쓴다(#535).
+ * Vanilla `renderActions`(assets/scripts/notification/utils.ts)와 같은 클래스를 산출해야 한다.
+ * 감싸는 래퍼(`__actions`)는 type 마다 클래스가 달라 호출부가 담당한다.
+ */
+declare const NotificationActionButtons: ({ actions }: NotificationActionButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export type { NotificationActionButtonsProps };
+export { NotificationActionButtons };

package/dist/temp/src/components/overlays/notification/NotificationActionButtons.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../action/button';
+/**
+ * 알림 액션 버튼 목록. 모든 type 이 같은 규격(`ncua-btn--xs` + hierarchy, 기본 `text`)을 쓴다(#535).
+ * Vanilla `renderActions`(assets/scripts/notification/utils.ts)와 같은 클래스를 산출해야 한다.
+ * 감싸는 래퍼(`__actions`)는 type 마다 클래스가 달라 호출부가 담당한다.
+ */
+const NotificationActionButtons = ({ actions }) => (_jsx(_Fragment, { children: actions.map((action) => (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action.onClick }, `${action.label}-${action.hierarchy}`))) }));
+export { NotificationActionButtons };

package/dist/temp/src/components/overlays/notification/__tests__/supportTextLink.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,73 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+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 이면 링크 없이 텍스트만 렌더한다.
+ */
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const cleanups = [];
+afterEach(() => {
+    for (const cleanup of cleanups.splice(0))
+        cleanup();
+});
+function mount(element) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(element);
+    });
+    cleanups.push(() => {
+        act(() => root.unmount());
+        container.remove();
+    });
+    return container;
+}
+const IMPLEMENTATIONS = [
+    [
+        'MessageNotification(block)',
+        (supportTextLink) => mount(createElement(MessageNotification, {
+            title: '공지',
+            variant: 'block',
+            supportingText: '자세히 보기',
+            supportTextLink,
+        })),
+        '.ncua-message-notification__supporting-text',
+    ],
+    [
+        'FullWidthNotification',
+        (supportTextLink) => mount(createElement(FullWidthNotification, {
+            title: '공지',
+            supportingText: '자세히 보기',
+            supportTextLink,
+        })),
+        '.ncua-full-width-notification__supporting-text',
+    ],
+];
+const UNSAFE = [
+    'javascript:alert(1)',
+    ' JavaScript:alert(1)',
+    'JAVASCRIPT:alert(1)',
+    '\tjavascript:alert(1)',
+    'data:text/html,<script>alert(1)</script>',
+];
+const SAFE = ['https://example.com/notice/1', 'http://example.com/notice/1', '/notice/1', 'notice/1'];
+describe.each(IMPLEMENTATIONS)('%s — supportTextLink 프로토콜 검사', (_, render, supportingTextSelector) => {
+    it.each(UNSAFE)('unsafe %j → 링크 없이 텍스트만 렌더한다', (url) => {
+        const container = render(url);
+        expect(container.querySelector('a')).toBeNull();
+        expect(container.querySelector(supportingTextSelector)?.textContent).toBe('자세히 보기');
+    });
+    it.each(SAFE)('safe %j → 그대로 링크로 렌더한다', (url) => {
+        const container = render(url);
+        const anchors = container.querySelectorAll('a');
+        expect(anchors).toHaveLength(1);
+        expect(anchors[0].getAttribute('href')).toBe(url);
+        expect(anchors[0].querySelector(supportingTextSelector)?.textContent).toBe('자세히 보기');
+    });
+});

package/dist/temp/src/components/overlays/notification/linkTarget.d.ts

@@ -0,0 +1,11 @@
+import type { NotificationLinkTarget } from './Notification';
+/**
+ * 텍스트 링크(`supportTextLink`)의 `<a>`에 붙일 target·rel 속성.
+ *
+ * `'_blank'`일 때만 새 탭 + `rel="noopener noreferrer"`를 반환하고, `'_self'`(기본)는 아무 속성도 붙이지 않는다.
+ * Vanilla `applySupportTextLinkTarget`과 같은 마크업을 산출해야 한다.
+ */
+export declare function getLinkTargetAttributes(target?: NotificationLinkTarget): {
+    readonly target: "_blank";
+    readonly rel: "noopener noreferrer";
+} | undefined;

package/dist/temp/src/components/overlays/notification/linkTarget.js

@@ -0,0 +1,9 @@
+/**
+ * 텍스트 링크(`supportTextLink`)의 `<a>`에 붙일 target·rel 속성.
+ *
+ * `'_blank'`일 때만 새 탭 + `rel="noopener noreferrer"`를 반환하고, `'_self'`(기본)는 아무 속성도 붙이지 않는다.
+ * Vanilla `applySupportTextLinkTarget`과 같은 마크업을 산출해야 한다.
+ */
+export function getLinkTargetAttributes(target) {
+    return target === '_blank' ? { target: '_blank', rel: 'noopener noreferrer' } : undefined;
+}