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

package/dist/temp/src/utils/notification/__tests__/resolveAutoClose.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/utils/notification/__tests__/resolveAutoClose.test.js

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS } from '../../../../constant/notification';
+import { resolveAutoClose } from '../resolveAutoClose';
+const EXPLICIT_MS = 5000;
+const FALLBACK_MS = 4000;
+const NO_AUTO_CLOSE = 0;
+describe('resolveAutoClose', () => {
+    it('autoClose 를 명시하면 hideCloseButton·fallback 과 무관하게 그대로 쓴다 (0 포함)', () => {
+        expect(resolveAutoClose({ autoClose: EXPLICIT_MS, hideCloseButton: true, fallback: FALLBACK_MS })).toBe(EXPLICIT_MS);
+        expect(resolveAutoClose({ autoClose: NO_AUTO_CLOSE, hideCloseButton: true, fallback: FALLBACK_MS })).toBe(NO_AUTO_CLOSE);
+    });
+    it('autoClose 미지정이면 fallback 이 양수일 때 fallback 을 쓴다', () => {
+        expect(resolveAutoClose({ fallback: FALLBACK_MS })).toBe(FALLBACK_MS);
+        expect(resolveAutoClose({ hideCloseButton: true, fallback: FALLBACK_MS })).toBe(FALLBACK_MS);
+    });
+    it('autoClose·fallback 모두 없으면 hideCloseButton 일 때만 기본 3초를 준다', () => {
+        expect(resolveAutoClose({ hideCloseButton: true })).toBe(HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS);
+        expect(resolveAutoClose({ hideCloseButton: true, fallback: NO_AUTO_CLOSE })).toBe(HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS);
+        expect(resolveAutoClose({ hideCloseButton: false })).toBe(NO_AUTO_CLOSE);
+        expect(resolveAutoClose({})).toBe(NO_AUTO_CLOSE);
+    });
+});

package/dist/temp/src/utils/notification/index.d.ts

@@ -0,0 +1 @@
+export { resolveAutoClose } from './resolveAutoClose';

package/dist/temp/src/utils/notification/index.js

@@ -0,0 +1 @@
+export { resolveAutoClose } from './resolveAutoClose';

package/dist/temp/src/utils/notification/resolveAutoClose.d.ts

@@ -0,0 +1,14 @@
+interface ResolveAutoCloseParams {
+    /** 사용처가 명시한 autoClose(ms). `0`이면 자동 닫힘 없음 — 부모가 직접 닫는 용도. */
+    autoClose?: number;
+    /** floating(토스트)만 넘긴다 — 닫기 버튼이 없는 토스트가 영구히 남지 않게 기본 3초를 준다. */
+    hideCloseButton?: boolean;
+    /** 색상별 기본값 등 2순위 기본값. */
+    fallback?: number;
+}
+/**
+ * 실제 적용할 autoClose(ms)를 정한다. React·Vanilla 두 구현이 공유한다.
+ * 우선순위: 명시 `autoClose` > `fallback`(양수) > `hideCloseButton`이면 3초 > 0.
+ */
+export declare const resolveAutoClose: ({ autoClose, hideCloseButton, fallback, }: ResolveAutoCloseParams) => number;
+export {};

package/dist/temp/src/utils/notification/resolveAutoClose.js

@@ -0,0 +1,12 @@
+import { HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS } from '../../../constant/notification';
+/**
+ * 실제 적용할 autoClose(ms)를 정한다. React·Vanilla 두 구현이 공유한다.
+ * 우선순위: 명시 `autoClose` > `fallback`(양수) > `hideCloseButton`이면 3초 > 0.
+ */
+export const resolveAutoClose = ({ autoClose, hideCloseButton = false, fallback = 0, }) => {
+    if (autoClose !== undefined)
+        return autoClose;
+    if (fallback > 0)
+        return fallback;
+    return hideCloseButton ? HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS : 0;
+};

package/dist/types/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/types/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/types/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/types/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';
 /**
@@ -40,6 +40,13 @@ export interface BaseNotificationOptions {
     supportingText?: string;
     color?: NotificationColor;
     onClose?: () => void;
+    /**
+     * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
+     * autoClose 만료 시 `onClose` 호출은 그대로 유지된다. 기본값 `false`.
+     * floating 은 `autoClose` 미지정 시 3초 뒤 자동으로 닫힌다(직접 `remove()` 로 닫으려면 `autoClose: 0` 명시).
+     * full-width · message 는 `autoClose` 를 명시했을 때만 자동으로 닫힌다.
+     */
+    hideCloseButton?: boolean;
     className?: string;
     actions?: NotificationAction[];
     autoClose?: number;

