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

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

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

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

@@ -0,0 +1 @@
+export { resolveAutoClose } from './resolveAutoClose';

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

@@ -0,0 +1,15 @@
+import { HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS } from '../../../constant/notification';
+/**
+ * 실제 적용할 autoClose(ms)를 정한다. React·Vanilla 두 구현이 공유한다.
+ * 우선순위: 명시 `autoClose` > `fallback`(양수) > `hideCloseButton`이면 3초 > 0.
+ */
+export const resolveAutoClose = _ref => {
+  let {
+    autoClose,
+    hideCloseButton = false,
+    fallback = 0
+  } = _ref;
+  if (autoClose !== undefined) return autoClose;
+  if (fallback > 0) return fallback;
+  return hideCloseButton ? HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS : 0;
+};

package/dist/temp/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,10 @@ export class FloatingNotification {
             color: 'neutral',
             className: '',
             actions: [],
-            autoClose: 0,
+            hideCloseButton: false,
             supportingText: undefined,
             ...options,
+            autoClose: resolveAutoClose({ autoClose: options.autoClose, hideCloseButton: options.hideCloseButton }),
         };
         this.element = this.createElement();
         this.bindEvents();
@@ -20,7 +22,7 @@ export class FloatingNotification {
         this.setupMobileListener();
     }
     createElement() {
-        const { title, supportingText, color, className, actions, onClose } = this.options;
+        const { title, supportingText, color, className, actions, onClose, hideCloseButton } = this.options;
         // 플로팅 알림에서 info 색상 사용 시 neutral로 대체
         let actualColor = color;
         if (color === 'info') {
@@ -48,6 +50,7 @@ export class FloatingNotification {
             supportingText,
             actions,
             onClose,
+            hideCloseButton,
             isMobile: mobile,
         }));
         // FeaturedIcon을 container에 추가
@@ -60,7 +63,7 @@ export class FloatingNotification {
         return wrapper;
     }
     buildTemplate(params) {
-        const { title, supportingText, actions, onClose, isMobile } = params;
+        const { title, supportingText, actions, onClose, hideCloseButton, isMobile } = params;
         return `
       <div class="${CLASS_NAMES.FLOATING.CONTENT}">
         <div class="${CLASS_NAMES.FLOATING.CONTAINER}">
@@ -73,11 +76,12 @@ export class FloatingNotification {
           </div>
         </div>
       </div>
-      ${this.renderCloseButton(onClose, isMobile)}
+      ${this.renderCloseButton({ onClose, isMobile, hideCloseButton })}
     `;
     }
