@ncds/ui-admin 1.8.21-alpha.3 → 1.8.21-alpha.5

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

@@ -9,9 +9,6 @@ export declare class MessageNotification {
     private featuredIcon?;
     constructor(options: MessageNotificationOptions);
     private createElement;
-    private buildTemplate;
-    private renderHidePermanentlyButton;
-    private renderCloseButton;
     private bindEvents;
     private setupAutoClose;
     getElement(): HTMLElement;

package/dist/types/assets/scripts/notification/const/classNames.d.ts

@@ -34,6 +34,7 @@ export declare const CLASS_NAMES: {
         readonly SUPPORTING_TEXT: "ncua-message-notification__supporting-text";
         readonly ACTIONS_CONTAINER: "ncua-message-notification__actions-container";
         readonly ACTIONS: "ncua-message-notification__actions";
+        readonly FOOTER_CONTAINER: "ncua-message-notification__footer-container";
         readonly HIDE_LINK: "ncua-message-notification__hide-link";
         readonly CLOSE_BUTTON: "ncua-message-notification__close-button";
     };

package/dist/types/assets/scripts/notification/const/index.d.ts

@@ -1,5 +1,5 @@
-export type { NotificationColor, NotificationHierarchy, NotificationAction, BaseNotificationOptions } from './types';
-export { SVG_ICONS, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP } from './icons';
 export { CLASS_NAMES } from './classNames';
-export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, MESSAGE_SIZES, getSizes, } from './sizes';
+export { FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, 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_SIZES, } from './sizes';
+export type { BaseNotificationOptions, LegacyNotificationHierarchy, NotificationAction, NotificationActionButtonSize, NotificationColor, NotificationHierarchy, } from './types';
 export { MESSAGE_CLOSE_ICON_COLORS } from './types';

package/dist/types/assets/scripts/notification/const/sizes.d.ts

