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

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

@@ -4,6 +4,7 @@ var _react = require("react");
 var _client = require("react-dom/client");
 var _testUtils = require("react-dom/test-utils");
 var _vitest = require("vitest");
+var _notification = require("../../../../../constant/notification");
 var _Notification = require("../Notification");
 // @vitest-environment jsdom
 
@@ -80,4 +81,179 @@ const render = props => {
     });
     (0, _vitest.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;
+(0, _vitest.describe)('Notification — hideCloseButton', () => {
+  (0, _vitest.afterEach)(() => {
+    _vitest.vi.useRealTimers();
+  });
+  (0, _vitest.it)('R-01: floating — onClose 가 있어도 hideCloseButton 이면 닫기 버튼을 렌더하지 않는다', () => {
+    const element = render({
+      type: 'floating',
+      onClose: _vitest.vi.fn(),
+      hideCloseButton: true
+    });
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON.floating)).toBeNull();
+  });
+  (0, _vitest.it)('R-02: full-width — onClose 가 있어도 hideCloseButton 이면 닫기 버튼을 렌더하지 않는다', () => {
+    const element = render({
+      type: 'full-width',
+      onClose: _vitest.vi.fn(),
+      hideCloseButton: true
+    });
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON['full-width'])).toBeNull();
+  });
+  (0, _vitest.it)('R-03: message — hideCloseButton 이면 닫기 버튼과 빈 footer 컨테이너를 모두 렌더하지 않는다', () => {
+    const element = render({
+      type: 'message',
+      onClose: _vitest.vi.fn(),
+      hideCloseButton: true
+    });
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON.message)).toBeNull();
+    (0, _vitest.expect)(element?.querySelector(MESSAGE_FOOTER)).toBeNull();
+  });
+  _vitest.it.each(['floating', 'full-width', 'message'])('R-04: type=%s — hideCloseButton 미지정(기본 false)이면 onClose 만으로 닫기 버튼을 렌더한다', type => {
+    const element = render({
+      type,
+      onClose: _vitest.vi.fn()
+    });
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON[type])).not.toBeNull();
+  });
+  _vitest.it.each(['floating', 'full-width', 'message'])('R-05: type=%s — onClose 없이 hideCloseButton 만 주면 닫기 버튼 없이 오류 없이 렌더한다', type => {
+    const element = render({
+      type,
+      hideCloseButton: true
+    });
+    (0, _vitest.expect)(element).not.toBeNull();
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON[type])).toBeNull();
+  });
+  (0, _vitest.it)('R-06: floating — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'floating',
+      autoClose: AUTO_CLOSE_MS,
+      hideCloseButton: true,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(AUTO_CLOSE_MS);
+    });
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(container?.querySelector('.ncua-floating-notification')).toBeNull();
+  });
+  (0, _vitest.it)('R-07: full-width — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'full-width',
+      autoClose: AUTO_CLOSE_MS,
+      hideCloseButton: true,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(AUTO_CLOSE_MS);
+    });
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(container?.querySelector('.ncua-full-width-notification')).toBeNull();
+  });
+  (0, _vitest.it)('R-09: message — hideCloseButton + onHidePermanently 이면 footer 에 다시 보지 않기만 렌더한다', () => {
+    const element = render({
+      type: 'message',
+      onClose: _vitest.vi.fn(),
+      hideCloseButton: true,
+      onHidePermanently: _vitest.vi.fn()
+    });
+    (0, _vitest.expect)(element?.querySelector(MESSAGE_FOOTER)).not.toBeNull();
+    (0, _vitest.expect)(element?.querySelector(MESSAGE_HIDE_LINK)).not.toBeNull();
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON.message)).toBeNull();
+  });
+  (0, _vitest.it)('R-10: message — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'message',
+      autoClose: AUTO_CLOSE_MS,
+      hideCloseButton: true,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(AUTO_CLOSE_MS);
+    });
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(container?.querySelector('.ncua-message-notification')).toBeNull();
+  });
+});
+(0, _vitest.describe)('Notification — hideCloseButton 기본 autoClose', () => {
+  (0, _vitest.afterEach)(() => {
+    _vitest.vi.useRealTimers();
+  });
+  (0, _vitest.it)('R-11: floating — hideCloseButton 만 주고 autoClose 를 생략하면 3초 뒤 onClose 가 호출되고 제거된다', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'floating',
+      hideCloseButton: true,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(_notification.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS - 1);
+    });
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(1);
+    });
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(container?.firstElementChild).toBeNull();
+  });
+  _vitest.it.each(['full-width', 'message'])('R-14: type=%s — hideCloseButton 만 주고 autoClose 를 생략해도 자동으로 닫히지 않는다 (부모 언마운트 용도)', type => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type,
+      hideCloseButton: true,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(_notification.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+    });
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+    (0, _vitest.expect)(container?.firstElementChild).not.toBeNull();
+  });
+  (0, _vitest.it)('R-12: floating — hideCloseButton + autoClose={0} 을 명시하면 자동으로 닫히지 않는다 (부모 언마운트 용도)', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'floating',
+      hideCloseButton: true,
+      autoClose: 0,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(_notification.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+    });
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+    (0, _vitest.expect)(container?.querySelector('.ncua-floating-notification')).not.toBeNull();
+  });
+  (0, _vitest.it)('R-13: floating — hideCloseButton 이 아니면 autoClose 생략 시 기본 자동 닫힘이 없다 (회귀)', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'floating',
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(_notification.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+    });
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+    (0, _vitest.expect)(container?.querySelector('.ncua-floating-notification')).not.toBeNull();
+  });
 });

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

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

