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

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FloatingNotification = void 0;
 var _breakpoint = require("../../../src/constant/breakpoint");
+var _notification = require("../../../src/utils/notification");
 var _featuredIcon = require("../featuredIcon");
 var _ButtonCloseX = require("../shared/ButtonCloseX");
 var _sanitize = require("../utils/sanitize");
@@ -16,9 +17,13 @@ class FloatingNotification {
       color: 'neutral',
       className: '',
       actions: [],
-      autoClose: 0,
+      hideCloseButton: false,
       supportingText: undefined,
-      ...options
+      ...options,
+      autoClose: (0, _notification.resolveAutoClose)({
+        autoClose: options.autoClose,
+        hideCloseButton: options.hideCloseButton
+      })
     };
     this.element = this.createElement();
     this.bindEvents();
@@ -32,7 +37,8 @@ class FloatingNotification {
       color,
       className,
       actions,
-      onClose
+      onClose,
+      hideCloseButton
     } = this.options;
     // 플로팅 알림에서 info 색상 사용 시 neutral로 대체
     let actualColor = color;
@@ -61,6 +67,7 @@ class FloatingNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       isMobile: mobile
     }));
     // FeaturedIcon을 container에 추가
@@ -78,6 +85,7 @@ class FloatingNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       isMobile
     } = params;
     return `
@@ -92,12 +100,20 @@ 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 = _const.getSizes.closeButton(isMobile);
     return (0, _ButtonCloseX.ButtonCloseX)(size, 'light', _const.CLASS_NAMES.FLOATING.CLOSE_BUTTON, '알림 닫기', onClose);
   }

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

@@ -15,6 +15,7 @@ class FullWidthNotification {
       className: '',
       actions: [],
       autoClose: 0,
+      hideCloseButton: false,
       supportingText: undefined,
       ...options
     };
@@ -30,6 +31,7 @@ class FullWidthNotification {
       className,
       actions,
       onClose,
+      hideCloseButton,
       supportTextLink,
       supportTextLinkTarget,
       onHidePermanently,
@@ -43,6 +45,7 @@ class FullWidthNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       supportTextLink,
       onHidePermanently,
       hidePermanentlyLabel
@@ -57,6 +60,7 @@ class FullWidthNotification {
       supportingText,
       actions,
       onClose,
+      hideCloseButton,
       supportTextLink,
       onHidePermanently,
       hidePermanentlyLabel
@@ -74,7 +78,10 @@ class FullWidthNotification {
           <div class="${_const.CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">
             ${actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.CLASS_NAMES.FULL_WIDTH.ACTIONS) : ''}
             ${this.renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
-            ${this.renderCloseButton(onClose)}
+            ${this.renderCloseButton({
+      onClose,
+      hideCloseButton
+    })}
           </div>
         </div>
       </div>
@@ -95,8 +102,12 @@ class FullWidthNotification {
       </button>
     `;
   }