@@ -20,8 +20,8 @@ export declare const FULL_WIDTH_SIZES: {
     readonly CLOSE_BUTTON: "20";
 };
 export declare const MESSAGE_SIZES: {
-    readonly FEATURED_ICON: "lg";
-    readonly ICON_PIXEL: "24";
+    readonly FEATURED_ICON: "md";
+    readonly ICON_PIXEL: "20";
     readonly CLOSE_BUTTON: "20";
 };
 export declare const getSizes: {

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

@@ -1,9 +1,27 @@
 export type NotificationColor = 'neutral' | 'error' | 'warning' | 'success' | 'info';
-export type NotificationHierarchy = 'link' | 'link-gray';
+/**
+ * 알림 액션 버튼(`ncua-btn`)의 색상 수식자.
+ * React `NotificationAction.hierarchy`와 동일한 어휘를 쓴다 — `ButtonTheme`의 부분집합이다.
+ */
+export type NotificationHierarchy = 'secondary' | 'secondary-gray' | 'text' | 'text-gray';
+/**
+ * Link 컴포넌트 색상 이름을 빌려 쓰던 구 어휘.
+ *
+ * @deprecated {@link NotificationHierarchy}를 사용한다.
+ * `'link'` → `'text'`, `'link-gray'` → `'text-gray'`로 런타임 매핑되므로 기존 CDN 사용처는
+ * 그대로 동작하지만, `'link'`는 대응하는 CSS가 존재한 적이 없다.
+ */
+export type LegacyNotificationHierarchy = 'link' | 'link-gray';
+/** 알림 액션 버튼(`ncua-btn`)의 사이즈 수식자. */
+export type NotificationActionButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface NotificationAction {
     label: string;
     onClick: () => void;
-    hierarchy?: NotificationHierarchy;
+    /**
+     * 액션 버튼 색상. 지정하지 않으면 `'text'`로 렌더된다.
+     * 구 어휘({@link LegacyNotificationHierarchy})도 하위호환을 위해 받는다.
+     */
+    hierarchy?: NotificationHierarchy | LegacyNotificationHierarchy;
 }
 export interface BaseNotificationOptions {
     title: string;

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

@@ -0,0 +1,14 @@
+import type { NotificationAction } from './const';
+export interface MessageTemplateParams {
+    title: string;
+    supportingText?: string;
+    actions?: NotificationAction[];
+    onClose?: () => void;
+    onHidePermanently?: () => void;
+}
+/**
+ * Message Notification의 마크업을 만든다.
+ * React 구현(`src/components/overlays/notification/MessageNotification.tsx`)과
+ * 동일한 클래스 트리를 산출해야 한다 — SCSS 한 벌을 두 구현이 공유한다.
+ */
+export declare function buildMessageTemplate(params: MessageTemplateParams): string;

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

@@ -1,8 +1,25 @@
-import type { NotificationAction, NotificationColor } from './const';
+import type { LegacyNotificationHierarchy, NotificationAction, NotificationActionButtonSize, NotificationColor, NotificationHierarchy } from './const';
 export declare function createWrapperElement(baseClass: string, color: NotificationColor, className?: string): HTMLElement;
 export declare function buildClassName(baseClass: string, color: NotificationColor, className?: string): string;
 export declare function renderSupportingText(supportingText?: string, className?: string, supportTextLink?: string): string;
-export declare function renderActions(actions: NotificationAction[], wrapperClass: string): string;
+/**
+ * 액션 버튼의 색상 수식자를 현행 어휘로 정규화한다.
+ *
+ * 구 어휘(`'link'` / `'link-gray'`)는 Link 컴포넌트의 색상 이름을 빌려 쓴 것이라
+ * `ncua-btn--link`에 대응하는 CSS가 존재하지 않았다. 기존 CDN 사용처를 깨지 않기 위해
+ * 타입에서 제거하는 대신 이 지점에서 실제 Button 테마로 매핑한다.
+ *
+ * 렌더(`renderActions`)와 이벤트 바인딩(`bindNotificationEvents`)이 이 함수를 함께 써야
+ * `data-action` 키가 어긋나지 않는다.
+ */
+export declare function resolveActionHierarchy(hierarchy?: NotificationHierarchy | LegacyNotificationHierarchy): NotificationHierarchy;
+/**
+ * 액션 버튼 그룹 HTML을 만든다.
+ *
+ * `size` 기본값 'sm'은 floating / full-width 타입의 기존 렌더링을 그대로 보존하기 위한 것이다.
+ * message 타입만 TO-BE 규격(28px)에 맞춰 'xs'를 넘긴다 — React `<Button size="xs">`와 동일.
+ */
+export declare function renderActions(actions: NotificationAction[], wrapperClass: string, size?: NotificationActionButtonSize): string;
 export declare function bindNotificationEvents(element: HTMLElement, actions: NotificationAction[], onClose?: () => void, onRemove?: () => void): void;
 export declare function setupAutoClose(autoClose: number, onClose?: () => void, onRemove?: () => void): number | undefined;
 export declare const isMobile: () => boolean;

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

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import type { SlotIconComponent } from '../../../types/side-slot';
+import { type FeaturedIconColor } from '../../image-and-icons/featured-icon/FeaturedIcon';
+import type { NotificationAction } from './Notification';
+interface MessageNotificationContentProps {
+    title: ReactNode;
+    supportingText?: ReactNode;
+    icon?: SlotIconComponent;
+    iconColor: FeaturedIconColor;
+    showIcon: boolean;
+}
+/** 아이콘 + 제목/서포팅 텍스트 영역. */
+declare const MessageNotificationContent: ({ title, supportingText, icon, iconColor, showIcon, }: MessageNotificationContentProps) => import("react/jsx-runtime").JSX.Element;
+interface MessageNotificationActionsProps {
+    actions?: NotificationAction[];
+    onClose?: () => void;
+    onHidePermanently?: () => void;
+    closeIconColor: string;
+}
+/**
+ * 액션 버튼 그룹 + 닫기 그룹을 감싸는 우측 영역.
+ * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
+ * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
+ */
+declare const MessageNotificationActions: ({ actions, onClose, onHidePermanently, 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

@@ -16,9 +16,10 @@ interface NotificationAction {
      */
     onClick?: () => void;
     /**
-     * 액션 버튼 색상 (3가지만 지원)
+     * 액션 버튼 색상. `ButtonTheme` 중 알림에서 허용하는 4가지만 지원한다.
+     * @default 'text'
      */
-    hierarchy?: Extract<ButtonTheme, 'text' | 'text-gray'>;
+    hierarchy?: Extract<ButtonTheme, 'secondary' | 'secondary-gray' | 'text' | 'text-gray'>;
 }
 interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**

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

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

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

@@ -2652,11 +2652,11 @@ button {
   align-items: center;
   flex-direction: column;
   width: 100%;
-  padding: 16px 24px;
+  padding: 12px 16px 12px 24px;
 }
 @media (max-width: 768px) {
   .ncua-message-notification__container {
-    padding: 16px;
+    padding: 12px 8px 12px 16px;
   }
 }
 .ncua-message-notification__content {
@@ -2690,20 +2690,21 @@ button {
   min-width: 0;
 }
 .ncua-message-notification__title {
-  font-size: var(--font-size-md);
-  line-height: var(--line-heights-md);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-2);
 }
 .ncua-message-notification__supporting-text {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-heights-sm);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-0);
 }
 .ncua-message-notification__actions-container {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   flex-shrink: 0;
+  flex-wrap: wrap;
 }
 @media (max-width: 768px) {
   .ncua-message-notification__actions-container {
@@ -2727,7 +2728,6 @@ button {
   cursor: pointer;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
-  font-weight: var(--font-weights-commerce-sans-0);
 }
 .ncua-message-notification__close-button {
   display: flex;
@@ -2736,23 +2736,22 @@ button {
   background: transparent;
   border: none;
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 8px;
   flex-shrink: 0;
 }
 .ncua-message-notification--neutral {
   color: var(--gray-600);
   background-color: var(--gray-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--gray-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--neutral .ncua-message-notification__title {
   color: var(--gray-600);
 }
 .ncua-message-notification--neutral .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--neutral .ncua-notification__action-button {
   color: var(--gray-500);
@@ -2766,16 +2765,15 @@ button {
 .ncua-message-notification--error {
   color: var(--primary-red-600);
   background-color: var(--primary-red-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--primary-red-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--error .ncua-message-notification__title {
   color: var(--primary-red-600);
 }
 .ncua-message-notification--error .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--error .ncua-notification__action-button {
   color: var(--primary-red-500);
@@ -2789,16 +2787,15 @@ button {
 .ncua-message-notification--warning {
   color: var(--orange-600);
   background-color: var(--orange-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--orange-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--warning .ncua-message-notification__title {
   color: var(--orange-600);
 }
 .ncua-message-notification--warning .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--warning .ncua-notification__action-button {
   color: var(--orange-500);
@@ -2812,16 +2809,15 @@ button {
 .ncua-message-notification--success {
   color: var(--green-600);
   background-color: var(--green-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--green-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--success .ncua-message-notification__title {
   color: var(--green-600);
 }
 .ncua-message-notification--success .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--success .ncua-notification__action-button {
   color: var(--green-500);
@@ -2844,6 +2840,9 @@ button {
 .ncua-message-notification .ncua-notification__action-button--text, .ncua-message-notification .ncua-notification__action-button--text-gray {
   font-weight: var(--font-weights-commerce-sans-1);
 }
+.ncua-message-notification__hide-link.ncua-notification__action-button {
+  font-weight: var(--font-weights-commerce-sans-1);
+}
 
 .ncua-callout-notification {
   display: flex;

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

@@ -2644,11 +2644,11 @@
   align-items: center;
   flex-direction: column;
   width: 100%;
-  padding: 16px 24px;
+  padding: 12px 16px 12px 24px;
 }
 @media (max-width: 768px) {
   .ncua-message-notification__container {
-    padding: 16px;
+    padding: 12px 8px 12px 16px;
   }
 }
 .ncua-message-notification__content {
@@ -2682,20 +2682,21 @@
   min-width: 0;
 }
 .ncua-message-notification__title {
-  font-size: var(--font-size-md);
-  line-height: var(--line-heights-md);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-2);
 }
 .ncua-message-notification__supporting-text {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-heights-sm);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-0);
 }
 .ncua-message-notification__actions-container {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   flex-shrink: 0;
+  flex-wrap: wrap;
 }
 @media (max-width: 768px) {
   .ncua-message-notification__actions-container {
@@ -2719,7 +2720,6 @@
   cursor: pointer;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
-  font-weight: var(--font-weights-commerce-sans-0);
 }
 .ncua-message-notification__close-button {
   display: flex;
@@ -2728,23 +2728,22 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 8px;
   flex-shrink: 0;
 }
 .ncua-message-notification--neutral {
   color: var(--gray-600);
   background-color: var(--gray-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--gray-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--neutral .ncua-message-notification__title {
   color: var(--gray-600);
 }
 .ncua-message-notification--neutral .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--neutral .ncua-notification__action-button {
   color: var(--gray-500);
@@ -2758,16 +2757,15 @@
 .ncua-message-notification--error {
   color: var(--primary-red-600);
   background-color: var(--primary-red-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--primary-red-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--error .ncua-message-notification__title {
   color: var(--primary-red-600);
 }
 .ncua-message-notification--error .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--error .ncua-notification__action-button {
   color: var(--primary-red-500);
@@ -2781,16 +2779,15 @@
 .ncua-message-notification--warning {
   color: var(--orange-600);
   background-color: var(--orange-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--orange-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--warning .ncua-message-notification__title {
   color: var(--orange-600);
 }
 .ncua-message-notification--warning .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--warning .ncua-notification__action-button {
   color: var(--orange-500);
@@ -2804,16 +2801,15 @@
 .ncua-message-notification--success {
   color: var(--green-600);
   background-color: var(--green-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--green-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--success .ncua-message-notification__title {
   color: var(--green-600);
 }
 .ncua-message-notification--success .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--success .ncua-notification__action-button {
   color: var(--green-500);
@@ -2836,6 +2832,9 @@
 .ncua-message-notification .ncua-notification__action-button--text, .ncua-message-notification .ncua-notification__action-button--text-gray {
   font-weight: var(--font-weights-commerce-sans-1);
 }
+.ncua-message-notification__hide-link.ncua-notification__action-button {
+  font-weight: var(--font-weights-commerce-sans-1);
+}
 
 .ncua-callout-notification {
   display: flex;

package/package.json

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