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

package/dist/esm/src/components/forms-and-input/combo-box/ComboBox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ChevronSelectorVertical, SearchLg } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { useDropdown } from '../../../hooks/dropdown';
 import { useFloatingPosition } from '../../../hooks/useFloatingPosition';
 import { usePortalState } from '../../../hooks/usePortalState';
@@ -23,112 +23,6 @@ const notifyFormChange = (register, multiple, newValue) => {
     });
   }
 };
-/** '' · undefined · null 이면 빈 값. 숫자 0은 빈 값이 아니다 */
-const isEmptyValue = value => value === '' || value == null;
-/** react-hook-form hidden input 값 — Tag 와 같은 빈 값 규칙(0은 값)을 따른다 */
-const toHiddenInputValue = (value, multiple) => {
-  if (multiple) return JSON.stringify(value || []);
-  return isEmptyValue(value) ? '' : String(value);
-};
-/** SelectDropdown 은 null 을 받지 않으므로 undefined 로 바꾼다 */
-const toDropdownValue = value => value ?? undefined;
-/** multiple 용 — 배열이 아니면(null · undefined 포함) 빈 배열 */
-const toIdArray = value => Array.isArray(value) ? value : [];
-/** 두 id 목록이 같은 id 들로 이루어졌는지 — 순서는 보지 않는다 (사용처가 onChange 값을 정렬해 돌려줘도 같은 값) */
-const isSameIds = (currentIds, nextIds) => currentIds.length === nextIds.length && currentIds.every(id => nextIds.includes(id));
-const isSameTags = (nextTags, prevTags) => nextTags.length === prevTags.length && nextTags.every((tag, index) => tag.id === prevTags[index].id && tag.label === prevTags[index].label);
-const findOption = (optionItems, id) => optionItems.find(option => option.id === id);
-/** 단일 모드 value 에 해당하는 옵션 — 빈 값·배열이면 없음 */
-const findSingleOption = (value, optionItems) => {
-  if (isEmptyValue(value) || Array.isArray(value)) return undefined;
-  return findOption(optionItems, value);
-};
-/**
- * 단일 모드 Tag — value 와 optionItems 에서 계산한다.
- * 검색 필터로 목록에서 빠진 경우에만, 같은 id 로 기억해 둔 Tag 를 대신 쓴다.
- */
-const resolveSingleTag = (value, optionItems, lastResolvedTag) => {
-  if (isEmptyValue(value) || Array.isArray(value)) return null;
-  const found = findOption(optionItems, value);
-  if (found) return {
-    id: found.id,
-    label: found.label
-  };
-  return lastResolvedTag?.id === value ? lastResolvedTag : null;
-};
-/** 단일 모드 Tag 목록 (0~1개). 목록에서 찾은 Tag 를 기억해 검색 필터 중에도 라벨을 유지한다 */
-const useSingleSelectedTags = (value, optionItems, enabled) => {
-  const [lastResolvedTag, setLastResolvedTag] = useState(null);
-  const found = enabled ? findSingleOption(value, optionItems) : undefined;
-  const foundId = found?.id;
-  const foundLabel = found?.label;
-  useEffect(() => {
-    if (foundId === undefined || foundLabel === undefined) return;
-    setLastResolvedTag({
-      id: foundId,
-      label: foundLabel
-    });
-  }, [foundId, foundLabel]);
-  const selectedTag = enabled ? resolveSingleTag(value, optionItems, lastResolvedTag) : null;
-  return selectedTag ? [selectedTag] : [];
-};
-/** multiple 모드 Tag — 목록에서 못 찾은 id 는 이미 표시 중인 Tag 의 라벨을 쓴다 */
-const resolveMultipleTags = (ids, optionItems, prevTags) => {
-  const nextTags = ids.map(id => {
-    const found = findOption(optionItems, id);
-    return found ? {
-      id: found.id,
-      label: found.label
-    } : prevTags.find(tag => tag.id === id);
-  }).filter(tag => tag !== undefined);
-  // 결과가 같으면 이전 배열을 그대로 돌려준다 — 새 배열로 바꾸면 effect 가 다시 렌더를 일으킨다
-  return isSameTags(nextTags, prevTags) ? prevTags : nextTags;
-};
-/**
- * multiple 모드 Tag — 「선택 완료」·X 클릭·외부 value 변경 때만 확정 id 를 바꾼다.
- * ComboBox 가 직접 onChange 로 내보낸 값은 markEmitted 로 기록해 두고, 그 값이 value 로 돌아오면 한 번만 무시한다(확정 아님).
- * 바깥 값이 들어오면 남아 있던 기록도 지운다 — 오래된 기록 때문에 이후 같은 바깥 값이 무시되지 않게 하기 위함.
- * optionItems 만 바뀌면 확정 id 는 그대로 두고 라벨만 다시 찾는다 — 「선택 완료」 전 검색으로 Tag 가 확정되지 않게 하기 위함.
- */
-const useMultipleSelectedTags = (value, optionItems, enabled) => {
-  const [selectedTags, setSelectedTags] = useState([]);
-  const lastEmittedRef = useRef(null);
-  const committedIdsRef = useRef([]);
-  const prevValueIdsRef = useRef(null);
-  useEffect(() => {
-    if (!enabled) return;
-    const ids = toIdArray(value);
-    const isEcho = lastEmittedRef.current !== null && isSameIds(ids, lastEmittedRef.current);
-    const isValueChanged = prevValueIdsRef.current === null || !isSameIds(ids, prevValueIdsRef.current);
-    prevValueIdsRef.current = ids;
-    if (isEcho) {
-      lastEmittedRef.current = null;
-    } else if (isValueChanged) {
-      committedIdsRef.current = ids;
-      lastEmittedRef.current = null;
-    }
-    setSelectedTags(prev => resolveMultipleTags(committedIdsRef.current, optionItems, prev));
-  }, [enabled, value, optionItems]);
-  /** 「선택 완료」로 Tag 를 확정한다 */
-  const commitTags = ids => {
-    committedIdsRef.current = ids;
-    setSelectedTags(prev => resolveMultipleTags(ids, optionItems, prev));
-  };
-  /** X 클릭 — 확정 id 에서 그 id 만 뺀다. value 기준으로 계산하면 「선택 완료」 전에 클릭한 항목까지 확정된다 */
-  const removeCommittedTag = tagId => {
-    commitTags(committedIdsRef.current.filter(id => id !== tagId));
-  };
-  /** ComboBox 가 onChange 로 내보낸 값을 기록한다 — value 로 돌아왔을 때 확정으로 보지 않기 위함 */
-  const markEmitted = ids => {
-    lastEmittedRef.current = ids;
-  };
-  return {
-    selectedTags,
-    commitTags,
-    removeCommittedTag,
-    markEmitted
-  };
-};
 const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     placeholder = '검색하세요',
