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

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 {
@@ -21,16 +21,14 @@ export class MessageNotification {
     createElement() {
         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,
@@ -47,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/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';
 /**

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;

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,

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

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

package/dist/temp/src/components/overlays/notification/MessageNotification.d.ts

@@ -54,7 +54,7 @@ interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      */
     hidePermanentlyLabel?: ReactNode;
     /**
-     * 표시 변형. `'block'`은 서브 페이지 공지용(흰 배경, FeaturedIcon sm, 제목 + 텍스트 링크 1행, info 유지)
+     * 표시 변형. `'block'`은 서브 페이지 공지용(흰 배경, FeaturedIcon sm, 제목 + 텍스트 링크 1행)
      * @default 'default'
      */
     variant?: NotificationVariant;

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

@@ -5,26 +5,27 @@ import { forwardRef } from 'react';
 import { MESSAGE_CLOSE_ICON_COLOR } from '../../../../constant/notification';
 import { MessageNotificationActions, MessageNotificationContent } from './MessageNotificationParts';
 import { useAutoClose } from './useAutoClose';
-const iconMap = {
+const DEFAULT_ICON_MAP = {
     neutral: Pin02,
     error: AlertTriangle,
     warning: AlertCircle,
     success: CheckCircle,
-    // info 는 variant="block" 에서만 도달한다 (default 는 neutral 로 폴백).
-    info: InfoCircle,
+    // 디자인 기준 default 의 info 는 neutral 과 같은 핀이다.
+    info: Pin02,
 };
+// block 의 info 는 InfoCircle 을 유지한다 (#536).
+const BLOCK_ICON_MAP = { ...DEFAULT_ICON_MAP, info: InfoCircle };
 const MessageNotification = forwardRef(({ title, supportingText, icon: Icon, color = 'neutral', onClose, hideCloseButton = false, autoClose, className, actions, onHidePermanently, hidePermanentlyLabel, variant = 'default', supportTextLink, supportTextLinkTarget, ...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}`, { 'ncua-message-notification--block': isBlock }, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-message-notification__container", children: _jsxs("div", { className: "ncua-message-notification__content", children: [_jsx(MessageNotificationContent, { title: title, supportingText: supportingText, supportTextLink: isBlock ? supportTextLink : undefined, supportTextLinkTarget: supportTextLinkTarget, icon: Icon || iconMap[validColor], iconColor: featuredIconColor, iconSize: isBlock ? 'sm' : 'md' }), _jsx(MessageNotificationActions, { actions: actions, onClose: onClose, hideCloseButton: hideCloseButton, onHidePermanently: onHidePermanently, hidePermanentlyLabel: hidePermanentlyLabel, closeIconColor: MESSAGE_CLOSE_ICON_COLOR[validColor] })] }) }) }));
+    return (_jsx("div", { ref: ref, className: classNames('ncua-message-notification', `ncua-message-notification--${color}`, { 'ncua-message-notification--block': isBlock }, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-message-notification__container", children: _jsxs("div", { className: "ncua-message-notification__content", children: [_jsx(MessageNotificationContent, { title: title, supportingText: supportingText, supportTextLink: isBlock ? supportTextLink : undefined, supportTextLinkTarget: supportTextLinkTarget, 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[color] })] }) }) }));
 });
 MessageNotification.displayName = 'MessageNotification';
 export { MessageNotification };

package/dist/temp/src/components/overlays/notification/Notification.d.ts

@@ -107,10 +107,10 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
     /**
      * message 타입의 표시 변형 (선택사항). message 타입에서만 동작한다.
      *
-     * - `'default'`: 기존 message (color 별 배경·테두리, 제목 + 본문 2행, info → neutral 폴백)
+     * - `'default'`: 기존 message (color 별 배경·테두리, 제목 + 본문 2행)
      * - `'block'`: 서브 페이지 공지용. 흰 배경·gray-100 테두리·shadow-sm, FeaturedIcon sm,
      *   제목 + 텍스트 링크 1행(`supportingText` 가 링크 텍스트, `supportTextLink` 가 href).
-     *   `color="info"` 를 그대로 렌더한다.
+     *   info 아이콘은 InfoCircle.
      *
      * @default 'default'
      */

package/dist/temp/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,26 @@ const SELECTOR = {
     CLOSE_BUTTON: '.ncua-message-notification__close-button',
 };
 const mounted = [];
-function renderMessageNotification(props = {}) {
+function mount(element) {
     const container = document.createElement('div');
     document.body.appendChild(container);
     const root = createRoot(container);
     act(() => {
-        root.render(createElement(MessageNotification, { title: '알림 제목', ...props }));
+        root.render(element);
     });
     mounted.push({ root, container });
     return container;
 }
+function renderMessageNotification(props = {}) {
+    return mount(createElement(MessageNotification, { title: '알림 제목', ...props }));
+}
+/** 아이콘 컴포넌트를 단독 렌더해 `path[d]` 를 얻는다. 아이콘 판정은 d 비교로 한다. */
+function iconPathD(Icon) {
+    return mount(createElement(Icon)).querySelector('path')?.getAttribute('d') ?? null;
+}
+function renderedIconPathD(container) {
+    return container.querySelector(`${SELECTOR.ICON} svg path`)?.getAttribute('d') ?? null;
+}
 afterEach(() => {
     for (const { root, container } of mounted.splice(0)) {
         act(() => {
@@ -114,15 +125,39 @@ describe('MessageNotification (React) — DOM 구조 계약', () => {
         ]);
     });
 });
-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();