package/dist/cjs/src/utils/notification/__tests__/resolveAutoClose.test.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _notification = require("../../../../constant/notification");
+var _resolveAutoClose = require("../resolveAutoClose");
+const EXPLICIT_MS = 5000;
+const FALLBACK_MS = 4000;
+const NO_AUTO_CLOSE = 0;
+(0, _vitest.describe)('resolveAutoClose', () => {
+  (0, _vitest.it)('autoClose 를 명시하면 hideCloseButton·fallback 과 무관하게 그대로 쓴다 (0 포함)', () => {
+    (0, _vitest.expect)((0, _resolveAutoClose.resolveAutoClose)({
+      autoClose: EXPLICIT_MS,
+      hideCloseButton: true,
+      fallback: FALLBACK_MS
+    })).toBe(EXPLICIT_MS);
+    (0, _vitest.expect)((0, _resolveAutoClose.resolveAutoClose)({
+      autoClose: NO_AUTO_CLOSE,
+      hideCloseButton: true,
+      fallback: FALLBACK_MS
+    })).toBe(NO_AUTO_CLOSE);
+  });
+  (0, _vitest.it)('autoClose 미지정이면 fallback 이 양수일 때 fallback 을 쓴다', () => {
+    (0, _vitest.expect)((0, _resolveAutoClose.resolveAutoClose)({
+      fallback: FALLBACK_MS
+    })).toBe(FALLBACK_MS);
+    (0, _vitest.expect)((0, _resolveAutoClose.resolveAutoClose)({
+      hideCloseButton: true,
+      fallback: FALLBACK_MS
+    })).toBe(FALLBACK_MS);
+  });
+  (0, _vitest.it)('autoClose·fallback 모두 없으면 hideCloseButton 일 때만 기본 3초를 준다', () => {
+    (0, _vitest.expect)((0, _resolveAutoClose.resolveAutoClose)({
+      hideCloseButton: true
+    })).toBe(_notification.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS);
+    (0, _vitest.expect)((0, _resolveAutoClose.resolveAutoClose)({
+      hideCloseButton: true,
+      fallback: NO_AUTO_CLOSE
+    })).toBe(_notification.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS);
+    (0, _vitest.expect)((0, _resolveAutoClose.resolveAutoClose)({
+      hideCloseButton: false
+    })).toBe(NO_AUTO_CLOSE);
+    (0, _vitest.expect)((0, _resolveAutoClose.resolveAutoClose)({})).toBe(NO_AUTO_CLOSE);
+  });
+});

package/dist/cjs/src/utils/notification/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "resolveAutoClose", {
+  enumerable: true,
+  get: function () {
+    return _resolveAutoClose.resolveAutoClose;
+  }
+});
+var _resolveAutoClose = require("./resolveAutoClose");

package/dist/cjs/src/utils/notification/resolveAutoClose.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveAutoClose = void 0;
+var _notification = require("../../../constant/notification");
+/**
+ * 실제 적용할 autoClose(ms)를 정한다. React·Vanilla 두 구현이 공유한다.
+ * 우선순위: 명시 `autoClose` > `fallback`(양수) > `hideCloseButton`이면 3초 > 0.
+ */
+const resolveAutoClose = _ref => {
+  let {
+    autoClose,
+    hideCloseButton = false,
+    fallback = 0
+  } = _ref;
+  if (autoClose !== undefined) return autoClose;
+  if (fallback > 0) return fallback;
+  return hideCloseButton ? _notification.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS : 0;
+};
+exports.resolveAutoClose = resolveAutoClose;