package/dist/types/assets/scripts/notification/messageTemplate.d.ts

@@ -8,6 +8,7 @@ export interface MessageTemplateParams {
     color?: NotificationColor;
     actions?: NotificationAction[];
     onClose?: () => void;
+    hideCloseButton?: boolean;
     onHidePermanently?: () => void;
     hidePermanentlyLabel?: string;
 }

package/dist/types/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;
@@ -26,3 +25,9 @@ export declare const MESSAGE_CLOSE_ICON_COLOR: {
     readonly success: string;
     readonly info: string;
 };
+/**
+ * floating(토스트)에서 `hideCloseButton`인데 `autoClose`를 지정하지 않았을 때 적용되는 자동 닫힘 시간(ms).
+ * 닫기 버튼이 없는 토스트가 영구히 남지 않게 한다 — DES-SPEC-027 §5.3 Toast Alert 3초.
+ * full-width · message 는 부모가 언마운트로 닫으므로 적용하지 않는다.
+ */
+export declare const HIDE_CLOSE_BUTTON_AUTO_CLOSE_MS = 3000;

package/dist/types/src/components/overlays/notification/FloatingNotification.d.ts

@@ -18,6 +18,13 @@ interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>
      * 닫기 버튼 클릭 이벤트 핸들러
      */
     onClose?: () => void;
+    /**
+     * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
+     * autoClose 만료·모바일 전환 시 `onClose` 호출은 그대로 유지된다.
+     * `autoClose` 미지정이면 3초 뒤 자동으로 닫힌다. 부모가 직접 언마운트하려면 `autoClose={0}`을 명시한다.
+     * @default false
+     */
+    hideCloseButton?: boolean;
     /**
      * 추가 CSS 클래스
      */
@@ -28,6 +35,7 @@ interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>
     actions?: NotificationAction[];
     /**
      * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
+     * 미지정 시 0. 단 `hideCloseButton`이면 3초.
      * @default 0
      */
     autoClose?: number;

package/dist/types/src/components/overlays/notification/FullWidthNotification.d.ts

@@ -18,6 +18,13 @@ interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'
      * 닫기 버튼 클릭 이벤트 핸들러
      */
     onClose?: () => void;
+    /**
+     * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
+     * autoClose 만료 시 `onClose` 호출은 그대로 유지된다.
+     * 기본 자동 닫힘은 없다 — 부모가 언마운트로 닫거나 `autoClose`를 명시한다.
+     * @default false
+     */
+    hideCloseButton?: boolean;
     /**
      * 추가 CSS 클래스
      */

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

@@ -23,6 +23,18 @@ interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      * 닫기 버튼 클릭 이벤트 핸들러
      */
     onClose?: () => void;
+    /**
+     * 닫기(X) 버튼 숨김 여부. `true`면 `onClose`가 있어도 X 버튼을 렌더하지 않는다.
+     * autoClose 만료 시 `onClose` 호출은 그대로 유지된다.
+     * 기본 자동 닫힘은 없다 — 부모가 언마운트로 닫거나 `autoClose`를 명시한다.
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /**
+     * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
+     * @default 0
+     */
+    autoClose?: number;
     /**
      * 추가 CSS 클래스
      */
@@ -42,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/types/src/components/overlays/notification/MessageNotificationParts.d.ts

