@ncds/ui-admin 1.8.26-alpha.4 → 1.8.26-alpha.6

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

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangle, CheckCircle, InfoCircle, MessageChatSquare, XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef } 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';
+import { useAutoClose } from './useAutoClose';
 const iconMap = {
     neutral: MessageChatSquare,
     error: AlertTriangle,
@@ -21,35 +22,15 @@ const iconColorMap = {
     success: 'green600',
     info: 'violet600',
 };
-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);
+const FullWidthNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, hideCloseButton = false, className, actions, autoClose, supportTextLink, supportTextLinkTarget, onHidePermanently, hidePermanentlyLabel = HIDE_PERMANENTLY_LABEL.fullWidth, ...rest }, ref) => {
+    // full-width 는 부모가 언마운트로 닫으므로 hideCloseButton 기본 autoClose 를 적용하지 않는다.
+    const shouldRemove = useAutoClose({ autoClose, onClose });
     // unsafe URL(javascript: 등)이면 링크 없이 텍스트만 렌더한다 — Vanilla `renderSupportingText` 와 같은 정책.
     const safeSupportTextLink = supportTextLink && isSafeUrl(supportTextLink) ? supportTextLink : undefined;
     const closeIconSize = {
         width: 20,
         height: 20,
     };
-    // autoClose 타이머 관리
-    const timerRef = useRef(null);
-    useEffect(() => {
-        // autoClose가 0보다 크면 무조건 타이머 설정
-        if (autoClose > 0) {
-            timerRef.current = setTimeout(() => {
-                if (onClose) {
-                    onClose();
-                }
-                // DOM에서 바로 제거
-                setShouldRemove(true);
-            }, autoClose);
-        }
-        // cleanup 함수: 컴포넌트 언마운트 시 타이머 정리
-        return () => {
-            if (timerRef.current) {
-                clearTimeout(timerRef.current);
-                timerRef.current = null;
-            }
-        };
-    }, [autoClose, onClose]);
     // DOM에서 완전히 제거
     if (shouldRemove) {
         return null;
@@ -57,6 +38,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 }), !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]] }) }))] })] }) }) }));
+                            })(), _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 && !hideCloseButton && (_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

@@ -23,6 +23,18 @@ interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      * 닫기 버튼 클릭 이벤트 핸들러
      */
     onClose?: () => void;
+    /**
+     * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
+     * autoClose 만료 시 `onClose` 호출은 그대로 유지된다.
+     * 기본 자동 닫힘은 없다 — 부모가 언마운트로 닫거나 `autoClose`를 명시한다.
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /**
+     * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
+     * @default 0
+     */
+    autoClose?: number;
     /**
      * 추가 CSS 클래스
      */
@@ -42,7 +54,7 @@ interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      */
     hidePermanentlyLabel?: ReactNode;
     /**
-     * 표시 변형. `'block'`은 서브 페이지 공지용(흰 배경, FeaturedIcon sm, 제목 + 텍스트 링크 1행, info 유지)
+     * 표시 변형. `'block'`은 서브 페이지 공지용(흰 배경, FeaturedIcon sm, 제목 + 텍스트 링크 1행)
      * @default 'default'
      */
     variant?: NotificationVariant;

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

@@ -4,21 +4,28 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { MESSAGE_CLOSE_ICON_COLOR } from '../../../../constant/notification';
 import { MessageNotificationActions, MessageNotificationContent } from './MessageNotificationParts';
-const iconMap = {
+import { useAutoClose } from './useAutoClose';
+const DEFAULT_ICON_MAP = {
     neutral: Pin02,
     error: AlertTriangle,
     warning: AlertCircle,
     success: CheckCircle,
-    // info 는 variant="block" 에서만 도달한다 (default 는 neutral 로 폴백).
-    info: InfoCircle,
+    // 디자인 기준 default 의 info 는 neutral 과 같은 핀이다.
+    info: Pin02,
 };
-const MessageNotification = forwardRef(({ title, supportingText, icon: Icon, color = 'neutral', onClose, className, actions, onHidePermanently, hidePermanentlyLabel, variant = 'default', supportTextLink, supportTextLinkTarget, ...rest }, ref) => {
+// block 의 info 는 InfoCircle 을 유지한다 (#536).
+const BLOCK_ICON_MAP = { ...DEFAULT_ICON_MAP, info: InfoCircle };
+const MessageNotification = forwardRef(({ title, supportingText, icon: Icon, color = 'neutral', onClose, hideCloseButton = false, autoClose, 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] })] }) }) }));
+    const iconMap = isBlock ? BLOCK_ICON_MAP : DEFAULT_ICON_MAP;
+    // FeaturedIcon 에는 info 색이 없다. info 의 violet 톤은 message SCSS 가 덮어쓴다.
+    const featuredIconColor = color === 'info' ? 'neutral' : color;
+    // message 는 부모가 언마운트로 닫으므로 hideCloseButton 기본 autoClose 를 적용하지 않는다.
+    const shouldRemove = useAutoClose({ autoClose, onClose });
+    if (shouldRemove) {
+        return null;
+    }
+    return (_jsx("div", { ref: ref, className: classNames('ncua-message-notification', `ncua-message-notification--${color}`, { '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[color], iconColor: featuredIconColor, iconSize: isBlock ? 'sm' : 'md' }), _jsx(MessageNotificationActions, { actions: actions, onClose: onClose, hideCloseButton: hideCloseButton, onHidePermanently: onHidePermanently, hidePermanentlyLabel: hidePermanentlyLabel, closeIconColor: MESSAGE_CLOSE_ICON_COLOR[color] })] }) }) }));
 });
 MessageNotification.displayName = 'MessageNotification';
 export { MessageNotification };

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

@@ -19,6 +19,7 @@ declare const MessageNotificationContent: ({ title, supportingText, supportTextL
 interface MessageNotificationActionsProps {
     actions?: NotificationAction[];
     onClose?: () => void;
+    hideCloseButton?: boolean;
     onHidePermanently?: () => void;
     hidePermanentlyLabel?: ReactNode;
     closeIconColor: string;
@@ -28,6 +29,6 @@ interface MessageNotificationActionsProps {
  * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
-declare const MessageNotificationActions: ({ actions, onClose, onHidePermanently, hidePermanentlyLabel, closeIconColor, }: MessageNotificationActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MessageNotificationActions: ({ actions, onClose, hideCloseButton, onHidePermanently, hidePermanentlyLabel, closeIconColor, }: MessageNotificationActionsProps) => import("react/jsx-runtime").JSX.Element | null;
 export type { MessageNotificationActionsProps, MessageNotificationContentProps };
 export { MessageNotificationActions, MessageNotificationContent };

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

@@ -21,11 +21,13 @@ const MessageNotificationContent = ({ title, supportingText, supportTextLink, su
  * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
-const MessageNotificationActions = ({ actions, onClose, onHidePermanently, hidePermanentlyLabel = HIDE_PERMANENTLY_LABEL.message, closeIconColor, }) => {
+const MessageNotificationActions = ({ actions, onClose, hideCloseButton = false, onHidePermanently, hidePermanentlyLabel = HIDE_PERMANENTLY_LABEL.message, closeIconColor, }) => {
     const hasActions = Boolean(actions?.length);
-    const hasFooter = Boolean(onHidePermanently || onClose);
+    // footer 컨테이너와 닫기 버튼이 같은 판정을 보게 해 빈 footer 가 남지 않게 한다.
+    const showCloseButton = Boolean(onClose) && !hideCloseButton;
+    const hasFooter = Boolean(onHidePermanently) || showCloseButton;
     if (!hasActions && !hasFooter)
         return null;
-    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 }) }))] }))] }));
+    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 })), showCloseButton && (_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

@@ -51,6 +51,18 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
      * 닫기 버튼 클릭 이벤트 핸들러
      */
     onClose?: () => void;
+    /**
+     * 닫기(X) 버튼 숨김 여부. floating · full-width · message 타입에서 동작한다.
+     * `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
+     * autoClose 만료(및 floating의 모바일 전환) 시 `onClose` 호출은 그대로 유지되므로,
+     * "닫기 버튼 없는 자동 닫힘 토스트"(DES-SPEC-027 §5.3)에서 부모가 닫힘 시점을 받을 수 있다.
+     *
+     * floating(토스트)은 닫을 수단이 사라지지 않도록 `autoClose` 미지정 시 3초 뒤 자동으로 닫힌다
+     * (부모가 직접 언마운트해 닫으려면 `autoClose={0}` 명시). full-width · message 는 부모가 언마운트로 닫으므로
+     * `autoClose`를 명시했을 때만 자동으로 닫힌다.
+     * @default false
+     */
+    hideCloseButton?: boolean;
     /**
      * 추가 CSS 클래스
      */
@@ -62,7 +74,8 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
     actions?: NotificationAction[];
     /**
      * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
-     * floating 타입에서만 동작
+     * floating, full-width, message 타입에서 동작
+     * 미지정 시 0. 단 floating 에서 `hideCloseButton`이면 3초(DES-SPEC-027 §5.3).
      * @default 0
      */
     autoClose?: number;
@@ -94,10 +107,10 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
     /**
      * message 타입의 표시 변형 (선택사항). message 타입에서만 동작한다.
      *
-     * - `'default'`: 기존 message (color 별 배경·테두리, 제목 + 본문 2행, info → neutral 폴백)
+     * - `'default'`: 기존 message (color 별 배경·테두리, 제목 + 본문 2행)
      * - `'block'`: 서브 페이지 공지용. 흰 배경·gray-100 테두리·shadow-sm, FeaturedIcon sm,
      *   제목 + 텍스트 링크 1행(`supportingText` 가 링크 텍스트, `supportTextLink` 가 href).
-     *   `color="info"` 를 그대로 렌더한다.
+     *   info 아이콘은 InfoCircle.
      *
      * @default 'default'
      */

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

@@ -19,7 +19,7 @@ const Notification = forwardRef(
     }
     if (type === 'callout') {
         // 나머지 3개 type 이 공유하는 prop 은 callout 이 지원하지 않으므로 여기서 제외한다.
-        const { icon: _icon, supportingText: _supportingText, actions: _actions, autoClose: _autoClose, onClose: _onClose, onHidePermanently: _onHidePermanently, hidePermanentlyLabel: _hidePermanentlyLabel, portal: _portal, ...calloutProps } = rest;
+        const { icon: _icon, supportingText: _supportingText, actions: _actions, autoClose: _autoClose, onClose: _onClose, hideCloseButton: _hideCloseButton, onHidePermanently: _onHidePermanently, hidePermanentlyLabel: _hidePermanentlyLabel, portal: _portal, ...calloutProps } = rest;
         return (_jsx(CalloutNotification, { color: color, width: width, ...calloutProps, ref: ref }));
     }
     return null;

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

@@ -2,7 +2,7 @@
 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 { afterEach, describe, expect, it, vi } from 'vitest';
 import { CalloutNotification } from '../CalloutNotification';
 import { Notification } from '../Notification';
 // React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
@@ -31,6 +31,7 @@ afterEach(() => {
     container?.remove();
     root = null;
     container = null;
+    vi.restoreAllMocks();
 });
 describe('CalloutNotification — width prop', () => {
     it('width 미지정 시 너비 클래스를 붙이지 않는다 (부모 너비를 채우는 기본 스타일 유지)', () => {
@@ -67,6 +68,7 @@ describe('Notification type="callout" — 위임 계약', () => {
     });
     // Notification 의 callout 분기가 제외하는 prop 전체. 여기 누락된 prop 은 DOM 속성으로 출력된다.
     it('callout 이 지원하지 않는 prop 은 DOM 속성으로 새지 않는다', () => {
+        const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
         const element = renderNotification({
             icon: () => null,
             supportingText: '보조 문구',
@@ -77,6 +79,7 @@ describe('Notification type="callout" — 위임 계약', () => {
             onClose: () => undefined,
             onHidePermanently: () => undefined,
             hidePermanentlyLabel: '다시 보지 않기',
+            hideCloseButton: true,
         });
         for (const attr of [
             'icon',
@@ -88,10 +91,14 @@ describe('Notification type="callout" — 위임 계약', () => {
             'onclose',
             'onhidepermanently',
             'hidepermanentlylabel',
+            'hideclosebutton',
         ]) {
             expect(element.hasAttribute(attr), attr).toBe(false);
         }
         expect(element.textContent).toBe('안내 문구');
+        // 불리언 true 는 React 가 미지 속성으로 출력하지 않아 hasAttribute 로는 누수를 못 잡는다 — 경고 로그로 검출한다.
+        const leaked = consoleError.mock.calls.some((call) => call.some((arg) => String(arg).includes('hideCloseButton')));
+        expect(leaked).toBe(false);
     });
     it('ref 를 callout 루트 엘리먼트로 전달한다', () => {
         let captured = null;

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

@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+import { InfoCircle, Pin02 } from '@ncds/ui-admin-icon';
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
@@ -18,16 +19,26 @@ const SELECTOR = {
     CLOSE_BUTTON: '.ncua-message-notification__close-button',
 };
 const mounted = [];
-function renderMessageNotification(props = {}) {
+function mount(element) {
     const container = document.createElement('div');
     document.body.appendChild(container);
     const root = createRoot(container);
     act(() => {
-        root.render(createElement(MessageNotification, { title: '알림 제목', ...props }));
+        root.render(element);
     });
     mounted.push({ root, container });
     return container;
 }
+function renderMessageNotification(props = {}) {
+    return mount(createElement(MessageNotification, { title: '알림 제목', ...props }));
+}
+/** 아이콘 컴포넌트를 단독 렌더해 `path[d]` 를 얻는다. 아이콘 판정은 d 비교로 한다. */
+function iconPathD(Icon) {
+    return mount(createElement(Icon)).querySelector('path')?.getAttribute('d') ?? null;
+}
+function renderedIconPathD(container) {
+    return container.querySelector(`${SELECTOR.ICON} svg path`)?.getAttribute('d') ?? null;
+}
 afterEach(() => {
     for (const { root, container } of mounted.splice(0)) {
         act(() => {
@@ -114,15 +125,39 @@ describe('MessageNotification (React) — DOM 구조 계약', () => {
         ]);
     });
 });
-describe('MessageNotification (React) — 공개 API 회귀 방지', () => {
-    it('지원하지 않는 color("info")는 neutral로 폴백한다', () => {
-        // Given/When: message 타입이 지원하지 않는 info 색상을 넘기면
+describe('MessageNotification (React) — color="info" (#568)', () => {
+    it('R-01: color="info" 는 neutral 로 폴백하지 않고 --info 수식자로 렌더한다', () => {
+        // Given/When: variant 미지정, info 색상으로 렌더하면
+        const root = renderMessageNotification({ color: 'info' }).querySelector(SELECTOR.ROOT);
+        // Then: info 수식자가 있고 neutral 수식자는 없다
+        expect(root?.classList.contains('ncua-message-notification--info')).toBe(true);
+        expect(root?.classList.contains('ncua-message-notification--neutral')).toBe(false);
+    });
+    it('R-02: 기본 info 아이콘은 neutral 과 같은 Pin02 다', () => {
+        // Given/When: variant 미지정, info 색상으로 렌더하면
         const container = renderMessageNotification({ color: 'info' });
-        // Then: neutral 수식자로 렌더되고 info 수식자는 없다
-        const root = container.querySelector(SELECTOR.ROOT);
-        expect(root?.classList.contains('ncua-message-notification--neutral')).toBe(true);
-        expect(root?.classList.contains('ncua-message-notification--info')).toBe(false);
+        // Then: 아이콘 path 가 Pin02 와 같다
+        const expected = iconPathD(Pin02);
+        expect(expected).not.toBeNull();
+        expect(renderedIconPathD(container)).toBe(expected);
+    });
+    it('R-03: info 의 FeaturedIcon 은 neutral·md 로 렌더한다 (violet 톤은 SCSS 가 덮는다)', () => {
+        // Given/When: variant 미지정, info 색상으로 렌더하면
+        const icon = renderMessageNotification({ color: 'info' }).querySelector(SELECTOR.ICON);
+        // Then: FeaturedIcon 에는 info 색이 없으므로 neutral 수식자와 md 사이즈가 유지된다
+        expect(icon?.classList.contains('ncua-featured-icon--neutral')).toBe(true);
+        expect(icon?.classList.contains('ncua-featured-icon--md')).toBe(true);
     });
+    it('R-04: block 의 info 아이콘은 InfoCircle 을 유지한다', () => {
+        // Given/When: block 변형에 info 색상으로 렌더하면
+        const container = renderMessageNotification({ variant: 'block', color: 'info' });
+        // Then: 아이콘 path 가 InfoCircle 과 같다 (#536 회귀)
+        const expected = iconPathD(InfoCircle);
+        expect(expected).not.toBeNull();
+        expect(renderedIconPathD(container)).toBe(expected);
+    });
+});
+describe('MessageNotification (React) — 공개 API 회귀 방지', () => {
     it('닫기/다시 보지 않기 클릭 시 핸들러가 호출되고 접근성 속성이 유지된다', () => {
         // Given: 핸들러를 지정해 렌더하고
         const onClose = vi.fn();

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

@@ -2,7 +2,8 @@
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
-import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS } from '../../../../../constant/notification';
 import { Notification } from '../Notification';
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 let root = null;
@@ -69,3 +70,129 @@ describe('Notification — type 별 위임', () => {
         expect(element).toBeNull();
     });
 });
+const CLOSE_BUTTON = {
+    floating: '.ncua-floating-notification__close-button',
+    'full-width': '.ncua-full-width-notification__close-button',
+    message: '.ncua-message-notification__close-button',
+};
+const MESSAGE_FOOTER = '.ncua-message-notification__footer-container';
+const MESSAGE_HIDE_LINK = '.ncua-message-notification__hide-link';
+/** DES-SPEC-027 §5.3 성공 토스트 자동 닫힘 시간. */
+const AUTO_CLOSE_MS = 3000;
+describe('Notification — hideCloseButton', () => {
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('R-01: floating — onClose 가 있어도 hideCloseButton 이면 닫기 버튼을 렌더하지 않는다', () => {
+        const element = render({ type: 'floating', onClose: vi.fn(), hideCloseButton: true });
+        expect(element?.querySelector(CLOSE_BUTTON.floating)).toBeNull();
+    });
+    it('R-02: full-width — onClose 가 있어도 hideCloseButton 이면 닫기 버튼을 렌더하지 않는다', () => {
+        const element = render({ type: 'full-width', onClose: vi.fn(), hideCloseButton: true });
+        expect(element?.querySelector(CLOSE_BUTTON['full-width'])).toBeNull();
+    });
+    it('R-03: message — hideCloseButton 이면 닫기 버튼과 빈 footer 컨테이너를 모두 렌더하지 않는다', () => {
+        const element = render({ type: 'message', onClose: vi.fn(), hideCloseButton: true });
+        expect(element?.querySelector(CLOSE_BUTTON.message)).toBeNull();
+        expect(element?.querySelector(MESSAGE_FOOTER)).toBeNull();
+    });
+    it.each(['floating', 'full-width', 'message'])('R-04: type=%s — hideCloseButton 미지정(기본 false)이면 onClose 만으로 닫기 버튼을 렌더한다', (type) => {
+        const element = render({ type, onClose: vi.fn() });
+        expect(element?.querySelector(CLOSE_BUTTON[type])).not.toBeNull();
+    });
+    it.each(['floating', 'full-width', 'message'])('R-05: type=%s — onClose 없이 hideCloseButton 만 주면 닫기 버튼 없이 오류 없이 렌더한다', (type) => {
+        const element = render({ type, hideCloseButton: true });
+        expect(element).not.toBeNull();
+        expect(element?.querySelector(CLOSE_BUTTON[type])).toBeNull();
+    });
+    it('R-06: floating — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+        vi.useFakeTimers();
+        const onClose = vi.fn();
+        render({ type: 'floating', autoClose: AUTO_CLOSE_MS, hideCloseButton: true, onClose });
+        act(() => {
+            vi.advanceTimersByTime(AUTO_CLOSE_MS);
+        });
+        expect(onClose).toHaveBeenCalledTimes(1);
+        expect(container?.querySelector('.ncua-floating-notification')).toBeNull();
+    });
+    it('R-07: full-width — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+        vi.useFakeTimers();
+        const onClose = vi.fn();
+        render({ type: 'full-width', autoClose: AUTO_CLOSE_MS, hideCloseButton: true, onClose });
+        act(() => {
+            vi.advanceTimersByTime(AUTO_CLOSE_MS);
+        });
+        expect(onClose).toHaveBeenCalledTimes(1);
+        expect(container?.querySelector('.ncua-full-width-notification')).toBeNull();
+    });
+    it('R-09: message — hideCloseButton + onHidePermanently 이면 footer 에 다시 보지 않기만 렌더한다', () => {
+        const element = render({
+            type: 'message',
+            onClose: vi.fn(),
+            hideCloseButton: true,
+            onHidePermanently: vi.fn(),
+        });
+        expect(element?.querySelector(MESSAGE_FOOTER)).not.toBeNull();
+        expect(element?.querySelector(MESSAGE_HIDE_LINK)).not.toBeNull();
+        expect(element?.querySelector(CLOSE_BUTTON.message)).toBeNull();
+    });
+    it('R-10: message — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+        vi.useFakeTimers();
+        const onClose = vi.fn();
+        render({ type: 'message', autoClose: AUTO_CLOSE_MS, hideCloseButton: true, onClose });
+        act(() => {
+            vi.advanceTimersByTime(AUTO_CLOSE_MS);
+        });
+        expect(onClose).toHaveBeenCalledTimes(1);
+        expect(container?.querySelector('.ncua-message-notification')).toBeNull();
+    });
+});
+describe('Notification — hideCloseButton 기본 autoClose', () => {
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('R-11: floating — hideCloseButton 만 주고 autoClose 를 생략하면 3초 뒤 onClose 가 호출되고 제거된다', () => {
+        vi.useFakeTimers();
+        const onClose = vi.fn();
+        render({ type: 'floating', hideCloseButton: true, onClose });
+        act(() => {
+            vi.advanceTimersByTime(HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS - 1);
+        });
+        expect(onClose).not.toHaveBeenCalled();
+        act(() => {
+            vi.advanceTimersByTime(1);
+        });
+        expect(onClose).toHaveBeenCalledTimes(1);
+        expect(container?.firstElementChild).toBeNull();
+    });
+    it.each(['full-width', 'message'])('R-14: type=%s — hideCloseButton 만 주고 autoClose 를 생략해도 자동으로 닫히지 않는다 (부모 언마운트 용도)', (type) => {
+        vi.useFakeTimers();
+        const onClose = vi.fn();
+        render({ type, hideCloseButton: true, onClose });
+        act(() => {
+            vi.advanceTimersByTime(HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+        });
+        expect(onClose).not.toHaveBeenCalled();
+        expect(container?.firstElementChild).not.toBeNull();
+    });
+    it('R-12: floating — hideCloseButton + autoClose={0} 을 명시하면 자동으로 닫히지 않는다 (부모 언마운트 용도)', () => {
+        vi.useFakeTimers();
+        const onClose = vi.fn();
+        render({ type: 'floating', hideCloseButton: true, autoClose: 0, onClose });
+        act(() => {
+            vi.advanceTimersByTime(HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+        });
+        expect(onClose).not.toHaveBeenCalled();
+        expect(container?.querySelector('.ncua-floating-notification')).not.toBeNull();
+    });
+    it('R-13: floating — hideCloseButton 이 아니면 autoClose 생략 시 기본 자동 닫힘이 없다 (회귀)', () => {
+        vi.useFakeTimers();
+        const onClose = vi.fn();
+        render({ type: 'floating', onClose });
+        act(() => {
+            vi.advanceTimersByTime(HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+        });
+        expect(onClose).not.toHaveBeenCalled();
+        expect(container?.querySelector('.ncua-floating-notification')).not.toBeNull();
+    });
+});

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

@@ -0,0 +1,15 @@
+interface UseAutoCloseParams {
+    autoClose?: number;
+    /** floating 만 넘긴다 — 닫기 버튼 없는 토스트의 기본 3초 자동 닫힘. */
+    hideCloseButton?: boolean;
+    onClose?: () => void;
+}
+/**
+ * autoClose 타이머. 만료 시 `onClose`를 호출하고 `true`(제거됨)를 반환한다.
+ * floating · full-width · message 가 공유한다.
+ *
+ * `onClose`는 매 렌더 새 함수일 수 있어 ref 로 latest 만 보관하고 deps 에서 뺀다 —
+ * 인라인 핸들러를 넘겨도 부모 리렌더마다 타이머가 리셋되지 않는다.
+ */
+export declare const useAutoClose: ({ autoClose, hideCloseButton, onClose }: UseAutoCloseParams) => boolean;
+export {};

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

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+import { resolveAutoClose } from '../../../utils/notification';
+/**
+ * autoClose 타이머. 만료 시 `onClose`를 호출하고 `true`(제거됨)를 반환한다.
+ * floating · full-width · message 가 공유한다.
+ *
+ * `onClose`는 매 렌더 새 함수일 수 있어 ref 로 latest 만 보관하고 deps 에서 뺀다 —
+ * 인라인 핸들러를 넘겨도 부모 리렌더마다 타이머가 리셋되지 않는다.
+ */
+export const useAutoClose = ({ autoClose, hideCloseButton, onClose }) => {
+    const [shouldRemove, setShouldRemove] = useState(false);
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    const autoCloseMs = resolveAutoClose({ autoClose, hideCloseButton });
+    useEffect(() => {
+        if (autoCloseMs <= 0)
+            return;
+        const timer = setTimeout(() => {
+            onCloseRef.current?.();
+            setShouldRemove(true);
+        }, autoCloseMs);
+        return () => clearTimeout(timer);
+    }, [autoCloseMs]);
+    return shouldRemove;
+};