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

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

@@ -6,7 +6,6 @@ import { type CalloutNotificationProps, type CalloutNotificationWidth } from './
 type NotificationType = 'floating' | 'full-width' | 'message' | 'callout';
 type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
 type NotificationSize = 'desktop' | 'mobile';
-type NotificationVariant = 'default' | 'block';
 /** 텍스트 링크(`supportTextLink`)를 여는 대상. `'_blank'`이면 새 탭 + `rel="noopener noreferrer"`. */
 type NotificationLinkTarget = '_self' | '_blank';
 interface NotificationAction {
@@ -39,7 +38,7 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
      */
     supportingText?: ReactNode;
     /**
-     * 알림 아이콘 컴포넌트 (지정하지 않으면 variant에 따라 기본 아이콘 사용)
+     * 알림 아이콘 컴포넌트 (지정하지 않으면 color에 따라 기본 아이콘 사용)
      */
     icon?: SlotIconComponent;
     /**
@@ -52,14 +51,8 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
      */
     onClose?: () => void;
     /**
-     * 닫기(X) 버튼 숨김 여부. floating · full-width · message 타입에서 동작한다.
-     * `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
-     * autoClose 만료(및 floating의 모바일 전환) 시 `onClose` 호출은 그대로 유지되므로,
-     * "닫기 버튼 없는 자동 닫힘 토스트"(DES-SPEC-027 §5.3)에서 부모가 닫힘 시점을 받을 수 있다.
-     *
-     * floating(토스트)은 닫을 수단이 사라지지 않도록 `autoClose` 미지정 시 3초 뒤 자동으로 닫힌다
-     * (부모가 직접 언마운트해 닫으려면 `autoClose={0}` 명시). full-width · message 는 부모가 언마운트로 닫으므로
-     * `autoClose`를 명시했을 때만 자동으로 닫힌다.
+     * 닫기 버튼 숨김 여부
+     * `true`이면 floating 타입은 autoClose 미지정 시 3초 후 자동으로 닫힘 (onClose 호출, 끄려면 `autoClose={0}`)
      * @default false
      */
     hideCloseButton?: boolean;
@@ -74,8 +67,7 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
     actions?: NotificationAction[];
     /**
      * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
-     * floating, full-width, message 타입에서 동작
-     * 미지정 시 0. 단 floating 에서 `hideCloseButton`이면 3초(DES-SPEC-027 §5.3).
+     * floating, full-width, message 타입에서 동작 (floating + hideCloseButton은 미지정 시 3초)
      * @default 0
      */
     autoClose?: number;
@@ -94,27 +86,15 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
     hidePermanentlyLabel?: ReactNode;
     /**
      * supportingText 에 연결할 링크 URL (선택사항)
-     * full-width 타입, message 타입의 `variant="block"`에서 사용 가능
+     * full-width 타입에서만 사용 가능. http/https(상대경로 포함) URL만 링크로 렌더하고 그 외는 텍스트로 렌더한다.
      */
     supportTextLink?: string;
     /**
-     * 텍스트 링크를 여는 대상 (선택사항). `supportTextLink`가 렌더될 때만 동작한다.
-     * `'_blank'`이면 새 탭으로 열고 `rel="noopener noreferrer"`를 함께 붙인다.
-     * full-width 타입, message 타입의 `variant="block"`에서 사용 가능
+     * 텍스트 링크를 여는 대상 (선택사항). `'_blank'`이면 새 탭 + `rel="noopener noreferrer"`
+     * full-width 타입에서만 사용 가능
      * @default '_self'
      */
     supportTextLinkTarget?: NotificationLinkTarget;
-    /**
-     * message 타입의 표시 변형 (선택사항). message 타입에서만 동작한다.
-     *
-     * - `'default'`: 기존 message (color 별 배경·테두리, 제목 + 본문 2행)
-     * - `'block'`: 서브 페이지 공지용. 흰 배경·gray-100 테두리·shadow-sm, FeaturedIcon sm,
-     *   제목 + 텍스트 링크 1행(`supportingText` 가 링크 텍스트, `supportTextLink` 가 href).
-     *   info 아이콘은 InfoCircle.
-     *
-     * @default 'default'
-     */
-    variant?: NotificationVariant;
     /**
      * 너비 동작 (선택사항)
      * callout 타입에서만 사용 가능. 미지정 시 부모 너비를 채운다(100%). 'fit' 은 콘텐츠 너비에 맞춘다
@@ -135,6 +115,6 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
     portal?: boolean;
 }
 declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
-export type { NotificationType, NotificationColor, NotificationSize, NotificationVariant, NotificationLinkTarget, NotificationAction, NotificationProps, };
+export type { NotificationType, NotificationColor, NotificationSize, NotificationLinkTarget, NotificationAction, NotificationProps, };
 export type { CalloutNotificationProps, CalloutNotificationWidth };
 export { Notification };

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

@@ -7,7 +7,9 @@ import { MessageNotification } from './MessageNotification';
 const Notification = forwardRef(
 // 단일 type 에만 유효한 prop 은 rest 에서 분리해 해당 분기로만 명시 전달한다.
 // rest 에 남기면 다른 type 의 하위 컴포넌트가 div 로 스프레드해 DOM 속성으로 출력된다.
-({ type = 'floating', color = 'neutral', width, supportTextLink, supportTextLinkTarget, variant, ...rest }, ref) => {
+({ type = 'floating', color = 'neutral', width, supportTextLink, supportTextLinkTarget, ...props }, ref) => {
+    // #580 에서 제거된 message `variant` 가 런타임에 넘어와도 DOM 속성으로 새지 않게 어떤 type 에도 전달하지 않는다.
+    const { variant: _variant, ...rest } = props;
     if (type === 'floating') {
         return _jsx(FloatingNotification, { color: color, ...rest, ref: ref });
     }
@@ -15,7 +17,7 @@ const Notification = forwardRef(
         return (_jsx(FullWidthNotification, { color: color, supportTextLink: supportTextLink, supportTextLinkTarget: supportTextLinkTarget, ...rest, ref: ref }));
     }
     if (type === 'message') {
-        return (_jsx(MessageNotification, { color: color, variant: variant, supportTextLink: supportTextLink, supportTextLinkTarget: supportTextLinkTarget, ...rest, ref: ref }));
+        return _jsx(MessageNotification, { color: color, ...rest, ref: ref });
     }
     if (type === 'callout') {
         // 나머지 3개 type 이 공유하는 prop 은 callout 이 지원하지 않으므로 여기서 제외한다.

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

@@ -1,5 +1,5 @@
 // @vitest-environment jsdom
-import { InfoCircle, Pin02 } from '@ncds/ui-admin-icon';
+import { Pin02 } from '@ncds/ui-admin-icon';
 import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
@@ -127,14 +127,14 @@ describe('MessageNotification (React) — DOM 구조 계약', () => {
 });
 describe('MessageNotification (React) — color="info" (#568)', () => {
     it('R-01: color="info" 는 neutral 로 폴백하지 않고 --info 수식자로 렌더한다', () => {
-        // Given/When: variant 미지정, info 색상으로 렌더하면
+        // Given/When: 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 색상으로 렌더하면
+        // Given/When: info 색상으로 렌더하면
         const container = renderMessageNotification({ color: 'info' });
         // Then: 아이콘 path 가 Pin02 와 같다
         const expected = iconPathD(Pin02);
@@ -142,17 +142,20 @@ describe('MessageNotification (React) — color="info" (#568)', () => {
         expect(renderedIconPathD(container)).toBe(expected);
     });
     it('R-03: info 의 FeaturedIcon 은 neutral·md 로 렌더한다 (violet 톤은 SCSS 가 덮는다)', () => {
-        // Given/When: variant 미지정, info 색상으로 렌더하면
+        // Given/When: 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);
+    it('R-04: 런타임에 variant="block" 이 넘어와도 info 아이콘은 Pin02 다 (#580 Block 변형 제거)', () => {
+        // Given/When: 제거된 variant prop 을 런타임 입력으로 넘겨 info 색상으로 렌더하면
+        const container = renderMessageNotification({
+            variant: 'block',
+            color: 'info',
+        });
+        // Then: 아이콘 path 가 Pin02 와 같다
+        const expected = iconPathD(Pin02);
         expect(expected).not.toBeNull();
         expect(renderedIconPathD(container)).toBe(expected);
     });

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

@@ -65,6 +65,11 @@ describe('Notification — type 별 위임', () => {
         const element = render({ type, supportingText: '보조', supportTextLink: 'https://example.com' });
         expect(element?.hasAttribute('supporttextlink')).toBe(false);
     });
+    it.each(['floating', 'full-width', 'message'])('type=%s 에 제거된 variant="block" 을 주어도 DOM 속성으로 새지 않는다 (#580)', (type) => {
+        const element = render({ type, variant: 'block' });
+        expect(element).not.toBeNull();
+        expect(element?.hasAttribute('variant')).toBe(false);
+    });
     it('정의되지 않은 type 은 아무것도 렌더하지 않는다', () => {
         const element = render({ type: 'banner' });
         expect(element).toBeNull();

package/dist/temp/src/components/overlays/notification/__tests__/supportTextLink.test.js

@@ -4,7 +4,6 @@ import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { afterEach, describe, expect, it } from 'vitest';
 import { FullWidthNotification } from '../FullWidthNotification';
-import { MessageNotification } from '../MessageNotification';
 /**
  * React 텍스트 링크(`supportTextLink`)의 프로토콜 검사 (#538 리뷰 H2).
  * Vanilla `renderSupportingText` 와 같은 정책 — unsafe URL 이면 링크 없이 텍스트만 렌더한다.
@@ -29,16 +28,6 @@ function mount(element) {
     return container;
 }
 const IMPLEMENTATIONS = [
-    [
-        'MessageNotification(block)',
-        (supportTextLink) => mount(createElement(MessageNotification, {
-            title: '공지',
-            variant: 'block',
-            supportingText: '자세히 보기',
-            supportTextLink,
-        })),
-        '.ncua-message-notification__supporting-text',
-    ],
     [
         'FullWidthNotification',
         (supportTextLink) => mount(createElement(FullWidthNotification, {