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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/dist/cjs/assets/scripts/notification/FloatingNotification.js +4 -1
  2. package/dist/cjs/assets/scripts/notification/FullWidthNotification.js +5 -1
  3. package/dist/cjs/assets/scripts/notification/MessageNotification.js +7 -16
  4. package/dist/cjs/assets/scripts/notification/const/classNames.js +0 -2
  5. package/dist/cjs/assets/scripts/notification/const/icons.js +1 -11
  6. package/dist/cjs/assets/scripts/notification/const/index.js +0 -12
  7. package/dist/cjs/assets/scripts/notification/const/sizes.js +1 -6
  8. package/dist/cjs/assets/scripts/notification/messageTemplate.js +4 -2
  9. package/dist/cjs/assets/scripts/notification/utils.js +13 -5
  10. package/dist/cjs/src/components/overlays/notification/MessageNotification.js +4 -19
  11. package/dist/cjs/src/components/overlays/notification/MessageNotificationParts.js +7 -18
  12. package/dist/cjs/src/components/overlays/notification/Notification.js +6 -5
  13. package/dist/cjs/src/components/overlays/notification/__tests__/MessageNotification.test.js +7 -7
  14. package/dist/cjs/src/components/overlays/notification/__tests__/Notification.test.js +8 -0
  15. package/dist/cjs/src/components/overlays/notification/__tests__/supportTextLink.test.js +1 -7
  16. package/dist/cjs/src/generated/scoped-css.js +1 -1
  17. package/dist/cjs/src/utils/url/isSafeUrl.js +1 -1
  18. package/dist/cjs/vitest.config.js +12 -1
  19. package/dist/esm/assets/scripts/notification/FloatingNotification.js +4 -1
  20. package/dist/esm/assets/scripts/notification/FullWidthNotification.js +5 -1
  21. package/dist/esm/assets/scripts/notification/MessageNotification.js +9 -18
  22. package/dist/esm/assets/scripts/notification/const/classNames.js +0 -2
  23. package/dist/esm/assets/scripts/notification/const/icons.js +0 -10
  24. package/dist/esm/assets/scripts/notification/const/index.js +2 -2
  25. package/dist/esm/assets/scripts/notification/const/sizes.js +0 -5
  26. package/dist/esm/assets/scripts/notification/messageTemplate.js +4 -2
  27. package/dist/esm/assets/scripts/notification/utils.js +11 -4
  28. package/dist/esm/src/components/overlays/notification/MessageNotification.js +5 -20
  29. package/dist/esm/src/components/overlays/notification/MessageNotificationParts.js +7 -18
  30. package/dist/esm/src/components/overlays/notification/Notification.js +6 -5
  31. package/dist/esm/src/components/overlays/notification/__tests__/MessageNotification.test.js +8 -8
  32. package/dist/esm/src/components/overlays/notification/__tests__/Notification.test.js +8 -0
  33. package/dist/esm/src/components/overlays/notification/__tests__/supportTextLink.test.js +1 -7
  34. package/dist/esm/src/generated/scoped-css.js +1 -1
  35. package/dist/esm/src/utils/url/isSafeUrl.js +1 -1
  36. package/dist/esm/vitest.config.js +12 -1
  37. package/dist/temp/assets/scripts/notification/FloatingNotification.js +1 -1
  38. package/dist/temp/assets/scripts/notification/FullWidthNotification.js +1 -1
  39. package/dist/temp/assets/scripts/notification/MessageNotification.d.ts +1 -1
  40. package/dist/temp/assets/scripts/notification/MessageNotification.js +9 -15
  41. package/dist/temp/assets/scripts/notification/const/classNames.d.ts +0 -2
  42. package/dist/temp/assets/scripts/notification/const/classNames.js +0 -2
  43. package/dist/temp/assets/scripts/notification/const/icons.d.ts +0 -2
  44. package/dist/temp/assets/scripts/notification/const/icons.js +0 -10
  45. package/dist/temp/assets/scripts/notification/const/index.d.ts +3 -3
  46. package/dist/temp/assets/scripts/notification/const/index.js +2 -2
  47. package/dist/temp/assets/scripts/notification/const/sizes.d.ts +0 -4
  48. package/dist/temp/assets/scripts/notification/const/sizes.js +0 -5
  49. package/dist/temp/assets/scripts/notification/const/types.d.ts +7 -22
  50. package/dist/temp/assets/scripts/notification/messageTemplate.d.ts +0 -2
  51. package/dist/temp/assets/scripts/notification/messageTemplate.js +2 -2
  52. package/dist/temp/assets/scripts/notification/utils.d.ts +10 -1
  53. package/dist/temp/assets/scripts/notification/utils.js +6 -3
  54. package/dist/temp/src/components/overlays/notification/FloatingNotification.d.ts +3 -4
  55. package/dist/temp/src/components/overlays/notification/FullWidthNotification.d.ts +2 -4
  56. package/dist/temp/src/components/overlays/notification/MessageNotification.d.ts +2 -18
  57. package/dist/temp/src/components/overlays/notification/MessageNotification.js +4 -8
  58. package/dist/temp/src/components/overlays/notification/MessageNotificationParts.d.ts +4 -10
  59. package/dist/temp/src/components/overlays/notification/MessageNotificationParts.js +4 -7
  60. package/dist/temp/src/components/overlays/notification/Notification.d.ts +8 -28
  61. package/dist/temp/src/components/overlays/notification/Notification.js +4 -2
  62. package/dist/temp/src/components/overlays/notification/__tests__/MessageNotification.test.js +12 -9
  63. package/dist/temp/src/components/overlays/notification/__tests__/Notification.test.js +5 -0
  64. package/dist/temp/src/components/overlays/notification/__tests__/supportTextLink.test.js +0 -11
  65. package/dist/temp/src/generated/scoped-css.js +1 -1
  66. package/dist/temp/src/utils/url/isSafeUrl.d.ts +1 -1
  67. package/dist/temp/src/utils/url/isSafeUrl.js +1 -1
  68. package/dist/temp/vitest.config.js +11 -0
  69. package/dist/types/assets/scripts/notification/MessageNotification.d.ts +1 -1
  70. package/dist/types/assets/scripts/notification/const/classNames.d.ts +0 -2
  71. package/dist/types/assets/scripts/notification/const/icons.d.ts +0 -2
  72. package/dist/types/assets/scripts/notification/const/index.d.ts +3 -3
  73. package/dist/types/assets/scripts/notification/const/sizes.d.ts +0 -4
  74. package/dist/types/assets/scripts/notification/const/types.d.ts +7 -22
  75. package/dist/types/assets/scripts/notification/messageTemplate.d.ts +0 -2
  76. package/dist/types/assets/scripts/notification/utils.d.ts +10 -1
  77. package/dist/types/src/components/overlays/notification/FloatingNotification.d.ts +3 -4
  78. package/dist/types/src/components/overlays/notification/FullWidthNotification.d.ts +2 -4
  79. package/dist/types/src/components/overlays/notification/MessageNotification.d.ts +2 -18
  80. package/dist/types/src/components/overlays/notification/MessageNotificationParts.d.ts +4 -10
  81. package/dist/types/src/components/overlays/notification/Notification.d.ts +8 -28
  82. package/dist/types/src/utils/url/isSafeUrl.d.ts +1 -1
  83. package/dist/ui-admin/assets/styles/style.css +0 -19
  84. package/package.json +2 -2