package/dist/esm/assets/scripts/notification/FloatingNotification.js

@@ -1,4 +1,5 @@
 import { MEDIA_QUERY } from '../../../src/constant/breakpoint';
+import { resolveAutoClose } from '../../../src/utils/notification';
 import { FeaturedIcon } from '../featuredIcon';
 import { ButtonCloseX } from '../shared/ButtonCloseX';
 import { sanitizeHtml } from '../utils/sanitize';
@@ -10,9 +11,13 @@ export class FloatingNotification {
       color: 'neutral',
       className: '',
       actions: [],
-      autoClose: 0,
+      hideCloseButton: false,
       supportingText: undefined,
-      ...options
+      ...options,
+      autoClose: resolveAutoClose({
+        autoClose: options.autoClose,
+        hideCloseButton: options.hideCloseButton
+      })
     };
     this.element = this.createElement();
     this.bindEvents();
@@ -26,7 +31,8 @@ export class FloatingNotification {
       color,
       className,
       actions,
-      onClose
+      onClose,
+      hideCloseButton
     } = this.options;
     // 플로팅 알림에서 info 색상 사용 시 neutral로 대체
     let actualColor = color;
@@ -55,6 +61,7 @@ export class FloatingNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       isMobile: mobile
     }));
     // FeaturedIcon을 container에 추가
@@ -72,6 +79,7 @@ export class FloatingNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       isMobile
     } = params;
     return `
@@ -86,12 +94,20 @@ export class FloatingNotification {
           </div>
         </div>
       </div>
-      ${this.renderCloseButton(onClose, isMobile)}
+      ${this.renderCloseButton({
+      onClose,
+      isMobile,
+      hideCloseButton
+    })}
     `;
   }
-  renderCloseButton(onClose) {
-    let isMobile = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    if (!onClose) return '';
+  renderCloseButton(params) {
+    const {
+      onClose,
+      isMobile = false,
+      hideCloseButton = false
+    } = params;
+    if (!onClose || hideCloseButton) return '';
     const size = getSizes.closeButton(isMobile);
     return ButtonCloseX(size, 'light', CLASS_NAMES.FLOATING.CLOSE_BUTTON, '알림 닫기', onClose);
   }

package/dist/esm/assets/scripts/notification/FullWidthNotification.js

@@ -9,6 +9,7 @@ export class FullWidthNotification {
       className: '',
       actions: [],
       autoClose: 0,
+      hideCloseButton: false,
       supportingText: undefined,
       ...options
     };
@@ -24,6 +25,7 @@ export class FullWidthNotification {
       className,
       actions,
       onClose,
+      hideCloseButton,
       supportTextLink,
       supportTextLinkTarget,
       onHidePermanently,
@@ -37,6 +39,7 @@ export class FullWidthNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       supportTextLink,
       onHidePermanently,
       hidePermanentlyLabel
@@ -51,6 +54,7 @@ export class FullWidthNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       supportTextLink,
       onHidePermanently,
       hidePermanentlyLabel
@@ -68,7 +72,10 @@ export class FullWidthNotification {
           <div class="${CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">
             ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.FULL_WIDTH.ACTIONS) : ''}
             ${this.renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
-            ${this.renderCloseButton(onClose)}
+            ${this.renderCloseButton({
+      onClose,
+      hideCloseButton
+    })}
           </div>
         </div>
       </div>
@@ -89,8 +96,12 @@ export class FullWidthNotification {
       </button>
     `;
   }
-  renderCloseButton(onClose) {
-    if (!onClose) return '';
+  renderCloseButton(params) {
+    const {
+      onClose,
+      hideCloseButton = false
+    } = params;
+    if (!onClose || hideCloseButton) return '';
     return `
       <button type="button" class="${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}" aria-label="알림 닫기">
         ${SVG_ICONS['x-close'](FULL_WIDTH_SIZES.CLOSE_BUTTON)}

package/dist/esm/assets/scripts/notification/MessageNotification.js

@@ -10,6 +10,7 @@ export class MessageNotification {
       className: '',
       actions: [],
       autoClose: 0,
+      hideCloseButton: false,
       supportingText: undefined,
       ...options
     };
@@ -25,6 +26,7 @@ export class MessageNotification {
       className,
       actions,
       onClose,
+      hideCloseButton,
       onHidePermanently,
       hidePermanentlyLabel,
       variant,
@@ -44,6 +46,7 @@ export class MessageNotification {
       color: actualColor,
       actions,
       onClose,
+      hideCloseButton,
       onHidePermanently,
       hidePermanentlyLabel
     }));

package/dist/esm/assets/scripts/notification/Notification.js

@@ -1,3 +1,4 @@
+import { resolveAutoClose } from '../../../src/utils/notification';
 import { FloatingNotification } from './FloatingNotification';
 import { FullWidthNotification } from './FullWidthNotification';
 import { MessageNotification } from './MessageNotification';
@@ -73,8 +74,13 @@ export class NcuaNotification {
       supportingText,
       color,
       type: 'floating',
-      autoClose: autoCloseMap[color],
-      ...options
+      ...options,
+      // 명시 autoClose > 색상별 기본값 > (floating 이고 hideCloseButton 이면 3초). neutral 은 기본 0 이라 세 번째 분기가 필요.
+      autoClose: resolveAutoClose({
+        autoClose: options?.autoClose,
+        hideCloseButton: (options?.type ?? 'floating') === 'floating' && options?.hideCloseButton,
+        fallback: autoCloseMap[color]
+      })
     });
   }
   // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들

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

