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

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,

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

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { MESSAGE_CLOSE_ICON_COLOR } from '../../../../constant/notification';
 import { MessageNotificationActions, MessageNotificationContent } from './MessageNotificationParts';
+import { useAutoClose } from './useAutoClose';
 const iconMap = {
   neutral: Pin02,
   error: AlertTriangle,
@@ -19,6 +20,8 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
     icon: Icon,
     color = 'neutral',
     onClose,
+    hideCloseButton = false,
+    autoClose,
     className,
     actions,
     onHidePermanently,
@@ -33,6 +36,14 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
   const validColor = !isBlock && color === 'info' ? 'neutral' : color;
   // FeaturedIcon 에는 info 색이 없다. block+info 의 violet 톤은 message SCSS 가 덮어쓴다.
   const featuredIconColor = validColor === 'info' ? 'neutral' : validColor;
+  // message 는 부모가 언마운트로 닫으므로 hideCloseButton 기본 autoClose 를 적용하지 않는다.
+  const shouldRemove = useAutoClose({
+    autoClose,
+    onClose
+  });
+  if (shouldRemove) {
+    return null;
+  }
   return _jsx("div", {
     ref: ref,
     className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, {
@@ -55,6 +66,7 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
         }), _jsx(MessageNotificationActions, {
           actions: actions,
           onClose: onClose,
+          hideCloseButton: hideCloseButton,
           onHidePermanently: onHidePermanently,
           hidePermanentlyLabel: hidePermanentlyLabel,
           closeIconColor: MESSAGE_CLOSE_ICON_COLOR[validColor]

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

@@ -54,12 +54,15 @@ const MessageNotificationActions = _ref2 => {
   let {
     actions,
     onClose,
+    hideCloseButton = false,
     onHidePermanently,
     hidePermanentlyLabel = 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 _jsxs("div", {
     className: "ncua-message-notification__actions-container",
@@ -75,7 +78,7 @@ const MessageNotificationActions = _ref2 => {
         className: "ncua-notification__action-button ncua-message-notification__hide-link",
         onClick: onHidePermanently,
         children: hidePermanentlyLabel
-      }), onClose && _jsx("button", {
+      }), showCloseButton && _jsx("button", {
         type: "button",
         className: "ncua-message-notification__close-button",
         onClick: onClose,

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

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

package/dist/esm/src/components/overlays/notification/__tests__/CalloutNotification.test.js

@@ -2,7 +2,7 @@
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
-import { afterEach, describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { CalloutNotification } from '../CalloutNotification';
 import { Notification } from '../Notification';
 // React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
@@ -43,6 +43,7 @@ afterEach(() => {
   container?.remove();
   root = null;
   container = null;
+  vi.restoreAllMocks();
 });
 describe('CalloutNotification — width prop', () => {
   it('width 미지정 시 너비 클래스를 붙이지 않는다 (부모 너비를 채우는 기본 스타일 유지)', () => {
@@ -91,6 +92,7 @@ describe('Notification type="callout" — 위임 계약', () => {
   });
   // Notification 의 callout 분기가 제외하는 prop 전체. 여기 누락된 prop 은 DOM 속성으로 출력된다.
   it('callout 이 지원하지 않는 prop 은 DOM 속성으로 새지 않는다', () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
     const element = renderNotification({
       icon: () => null,
       supportingText: '보조 문구',
@@ -103,12 +105,16 @@ describe('Notification type="callout" — 위임 계약', () => {
       portal: true,
       onClose: () => undefined,
       onHidePermanently: () => undefined,
-      hidePermanentlyLabel: '다시 보지 않기'
+      hidePermanentlyLabel: '다시 보지 않기',
+      hideCloseButton: true
     });
-    for (const attr of ['icon', 'supportingtext', 'supporttextlink', 'actions', 'autoclose', 'portal', 'onclose', 'onhidepermanently', 'hidepermanentlylabel']) {
+    for (const attr of ['icon', 'supportingtext', 'supporttextlink', 'actions', 'autoclose', 'portal', 'onclose', 'onhidepermanently', 'hidepermanentlylabel', 'hideclosebutton']) {
       expect(element.hasAttribute(attr), attr).toBe(false);
     }
     expect(element.textContent).toBe('안내 문구');
+    // 불리언 true 는 React 가 미지 속성으로 출력하지 않아 hasAttribute 로는 누수를 못 잡는다 — 경고 로그로 검출한다.
+    const leaked = consoleError.mock.calls.some(call => call.some(arg => String(arg).includes('hideCloseButton')));
+    expect(leaked).toBe(false);
   });
   it('ref 를 callout 루트 엘리먼트로 전달한다', () => {
     let captured = null;

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

@@ -2,7 +2,8 @@
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
-import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+import { HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS } from '../../../../../constant/notification';
 import { Notification } from '../Notification';
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 let root = null;
@@ -77,4 +78,179 @@ describe('Notification — type 별 위임', () => {
     });
     expect(element).toBeNull();
   });
+});
+const CLOSE_BUTTON = {
+  floating: '.ncua-floating-notification__close-button',
+  'full-width': '.ncua-full-width-notification__close-button',
+  message: '.ncua-message-notification__close-button'
+};
+const MESSAGE_FOOTER = '.ncua-message-notification__footer-container';
+const MESSAGE_HIDE_LINK = '.ncua-message-notification__hide-link';
+/** DES-SPEC-027 §5.3 성공 토스트 자동 닫힘 시간. */
+const AUTO_CLOSE_MS = 3000;
+describe('Notification — hideCloseButton', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+  it('R-01: floating — onClose 가 있어도 hideCloseButton 이면 닫기 버튼을 렌더하지 않는다', () => {
+    const element = render({
+      type: 'floating',
+      onClose: vi.fn(),
+      hideCloseButton: true
+    });
+    expect(element?.querySelector(CLOSE_BUTTON.floating)).toBeNull();
+  });
+  it('R-02: full-width — onClose 가 있어도 hideCloseButton 이면 닫기 버튼을 렌더하지 않는다', () => {
+    const element = render({
+      type: 'full-width',
+      onClose: vi.fn(),
+      hideCloseButton: true
+    });
+    expect(element?.querySelector(CLOSE_BUTTON['full-width'])).toBeNull();
+  });
+  it('R-03: message — hideCloseButton 이면 닫기 버튼과 빈 footer 컨테이너를 모두 렌더하지 않는다', () => {
+    const element = render({
+      type: 'message',
+      onClose: vi.fn(),
+      hideCloseButton: true
+    });
+    expect(element?.querySelector(CLOSE_BUTTON.message)).toBeNull();
+    expect(element?.querySelector(MESSAGE_FOOTER)).toBeNull();
+  });
+  it.each(['floating', 'full-width', 'message'])('R-04: type=%s — hideCloseButton 미지정(기본 false)이면 onClose 만으로 닫기 버튼을 렌더한다', type => {
+    const element = render({
+      type,
+      onClose: vi.fn()
+    });
+    expect(element?.querySelector(CLOSE_BUTTON[type])).not.toBeNull();
+  });
+  it.each(['floating', 'full-width', 'message'])('R-05: type=%s — onClose 없이 hideCloseButton 만 주면 닫기 버튼 없이 오류 없이 렌더한다', type => {
+    const element = render({
+      type,
+      hideCloseButton: true
+    });
+    expect(element).not.toBeNull();
+    expect(element?.querySelector(CLOSE_BUTTON[type])).toBeNull();
+  });
+  it('R-06: floating — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+    vi.useFakeTimers();
+    const onClose = vi.fn();
+    render({
+      type: 'floating',
+      autoClose: AUTO_CLOSE_MS,
+      hideCloseButton: true,
+      onClose
+    });
+    act(() => {
+      vi.advanceTimersByTime(AUTO_CLOSE_MS);
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(container?.querySelector('.ncua-floating-notification')).toBeNull();
+  });
+  it('R-07: full-width — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+    vi.useFakeTimers();
+    const onClose = vi.fn();
+    render({
+      type: 'full-width',
+      autoClose: AUTO_CLOSE_MS,
+      hideCloseButton: true,
+      onClose
+    });
+    act(() => {
+      vi.advanceTimersByTime(AUTO_CLOSE_MS);
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(container?.querySelector('.ncua-full-width-notification')).toBeNull();
+  });
+  it('R-09: message — hideCloseButton + onHidePermanently 이면 footer 에 다시 보지 않기만 렌더한다', () => {
+    const element = render({
+      type: 'message',
+      onClose: vi.fn(),
+      hideCloseButton: true,
+      onHidePermanently: vi.fn()
+    });
+    expect(element?.querySelector(MESSAGE_FOOTER)).not.toBeNull();
+    expect(element?.querySelector(MESSAGE_HIDE_LINK)).not.toBeNull();
+    expect(element?.querySelector(CLOSE_BUTTON.message)).toBeNull();
+  });
+  it('R-10: message — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+    vi.useFakeTimers();
+    const onClose = vi.fn();
+    render({
+      type: 'message',
+      autoClose: AUTO_CLOSE_MS,
+      hideCloseButton: true,
+      onClose
+    });
+    act(() => {
+      vi.advanceTimersByTime(AUTO_CLOSE_MS);
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(container?.querySelector('.ncua-message-notification')).toBeNull();
+  });
+});
+describe('Notification — hideCloseButton 기본 autoClose', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+  it('R-11: floating — hideCloseButton 만 주고 autoClose 를 생략하면 3초 뒤 onClose 가 호출되고 제거된다', () => {
+    vi.useFakeTimers();
+    const onClose = vi.fn();
+    render({
+      type: 'floating',
+      hideCloseButton: true,
+      onClose
+    });
+    act(() => {
+      vi.advanceTimersByTime(HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS - 1);
+    });
+    expect(onClose).not.toHaveBeenCalled();
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(container?.firstElementChild).toBeNull();
+  });
+  it.each(['full-width', 'message'])('R-14: type=%s — hideCloseButton 만 주고 autoClose 를 생략해도 자동으로 닫히지 않는다 (부모 언마운트 용도)', type => {
+    vi.useFakeTimers();
+    const onClose = vi.fn();
+    render({
+      type,
+      hideCloseButton: true,
+      onClose
+    });
+    act(() => {
+      vi.advanceTimersByTime(HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+    });
+    expect(onClose).not.toHaveBeenCalled();
+    expect(container?.firstElementChild).not.toBeNull();
+  });
+  it('R-12: floating — hideCloseButton + autoClose={0} 을 명시하면 자동으로 닫히지 않는다 (부모 언마운트 용도)', () => {
+    vi.useFakeTimers();
+    const onClose = vi.fn();
+    render({
+      type: 'floating',
+      hideCloseButton: true,
+      autoClose: 0,
+      onClose
+    });
+    act(() => {
+      vi.advanceTimersByTime(HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+    });
+    expect(onClose).not.toHaveBeenCalled();
+    expect(container?.querySelector('.ncua-floating-notification')).not.toBeNull();
+  });
+  it('R-13: floating — hideCloseButton 이 아니면 autoClose 생략 시 기본 자동 닫힘이 없다 (회귀)', () => {
+    vi.useFakeTimers();
+    const onClose = vi.fn();
+    render({
+      type: 'floating',
+      onClose
+    });
+    act(() => {
+      vi.advanceTimersByTime(HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+    });
+    expect(onClose).not.toHaveBeenCalled();
+    expect(container?.querySelector('.ncua-floating-notification')).not.toBeNull();
+  });
 });

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

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

package/dist/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.js

@@ -10,6 +10,7 @@ export class MessageNotification {
             className: '',
             actions: [],
             autoClose: 0,
+            hideCloseButton: false,
             supportingText: undefined,
             ...options,
         };
@@ -18,7 +19,7 @@ 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;
@@ -32,6 +33,7 @@ export class MessageNotification {
             color: actualColor,
             actions,
             onClose,
+            hideCloseButton,
             onHidePermanently,
             hidePermanentlyLabel,
         }));

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/types.d.ts

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