@@ -3,6 +3,6 @@
3
3
  * javascript:, data:, file: 등 위험 프로토콜로 인한 XSS / 외부 페이로드 로딩을 차단.
4
4
  *
5
5
  * URL 파서가 앞뒤 공백·탭·개행 제거와 scheme 소문자화를 하므로 ` JavaScript:` 같은 우회도 막힌다.
6
- * React(`MessageNotificationParts`·`FullWidthNotification`)와 Vanilla(`renderSupportingText`)가 공유한다.
6
+ * React(`FullWidthNotification`)와 Vanilla(`renderSupportingText`)가 공유한다.
7
7
  */
8
8
  export declare function isSafeUrl(url: string): boolean;
@@ -14,7 +14,7 @@ function resolveBaseOrigin() {
14
14
  * javascript:, data:, file: 등 위험 프로토콜로 인한 XSS / 외부 페이로드 로딩을 차단.
15
15
  *
16
16
  * URL 파서가 앞뒤 공백·탭·개행 제거와 scheme 소문자화를 하므로 ` JavaScript:` 같은 우회도 막힌다.
17
- * React(`MessageNotificationParts`·`FullWidthNotification`)와 Vanilla(`renderSupportingText`)가 공유한다.
17
+ * React(`FullWidthNotification`)와 Vanilla(`renderSupportingText`)가 공유한다.
18
18
  */
19
19
  export function isSafeUrl(url) {
20
20
  if (!url.trim())
@@ -30,6 +30,17 @@ export default defineConfig({
30
30
  // 'text' 미포함 — 미커버 파일이 수백 개라 파일별 상세 출력이 CI 로그를 덮는다.
31
31
  // 'lcov' 대신 'lcovonly' — 'lcov' 는 HTML 리포트까지 생성한다.
32
32
  reporter: ['text-summary', ['lcovonly', { projectRoot: REPO_ROOT }]],
33
+ // 회귀 방지 하한선 — 실측에서 약 2%p 낮춘 값 (ui-admin-mcp 와 같은 여유폭).
34
+ // 실측 기준: 2026-10-12, 25cb4d96 — stmts 54.91 / branch 44.63 / funcs 55.20 / lines 55.80
35
+ // 최종 목표: 93 / 88 (lines 95 · branches 90). 테스트 보강 단계마다 실측 −2 로 인상한다.
36
+ // autoUpdate: false — 값은 실측을 확인하고 사람이 직접 올린다.
37
+ thresholds: {
38
+ autoUpdate: false,
39
+ statements: 53,
40
+ branches: 43,
41
+ functions: 53,
42
+ lines: 54,
43
+ },
33
44
  },
34
45
  },
35
46
  });
