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

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

@@ -40,16 +40,14 @@ class MessageNotification {
       supportTextLinkTarget
     } = this.options;
     const isBlock = variant === 'block';
-    // default 는 neutral, error, warning, success 4가지 색상만 지원 — info 는 block 에서만 유지한다.
-    const actualColor = !isBlock && color === 'info' ? 'neutral' : color;
     const wrapperClassName = [isBlock ? _const.CLASS_NAMES.MESSAGE.BLOCK : '', className].filter(Boolean).join(' ');
-    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.MESSAGE.BASE, actualColor, wrapperClassName);
-    const featuredIconElement = this.createFeaturedIcon(actualColor, isBlock);
+    const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.MESSAGE.BASE, color, wrapperClassName);
+    const featuredIconElement = this.createFeaturedIcon(color, isBlock);
     wrapper.innerHTML = (0, _sanitize.sanitizeHtml)((0, _messageTemplate.buildMessageTemplate)({
       title,
       supportingText,
       supportTextLink: isBlock ? supportTextLink : undefined,
-      color: actualColor,
+      color,
       actions,
       onClose,
       hideCloseButton,
@@ -66,15 +64,14 @@ class MessageNotification {
     }
     return wrapper;
   }
-  /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). */
+  /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). info 아이콘만 variant 별로 다르다. */
   createFeaturedIcon(color, isBlock) {
-    const iconFunction = _const.MESSAGE_ICON_MAP[color];
-    if (!iconFunction) return null;
+    const iconFunction = (isBlock ? _const.MESSAGE_BLOCK_ICON_MAP : _const.MESSAGE_ICON_MAP)[color];
     const sizes = isBlock ? _const.MESSAGE_BLOCK_SIZES : _const.MESSAGE_SIZES;
     this.featuredIcon = _featuredIcon.FeaturedIcon.create({
       svgString: iconFunction(sizes.ICON_PIXEL),
       theme: 'light-circle',
-      // FeaturedIcon 에는 info 색이 없다. block+info 의 violet 톤은 message SCSS 가 덮어쓴다.
+      // FeaturedIcon 에는 info 색이 없다. info 의 violet 톤은 message SCSS 가 덮어쓴다.
       color: color === 'info' ? 'neutral' : color,
       size: sizes.FEATURED_ICON,
       // React 구현과 동일하게 `__icon`(flex-shrink: 0)을 부여한다.

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

@@ -3,7 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SVG_ICONS = exports.MESSAGE_ICON_MAP = exports.ICON_MAP = exports.FULL_WIDTH_ICON_MAP = exports.FLOATING_ICON_MAP = void 0;
+exports.SVG_ICONS = exports.MESSAGE_ICON_MAP = exports.MESSAGE_BLOCK_ICON_MAP = exports.ICON_MAP = exports.FULL_WIDTH_ICON_MAP = exports.FLOATING_ICON_MAP = void 0;
+/**
+ * message block 변형의 InfoCircle. `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어
+ * 쓰지 않는다 (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
+ */
+const INFO_CIRCLE_ICON = size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`;
 // SVG 아이콘들 (크기는 동적으로 설정)
 const SVG_ICONS = exports.SVG_ICONS = {
   'pin-02': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167"></path></svg>`,
@@ -29,12 +34,16 @@ const FULL_WIDTH_ICON_MAP = exports.FULL_WIDTH_ICON_MAP = {
   info: SVG_ICONS['info-circle']
 };
 const ICON_MAP = exports.ICON_MAP = FULL_WIDTH_ICON_MAP;
-/**
- * message 타입 아이콘. floating 과 같은 4색에 block 변형 전용 info 를 더한다.
- * `SVG_ICONS['info-circle']`은 full-width 전용 class·color 가 박혀 있어 쓰지 않는다
- * (`.ncua-full-width-notification__icon`은 모바일에서 숨겨진다).
- */
+/** message 기본 타입 아이콘. floating 과 같은 4색에 info(neutral 과 같은 핀)를 더한다. */
 const MESSAGE_ICON_MAP = exports.MESSAGE_ICON_MAP = {
-  ...FLOATING_ICON_MAP,
-  info: size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`
+  neutral: SVG_ICONS['pin-02'],
+  error: SVG_ICONS['alert-triangle'],
+  warning: SVG_ICONS['alert-circle'],
+  success: SVG_ICONS['check-circle'],
+  info: SVG_ICONS['pin-02']
+};
+/** block 변형 아이콘. info 만 InfoCircle 로 다르다 (#536 유지). */
+const MESSAGE_BLOCK_ICON_MAP = exports.MESSAGE_BLOCK_ICON_MAP = {
+  ...MESSAGE_ICON_MAP,
+  info: INFO_CIRCLE_ICON
 };

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

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

package/dist/cjs/constant/notification.js

@@ -24,7 +24,6 @@ const HIDE_PERMANENTLY_LABEL = exports.HIDE_PERMANENTLY_LABEL = {
  * message 타입 닫기(X) 아이콘의 color 별 색.
  *
  * React(`MessageNotification.tsx`)와 Vanilla(`messageTemplate.ts`)가 함께 참조하는 단일 출처다.
- * `info`는 `variant: 'block'`에서만 렌더된다(default 는 neutral 로 폴백).
  */
 const MESSAGE_CLOSE_ICON_COLOR = exports.MESSAGE_CLOSE_ICON_COLOR = {
   neutral: _color.COLOR.gray700,

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

@@ -35,7 +35,7 @@ const iconMap = {
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertCircle,
   success: _uiAdminIcon.CheckCircle
-  // info 는 full-width 전용이라 floating 아이콘 매핑 없음.
+  // info 는 floating 에서 지원하지 않으므로 아이콘 매핑 없음.
 };
 /**
  * NotificationColor → FeaturedIconColor 매핑.

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

@@ -12,12 +12,17 @@ var _notification = require("../../../../constant/notification");
 var _MessageNotificationParts = require("./MessageNotificationParts");
 var _useAutoClose = require("./useAutoClose");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const iconMap = {
+const DEFAULT_ICON_MAP = {
   neutral: _uiAdminIcon.Pin02,
   error: _uiAdminIcon.AlertTriangle,
   warning: _uiAdminIcon.AlertCircle,
   success: _uiAdminIcon.CheckCircle,
-  // info 는 variant="block" 에서만 도달한다 (default 는 neutral 로 폴백).
+  // 디자인 기준 default 의 info 는 neutral 과 같은 핀이다.
+  info: _uiAdminIcon.Pin02
+};
+// block 의 info 는 InfoCircle 을 유지한다 (#536).
+const BLOCK_ICON_MAP = {
+  ...DEFAULT_ICON_MAP,
   info: _uiAdminIcon.InfoCircle
 };
 const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -39,10 +44,9 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
     ...rest
   } = _ref;
   const isBlock = variant === 'block';
-  // default 는 neutral, error, warning, success 4가지 색상만 지원 — info 는 block 에서만 유지한다.
-  const validColor = !isBlock && color === 'info' ? 'neutral' : color;
-  // FeaturedIcon 에는 info 색이 없다. block+info 의 violet 톤은 message SCSS 가 덮어쓴다.
-  const featuredIconColor = validColor === 'info' ? 'neutral' : validColor;
+  const iconMap = isBlock ? BLOCK_ICON_MAP : DEFAULT_ICON_MAP;
+  // FeaturedIcon 에는 info 색이 없다. info 의 violet 톤은 message SCSS 가 덮어쓴다.
+  const featuredIconColor = color === 'info' ? 'neutral' : color;
   // message 는 부모가 언마운트로 닫으므로 hideCloseButton 기본 autoClose 를 적용하지 않는다.
   const shouldRemove = (0, _useAutoClose.useAutoClose)({
     autoClose,
@@ -53,7 +57,7 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
   }
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${validColor}`, {
+    className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${color}`, {
       'ncua-message-notification--block': isBlock
     }, className),
     role: "alert",
@@ -67,7 +71,7 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
           supportingText: supportingText,
           supportTextLink: isBlock ? supportTextLink : undefined,
           supportTextLinkTarget: supportTextLinkTarget,
-          icon: Icon || iconMap[validColor],
+          icon: Icon || iconMap[color],
           iconColor: featuredIconColor,
           iconSize: isBlock ? 'sm' : 'md'
         }), (0, _jsxRuntime.jsx)(_MessageNotificationParts.MessageNotificationActions, {
@@ -76,7 +80,7 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
           hideCloseButton: hideCloseButton,
           onHidePermanently: onHidePermanently,
           hidePermanentlyLabel: hidePermanentlyLabel,
-          closeIconColor: _notification.MESSAGE_CLOSE_ICON_COLOR[validColor]
+          closeIconColor: _notification.MESSAGE_CLOSE_ICON_COLOR[color]
         })]
       })
     })

package/dist/cjs/src/components/overlays/notification/__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();