@@ -19,6 +19,7 @@ export function buildMessageTemplate(params) {
     color,
     actions,
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel
   } = params;
@@ -34,6 +35,7 @@ export function buildMessageTemplate(params) {
         ${renderActionsContainer({
     actions,
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel,
     color
@@ -51,6 +53,7 @@ function renderActionsContainer(params) {
   const {
     actions,
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel,
     color
@@ -58,6 +61,7 @@ function renderActionsContainer(params) {
   const actionsHtml = renderActions(actions ?? [], CLASS_NAMES.MESSAGE.ACTIONS, ACTION_BUTTON_SIZE);
   const footerHtml = renderFooterContainer({
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel,
     color
@@ -69,15 +73,23 @@ function renderActionsContainer(params) {
 function renderFooterContainer(params) {
   const {
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel,
     color
   } = params;
-  if (!onHidePermanently && !onClose) return '';
+  // 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>
   `;
 }
@@ -100,9 +112,13 @@ function renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel) {
  * 닫기(X) 버튼. 아이콘 색은 React `<XClose color>`와 같이 svg 의 `color` 속성으로 주고
  * path 는 `stroke="currentColor"`로 상속받는다 — 두 구현이 같은 마크업을 낸다.
  */
-function renderCloseButton(onClose) {
-  let color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'neutral';
-  if (!onClose) return '';
+function renderCloseButton(params) {
+  const {
+    onClose,
+    hideCloseButton = false,
+    color = 'neutral'
+  } = params;
+  if (!onClose || hideCloseButton) return '';
   const iconColor = MESSAGE_CLOSE_ICON_COLOR[color];
   return `
     <button type="button" class="${CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">

package/dist/esm/constant/notification.js

@@ -26,4 +26,10 @@ export const MESSAGE_CLOSE_ICON_COLOR = {
   warning: COLOR.orange500,
   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/esm/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": 즉시 발화)
@@ -65,13 +66,19 @@ const FloatingNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
     supportingText,
     color = 'neutral',
     onClose,
+    hideCloseButton = false,
     className,
     actions,
-    autoClose = 0,
+    autoClose,
     portal = false,
     ...rest
   } = _ref;
-  const [shouldRemove, setShouldRemove] = useState(false);
+  // floating 은 닫기 버튼이 없는데 autoClose 도 없으면 영구히 남으므로 기본 3초를 준다.
+  const shouldRemove = useAutoClose({
+    autoClose,
+    hideCloseButton,
+    onClose
+  });
   const featuredIconProps = {
     icon: iconMap[color] || Pin02,
     size: 'sm',
@@ -81,31 +88,6 @@ const FloatingNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
   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(나머지) 로 분기.
@@ -155,7 +137,7 @@ const FloatingNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
           })]
         })]
       })
-    }), onClose && _jsx(ButtonCloseX, {
+    }), onClose && !hideCloseButton && _jsx(ButtonCloseX, {
       theme: "light",
       className: "ncua-floating-notification__close-button",
       size: isMobile ? 'sm' : 'xs',