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

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

@@ -4,12 +4,18 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { MESSAGE_CLOSE_ICON_COLOR } from '../../../../constant/notification';
 import { MessageNotificationActions, MessageNotificationContent } from './MessageNotificationParts';
-const iconMap = {
+import { useAutoClose } from './useAutoClose';
+const DEFAULT_ICON_MAP = {
   neutral: Pin02,
   error: AlertTriangle,
   warning: AlertCircle,
   success: CheckCircle,
-  // info 는 variant="block" 에서만 도달한다 (default 는 neutral 로 폴백).
+  // 디자인 기준 default 의 info 는 neutral 과 같은 핀이다.
+  info: Pin02
+};
+// block 의 info 는 InfoCircle 을 유지한다 (#536).
+const BLOCK_ICON_MAP = {
+  ...DEFAULT_ICON_MAP,
   info: InfoCircle
 };
 const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -19,6 +25,8 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
     icon: Icon,
     color = 'neutral',
     onClose,
+    hideCloseButton = false,
+    autoClose,
     className,
     actions,
     onHidePermanently,
@@ -29,13 +37,20 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...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 = useAutoClose({
+    autoClose,
+    onClose
+  });
+  if (shouldRemove) {
+    return null;
+  }
   return _jsx("div", {
     ref: ref,
-    className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, {
+    className: classNames('ncua-message-notification', `ncua-message-notification--${color}`, {
       'ncua-message-notification--block': isBlock
     }, className),
     role: "alert",
@@ -49,15 +64,16 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
           supportingText: supportingText,
           supportTextLink: isBlock ? supportTextLink : undefined,
           supportTextLinkTarget: supportTextLinkTarget,
-          icon: Icon || iconMap[validColor],
+          icon: Icon || iconMap[color],
           iconColor: featuredIconColor,
           iconSize: isBlock ? 'sm' : 'md'
         }), _jsx(MessageNotificationActions, {
           actions: actions,
           onClose: onClose,
+          hideCloseButton: hideCloseButton,
           onHidePermanently: onHidePermanently,
           hidePermanentlyLabel: hidePermanentlyLabel,
-          closeIconColor: MESSAGE_CLOSE_ICON_COLOR[validColor]
+          closeIconColor: MESSAGE_CLOSE_ICON_COLOR[color]
         })]
       })
     })

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__/MessageNotification.test.js

@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+import { InfoCircle, Pin02 } from '@ncds/ui-admin-icon';
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
@@ -18,16 +19,12 @@ const SELECTOR = {
   CLOSE_BUTTON: '.ncua-message-notification__close-button'
 };
 const mounted = [];
-function renderMessageNotification() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+function mount(element) {
   const container = document.createElement('div');
   document.body.appendChild(container);
   const root = createRoot(container);
   act(() => {
-    root.render(/*#__PURE__*/createElement(MessageNotification, {
-      title: '알림 제목',
-      ...props
-    }));
+    root.render(element);
   });
   mounted.push({
     root,
@@ -35,6 +32,20 @@ function renderMessageNotification() {
   });
   return container;
 }
+function renderMessageNotification() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return mount(/*#__PURE__*/createElement(MessageNotification, {
+    title: '알림 제목',
+    ...props
+  }));
+}
+/** 아이콘 컴포넌트를 단독 렌더해 `path[d]` 를 얻는다. 아이콘 판정은 d 비교로 한다. */
+function iconPathD(Icon) {
+  return mount(/*#__PURE__*/createElement(Icon)).querySelector('path')?.getAttribute('d') ?? null;
+}
+function renderedIconPathD(container) {
+  return container.querySelector(`${SELECTOR.ICON} svg path`)?.getAttribute('d') ?? null;
+}
 afterEach(() => {
   for (const {
     root,
@@ -143,17 +154,48 @@ describe('MessageNotification (React) — DOM 구조 계약', () => {
     expect(hideLink?.className.split(' ').filter(Boolean).sort()).toEqual(['ncua-message-notification__hide-link', 'ncua-notification__action-button']);
   });
 });
-describe('MessageNotification (React) — 공개 API 회귀 방지', () => {
-  it('지원하지 않는 color("info")는 neutral로 폴백한다', () => {
-    // Given/When: message 타입이 지원하지 않는 info 색상을 넘기면
+describe('MessageNotification (React) — color="info" (#568)', () => {
+  it('R-01: color="info" 는 neutral 로 폴백하지 않고 --info 수식자로 렌더한다', () => {
+    // Given/When: variant 미지정, info 색상으로 렌더하면
+    const root = renderMessageNotification({
+      color: 'info'
+    }).querySelector(SELECTOR.ROOT);
+    // Then: info 수식자가 있고 neutral 수식자는 없다
+    expect(root?.classList.contains('ncua-message-notification--info')).toBe(true);
+    expect(root?.classList.contains('ncua-message-notification--neutral')).toBe(false);
+  });
+  it('R-02: 기본 info 아이콘은 neutral 과 같은 Pin02 다', () => {
+    // Given/When: variant 미지정, info 색상으로 렌더하면
     const container = renderMessageNotification({
       color: 'info'
     });
-    // Then: neutral 수식자로 렌더되고 info 수식자는 없다
-    const root = container.querySelector(SELECTOR.ROOT);
-    expect(root?.classList.contains('ncua-message-notification--neutral')).toBe(true);
-    expect(root?.classList.contains('ncua-message-notification--info')).toBe(false);
+    // Then: 아이콘 path 가 Pin02 와 같다
+    const expected = iconPathD(Pin02);
+    expect(expected).not.toBeNull();
+    expect(renderedIconPathD(container)).toBe(expected);
   });
+  it('R-03: info 의 FeaturedIcon 은 neutral·md 로 렌더한다 (violet 톤은 SCSS 가 덮는다)', () => {
+    // Given/When: variant 미지정, info 색상으로 렌더하면
+    const icon = renderMessageNotification({
+      color: 'info'
+    }).querySelector(SELECTOR.ICON);
+    // Then: FeaturedIcon 에는 info 색이 없으므로 neutral 수식자와 md 사이즈가 유지된다
+    expect(icon?.classList.contains('ncua-featured-icon--neutral')).toBe(true);
+    expect(icon?.classList.contains('ncua-featured-icon--md')).toBe(true);
+  });
+  it('R-04: block 의 info 아이콘은 InfoCircle 을 유지한다', () => {
+    // Given/When: block 변형에 info 색상으로 렌더하면
+    const container = renderMessageNotification({
+      variant: 'block',
+      color: 'info'
+    });
+    // Then: 아이콘 path 가 InfoCircle 과 같다 (#536 회귀)
+    const expected = iconPathD(InfoCircle);
+    expect(expected).not.toBeNull();
+    expect(renderedIconPathD(container)).toBe(expected);
+  });
+});
+describe('MessageNotification (React) — 공개 API 회귀 방지', () => {
   it('닫기/다시 보지 않기 클릭 시 핸들러가 호출되고 접근성 속성이 유지된다', () => {
     // Given: 핸들러를 지정해 렌더하고
     const onClose = vi.fn();

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