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

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

@@ -9,6 +9,12 @@ export declare class FullWidthNotification {
     constructor(options: FullWidthNotificationOptions);
     private createElement;
     private buildTemplate;
+    /**
+     * 다시보지 않기 버튼.
+     *
+     * `label`은 이 함수의 반환값이 `wrapper.innerHTML`에 들어가기 전에 `sanitizeHtml`로
+     * 처리되므로 별도 이스케이프하지 않는다 — `renderSupportingText`와 같은 정책이다.
+     */
     private renderHidePermanentlyButton;
     private renderCloseButton;
     private bindEvents;

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;
@@ -15,5 +33,15 @@ export interface BaseNotificationOptions {
     autoClose?: number;
     supportTextLink?: string;
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨. full-width, message 타입에서 사용 가능하며
+     * `onHidePermanently`를 지정했을 때만 렌더된다.
+     *
+     * 기본값은 타입별로 다르다 — message는 `'다시 보지 않기'`, full-width는 `'다시보지 않기'`.
+     * 표기가 통일되어 있지 않은 것은 현행 유지이며, 통일은 별도 결정 사항이다.
+     *
+     * 값은 HTML에 삽입되기 전 `sanitizeHtml`을 거친다.
+     */
+    hidePermanentlyLabel?: string;
 }
 export declare const MESSAGE_CLOSE_ICON_COLORS: Record<NotificationColor, string>;

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

@@ -0,0 +1,15 @@
+import type { NotificationAction } from './const';
+export interface MessageTemplateParams {
+    title: string;
+    supportingText?: string;
+    actions?: NotificationAction[];
+    onClose?: () => void;
+    onHidePermanently?: () => void;
+    hidePermanentlyLabel?: string;
+}
+/**
+ * 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/constant/notification.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 다시보지 않기 버튼의 타입별 기본 문구.
+ *
+ * `hidePermanentlyLabel`을 지정하지 않았을 때 쓰인다.
+ * React(`src/components/overlays/notification/`)와 Vanilla(`assets/scripts/notification/`)
+ * 두 구현이 이 상수를 함께 참조한다 — 문구가 하드코딩으로 흩어져 서로 어긋나던 문제(#460)를
+ * 막기 위한 단일 출처다.
+ *
+ * `message`와 `fullWidth`의 띄어쓰기가 다른 것은 오타가 아니라 현행 유지다.
+ * 표기 통일은 별도 결정 사항이며, 결정되면 이 파일 한 곳만 고치면 된다.
+ */
+export declare const HIDE_PERMANENTLY_LABEL: {
+    readonly message: "다시 보지 않기";
+    readonly fullWidth: "다시보지 않기";
+};

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

@@ -40,6 +40,12 @@ interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'
      * 다시보지 않기 이벤트 핸들러 (선택사항)
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * `onHidePermanently`를 지정했을 때만 렌더된다.
+     * @default '다시보지 않기'
+     */
+    hidePermanentlyLabel?: ReactNode;
 }
 declare const FullWidthNotification: import("react").ForwardRefExoticComponent<FullWidthNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { FullWidthNotificationProps };

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

@@ -35,6 +35,12 @@ interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      * 다시보지 않기 이벤트 핸들러 (선택사항)
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * `onHidePermanently`를 지정했을 때만 렌더된다.
+     * @default '다시 보지 않기'
+     */
+    hidePermanentlyLabel?: ReactNode;
 }
 declare const MessageNotification: import("react").ForwardRefExoticComponent<MessageNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { MessageNotificationProps };

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

@@ -0,0 +1,28 @@
+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;
+    hidePermanentlyLabel?: ReactNode;
+    closeIconColor: string;
+}
+/**
+ * 액션 버튼 그룹 + 닫기 그룹을 감싸는 우측 영역.
+ * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
+ * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
+ */
+declare const MessageNotificationActions: ({ actions, onClose, 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

@@ -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'> {
     /**
@@ -67,6 +68,14 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
      * message, full-width 타입에서 사용 가능
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * message, full-width 타입에서 사용 가능하며 `onHidePermanently`를 지정했을 때만 렌더된다.
+     *
+     * 기본값은 타입별로 다르다 — message는 `'다시 보지 않기'`, full-width는 `'다시보지 않기'`.
+     * 표기가 통일되어 있지 않은 것은 현행 유지이며, 통일은 별도 결정 사항이다.
+     */
+    hidePermanentlyLabel?: ReactNode;
     /**
      * Portal 마운트 여부. `floating` 타입에서만 동작한다.
      *

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

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

package/dist/types/src/components/overlays/notification/__tests__/hidePermanentlyLabel.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);
@@ -2760,22 +2759,18 @@ button {
 .ncua-message-notification--neutral .ncua-notification__action-button--text, .ncua-message-notification--neutral .ncua-notification__action-button--text-gray {
   color: var(--gray-600);
 }
-.ncua-message-notification--neutral .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .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);
@@ -2783,22 +2778,18 @@ button {
 .ncua-message-notification--error .ncua-notification__action-button--text, .ncua-message-notification--error .ncua-notification__action-button--text-gray {
   color: var(--primary-red-600);
 }
-.ncua-message-notification--error .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .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);
@@ -2806,22 +2797,18 @@ button {
 .ncua-message-notification--warning .ncua-notification__action-button--text, .ncua-message-notification--warning .ncua-notification__action-button--text-gray {
   color: var(--orange-600);
 }
-.ncua-message-notification--warning .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .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);
@@ -2829,9 +2816,6 @@ button {
 .ncua-message-notification--success .ncua-notification__action-button--text, .ncua-message-notification--success .ncua-notification__action-button--text-gray {
   color: var(--green-600);
 }
-.ncua-message-notification--success .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification .ncua-notification__action-button {
   background: transparent;
   border: none;
@@ -2844,6 +2828,10 @@ 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 .ncua-message-notification__hide-link.ncua-notification__action-button {
+  color: var(--gray-500);
+  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);
@@ -2752,22 +2751,18 @@
 .ncua-message-notification--neutral .ncua-notification__action-button--text, .ncua-message-notification--neutral .ncua-notification__action-button--text-gray {
   color: var(--gray-600);
 }
-.ncua-message-notification--neutral .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .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);
@@ -2775,22 +2770,18 @@
 .ncua-message-notification--error .ncua-notification__action-button--text, .ncua-message-notification--error .ncua-notification__action-button--text-gray {
   color: var(--primary-red-600);
 }
-.ncua-message-notification--error .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .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);
@@ -2798,22 +2789,18 @@
 .ncua-message-notification--warning .ncua-notification__action-button--text, .ncua-message-notification--warning .ncua-notification__action-button--text-gray {
   color: var(--orange-600);
 }
-.ncua-message-notification--warning .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .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);
@@ -2821,9 +2808,6 @@
 .ncua-message-notification--success .ncua-notification__action-button--text, .ncua-message-notification--success .ncua-notification__action-button--text-gray {
   color: var(--green-600);
 }
-.ncua-message-notification--success .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification .ncua-notification__action-button {
   background: transparent;
   border: none;
@@ -2836,6 +2820,10 @@
 .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 .ncua-message-notification__hide-link.ncua-notification__action-button {
+  color: var(--gray-500);
+  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.4",
+  "version": "1.8.21-alpha.6",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",