@@ -19,6 +19,7 @@ declare const MessageNotificationContent: ({ title, supportingText, supportTextL
 interface MessageNotificationActionsProps {
     actions?: NotificationAction[];
     onClose?: () => void;
+    hideCloseButton?: boolean;
     onHidePermanently?: () => void;
     hidePermanentlyLabel?: ReactNode;
     closeIconColor: string;
@@ -28,6 +29,6 @@ interface MessageNotificationActionsProps {
  * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
-declare const MessageNotificationActions: ({ actions, onClose, onHidePermanently, hidePermanentlyLabel, closeIconColor, }: MessageNotificationActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MessageNotificationActions: ({ actions, onClose, hideCloseButton, onHidePermanently, hidePermanentlyLabel, closeIconColor, }: MessageNotificationActionsProps) => import("react/jsx-runtime").JSX.Element | null;
 export type { MessageNotificationActionsProps, MessageNotificationContentProps };
 export { MessageNotificationActions, MessageNotificationContent };

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

@@ -51,6 +51,18 @@ 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`를 명시했을 때만 자동으로 닫힌다.
+     * @default false
+     */
+    hideCloseButton?: boolean;
     /**
      * 추가 CSS 클래스
      */
@@ -62,7 +74,8 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
     actions?: NotificationAction[];
     /**
      * 자동 닫기 시간 (밀리초 단위, 0이면 자동으로 닫히지 않음)
-     * floating 타입에서만 동작
+     * floating, full-width, message 타입에서 동작
+     * 미지정 시 0. 단 floating 에서 `hideCloseButton`이면 3초(DES-SPEC-027 §5.3).
      * @default 0
      */
     autoClose?: number;
@@ -94,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/types/src/components/overlays/notification/useAutoClose.d.ts

@@ -0,0 +1,15 @@
+interface UseAutoCloseParams {
+    autoClose?: number;
+    /** floating 만 넘긴다 — 닫기 버튼 없는 토스트의 기본 3초 자동 닫힘. */
+    hideCloseButton?: boolean;
+    onClose?: () => void;
+}
+/**
+ * autoClose 타이머. 만료 시 `onClose`를 호출하고 `true`(제거됨)를 반환한다.
+ * floating · full-width · message 가 공유한다.
+ *
+ * `onClose`는 매 렌더 새 함수일 수 있어 ref 로 latest 만 보관하고 deps 에서 뺀다 —
+ * 인라인 핸들러를 넘겨도 부모 리렌더마다 타이머가 리셋되지 않는다.
+ */
+export declare const useAutoClose: ({ autoClose, hideCloseButton, onClose }: UseAutoCloseParams) => boolean;
+export {};

package/dist/types/src/utils/notification/__tests__/resolveAutoClose.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/utils/notification/index.d.ts

@@ -0,0 +1 @@
+export { resolveAutoClose } from './resolveAutoClose';

package/dist/types/src/utils/notification/resolveAutoClose.d.ts

@@ -0,0 +1,14 @@
+interface ResolveAutoCloseParams {
+    /** 사용처가 명시한 autoClose(ms). `0`이면 자동 닫힘 없음 — 부모가 직접 닫는 용도. */
+    autoClose?: number;
+    /** floating(토스트)만 넘긴다 — 닫기 버튼이 없는 토스트가 영구히 남지 않게 기본 3초를 준다. */
+    hideCloseButton?: boolean;
+    /** 색상별 기본값 등 2순위 기본값. */
+    fallback?: number;
+}
+/**
+ * 실제 적용할 autoClose(ms)를 정한다. React·Vanilla 두 구현이 공유한다.
+ * 우선순위: 명시 `autoClose` > `fallback`(양수) > `hideCloseButton`이면 3초 > 0.
+ */
+export declare const resolveAutoClose: ({ autoClose, hideCloseButton, fallback, }: ResolveAutoCloseParams) => number;
+export {};

package/dist/ui-admin/assets/styles/style.css

@@ -3060,6 +3060,22 @@ button {
 .ncua-message-notification--success .ncua-notification__action-button {
   color: var(--green-500);
 }
+.ncua-message-notification--info {
+  color: var(--violet-600);
+  background-color: var(--violet-50);
+  border-radius: 12px;
+  border: 1px solid var(--violet-300);
+  box-shadow: var(--shadow-md);
+}
+.ncua-message-notification--info .ncua-message-notification__title {
+  color: var(--violet-600);
+}
+.ncua-message-notification--info .ncua-message-notification__supporting-text {
+  color: var(--gray-500);
+}
+.ncua-message-notification--info .ncua-notification__action-button {
+  color: var(--violet-500);
+}
 .ncua-message-notification .ncua-notification__action-button {
   background: transparent;
   border: none;
@@ -3072,12 +3088,8 @@ button {
 .ncua-message-notification.ncua-message-notification--block {
   background-color: var(--base-white);
   border: 1px solid var(--gray-100);
-  border-radius: 12px;
   box-shadow: var(--shadow-sm);
 }
-.ncua-message-notification.ncua-message-notification--block .ncua-message-notification__supporting-text {
-  color: var(--gray-500);
-}
 .ncua-message-notification.ncua-message-notification--block .ncua-message-notification__text-container {
   flex-direction: row;
   flex-wrap: wrap;
@@ -3087,13 +3099,7 @@ button {
 .ncua-message-notification.ncua-message-notification--block .ncua-message-notification__link .ncua-message-notification__supporting-text {
   color: inherit;
 }
-.ncua-message-notification.ncua-message-notification--block.ncua-message-notification--info {
-  color: var(--violet-600);
-}
-.ncua-message-notification.ncua-message-notification--block.ncua-message-notification--info .ncua-message-notification__title {
-  color: var(--violet-600);
-}
-.ncua-message-notification.ncua-message-notification--block.ncua-message-notification--info .ncua-message-notification__icon {
+.ncua-message-notification.ncua-message-notification--info .ncua-message-notification__icon {
   color: var(--violet-600);
   background-color: var(--violet-100);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.26-alpha.4",
+  "version": "1.8.26-alpha.6",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",