@ncds/ui-admin 1.8.26-alpha.3 → 1.8.26-alpha.5

package/dist/temp/assets/scripts/notification/messageTemplate.js

@@ -12,7 +12,7 @@ const ACTION_BUTTON_SIZE = 'xs';
  * 동일한 클래스 트리를 산출해야 한다 — SCSS 한 벌을 두 구현이 공유한다.
  */
 export function buildMessageTemplate(params) {
-    const { title, supportingText, supportTextLink, color, actions, onClose, onHidePermanently, hidePermanentlyLabel } = params;
+    const { title, supportingText, supportTextLink, color, actions, onClose, hideCloseButton, onHidePermanently, hidePermanentlyLabel, } = params;
     return `
     <div class="${CLASS_NAMES.MESSAGE.CONTAINER}">
       <div class="${CLASS_NAMES.MESSAGE.CONTENT}">
@@ -22,7 +22,7 @@ export function buildMessageTemplate(params) {
             ${renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT, supportTextLink, CLASS_NAMES.MESSAGE.LINK)}
           </div>
         </div>
-        ${renderActionsContainer({ actions, onClose, onHidePermanently, hidePermanentlyLabel, color })}
+        ${renderActionsContainer({ actions, onClose, hideCloseButton, onHidePermanently, hidePermanentlyLabel, color })}
       </div>
     </div>
   `;
@@ -33,22 +33,31 @@ export function buildMessageTemplate(params) {
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
 function renderActionsContainer(params) {
-    const { actions, onClose, onHidePermanently, hidePermanentlyLabel, color } = params;
+    const { actions, onClose, hideCloseButton, onHidePermanently, hidePermanentlyLabel, color } = params;
     const actionsHtml = renderActions(actions ?? [], CLASS_NAMES.MESSAGE.ACTIONS, ACTION_BUTTON_SIZE);
-    const footerHtml = renderFooterContainer({ onClose, onHidePermanently, hidePermanentlyLabel, color });
+    const footerHtml = renderFooterContainer({
+        onClose,
+        hideCloseButton,
+        onHidePermanently,
+        hidePermanentlyLabel,
+        color,
+    });
     if (!actionsHtml && !footerHtml)
         return '';
     return `<div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">${actionsHtml}${footerHtml}</div>`;
 }
 /** 다시 보지 않기 + 닫기 그룹. 전용 래퍼를 쓰는 이유는 `CLASS_NAMES.MESSAGE.FOOTER_CONTAINER` 참조. */
 function renderFooterContainer(params) {
-    const { onClose, onHidePermanently, hidePermanentlyLabel, color } = params;
-    if (!onHidePermanently && !onClose)
+    const { onClose, hideCloseButton, onHidePermanently, hidePermanentlyLabel, color } = params;
+    // footer 컨테이너와 닫기 버튼이 같은 판정을 보게 해 빈 footer 가 남지 않게 한다.
+    // cf. React `MessageNotificationParts.tsx` 의 showCloseButton — 두 구현이 같은 판정을 유지해야 한다.
+    const showCloseButton = Boolean(onClose) && !hideCloseButton;
+    if (!onHidePermanently && !showCloseButton)
         return '';
     return `
     <div class="${CLASS_NAMES.MESSAGE.FOOTER_CONTAINER}">
       ${renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
-      ${renderCloseButton(onClose, color)}
+      ${renderCloseButton({ onClose, hideCloseButton, color })}
     </div>
   `;
 }
@@ -72,8 +81,9 @@ function renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel) {
  * 닫기(X) 버튼. 아이콘 색은 React `<XClose color>`와 같이 svg 의 `color` 속성으로 주고
  * path 는 `stroke="currentColor"`로 상속받는다 — 두 구현이 같은 마크업을 낸다.
  */
-function renderCloseButton(onClose, color = 'neutral') {
-    if (!onClose)
+function renderCloseButton(params) {
+    const { onClose, hideCloseButton = false, color = 'neutral' } = params;
+    if (!onClose || hideCloseButton)
         return '';
     const iconColor = MESSAGE_CLOSE_ICON_COLOR[color];
     return `

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

@@ -26,3 +26,9 @@ export declare const MESSAGE_CLOSE_ICON_COLOR: {
     readonly success: string;
     readonly info: string;
 };
+/**
+ * floating(토스트)에서 `hideCloseButton`인데 `autoClose`를 지정하지 않았을 때 적용되는 자동 닫힘 시간(ms).
+ * 닫기 버튼이 없는 토스트가 영구히 남지 않게 한다 — DES-SPEC-027 §5.3 Toast Alert 3초.
+ * full-width · message 는 부모가 언마운트로 닫으므로 적용하지 않는다.
+ */
+export declare const HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS = 3000;

package/dist/temp/constant/notification.js

@@ -27,3 +27,9 @@ export const MESSAGE_CLOSE_ICON_COLOR = {
     success: COLOR.green600,
     info: COLOR.violet600,
 };
+/**
+ * floating(토스트)에서 `hideCloseButton`인데 `autoClose`를 지정하지 않았을 때 적용되는 자동 닫힘 시간(ms).
+ * 닫기 버튼이 없는 토스트가 영구히 남지 않게 한다 — DES-SPEC-027 §5.3 Toast Alert 3초.
+ * full-width · message 는 부모가 언마운트로 닫으므로 적용하지 않는다.
+ */
+export const HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS = 3000;

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

@@ -18,6 +18,13 @@ interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>
      * 닫기 버튼 클릭 이벤트 핸들러
      */
     onClose?: () => void;
+    /**
+     * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
+     * autoClose 만료·모바일 전환 시 `onClose` 호출은 그대로 유지된다.
+     * `autoClose` 미지정이면 3초 뒤 자동으로 닫힌다. 부모가 직접 언마운트하려면 `autoClose={0}`을 명시한다.
+     * @default false
+     */
+    hideCloseButton?: boolean;
     /**
      * 추가 CSS 클래스
      */
@@ -28,6 +35,7 @@ interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>
     actions?: NotificationAction[];
     /**
      * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
+     * 미지정 시 0. 단 `hideCloseButton`이면 3초.
      * @default 0
      */
     autoClose?: number;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { forwardRef, useEffect, useId, useRef, useState } from 'react';
+import { forwardRef, useEffect, useId, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { MEDIA_QUERY } from '../../../constant/breakpoint';
 import { useMediaQuery } from '../../../hooks/useMediaQuery';
@@ -11,6 +11,7 @@ import { FeaturedIcon, } from '../../image-and-icons/featured-icon/FeaturedIcon'
 // 하므로 React 컴포넌트는 deep relative path 로 vanilla internals 를 직접 import 하지 않는다.
 import { mountFloatingNotificationHost } from './host';
 import { NotificationActionButtons } from './NotificationActionButtons';
+import { useAutoClose } from './useAutoClose';
 /**
  * 색상별 a11y role.
  *   - error/warning → role="alert"  (implicit aria-live="assertive": 즉시 발화)
@@ -60,8 +61,9 @@ function useMountFloatingNotificationHost(enabled) {
     }, [enabled]);
     return host;
 }
-const FloatingNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, actions, autoClose = 0, portal = false, ...rest }, ref) => {
-    const [shouldRemove, setShouldRemove] = useState(false);
+const FloatingNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, hideCloseButton = false, className, actions, autoClose, portal = false, ...rest }, ref) => {
+    // floating 은 닫기 버튼이 없는데 autoClose 도 없으면 영구히 남으므로 기본 3초를 준다.
+    const shouldRemove = useAutoClose({ autoClose, hideCloseButton, onClose });
     const featuredIconProps = {
         icon: iconMap[color] || Pin02,
         size: 'sm',
@@ -71,31 +73,6 @@ const FloatingNotification = forwardRef(({ title, supportingText, color = 'neutr
     const isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
         onMatched: onClose,
     });
-    // onClose 는 매 렌더 새 함수 ref 일 수 있으므로 ref 로 latest 만 보관.
-    // → autoClose 타이머 effect 의 deps 에서 onClose 를 빼서 타이머 재시작 회피.
-    // render 본문에서 직접 할당 — useEffect 로 미루면 같은 commit 안에서 fire 되는 타이머가 stale onClose 를 볼 위험.
-    const onCloseRef = useRef(onClose);
-    onCloseRef.current = onClose;
-    // autoClose 타이머 관리
-    const timerRef = useRef(null);
-    // onClose 는 onCloseRef 로 latest 만 추적하므로 deps 에서 제외 (의도된 패턴).
-    useEffect(() => {
-        // autoClose 가 0 보다 크면 타이머 설정.
-        if (autoClose > 0) {
-            timerRef.current = setTimeout(() => {
-                onCloseRef.current?.();
-                // DOM 에서 바로 제거
-                setShouldRemove(true);
-            }, autoClose);
-        }
-        // cleanup: 컴포넌트 언마운트 또는 autoClose 변경 시 타이머 정리
-        return () => {
-            if (timerRef.current) {
-                clearTimeout(timerRef.current);
-                timerRef.current = null;
-            }
-        };
-    }, [autoClose]);
     // portal=true 일 때만 호스트가 필요하다.
     const host = useMountFloatingNotificationHost(portal);
     // a11y — 카드 root 의 role 과 제목/본문 ID. 색상에 따라 alert(error/warning) / status(나머지) 로 분기.
@@ -110,7 +87,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: _jsx(NotificationActionButtons, { actions: actions }) }))] })] }) }), 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 && !hideCloseButton && (_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

@@ -18,6 +18,13 @@ interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'
      * 닫기 버튼 클릭 이벤트 핸들러
      */
     onClose?: () => void;
+    /**
+     * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
+     * autoClose 만료 시 `onClose` 호출은 그대로 유지된다.
+     * 기본 자동 닫힘은 없다 — 부모가 언마운트로 닫거나 `autoClose`를 명시한다.
+     * @default false
+     */
+    hideCloseButton?: boolean;
     /**
      * 추가 CSS 클래스
      */

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 클래스
      */

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

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { MESSAGE_CLOSE_ICON_COLOR } from '../../../../constant/notification';
 import { MessageNotificationActions, MessageNotificationContent } from './MessageNotificationParts';
+import { useAutoClose } from './useAutoClose';
 const iconMap = {
     neutral: Pin02,
     error: AlertTriangle,
@@ -12,13 +13,18 @@ const iconMap = {
     // info 는 variant="block" 에서만 도달한다 (default 는 neutral 로 폴백).
     info: InfoCircle,
 };
-const MessageNotification = forwardRef(({ title, supportingText, icon: Icon, color = 'neutral', onClose, className, actions, onHidePermanently, hidePermanentlyLabel, variant = 'default', supportTextLink, supportTextLinkTarget, ...rest }, ref) => {
+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] })] }) }) }));
+    // 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--${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, hideCloseButton: hideCloseButton, 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

@@ -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;

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__/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;
+};

package/dist/temp/src/utils/notification/__tests__/resolveAutoClose.test.d.ts

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