-  renderCloseButton(onClose) {
-    if (!onClose) return '';
+  renderCloseButton(params) {
+    const {
+      onClose,
+      hideCloseButton = false
+    } = params;
+    if (!onClose || hideCloseButton) return '';
     return `
       <button type="button" class="${_const.CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}" aria-label="알림 닫기">
         ${_const.SVG_ICONS['x-close'](_const.FULL_WIDTH_SIZES.CLOSE_BUTTON)}

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

@@ -16,6 +16,7 @@ class MessageNotification {
       className: '',
       actions: [],
       autoClose: 0,
+      hideCloseButton: false,
       supportingText: undefined,
       ...options
     };
@@ -31,6 +32,7 @@ class MessageNotification {
       className,
       actions,
       onClose,
+      hideCloseButton,
       onHidePermanently,
       hidePermanentlyLabel,
       variant,
@@ -38,18 +40,17 @@ 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 ? _const.CLASS_NAMES.MESSAGE.BLOCK : '', className].filter(Boolean).join(' ');
-    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.MESSAGE.BASE, actualColor, wrapperClassName);
-    const featuredIconElement = this.createFeaturedIcon(actualColor, isBlock);
+    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.MESSAGE.BASE, color, wrapperClassName);
+    const featuredIconElement = this.createFeaturedIcon(color, isBlock);
     wrapper.innerHTML = (0, _sanitize.sanitizeHtml)((0, _messageTemplate.buildMessageTemplate)({
       title,
       supportingText,
       supportTextLink: isBlock ? supportTextLink : undefined,
-      color: actualColor,
+      color,
       actions,
       onClose,
+      hideCloseButton,
       onHidePermanently,
       hidePermanentlyLabel
     }));
@@ -63,15 +64,14 @@ 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 = _const.MESSAGE_ICON_MAP[color];
-    if (!iconFunction) return null;
+    const iconFunction = (isBlock ? _const.MESSAGE_BLOCK_ICON_MAP : _const.MESSAGE_ICON_MAP)[color];
     const sizes = isBlock ? _const.MESSAGE_BLOCK_SIZES : _const.MESSAGE_SIZES;
     this.featuredIcon = _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/cjs/assets/scripts/notification/Notification.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NcuaNotification = void 0;
+var _notification = require("../../../src/utils/notification");
 var _FloatingNotification = require("./FloatingNotification");
 var _FullWidthNotification = require("./FullWidthNotification");
 var _MessageNotification = require("./MessageNotification");
@@ -79,8 +80,13 @@ class NcuaNotification {
       supportingText,
       color,
       type: 'floating',
-      autoClose: autoCloseMap[color],
-      ...options
+      ...options,
+      // 명시 autoClose > 색상별 기본값 > (floating 이고 hideCloseButton 이면 3초). neutral 은 기본 0 이라 세 번째 분기가 필요.
+      autoClose: (0, _notification.resolveAutoClose)({
+        autoClose: options?.autoClose,
+        hideCloseButton: (options?.type ?? 'floating') === 'floating' && options?.hideCloseButton,
+        fallback: autoCloseMap[color]
+      })
     });
   }
   // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들

package/dist/cjs/assets/scripts/notification/const/icons.js

@@ -3,7 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SVG_ICONS = exports.MESSAGE_ICON_MAP = exports.ICON_MAP = exports.FULL_WIDTH_ICON_MAP = exports.FLOATING_ICON_MAP = void 0;
+exports.SVG_ICONS = exports.MESSAGE_ICON_MAP = exports.MESSAGE_BLOCK_ICON_MAP = exports.ICON_MAP = exports.FULL_WIDTH_ICON_MAP = exports.FLOATING_ICON_MAP = void 0;
+/**
+ * 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 아이콘들 (크기는 동적으로 설정)
 const SVG_ICONS = exports.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>`,
@@ -29,12 +34,16 @@ const FULL_WIDTH_ICON_MAP = exports.FULL_WIDTH_ICON_MAP = {
   info: SVG_ICONS['info-circle']
 };
 const ICON_MAP = exports.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 과 같은 핀)를 더한다. */
 const MESSAGE_ICON_MAP = exports.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 유지). */
+const MESSAGE_BLOCK_ICON_MAP = exports.MESSAGE_BLOCK_ICON_MAP = {
+  ...MESSAGE_ICON_MAP,
+  info: INFO_CIRCLE_ICON
 };

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

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "ICON_PIXEL_SIZES", {
     return _sizes.ICON_PIXEL_SIZES;
   }
 });
