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

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

@@ -7,7 +7,7 @@ import { sideSlotRender } from './utils';
  */
 const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
-const NEW_BADGE_ICON_SIZE = { sm: 12, md: 16 };
+const NEW_BADGE_ICON_SIZE = { sm: 12, md: 14 };
 const Badge = ({ label, type = 'pill-outline', color = 'neutral', className, leadingIcon, trailingIcon, size = 'xs', }) => {
     // new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
     // 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)

package/dist/temp/src/components/forms-and-input/combo-box/ComboBox.d.ts

@@ -10,7 +10,7 @@ interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onC
     destructive?: boolean;
     size?: Extract<Size, 'xs' | 'sm'>;
     optionItems?: OptionType[];
-    value?: OptionValue | null;
+    value?: OptionValue;
     onChange?: OptionChangeHandler;
     onSearch?: (searchValue: string) => void;
     disabled?: boolean;

package/dist/temp/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,108 +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 = forwardRef(({ placeholder = '검색하세요', id, className, hintText, children, size = 'xs', destructive = false, value, optionItems = [], onChange, onSearch, disabled = false, register, maxHeight = defaultMaxHeight, searchValue = '', label, required = false, multiple = false, showFooterButtons = false, maxSelection, onEdit, onComplete, usePortal = false, ...props }, ref) => {
     const internalRef = useRef(null);
     // 인라인 패널의 offset parent 가 __content 다. Portal 좌표도 같은 박스를 기준으로 잡아야
@@ -135,8 +33,7 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
     const { shouldPortal, portalContainer } = 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;
@@ -144,12 +41,13 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
             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);
     };
@@ -232,12 +130,11 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
         color: 'gray300',
     };
     const currentSelectedValues = multiple && Array.isArray(value) ? value : [];
-    const { buttonText: selectAllButtonText, toggleSelectAll, removeTag, isMaxSelectionActive, tryToggle, } = useMultiSelect(currentSelectedValues, optionItems, { maxSelection });
+    const { buttonText: selectAllButtonText, toggleSelectAll, getSelectedTagsData, removeTag, isMaxSelectionActive, tryToggle, } = useMultiSelect(currentSelectedValues, optionItems, { maxSelection });
     const handleSelectAll = () => {
         if (!multiple || !onChange)
             return;
         const newSelectedValues = toggleSelectAll();
-        markEmitted(newSelectedValues);
         onChange(newSelectedValues);
     };
     const handleEdit = () => {
@@ -246,36 +143,33 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
     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 } = resolvePortalPanelBinding(shouldPortal, floatingStyle);
-    const selectDropdownNode = (_jsxs(SelectDropdown, { ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: displayedOptions, value: toDropdownValue(value), focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: comboboxId, onOptionSelect: handleDropdownSelect, onMouseMove: handleMouseMove, isKeyboardNavigation: isKeyboardNavigation, multiple: multiple, showFooterButtons: showFooter, selectAllButtonText: selectAllButtonText, showSelectAllAction: !isMaxSelectionActive, onSelectAll: handleSelectAll, onEdit: handleEdit, onComplete: handleComplete, componentType: "combobox", className: portalPanelClassName, style: portalPanelStyle, children: [showNoResults ? _jsx("li", { className: "ncua-select-dropdown__no-results", children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null, children] }));
+    const selectDropdownNode = (_jsxs(SelectDropdown, { ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: displayedOptions, value: value, focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: comboboxId, onOptionSelect: handleDropdownSelect, onMouseMove: handleMouseMove, isKeyboardNavigation: isKeyboardNavigation, multiple: multiple, showFooterButtons: showFooter, selectAllButtonText: selectAllButtonText, showSelectAllAction: !isMaxSelectionActive, onSelectAll: handleSelectAll, onEdit: handleEdit, onComplete: handleComplete, componentType: "combobox", className: portalPanelClassName, style: portalPanelStyle, children: [showNoResults ? _jsx("li", { className: "ncua-select-dropdown__no-results", children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null, children] }));
     const { inlineDropdown, portaledDropdown } = resolveDropdownMounts({
         node: selectDropdownNode,
         shouldPortal,
@@ -289,7 +183,7 @@ const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, h
                 }, className), ...props, children: [_jsxs("div", { ref: contentRef, className: "ncua-combobox__content", children: [_jsx(InputBase, { ref: inputRef, size: size, label: label, required: required, placeholder: placeholder, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onClick: handleInputClick, disabled: disabled, destructive: destructive, leadingElement: leadingElement, trailingElement: trailingElement, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": comboboxId, "aria-disabled": disabled, autoComplete: "off", clearText: !!inputValue, onClearText: () => {
                                     setInputValue('');
                                     onSearch?.('');
-                                } }), inlineDropdown, portaledDropdown] }), register && _jsx("input", { type: "hidden", ...register, value: hiddenInputValue }), hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), hasTags && (_jsx("div", { className: "ncua-combobox__tags", children: tags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: !disabled, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) }))] }));
+                                } }), inlineDropdown, portaledDropdown] }), register && _jsx("input", { type: "hidden", ...register, value: hiddenInputValue }), hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), hasTags && (_jsx("div", { className: "ncua-combobox__tags", children: selectedTags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) }))] }));
 });
 ComboBox.displayName = 'ComboBox';
 export { defaultMaxHeight, ComboBox };

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

@@ -333,7 +333,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({ props: { onChange } });
@@ -342,9 +342,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/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 };