@@ -168,24 +62,22 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = usePortalState(usePortal);
   const [inputValue, setInputValue] = useState(searchValue);
   const [showAllItems, setShowAllItems] = useState(false);
-  const singleTags = useSingleSelectedTags(value, optionItems, !multiple);
-  const {
-    selectedTags,
-    commitTags,
-    removeCommittedTag,
-    markEmitted
-  } = useMultipleSelectedTags(value, optionItems, multiple);
+  const [selectedTags, setSelectedTags] = useState([]);
   const handleOptionSelect = option => {
     if (disabled) return;
     if (multiple) {
       const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
       if (newValue === null) return;
-      markEmitted(newValue);
       onChange?.(newValue);
       notifyFormChange(register, multiple, newValue);
       return;
     }
     const newValue = option.id;
+    const tag = {
+      id: option.id,
+      label: option.label
+    };
+    setSelectedTags([tag]);
     onChange?.(newValue);
     notifyFormChange(register, multiple, newValue);
   };
@@ -292,6 +184,7 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   const {
     buttonText: selectAllButtonText,
     toggleSelectAll,
+    getSelectedTagsData,
     removeTag,
     isMaxSelectionActive,
     tryToggle
@@ -301,7 +194,6 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   const handleSelectAll = () => {
     if (!multiple || !onChange) return;
     const newSelectedValues = toggleSelectAll();
-    markEmitted(newSelectedValues);
     onChange(newSelectedValues);
   };
   const handleEdit = () => {
@@ -309,32 +201,30 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
   const handleComplete = completedValue => {
     if (!multiple) return;
-    commitTags(toIdArray(completedValue));
+    const tags = getSelectedTagsData();
+    setSelectedTags(tags);
     setInputValue('');
     closeDropdown();
     onComplete?.(completedValue);
   };
   const handleRemoveTag = tagId => {
-    // X 버튼은 disabled 에서 숨기지만, 다른 호출 경로가 생겨도 값이 지워지지 않게 함수에서도 막는다
-    if (disabled) return;
     if (!onChange) return;
     if (multiple) {
       const newSelectedValues = removeTag(tagId);
-      markEmitted(newSelectedValues);
       onChange(newSelectedValues);
-      removeCommittedTag(tagId);
+      setSelectedTags(prev => prev.filter(tag => tag.id !== tagId));
       return;
     }
     onChange('');
+    setSelectedTags([]);
   };
   const comboboxId = `combobox-options-${id || 'default'}`;
   const hasVisibleOptions = showAllItems || inputValue;
   const displayedOptions = hasVisibleOptions ? optionItems : [];
   const showNoResults = !hasVisibleOptions || optionItems.length === 0;
   const showFooter = multiple || showFooterButtons;
-  const hiddenInputValue = toHiddenInputValue(value, multiple);
-  const tags = multiple ? selectedTags : singleTags;
-  const hasTags = tags.length > 0;
+  const hiddenInputValue = multiple ? JSON.stringify(value || []) : String(value || '');
+  const hasTags = selectedTags.length > 0;
   const {
     className: portalPanelClassName,
     style: portalPanelStyle
@@ -345,7 +235,7 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     direction: dropdownDirection,
     size: size,
     options: displayedOptions,
-    value: toDropdownValue(value),
+    value: value,
     focusedIndex: focusedIndex,
     maxHeight: maxHeight,
     listboxId: comboboxId,
@@ -424,10 +314,10 @@ const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
       })]
     }), hasTags && _jsx("div", {
       className: "ncua-combobox__tags",
-      children: tags.map(tag => _jsx(Tag, {
+      children: selectedTags.map(tag => _jsx(Tag, {
         text: tag.label,
         size: "sm",
-        close: !disabled,
+        close: true,
         onButtonClick: () => handleRemoveTag(tag.id)
       }, tag.id))
     })]

package/dist/esm/src/components/forms-and-input/combo-box/__tests__/ComboBox.portal.test.js

@@ -473,7 +473,7 @@ describe('C-9 기본 경로 회귀 기준선', () => {
     expect(onSearch).toHaveBeenCalledWith('사');
     expect(view.content.querySelectorAll('.ncua-select-dropdown__option')).toHaveLength(createOptions().length);
   });
-  it('옵션을 선택하면 onChange 가 호출된다', () => {
+  it('옵션을 선택하면 onChange 가 호출되고 선택 태그가 표시된다', () => {
     // Given: 옵션이 노출된 기본 모드 ComboBox 에서
     const onChange = vi.fn();
     const view = mountComboBox({
@@ -486,9 +486,9 @@ describe('C-9 기본 경로 회귀 기준선', () => {
     act(() => {
       requireElement(view.content, '.ncua-select-dropdown__option').click();
     });
-    // Then: onChange 가 선택 값으로 호출된다
-    // 선택 태그는 value 를 따르므로(#530) onChange 값을 value 로 돌려주는 경우의 태그 표시는 ComboBox.test.ts S-10 에서 검증한다
+    // Then: onChange 가 선택 값으로 호출되고 태그가 표시된다
     expect(onChange).toHaveBeenCalledWith('apple');
+    expect(view.container.querySelectorAll('.ncua-combobox__tags .ncua-tag')).toHaveLength(1);
   });
   it('Escape 를 누르면 인라인 패널이 닫힌다', () => {
     // Given: 열려 있는 기본 모드 ComboBox 에서

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'),

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

@@ -1,20 +1,16 @@
 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
-};
-const iconColorMap = {
-  neutral: 'gray700',
-  error: 'red500',
-  warning: 'orange500',
-  success: 'green600'
+  success: CheckCircle,
+  // info 는 variant="block" 에서만 도달한다 (default 는 neutral 로 폴백).
+  info: InfoCircle
 };
 const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -27,13 +23,21 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
     actions,
     onHidePermanently,
     hidePermanentlyLabel,
+    variant = 'default',
+    supportTextLink,
+    supportTextLinkTarget,
     ...rest
   } = _ref;
-  // message 타입은 neutral, error, warning, success 4가지 색상만 지원
-  const validColor = color === 'info' ? 'neutral' : color;
+  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}`, className),
+    className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, {
+      'ncua-message-notification--block': isBlock
+    }, className),
     role: "alert",
     ...rest,
     children: _jsx("div", {
@@ -43,15 +47,17 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
         children: [_jsx(MessageNotificationContent, {
           title: title,
           supportingText: supportingText,
+          supportTextLink: isBlock ? supportTextLink : undefined,
+          supportTextLinkTarget: supportTextLinkTarget,
           icon: Icon || iconMap[validColor],
-          iconColor: validColor,
-          showIcon: Boolean(iconMap[validColor])
+          iconColor: featuredIconColor,
+          iconSize: isBlock ? 'sm' : 'md'
         }), _jsx(MessageNotificationActions, {
           actions: actions,
           onClose: onClose,
           onHidePermanently: onHidePermanently,
           hidePermanentlyLabel: hidePermanentlyLabel,
-          closeIconColor: COLOR[iconColorMap[validColor] || 'gray700']
+          closeIconColor: MESSAGE_CLOSE_ICON_COLOR[validColor]
         })]
       })
     })

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

@@ -1,26 +1,34 @@
 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';
-/** 아이콘 + 제목/서포팅 텍스트 영역. */
+import { getLinkTargetAttributes } from './linkTarget';
+import { NotificationActionButtons } from './NotificationActionButtons';
+/** 아이콘 + 제목/서포팅 텍스트(또는 텍스트 링크) 영역. */
 const MessageNotificationContent = _ref => {
   let {
     title,
     supportingText,
+    supportTextLink,
+    supportTextLinkTarget,
     icon,
     iconColor,
-    showIcon
+    iconSize
   } = _ref;
   const featuredIconProps = {
     icon: icon || Pin02,
-    size: 'md',
+    size: iconSize,
     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: [showIcon && _jsx(FeaturedIcon, {
+    children: [_jsx(FeaturedIcon, {
       ...featuredIconProps,
       className: "ncua-message-notification__icon"
     }), _jsxs("div", {
@@ -28,10 +36,12 @@ const MessageNotificationContent = _ref => {
       children: [_jsx("span", {
         className: "ncua-message-notification__title",
         children: title
-      }), supportingText && _jsx("span", {
-        className: "ncua-message-notification__supporting-text",
-        children: supportingText
-      })]
+      }), supportTextLink && isSafeUrl(supportTextLink) && supportingTextNode ? _jsx("a", {
+        href: supportTextLink,
+        className: "ncua-message-notification__link",
+        ...getLinkTargetAttributes(supportTextLinkTarget),
+        children: supportingTextNode
+      }) : supportingTextNode]
     })]
   });
 };
@@ -55,12 +65,9 @@ const MessageNotificationActions = _ref2 => {
     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}`))
+      children: _jsx(NotificationActionButtons, {
+        actions: actions ?? []
+      })
     }), hasFooter && _jsxs("div", {
       className: "ncua-message-notification__footer-container",
       children: [onHidePermanently && _jsx("button", {

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

@@ -13,6 +13,8 @@ const Notification = /*#__PURE__*/forwardRef(
     color = 'neutral',
     width,
     supportTextLink,
+    supportTextLinkTarget,
+    variant,
     ...rest
   } = _ref;
   if (type === 'floating') {
@@ -26,6 +28,7 @@ const Notification = /*#__PURE__*/forwardRef(
     return _jsx(FullWidthNotification, {
       color: color,
       supportTextLink: supportTextLink,
+      supportTextLinkTarget: supportTextLinkTarget,
       ...rest,
       ref: ref
     });
@@ -33,6 +36,9 @@ 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/NotificationActionButtons.js

@@ -0,0 +1,21 @@
+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 = _ref => {
+  let {
+    actions
+  } = _ref;
+  return _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/esm/src/components/overlays/notification/__tests__/supportTextLink.test.js

@@ -0,0 +1,55 @@
+// @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(/*#__PURE__*/createElement(MessageNotification, {
+  title: '공지',
+  variant: 'block',
+  supportingText: '자세히 보기',
+  supportTextLink
+})), '.ncua-message-notification__supporting-text'], ['FullWidthNotification', supportTextLink => mount(/*#__PURE__*/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/esm/src/components/overlays/notification/linkTarget.js

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