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

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

@@ -1,6 +1,6 @@
 import { FeaturedIcon } from '../featuredIcon';
 import { sanitizeHtml } from '../utils/sanitize';
-import { CLASS_NAMES, MESSAGE_BLOCK_SIZES, MESSAGE_ICON_MAP, MESSAGE_SIZES } from './const';
+import { CLASS_NAMES, MESSAGE_BLOCK_ICON_MAP, MESSAGE_BLOCK_SIZES, MESSAGE_ICON_MAP, MESSAGE_SIZES } from './const';
 import { buildMessageTemplate } from './messageTemplate';
 import { applySupportTextLinkTarget, bindNotificationEvents, createWrapperElement, setupAutoClose } from './utils';
 export class MessageNotification {
@@ -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,
@@ -32,18 +34,17 @@ export class MessageNotification {
       supportTextLinkTarget
     } = this.options;
     const isBlock = variant === 'block';
-    // default 는 neutral, error, warning, success 4가지 색상만 지원 — info 는 block 에서만 유지한다.
-    const actualColor = !isBlock && color === 'info' ? 'neutral' : color;
     const wrapperClassName = [isBlock ? CLASS_NAMES.MESSAGE.BLOCK : '', className].filter(Boolean).join(' ');
-    const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, wrapperClassName);
-    const featuredIconElement = this.createFeaturedIcon(actualColor, isBlock);
+    const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, color, wrapperClassName);
+    const featuredIconElement = this.createFeaturedIcon(color, isBlock);
     wrapper.innerHTML = sanitizeHtml(buildMessageTemplate({
       title,
       supportingText,
       supportTextLink: isBlock ? supportTextLink : undefined,
-      color: actualColor,
+      color,
       actions,
       onClose,
+      hideCloseButton,
       onHidePermanently,
       hidePermanentlyLabel
     }));
@@ -57,15 +58,14 @@ export class MessageNotification {
     }
     return wrapper;
   }
-  /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). */
+  /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). info 아이콘만 variant 별로 다르다. */
   createFeaturedIcon(color, isBlock) {
-    const iconFunction = MESSAGE_ICON_MAP[color];
-    if (!iconFunction) return null;
+    const iconFunction = (isBlock ? MESSAGE_BLOCK_ICON_MAP : MESSAGE_ICON_MAP)[color];
     const sizes = isBlock ? MESSAGE_BLOCK_SIZES : MESSAGE_SIZES;
     this.featuredIcon = FeaturedIcon.create({
       svgString: iconFunction(sizes.ICON_PIXEL),
       theme: 'light-circle',
-      // FeaturedIcon 에는 info 색이 없다. block+info 의 violet 톤은 message SCSS 가 덮어쓴다.
+      // FeaturedIcon 에는 info 색이 없다. info 의 violet 톤은 message SCSS 가 덮어쓴다.
       color: color === 'info' ? 'neutral' : color,
       size: sizes.FEATURED_ICON,
       // React 구현과 동일하게 `__icon`(flex-shrink: 0)을 부여한다.

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/const/icons.js

@@ -1,3 +1,8 @@
+/**
+ * message block 변형의 InfoCircle. `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어
+ * 쓰지 않는다 (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
+ */
+const INFO_CIRCLE_ICON = size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`;
 // SVG 아이콘들 (크기는 동적으로 설정)
 export const SVG_ICONS = {
   'pin-02': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167"></path></svg>`,
@@ -23,12 +28,16 @@ export const FULL_WIDTH_ICON_MAP = {
   info: SVG_ICONS['info-circle']
 };
 export const ICON_MAP = FULL_WIDTH_ICON_MAP;
-/**
- * message 타입 아이콘. floating 과 같은 4색에 block 변형 전용 info 를 더한다.
- * `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어 쓰지 않는다
- * (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
- */
+/** message 기본 타입 아이콘. floating 과 같은 4색에 info(neutral 과 같은 핀)를 더한다. */
 export const MESSAGE_ICON_MAP = {
-  ...FLOATING_ICON_MAP,
-  info: size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`
+  neutral: SVG_ICONS['pin-02'],
+  error: SVG_ICONS['alert-triangle'],
+  warning: SVG_ICONS['alert-circle'],
+  success: SVG_ICONS['check-circle'],
+  info: SVG_ICONS['pin-02']
+};
+/** block 변형 아이콘. info 만 InfoCircle 로 다르다 (#536 유지). */
+export const MESSAGE_BLOCK_ICON_MAP = {
+  ...MESSAGE_ICON_MAP,
+  info: INFO_CIRCLE_ICON
 };

package/dist/esm/assets/scripts/notification/const/index.js

@@ -1,4 +1,4 @@
 // Re-export all constants and types from separate files
 export { CLASS_NAMES } from './classNames';
-export { FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP, MESSAGE_ICON_MAP, SVG_ICONS } from './icons';
+export { FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP, MESSAGE_BLOCK_ICON_MAP, MESSAGE_ICON_MAP, SVG_ICONS } from './icons';
 export { CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FEATURED_ICON_SIZES, FULL_WIDTH_SIZES, getSizes, ICON_PIXEL_SIZES, MESSAGE_BLOCK_SIZES, MESSAGE_SIZES } from './sizes';

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

@@ -18,7 +18,6 @@ export const HIDE_PERMANENTLY_LABEL = {
  * message 타입 닫기(X) 아이콘의 color 별 색.
  *
  * React(`MessageNotification.tsx`)와 Vanilla(`messageTemplate.ts`)가 함께 참조하는 단일 출처다.
- * `info`는 `variant: 'block'`에서만 렌더된다(default 는 neutral 로 폴백).
  */
 export const MESSAGE_CLOSE_ICON_COLOR = {
   neutral: COLOR.gray700,
@@ -26,4 +25,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": 즉시 발화)
@@ -26,7 +27,7 @@ const iconMap = {
   error: AlertTriangle,
   warning: AlertCircle,
   success: CheckCircle
-  // info 는 full-width 전용이라 floating 아이콘 매핑 없음.
+  // info 는 floating 에서 지원하지 않으므로 아이콘 매핑 없음.
 };
 /**
  * NotificationColor → FeaturedIconColor 매핑.
@@ -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',

package/dist/esm/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,
@@ -27,43 +28,27 @@ const FullWidthNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
     supportingText,
     color = 'neutral',
     onClose,
+    hideCloseButton = false,
     className,
     actions,
-    autoClose = 0,
+    autoClose,
     supportTextLink,
     supportTextLinkTarget,
     onHidePermanently,
     hidePermanentlyLabel = HIDE_PERMANENTLY_LABEL.fullWidth,
     ...rest
   } = _ref;
-  const [shouldRemove, setShouldRemove] = useState(false);
+  // 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;
@@ -117,7 +102,7 @@ const FullWidthNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
             className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),
             onClick: onHidePermanently,
             children: hidePermanentlyLabel
-          }), onClose && _jsx("button", {
+          }), onClose && !hideCloseButton && _jsx("button", {
             type: "button",
             className: "ncua-full-width-notification__close-button",
             onClick: onClose,