+Object.defineProperty(exports, "MESSAGE_BLOCK_ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _icons.MESSAGE_BLOCK_ICON_MAP;
+  }
+});
 Object.defineProperty(exports, "MESSAGE_BLOCK_SIZES", {
   enumerable: true,
   get: function () {

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

@@ -25,6 +25,7 @@ function buildMessageTemplate(params) {
     color,
     actions,
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel
   } = params;
@@ -40,6 +41,7 @@ function buildMessageTemplate(params) {
         ${renderActionsContainer({
     actions,
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel,
     color
@@ -57,6 +59,7 @@ function renderActionsContainer(params) {
   const {
     actions,
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel,
     color
@@ -64,6 +67,7 @@ function renderActionsContainer(params) {
   const actionsHtml = (0, _utils.renderActions)(actions ?? [], _const.CLASS_NAMES.MESSAGE.ACTIONS, ACTION_BUTTON_SIZE);
   const footerHtml = renderFooterContainer({
     onClose,
+    hideCloseButton,
     onHidePermanently,
     hidePermanentlyLabel,
     color
@@ -75,15 +79,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="${_const.CLASS_NAMES.MESSAGE.FOOTER_CONTAINER}">
       ${renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
-      ${renderCloseButton(onClose, color)}
+      ${renderCloseButton({
+    onClose,
+    hideCloseButton,
+    color
+  })}
     </div>
   `;
 }
@@ -106,9 +118,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 = _notification.MESSAGE_CLOSE_ICON_COLOR[color];
   return `
     <button type="button" class="${_const.CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">

package/dist/cjs/constant/notification.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MESSAGE_CLOSE_ICON_COLOR = exports.HIDE_PERMANENTLY_LABEL = void 0;
+exports.MESSAGE_CLOSE_ICON_COLOR = exports.HIDE_PERMANENTLY_LABEL = exports.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS = void 0;
 var _color = require("./color");
 /**
  * 다시보지 않기 버튼의 타입별 기본 문구.
@@ -24,7 +24,6 @@ const HIDE_PERMANENTLY_LABEL = exports.HIDE_PERMANENTLY_LABEL = {
  * message 타입 닫기(X) 아이콘의 color 별 색.
  *
  * React(`MessageNotification.tsx`)와 Vanilla(`messageTemplate.ts`)가 함께 참조하는 단일 출처다.
- * `info`는 `variant: 'block'`에서만 렌더된다(default 는 neutral 로 폴백).
  */
 const MESSAGE_CLOSE_ICON_COLOR = exports.MESSAGE_CLOSE_ICON_COLOR = {
   neutral: _color.COLOR.gray700,
@@ -32,4 +31,10 @@ const MESSAGE_CLOSE_ICON_COLOR = exports.MESSAGE_CLOSE_ICON_COLOR = {
   warning: _color.COLOR.orange500,
   success: _color.COLOR.green600,
   info: _color.COLOR.violet600
-};
+};
+/**
+ * floating(토스트)에서 `hideCloseButton`인데 `autoClose`를 지정하지 않았을 때 적용되는 자동 닫힘 시간(ms).
+ * 닫기 버튼이 없는 토스트가 영구히 남지 않게 한다 — DES-SPEC-027 §5.3 Toast Alert 3초.
+ * full-width · message 는 부모가 언마운트로 닫으므로 적용하지 않는다.
+ */
+const HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS = exports.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS = 3000;

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

@@ -15,6 +15,7 @@ var _ButtonCloseX = require("../../action/button/ButtonCloseX");
 var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
 var _host = require("./host");
 var _NotificationActionButtons = require("./NotificationActionButtons");
+var _useAutoClose = require("./useAutoClose");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // 호스트 싱글톤은 vanilla/React 양쪽이 동일한 함수를 공유한다 — host.ts 가 가까운 진입점 역할을
 // 하므로 React 컴포넌트는 deep relative path 로 vanilla internals 를 직접 import 하지 않는다.
@@ -34,7 +35,7 @@ const iconMap = {
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertCircle,
   success: _uiAdminIcon.CheckCircle
-  // info 는 full-width 전용이라 floating 아이콘 매핑 없음.
+  // info 는 floating 에서 지원하지 않으므로 아이콘 매핑 없음.
 };
 /**
  * NotificationColor → FeaturedIconColor 매핑.
@@ -73,13 +74,19 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
     supportingText,
     color = 'neutral',
     onClose,
+    hideCloseButton = false,
     className,
     actions,
-    autoClose = 0,
+    autoClose,
     portal = false,
     ...rest
   } = _ref;
-  const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
+  // floating 은 닫기 버튼이 없는데 autoClose 도 없으면 영구히 남으므로 기본 3초를 준다.
+  const shouldRemove = (0, _useAutoClose.useAutoClose)({
+    autoClose,
+    hideCloseButton,
+    onClose
+  });
   const featuredIconProps = {
     icon: iconMap[color] || _uiAdminIcon.Pin02,
     size: 'sm',
@@ -89,31 +96,6 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
   const isMobile = (0, _useMediaQuery.useMediaQuery)(_breakpoint.MEDIA_QUERY.mobile, {
     onMatched: onClose
   });
-  // onClose 는 매 렌더 새 함수 ref 일 수 있으므로 ref 로 latest 만 보관.
-  // → autoClose 타이머 effect 의 deps 에서 onClose 를 빼서 타이머 재시작 회피.
-  // render 본문에서 직접 할당 — useEffect 로 미루면 같은 commit 안에서 fire 되는 타이머가 stale onClose 를 볼 위험.
-  const onCloseRef = (0, _react.useRef)(onClose);
-  onCloseRef.current = onClose;
-  // autoClose 타이머 관리
-  const timerRef = (0, _react.useRef)(null);
-  // onClose 는 onCloseRef 로 latest 만 추적하므로 deps 에서 제외 (의도된 패턴).
-  (0, _react.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(나머지) 로 분기.
@@ -163,7 +145,7 @@ const FloatingNotification = exports.FloatingNotification = /*#__PURE__*/(0, _re
           })]
         })]
       })
-    }), onClose && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
+    }), onClose && !hideCloseButton && (0, _jsxRuntime.jsx)(_ButtonCloseX.ButtonCloseX, {
       theme: "light",
       className: "ncua-floating-notification__close-button",
       size: isMobile ? 'sm' : 'xs',

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

@@ -13,6 +13,7 @@ var _notification = require("../../../../constant/notification");
 var _url = require("../../../utils/url");
 var _linkTarget = require("./linkTarget");
 var _NotificationActionButtons = require("./NotificationActionButtons");
+var _useAutoClose = require("./useAutoClose");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.MessageChatSquare,
@@ -34,43 +35,27 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
     supportingText,
     color = 'neutral',
     onClose,
+    hideCloseButton = false,
     className,
     actions,
-    autoClose = 0,
+    autoClose,
     supportTextLink,
     supportTextLinkTarget,
     onHidePermanently,
     hidePermanentlyLabel = _notification.HIDE_PERMANENTLY_LABEL.fullWidth,
     ...rest
   } = _ref;
-  const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
+  // full-width 는 부모가 언마운트로 닫으므로 hideCloseButton 기본 autoClose 를 적용하지 않는다.
+  const shouldRemove = (0, _useAutoClose.useAutoClose)({
+    autoClose,
+    onClose
+  });
   // unsafe URL(javascript: 등)이면 링크 없이 텍스트만 렌더한다 — Vanilla `renderSupportingText` 와 같은 정책.
   const safeSupportTextLink = supportTextLink && (0, _url.isSafeUrl)(supportTextLink) ? supportTextLink : undefined;
   const closeIconSize = {
     width: 20,
     height: 20
   };
-  // autoClose 타이머 관리
-  const timerRef = (0, _react.useRef)(null);
-  (0, _react.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;
@@ -124,7 +109,7 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
             className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),
             onClick: onHidePermanently,
             children: hidePermanentlyLabel
-          }), onClose && (0, _jsxRuntime.jsx)("button", {
+          }), onClose && !hideCloseButton && (0, _jsxRuntime.jsx)("button", {
             type: "button",
             className: "ncua-full-width-notification__close-button",
             onClick: onClose,

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

@@ -10,13 +10,19 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _notification = require("../../../../constant/notification");
 var _MessageNotificationParts = require("./MessageNotificationParts");
+var _useAutoClose = require("./useAutoClose");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const iconMap = {
+const DEFAULT_ICON_MAP = {
   neutral: _uiAdminIcon.Pin02,
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertCircle,
   success: _uiAdminIcon.CheckCircle,
-  // info 는 variant="block" 에서만 도달한다 (default 는 neutral 로 폴백).
+  // 디자인 기준 default 의 info 는 neutral 과 같은 핀이다.
+  info: _uiAdminIcon.Pin02
+};
+// block 의 info 는 InfoCircle 을 유지한다 (#536).
+const BLOCK_ICON_MAP = {
+  ...DEFAULT_ICON_MAP,
   info: _uiAdminIcon.InfoCircle
 };
 const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -26,6 +32,8 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
     icon: Icon,
     color = 'neutral',
     onClose,
+    hideCloseButton = false,
+    autoClose,
     className,
     actions,
     onHidePermanently,
@@ -36,13 +44,20 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
     ...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;
+  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 = (0, _useAutoClose.useAutoClose)({
+    autoClose,
+    onClose
+  });
+  if (shouldRemove) {
+    return null;
+  }
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${validColor}`, {
+    className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${color}`, {
       'ncua-message-notification--block': isBlock
     }, className),
     role: "alert",
@@ -56,15 +71,16 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
           supportingText: supportingText,
           supportTextLink: isBlock ? supportTextLink : undefined,
           supportTextLinkTarget: supportTextLinkTarget,
-          icon: Icon || iconMap[validColor],
+          icon: Icon || iconMap[color],
           iconColor: featuredIconColor,
           iconSize: isBlock ? 'sm' : 'md'
         }), (0, _jsxRuntime.jsx)(_MessageNotificationParts.MessageNotificationActions, {
           actions: actions,
           onClose: onClose,
+          hideCloseButton: hideCloseButton,
           onHidePermanently: onHidePermanently,
           hidePermanentlyLabel: hidePermanentlyLabel,
-          closeIconColor: _notification.MESSAGE_CLOSE_ICON_COLOR[validColor]
+          closeIconColor: _notification.MESSAGE_CLOSE_ICON_COLOR[color]
         })]
       })
     })

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

@@ -61,12 +61,15 @@ const MessageNotificationActions = _ref2 => {
   let {
     actions,
     onClose,
+    hideCloseButton = false,
     onHidePermanently,
     hidePermanentlyLabel = _notification.HIDE_PERMANENTLY_LABEL.message,
     closeIconColor
   } = _ref2;
   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 (0, _jsxRuntime.jsxs)("div", {
     className: "ncua-message-notification__actions-container",
@@ -82,7 +85,7 @@ const MessageNotificationActions = _ref2 => {
         className: "ncua-notification__action-button ncua-message-notification__hide-link",
         onClick: onHidePermanently,
         children: hidePermanentlyLabel
-      }), onClose && (0, _jsxRuntime.jsx)("button", {
+      }), showCloseButton && (0, _jsxRuntime.jsx)("button", {
         type: "button",
         className: "ncua-message-notification__close-button",
         onClick: onClose,

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

@@ -57,6 +57,7 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
       actions: _actions,
       autoClose: _autoClose,
       onClose: _onClose,
+      hideCloseButton: _hideCloseButton,
       onHidePermanently: _onHidePermanently,
       hidePermanentlyLabel: _hidePermanentlyLabel,
       portal: _portal,