@@ -9,7 +9,7 @@ export declare class MessageNotification {
9
9
  private featuredIcon?;
10
10
  constructor(options: MessageNotificationOptions);
11
11
  private createElement;
12
- /** 색상별 FeaturedIcon. default 는 md(40/20), block 은 sm(32/16). info 아이콘만 variant 별로 다르다. */
12
+ /** 색상별 FeaturedIcon. md(40px 원 / 20px 아이콘) 고정. */
13
13
  private createFeaturedIcon;
14
14
  private bindEvents;
15
15
  private setupAutoClose;
@@ -26,7 +26,6 @@ export declare const CLASS_NAMES: {
26
26
  };
27
27
  readonly MESSAGE: {
28
28
  readonly BASE: "ncua-message-notification";
29
- readonly BLOCK: "ncua-message-notification--block";
30
29
  readonly CONTAINER: "ncua-message-notification__container";
31
30
  readonly CONTENT: "ncua-message-notification__content";
32
31
  readonly CONTENT_WRAPPER: "ncua-message-notification__content-wrapper";
@@ -34,7 +33,6 @@ export declare const CLASS_NAMES: {
34
33
  readonly TEXT_CONTAINER: "ncua-message-notification__text-container";
35
34
  readonly TITLE: "ncua-message-notification__title";
36
35
  readonly SUPPORTING_TEXT: "ncua-message-notification__supporting-text";
37
- readonly LINK: "ncua-message-notification__link";
38
36
  readonly ACTIONS_CONTAINER: "ncua-message-notification__actions-container";
39
37
  readonly ACTIONS: "ncua-message-notification__actions";
40
38
  readonly FOOTER_CONTAINER: "ncua-message-notification__footer-container";
@@ -26,6 +26,4 @@ export declare const ICON_MAP: {
26
26
  };
27
27
  /** message 기본 타입 아이콘. floating 과 같은 4색에 info(neutral 과 같은 핀)를 더한다. */
28
28
  export declare const MESSAGE_ICON_MAP: Record<NotificationColor, IconFunction>;
29
- /** block 변형 아이콘. info 만 InfoCircle 로 다르다 (#536 유지). */
30
- export declare const MESSAGE_BLOCK_ICON_MAP: Record<NotificationColor, IconFunction>;
31
29
  export {};
@@ -1,4 +1,4 @@
1
1
  export { CLASS_NAMES } from './classNames';
2
- export { FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP, MESSAGE_BLOCK_ICON_MAP, MESSAGE_ICON_MAP, SVG_ICONS, } from './icons';
3
- 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';
4
- export type { BaseNotificationOptions, LegacyNotificationHierarchy, NotificationAction, NotificationActionButtonSize, NotificationColor, NotificationHierarchy, NotificationLinkTarget, NotificationVariant, } from './types';
2
+ export { FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP, MESSAGE_ICON_MAP, SVG_ICONS, } from './icons';
3
+ export { CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FEATURED_ICON_SIZES, FULL_WIDTH_SIZES, getSizes, ICON_PIXEL_SIZES, MESSAGE_SIZES, } from './sizes';
4
+ export type { BaseNotificationOptions, LegacyNotificationHierarchy, NotificationAction, NotificationActionButtonSize, NotificationColor, NotificationHierarchy, NotificationLinkTarget, } from './types';
@@ -24,10 +24,6 @@ export declare const MESSAGE_SIZES: {
24
24
  readonly ICON_PIXEL: "20";
25
25
  readonly CLOSE_BUTTON: "20";
26
26
  };
27
- export declare const MESSAGE_BLOCK_SIZES: {
28
- readonly FEATURED_ICON: "sm";
29
- readonly ICON_PIXEL: "16";
30
- };
31
27
  export declare const getSizes: {
32
28
  readonly featuredIcon: (isMobile: boolean) => "sm" | "md";
33
29
  readonly iconPixel: (isMobile: boolean) => "20" | "16";
@@ -1,14 +1,8 @@
1
1
  export type NotificationColor = 'neutral' | 'error' | 'warning' | 'success' | 'info';
2
- /**
3
- * message 타입의 표시 변형. React `NotificationVariant`와 같은 어휘다.
4
- * - `'default'`: 기존 message
5
- * - `'block'`: 서브 페이지 공지용 (흰 배경, FeaturedIcon sm, 제목 + 텍스트 링크 1행, info 아이콘 InfoCircle)
6
- */
7
- export type NotificationVariant = 'default' | 'block';
8
2
  /**
9
3
  * 텍스트 링크(`supportTextLink`)를 여는 대상. React `NotificationLinkTarget`과 같은 어휘다.
10
- * - `'_self'`: 같은 탭 (target·rel 미부여)
11
- * - `'_blank'`: 새 탭 (`target="_blank"` + `rel="noopener noreferrer"`)
4
+ * - `'_self'`: 같은 탭
5
+ * - `'_blank'`: 새 탭 + `rel="noopener noreferrer"`
12
6
  */
13
7
  export type NotificationLinkTarget = '_self' | '_blank';
14
8
  /**
@@ -41,32 +35,23 @@ export interface BaseNotificationOptions {
41
35
  color?: NotificationColor;
42
36
  onClose?: () => void;
43
37
  /**
44
- * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
45
- * autoClose 만료 시 `onClose` 호출은 그대로 유지된다. 기본값 `false`.
46
- * floating 은 `autoClose` 미지정 시 3초 뒤 자동으로 닫힌다(직접 `remove()` 로 닫으려면 `autoClose: 0` 명시).
47
- * full-width · message 는 `autoClose` 를 명시했을 때만 자동으로 닫힌다.
38
+ * 닫기 버튼 숨김 여부 (기본값 `false`)
39
+ * `true`이면 floating 타입은 autoClose 미지정 시 3초 후 자동으로 닫힘 (onClose 호출, 끄려면 `autoClose: 0`)
48
40
  */
49
41
  hideCloseButton?: boolean;
50
42
  className?: string;
51
43
  actions?: NotificationAction[];
52
44
  autoClose?: number;
53
45
  /**
54
- * supportingText에 대한 링크 URL. full-width 타입, message 타입의 `variant: 'block'`에서 사용 가능.
55
- * http/https 만 허용되며 그 외 프로토콜은 링크 없이 텍스트만 렌더된다.
46
+ * supportingText에 대한 링크 URL. full-width 타입에서만 사용 가능.
47
+ * http/https(상대경로 포함) URL만 링크로 렌더하고 그 외는 텍스트로 렌더한다.
56
48
  */
57
49
  supportTextLink?: string;
58
50
  /**
59
- * 텍스트 링크를 여는 대상. `supportTextLink`가 렌더될 때만 동작한다.
60
- * `'_blank'`이면 새 탭으로 열고 `rel="noopener noreferrer"`를 함께 붙인다.
61
- * `'_blank'`가 아닌 값은 모두 `'_self'`(같은 탭)로 취급한다.
51
+ * 텍스트 링크를 여는 대상. `'_blank'`이면 새 탭 + `rel="noopener noreferrer"`.
62
52
  * @default '_self'
63
53
  */
64
54
  supportTextLinkTarget?: NotificationLinkTarget;
65
- /**
66
- * message 타입의 표시 변형. message 타입에서만 동작한다.
67
- * @default 'default'
68
- */
69
- variant?: NotificationVariant;
70
55
  onHidePermanently?: () => void;
71
56
  /**
72
57
  * 다시보지 않기 버튼의 라벨. full-width, message 타입에서 사용 가능하며
@@ -2,8 +2,6 @@ import type { NotificationAction, NotificationColor } from './const';
2
2
  export interface MessageTemplateParams {
3
3
  title: string;
4
4
  supportingText?: string;
5
- /** 지정 시 `supportingText`를 텍스트 링크로 렌더한다 (block 변형 전용, http/https 만 허용). */
6
- supportTextLink?: string;
7
5
  /** 닫기 아이콘 색 결정용. 미지정 시 neutral. */
8
6
  color?: NotificationColor;
9
7
  actions?: NotificationAction[];
@@ -1,7 +1,15 @@
1
1
  import type { LegacyNotificationHierarchy, NotificationAction, NotificationActionButtonSize, NotificationColor, NotificationHierarchy } from './const';
2
2
  export declare function createWrapperElement(baseClass: string, color: NotificationColor, className?: string): HTMLElement;
3
3
  export declare function buildClassName(baseClass: string, color: NotificationColor, className?: string): string;
4
- export declare function renderSupportingText(supportingText?: string, className?: string, supportTextLink?: string, linkClassName?: string): string;
4
+ interface RenderSupportingTextParams {
5
+ supportingText?: string;
6
+ className?: string;
7
+ supportTextLink?: string;
8
+ }
9
+ /**
10
+ * 보조 텍스트 HTML을 만든다. `supportTextLink` 링크는 full-width 전용 클래스(`CLASS_NAMES.FULL_WIDTH.LINK`)로 렌더한다.
11
+ */
12
+ export declare const renderSupportingText: ({ supportingText, className, supportTextLink, }: RenderSupportingTextParams) => string;
5
13
  /**
6
14
  * `supportTextLinkTarget`이 `'_blank'`이면 `renderSupportingText`가 만든 링크를 새 탭으로 연다.
7
15
  *
@@ -30,3 +38,4 @@ export declare function renderActions(actions: NotificationAction[], wrapperClas
30
38
  export declare function bindNotificationEvents(element: HTMLElement, actions: NotificationAction[], onClose?: () => void, onRemove?: () => void): void;
31
39
  export declare function setupAutoClose(autoClose: number, onClose?: () => void, onRemove?: () => void): number | undefined;
32
40
  export declare const isMobile: () => boolean;
41
+ export {};
@@ -19,9 +19,8 @@ interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>
19
19
  */
20
20
  onClose?: () => void;
21
21
  /**
22
- * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
23
- * autoClose 만료·모바일 전환 시 `onClose` 호출은 그대로 유지된다.
24
- * `autoClose` 미지정이면 3초 뒤 자동으로 닫힌다. 부모가 직접 언마운트하려면 `autoClose={0}`을 명시한다.
22
+ * 닫기 버튼 숨김 여부
23
+ * `true`이면 autoClose 미지정 시 3초 후 자동으로 닫힘 (onClose 호출, 끄려면 `autoClose={0}`)
25
24
  * @default false
26
25
  */
27
26
  hideCloseButton?: boolean;
@@ -35,7 +34,7 @@ interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>
35
34
  actions?: NotificationAction[];
36
35
  /**
37
36
  * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
38
- * 미지정 시 0. 단 `hideCloseButton`이면 3초.
37
+ * hideCloseButton이면 미지정 시 3초
39
38
  * @default 0
40
39
  */
41
40
  autoClose?: number;
@@ -19,9 +19,7 @@ interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'
19
19
  */
20
20
  onClose?: () => void;
21
21
  /**
22
- * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
23
- * autoClose 만료 시 `onClose` 호출은 그대로 유지된다.
24
- * 기본 자동 닫힘은 없다 — 부모가 언마운트로 닫거나 `autoClose`를 명시한다.
22
+ * 닫기 버튼 숨김 여부
25
23
  * @default false
26
24
  */
27
25
  hideCloseButton?: boolean;
@@ -40,7 +38,7 @@ interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'
40
38
  */
41
39
  autoClose?: number;
42
40
  /**
43
- * info 링크 영역 (선택사항)
41
+ * info 링크 영역 (선택사항). http/https(상대경로 포함) URL만 링크로 렌더하고 그 외는 텍스트로 렌더한다.
44
42
  */
45
43
  supportTextLink?: string;
46
44
  /**
@@ -1,6 +1,6 @@
1
1
  import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
2
2
  import type { SlotIconComponent } from '../../../types/side-slot';
3
- import type { NotificationAction, NotificationColor, NotificationLinkTarget, NotificationVariant } from './Notification';
3
+ import type { NotificationAction, NotificationColor } from './Notification';
4
4
  interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
5
5
  /**
6
6
  * 알림 제목 텍스트
@@ -24,9 +24,7 @@ interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
24
24
  */
25
25
  onClose?: () => void;
26
26
  /**
27
- * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
28
- * autoClose 만료 시 `onClose` 호출은 그대로 유지된다.
29
- * 기본 자동 닫힘은 없다 — 부모가 언마운트로 닫거나 `autoClose`를 명시한다.
27
+ * 닫기 버튼 숨김 여부
30
28
  * @default false
31
29
  */
32
30
  hideCloseButton?: boolean;
@@ -53,20 +51,6 @@ interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
53
51
  * @default '다시 보지 않기'
54
52
  */
55
53
  hidePermanentlyLabel?: ReactNode;
56
- /**
57
- * 표시 변형. `'block'`은 서브 페이지 공지용(흰 배경, FeaturedIcon sm, 제목 + 텍스트 링크 1행)
58
- * @default 'default'
59
- */
60
- variant?: NotificationVariant;
61
- /**
62
- * 텍스트 링크 URL. `variant="block"`에서만 동작하며 `supportingText`가 링크 텍스트가 된다.
63
- */
64
- supportTextLink?: string;
65
- /**
66
- * 텍스트 링크를 여는 대상. `'_blank'`이면 새 탭 + `rel="noopener noreferrer"`
67
- * @default '_self'
68
- */
69
- supportTextLinkTarget?: NotificationLinkTarget;
70
54
  }
71
55
  declare const MessageNotification: import("react").ForwardRefExoticComponent<MessageNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
72
56
  export type { MessageNotificationProps };
@@ -1,21 +1,15 @@
1
1
  import type { ReactNode } from 'react';
2
2
  import type { SlotIconComponent } from '../../../types/side-slot';
3
- import { type FeaturedIconColor, type FeaturedIconSize } from '../../image-and-icons/featured-icon/FeaturedIcon';
4
- import type { NotificationAction, NotificationLinkTarget } from './Notification';
3
+ import { type FeaturedIconColor } from '../../image-and-icons/featured-icon/FeaturedIcon';
4
+ import type { NotificationAction } from './Notification';
5
5
  interface MessageNotificationContentProps {
6
6
  title: ReactNode;
7
7
  supportingText?: ReactNode;
8
- /** 지정 시 `supportingText`를 이 URL 의 텍스트 링크로 렌더한다 (block 변형 전용). http/https·상대경로가 아니면 텍스트만 렌더. */
9
- supportTextLink?: string;
10
- /** 텍스트 링크를 여는 대상. `'_blank'`이면 새 탭 + `rel="noopener noreferrer"`. */
11
- supportTextLinkTarget?: NotificationLinkTarget;
12
8
  icon?: SlotIconComponent;
13
9
  iconColor: FeaturedIconColor;
14
- /** default 는 md(40/20), block 은 sm(32/16). */
15
- iconSize: FeaturedIconSize;
16
10
  }
17
- /** 아이콘 + 제목/서포팅 텍스트(또는 텍스트 링크) 영역. */
18
- declare const MessageNotificationContent: ({ title, supportingText, supportTextLink, supportTextLinkTarget, icon, iconColor, iconSize, }: MessageNotificationContentProps) => import("react/jsx-runtime").JSX.Element;
11
+ /** 아이콘 + 제목/서포팅 텍스트 영역. FeaturedIcon 은 md(40px 원 / 20px 아이콘) 고정. */
12
+ declare const MessageNotificationContent: ({ title, supportingText, icon, iconColor }: MessageNotificationContentProps) => import("react/jsx-runtime").JSX.Element;
19
13
  interface MessageNotificationActionsProps {
20
14
  actions?: NotificationAction[];
21
15
  onClose?: () => void;
@@ -6,7 +6,6 @@ import { type CalloutNotificationProps, type CalloutNotificationWidth } from './
6
6
  type NotificationType = 'floating' | 'full-width' | 'message' | 'callout';
7
7
  type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
8
8
  type NotificationSize = 'desktop' | 'mobile';
9
- type NotificationVariant = 'default' | 'block';
10
9
  /** 텍스트 링크(`supportTextLink`)를 여는 대상. `'_blank'`이면 새 탭 + `rel="noopener noreferrer"`. */
11
10
  type NotificationLinkTarget = '_self' | '_blank';
12
11
  interface NotificationAction {
@@ -39,7 +38,7 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
39
38
  */
40
39
  supportingText?: ReactNode;
41
40
  /**
42
- * 알림 아이콘 컴포넌트 (지정하지 않으면 variant에 따라 기본 아이콘 사용)
41
+ * 알림 아이콘 컴포넌트 (지정하지 않으면 color에 따라 기본 아이콘 사용)
43
42
  */
44
43
  icon?: SlotIconComponent;
45
44
  /**
@@ -52,14 +51,8 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
52
51
  */
53
52
  onClose?: () => void;
54
53
  /**
55
- * 닫기(X) 버튼 숨김 여부. floating · full-width · message 타입에서 동작한다.
56
- * `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
57
- * autoClose 만료(및 floating의 모바일 전환) 시 `onClose` 호출은 그대로 유지되므로,
58
- * "닫기 버튼 없는 자동 닫힘 토스트"(DES-SPEC-027 §5.3)에서 부모가 닫힘 시점을 받을 수 있다.
59
- *
60
- * floating(토스트)은 닫을 수단이 사라지지 않도록 `autoClose` 미지정 시 3초 뒤 자동으로 닫힌다
61
- * (부모가 직접 언마운트해 닫으려면 `autoClose={0}` 명시). full-width · message 는 부모가 언마운트로 닫으므로
62
- * `autoClose`를 명시했을 때만 자동으로 닫힌다.
54
+ * 닫기 버튼 숨김 여부
55
+ * `true`이면 floating 타입은 autoClose 미지정 시 3초 후 자동으로 닫힘 (onClose 호출, 끄려면 `autoClose={0}`)
63
56
  * @default false
64
57
  */
65
58
  hideCloseButton?: boolean;
@@ -74,8 +67,7 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
74
67
  actions?: NotificationAction[];
75
68
  /**
76
69
  * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
77
- * floating, full-width, message 타입에서 동작
78
- * 미지정 시 0. 단 floating 에서 `hideCloseButton`이면 3초(DES-SPEC-027 §5.3).
70
+ * floating, full-width, message 타입에서 동작 (floating + hideCloseButton은 미지정 시 3초)
79
71
  * @default 0
80
72
  */
81
73
  autoClose?: number;
@@ -94,27 +86,15 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
94
86
  hidePermanentlyLabel?: ReactNode;
95
87
  /**
96
88
  * supportingText 에 연결할 링크 URL (선택사항)
97
- * full-width 타입, message 타입의 `variant="block"`에서 사용 가능
89
+ * full-width 타입에서만 사용 가능. http/https(상대경로 포함) URL만 링크로 렌더하고 그 외는 텍스트로 렌더한다.
98
90
  */
99
91
  supportTextLink?: string;
100
92
  /**
101
- * 텍스트 링크를 여는 대상 (선택사항). `supportTextLink`가 렌더될 때만 동작한다.
102
- * `'_blank'`이면 새 탭으로 열고 `rel="noopener noreferrer"`를 함께 붙인다.
103
- * full-width 타입, message 타입의 `variant="block"`에서 사용 가능
93
+ * 텍스트 링크를 여는 대상 (선택사항). `'_blank'`이면 새 탭 + `rel="noopener noreferrer"`
94
+ * full-width 타입에서만 사용 가능
104
95
  * @default '_self'
105
96
  */
106
97
  supportTextLinkTarget?: NotificationLinkTarget;
107
- /**
108
- * message 타입의 표시 변형 (선택사항). message 타입에서만 동작한다.
109
- *
110
- * - `'default'`: 기존 message (color 별 배경·테두리, 제목 + 본문 2행)
111
- * - `'block'`: 서브 페이지 공지용. 흰 배경·gray-100 테두리·shadow-sm, FeaturedIcon sm,
112
- * 제목 + 텍스트 링크 1행(`supportingText` 가 링크 텍스트, `supportTextLink` 가 href).
113
- * info 아이콘은 InfoCircle.
114
- *
115
- * @default 'default'
116
- */
117
- variant?: NotificationVariant;
118
98
  /**
119
99
  * 너비 동작 (선택사항)
120
100
  * callout 타입에서만 사용 가능. 미지정 시 부모 너비를 채운다(100%). 'fit' 은 콘텐츠 너비에 맞춘다
@@ -135,6 +115,6 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
135
115
  portal?: boolean;
136
116
  }
137
117
  declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
138
- export type { NotificationType, NotificationColor, NotificationSize, NotificationVariant, NotificationLinkTarget, NotificationAction, NotificationProps, };
118
+ export type { NotificationType, NotificationColor, NotificationSize, NotificationLinkTarget, NotificationAction, NotificationProps, };
139
119
  export type { CalloutNotificationProps, CalloutNotificationWidth };
140
120
  export { Notification };
@@ -3,6 +3,6 @@
3
3
  * javascript:, data:, file: 등 위험 프로토콜로 인한 XSS / 외부 페이로드 로딩을 차단.
4
4
  *
5
5
  * URL 파서가 앞뒤 공백·탭·개행 제거와 scheme 소문자화를 하므로 ` JavaScript:` 같은 우회도 막힌다.
6
- * React(`MessageNotificationParts`·`FullWidthNotification`)와 Vanilla(`renderSupportingText`)가 공유한다.
6
+ * React(`FullWidthNotification`)와 Vanilla(`renderSupportingText`)가 공유한다.
7
7
  */
8
8
  export declare function isSafeUrl(url: string): boolean;
@@ -3085,29 +3085,10 @@ button {
3085
3085
  line-height: var(--line-heights-xs);
3086
3086
  font-weight: var(--font-weights-commerce-sans-0);
3087
3087
  }
3088
- .ncua-message-notification.ncua-message-notification--block {
3089
- background-color: var(--base-white);
3090
- border: 1px solid var(--gray-100);
3091
- box-shadow: var(--shadow-sm);
3092
- }
3093
- .ncua-message-notification.ncua-message-notification--block .ncua-message-notification__text-container {
3094
- flex-direction: row;
3095
- flex-wrap: wrap;
3096
- align-items: center;
3097
- gap: 8px;
3098
- }
3099
- .ncua-message-notification.ncua-message-notification--block .ncua-message-notification__link .ncua-message-notification__supporting-text {
3100
- color: inherit;
3101
- }
3102
3088
  .ncua-message-notification.ncua-message-notification--info .ncua-message-notification__icon {
3103
3089
  color: var(--violet-600);
3104
3090
  background-color: var(--violet-100);
3105
3091
  }
3106
- .ncua-message-notification__link, .ncua-message-notification__link:hover {
3107
- color: inherit;
3108
- text-decoration: underline;
3109
- cursor: pointer;
3110
- }
3111
3092
  .ncua-message-notification .ncua-message-notification__hide-link.ncua-notification__action-button {
3112
3093
  color: var(--gray-500);
3113
3094
  font-weight: var(--font-weights-commerce-sans-1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ncds/ui-admin",
3
- "version": "1.8.26-alpha.6",
3
+ "version": "1.8.26-alpha.8",
4
4
  "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
5
5
  "scripts": {
6
6
  "barrel": "node barrel.js",
@@ -78,7 +78,7 @@
78
78
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.0",
79
79
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
80
80
  "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "1.1.4",
81
- "@ncds/ui-admin-icon": "0.1.13",
81
+ "@ncds/ui-admin-icon": "0.1.14",
82
82
  "classnames": "2.5.1",
83
83
  "dompurify": "3.4.12",
84
84
  "flatpickr": "4.6.13",