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

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

@@ -46,6 +46,7 @@ const renderNotification = function () {
   container?.remove();
   root = null;
   container = null;
+  _vitest.vi.restoreAllMocks();
 });
 (0, _vitest.describe)('CalloutNotification — width prop', () => {
   (0, _vitest.it)('width 미지정 시 너비 클래스를 붙이지 않는다 (부모 너비를 채우는 기본 스타일 유지)', () => {
@@ -94,6 +95,7 @@ const renderNotification = function () {
   });
   // Notification 의 callout 분기가 제외하는 prop 전체. 여기 누락된 prop 은 DOM 속성으로 출력된다.
   (0, _vitest.it)('callout 이 지원하지 않는 prop 은 DOM 속성으로 새지 않는다', () => {
+    const consoleError = _vitest.vi.spyOn(console, 'error').mockImplementation(() => undefined);
     const element = renderNotification({
       icon: () => null,
       supportingText: '보조 문구',
@@ -106,12 +108,16 @@ const renderNotification = function () {
       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']) {
       (0, _vitest.expect)(element.hasAttribute(attr), attr).toBe(false);
     }
     (0, _vitest.expect)(element.textContent).toBe('안내 문구');
+    // 불리언 true 는 React 가 미지 속성으로 출력하지 않아 hasAttribute 로는 누수를 못 잡는다 — 경고 로그로 검출한다.
+    const leaked = consoleError.mock.calls.some(call => call.some(arg => String(arg).includes('hideCloseButton')));
+    (0, _vitest.expect)(leaked).toBe(false);
   });
   (0, _vitest.it)('ref 를 callout 루트 엘리먼트로 전달한다', () => {
     let captured = null;

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

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

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

@@ -4,6 +4,7 @@ var _react = require("react");
 var _client = require("react-dom/client");
 var _testUtils = require("react-dom/test-utils");
 var _vitest = require("vitest");
+var _notification = require("../../../../../constant/notification");
 var _Notification = require("../Notification");
 // @vitest-environment jsdom
 
@@ -80,4 +81,179 @@ const render = props => {
     });
     (0, _vitest.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;
+(0, _vitest.describe)('Notification — hideCloseButton', () => {
+  (0, _vitest.afterEach)(() => {
+    _vitest.vi.useRealTimers();
+  });
+  (0, _vitest.it)('R-01: floating — onClose 가 있어도 hideCloseButton 이면 닫기 버튼을 렌더하지 않는다', () => {
+    const element = render({
+      type: 'floating',
+      onClose: _vitest.vi.fn(),
+      hideCloseButton: true
+    });
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON.floating)).toBeNull();
+  });
+  (0, _vitest.it)('R-02: full-width — onClose 가 있어도 hideCloseButton 이면 닫기 버튼을 렌더하지 않는다', () => {
+    const element = render({
+      type: 'full-width',
+      onClose: _vitest.vi.fn(),
+      hideCloseButton: true
+    });
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON['full-width'])).toBeNull();
+  });
+  (0, _vitest.it)('R-03: message — hideCloseButton 이면 닫기 버튼과 빈 footer 컨테이너를 모두 렌더하지 않는다', () => {
+    const element = render({
+      type: 'message',
+      onClose: _vitest.vi.fn(),
+      hideCloseButton: true
+    });
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON.message)).toBeNull();
+    (0, _vitest.expect)(element?.querySelector(MESSAGE_FOOTER)).toBeNull();
+  });
+  _vitest.it.each(['floating', 'full-width', 'message'])('R-04: type=%s — hideCloseButton 미지정(기본 false)이면 onClose 만으로 닫기 버튼을 렌더한다', type => {
+    const element = render({
+      type,
+      onClose: _vitest.vi.fn()
+    });
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON[type])).not.toBeNull();
+  });
+  _vitest.it.each(['floating', 'full-width', 'message'])('R-05: type=%s — onClose 없이 hideCloseButton 만 주면 닫기 버튼 없이 오류 없이 렌더한다', type => {
+    const element = render({
+      type,
+      hideCloseButton: true
+    });
+    (0, _vitest.expect)(element).not.toBeNull();
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON[type])).toBeNull();
+  });
+  (0, _vitest.it)('R-06: floating — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'floating',
+      autoClose: AUTO_CLOSE_MS,
+      hideCloseButton: true,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(AUTO_CLOSE_MS);
+    });
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(container?.querySelector('.ncua-floating-notification')).toBeNull();
+  });
+  (0, _vitest.it)('R-07: full-width — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'full-width',
+      autoClose: AUTO_CLOSE_MS,
+      hideCloseButton: true,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(AUTO_CLOSE_MS);
+    });
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(container?.querySelector('.ncua-full-width-notification')).toBeNull();
+  });
+  (0, _vitest.it)('R-09: message — hideCloseButton + onHidePermanently 이면 footer 에 다시 보지 않기만 렌더한다', () => {
+    const element = render({
+      type: 'message',
+      onClose: _vitest.vi.fn(),
+      hideCloseButton: true,
+      onHidePermanently: _vitest.vi.fn()
+    });
+    (0, _vitest.expect)(element?.querySelector(MESSAGE_FOOTER)).not.toBeNull();
+    (0, _vitest.expect)(element?.querySelector(MESSAGE_HIDE_LINK)).not.toBeNull();
+    (0, _vitest.expect)(element?.querySelector(CLOSE_BUTTON.message)).toBeNull();
+  });
+  (0, _vitest.it)('R-10: message — hideCloseButton 이어도 autoClose 만료 시 onClose 가 1회 호출되고 DOM 에서 제거된다', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'message',
+      autoClose: AUTO_CLOSE_MS,
+      hideCloseButton: true,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(AUTO_CLOSE_MS);
+    });
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(container?.querySelector('.ncua-message-notification')).toBeNull();
+  });
+});
+(0, _vitest.describe)('Notification — hideCloseButton 기본 autoClose', () => {
+  (0, _vitest.afterEach)(() => {
+    _vitest.vi.useRealTimers();
+  });
+  (0, _vitest.it)('R-11: floating — hideCloseButton 만 주고 autoClose 를 생략하면 3초 뒤 onClose 가 호출되고 제거된다', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'floating',
+      hideCloseButton: true,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(_notification.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS - 1);
+    });
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(1);
+    });
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(container?.firstElementChild).toBeNull();
+  });
+  _vitest.it.each(['full-width', 'message'])('R-14: type=%s — hideCloseButton 만 주고 autoClose 를 생략해도 자동으로 닫히지 않는다 (부모 언마운트 용도)', type => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type,
+      hideCloseButton: true,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(_notification.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+    });
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+    (0, _vitest.expect)(container?.firstElementChild).not.toBeNull();
+  });
+  (0, _vitest.it)('R-12: floating — hideCloseButton + autoClose={0} 을 명시하면 자동으로 닫히지 않는다 (부모 언마운트 용도)', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'floating',
+      hideCloseButton: true,
+      autoClose: 0,
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(_notification.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+    });
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+    (0, _vitest.expect)(container?.querySelector('.ncua-floating-notification')).not.toBeNull();
+  });
+  (0, _vitest.it)('R-13: floating — hideCloseButton 이 아니면 autoClose 생략 시 기본 자동 닫힘이 없다 (회귀)', () => {
+    _vitest.vi.useFakeTimers();
+    const onClose = _vitest.vi.fn();
+    render({
+      type: 'floating',
+      onClose
+    });
+    (0, _testUtils.act)(() => {
+      _vitest.vi.advanceTimersByTime(_notification.HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS * 2);
+    });
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+    (0, _vitest.expect)(container?.querySelector('.ncua-floating-notification')).not.toBeNull();
+  });
 });

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

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