-    renderCloseButton(onClose, isMobile = false) {
-        if (!onClose)
+    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/temp/assets/scripts/notification/FullWidthNotification.js

@@ -9,6 +9,7 @@ export class FullWidthNotification {
             className: '',
             actions: [],
             autoClose: 0,
+            hideCloseButton: false,
             supportingText: undefined,
             ...options,
         };
@@ -17,7 +18,7 @@ export class FullWidthNotification {
         this.setupAutoClose();
     }
     createElement() {
-        const { title, supportingText, color, className, actions, onClose, supportTextLink, supportTextLinkTarget, onHidePermanently, hidePermanentlyLabel, } = this.options;
+        const { title, supportingText, color, className, actions, onClose, hideCloseButton, supportTextLink, supportTextLinkTarget, onHidePermanently, hidePermanentlyLabel, } = this.options;
         const wrapper = createWrapperElement(CLASS_NAMES.FULL_WIDTH.BASE, color, className);
         const iconHtml = FULL_WIDTH_ICON_MAP[color](FULL_WIDTH_SIZES.ICON);
         wrapper.innerHTML = sanitizeHtml(this.buildTemplate({
@@ -26,6 +27,7 @@ export class FullWidthNotification {
             supportingText,
             actions,
             onClose,
+            hideCloseButton,
             supportTextLink,
             onHidePermanently,
             hidePermanentlyLabel,
@@ -34,7 +36,7 @@ export class FullWidthNotification {
         return wrapper;
     }
     buildTemplate(params) {
-        const { iconHtml, title, supportingText, actions, onClose, supportTextLink, onHidePermanently, hidePermanentlyLabel, } = params;
+        const { iconHtml, title, supportingText, actions, onClose, hideCloseButton, supportTextLink, onHidePermanently, hidePermanentlyLabel, } = params;
         return `
       <div class="${CLASS_NAMES.FULL_WIDTH.CONTAINER}">
         <div class="${CLASS_NAMES.FULL_WIDTH.CONTENT}">
@@ -48,7 +50,7 @@ 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>
@@ -70,8 +72,9 @@ export class FullWidthNotification {
       </button>
     `;
     }
-    renderCloseButton(onClose) {
-        if (!onClose)
+    renderCloseButton(params) {
+        const { onClose, hideCloseButton = false } = params;
+        if (!onClose || hideCloseButton)
             return '';
         return `
       <button type="button" class="${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}" aria-label="알림 닫기">

package/dist/temp/assets/scripts/notification/MessageNotification.d.ts

@@ -9,7 +9,7 @@ export declare class MessageNotification {
     private featuredIcon?;
     constructor(options: MessageNotificationOptions);
     private createElement;
-    /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). */
+    /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). info 아이콘만 variant 별로 다르다. */
     private createFeaturedIcon;
     private bindEvents;
     private setupAutoClose;

package/dist/temp/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,
         };
@@ -18,20 +19,19 @@ export class MessageNotification {
         this.setupAutoClose();
     }
     createElement() {
-        const { title, supportingText, color, className, actions, onClose, onHidePermanently, hidePermanentlyLabel, variant, supportTextLink, supportTextLinkTarget, } = this.options;
+        const { title, supportingText, color, className, actions, onClose, hideCloseButton, onHidePermanently, hidePermanentlyLabel, variant, supportTextLink, 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,
         }));
@@ -45,16 +45,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/temp/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';
@@ -72,8 +73,13 @@ export class NcuaNotification {
             supportingText,
             color,
             type: 'floating',
-            autoClose: autoCloseMap[color],
             ...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/temp/assets/scripts/notification/const/icons.d.ts

@@ -1,4 +1,5 @@
 import type { NotificationColor } from './types';
+type IconFunction = (size: string) => string;
 export declare const SVG_ICONS: {
     readonly 'pin-02': (size: string) => string;
     readonly 'alert-triangle': (size: string) => string;
@@ -23,9 +24,8 @@ export declare const ICON_MAP: {
     readonly success: (size: string) => string;
     readonly info: (size: string) => string;
 };
-/**
- * message 타입 아이콘. floating 과 같은 4색에 block 변형 전용 info 를 더한다.
- * `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어 쓰지 않는다
- * (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
- */
-export declare const MESSAGE_ICON_MAP: Partial<Record<NotificationColor, (size: string) => string>>;
+/** message 기본 타입 아이콘. floating 과 같은 4색에 info(neutral 과 같은 핀)를 더한다. */
+export declare const MESSAGE_ICON_MAP: Record<NotificationColor, IconFunction>;
+/** block 변형 아이콘. info 만 InfoCircle 로 다르다 (#536 유지). */
+export declare const MESSAGE_BLOCK_ICON_MAP: Record<NotificationColor, IconFunction>;
+export {};

package/dist/temp/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/temp/assets/scripts/notification/const/index.d.ts

@@ -1,4 +1,4 @@
 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';
 export type { BaseNotificationOptions, LegacyNotificationHierarchy, NotificationAction, NotificationActionButtonSize, NotificationColor, NotificationHierarchy, NotificationLinkTarget, NotificationVariant, } from './types';

package/dist/temp/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/temp/assets/scripts/notification/const/types.d.ts

@@ -2,7 +2,7 @@ export type NotificationColor = 'neutral' | 'error' | 'warning' | 'success' | 'i
 /**
  * message 타입의 표시 변형. React `NotificationVariant`와 같은 어휘다.
  * - `'default'`: 기존 message
- * - `'block'`: 서브 페이지 공지용 (흰 배경, FeaturedIcon sm, 제목 + 텍스트 링크 1행, info 유지)
+ * - `'block'`: 서브 페이지 공지용 (흰 배경, FeaturedIcon sm, 제목 + 텍스트 링크 1행, info 아이콘 InfoCircle)
  */
 export type NotificationVariant = 'default' | 'block';
 /**
@@ -40,6 +40,13 @@ export interface BaseNotificationOptions {
     supportingText?: string;
     color?: NotificationColor;
     onClose?: () => void;
+    /**
+     * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
+     * autoClose 만료 시 `onClose` 호출은 그대로 유지된다. 기본값 `false`.
+     * floating 은 `autoClose` 미지정 시 3초 뒤 자동으로 닫힌다(직접 `remove()` 로 닫으려면 `autoClose: 0` 명시).
+     * full-width · message 는 `autoClose` 를 명시했을 때만 자동으로 닫힌다.
+     */
+    hideCloseButton?: boolean;
     className?: string;
     actions?: NotificationAction[];
     autoClose?: number;

package/dist/temp/assets/scripts/notification/messageTemplate.d.ts

@@ -8,6 +8,7 @@ export interface MessageTemplateParams {
     color?: NotificationColor;
     actions?: NotificationAction[];
     onClose?: () => void;
+    hideCloseButton?: boolean;
     onHidePermanently?: () => void;
     hidePermanentlyLabel?: string;
 }

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

@@ -17,7 +17,6 @@ export declare const HIDE_PERMANENTLY_LABEL: {
  * message 타입 닫기(X) 아이콘의 color 별 색.
  *
  * React(`MessageNotification.tsx`)와 Vanilla(`messageTemplate.ts`)가 함께 참조하는 단일 출처다.
- * `info`는 `variant: 'block'`에서만 렌더된다(default 는 neutral 로 폴백).
  */
 export declare const MESSAGE_CLOSE_ICON_COLOR: {
     readonly neutral: string;
@@ -26,3 +25,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

@@ -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,
@@ -27,3 +26,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": 즉시 발화)
@@ -26,7 +27,7 @@ const iconMap = {
     error: AlertTriangle,
     warning: AlertCircle,
     success: CheckCircle,
-    // info 는 full-width 전용이라 floating 아이콘 매핑 없음.
+    // info 는 floating 에서 지원하지 않으므로 아이콘 매핑 없음.
 };
 /**
  * NotificationColor → FeaturedIconColor 매핑.
@@ -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 클래스
      */