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

package/dist/temp/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/temp/assets/scripts/notification/FullWidthNotification.js

@@ -1,3 +1,4 @@
+import { HIDE_PERMANENTLY_LABEL } from '../../../constant/notification';
 import { sanitizeHtml } from '../utils/sanitize';
 import { CLASS_NAMES, FULL_WIDTH_ICON_MAP, FULL_WIDTH_SIZES, SVG_ICONS } from './const';
 import { bindNotificationEvents, createWrapperElement, renderActions, renderSupportingText, setupAutoClose, } from './utils';
@@ -16,7 +17,7 @@ export class FullWidthNotification {
         this.setupAutoClose();
     }
     createElement() {
-        const { title, supportingText, color, className, actions, onClose, supportTextLink, onHidePermanently } = this.options;
+        const { title, supportingText, color, className, actions, onClose, supportTextLink, onHidePermanently, hidePermanentlyLabel, } = this.options;
         const wrapper = createWrapperElement(CLASS_NAMES.FULL_WIDTH.BASE, color, className);
         const iconHtml = FULL_WIDTH_ICON_MAP[color](FULL_WIDTH_SIZES.ICON);
         wrapper.innerHTML = sanitizeHtml(this.buildTemplate({
@@ -27,11 +28,12 @@ export class FullWidthNotification {
             onClose,
             supportTextLink,
             onHidePermanently,
+            hidePermanentlyLabel,
         }));
         return wrapper;
     }
     buildTemplate(params) {
-        const { iconHtml, title, supportingText, actions, onClose, supportTextLink, onHidePermanently } = params;
+        const { iconHtml, title, supportingText, actions, onClose, supportTextLink, onHidePermanently, hidePermanentlyLabel, } = params;
         return `
       <div class="${CLASS_NAMES.FULL_WIDTH.CONTAINER}">
         <div class="${CLASS_NAMES.FULL_WIDTH.CONTENT}">
@@ -44,19 +46,26 @@ export class FullWidthNotification {
           </div>
           <div class="${CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">
             ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.FULL_WIDTH.ACTIONS) : ''}
-            ${this.renderHidePermanentlyButton(onHidePermanently)}
+            ${this.renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
             ${this.renderCloseButton(onClose)}
           </div>
         </div>
       </div>
     `;
     }
-    renderHidePermanentlyButton(onHidePermanently) {
+    /**
+     * 다시보지 않기 버튼.
+     *
+     * `label`은 이 함수의 반환값이 `wrapper.innerHTML`에 들어가기 전에 `sanitizeHtml`로
+     * 처리되므로 별도 이스케이프하지 않는다 — `renderSupportingText`와 같은 정책이다.
+     */
+    renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel) {
         if (!onHidePermanently)
             return '';
+        const label = hidePermanentlyLabel ?? HIDE_PERMANENTLY_LABEL.fullWidth;
         return `
       <button type="button" class="ncua-notification__action-button ncua-notification__action-button--text ncua-full-width-notification__link" data-hide-permanently="true">
-        다시보지 않기
+        ${label}
       </button>
     `;
     }

package/dist/temp/assets/scripts/notification/MessageNotification.js

@@ -18,7 +18,7 @@ export class MessageNotification {
         this.setupAutoClose();
     }
     createElement() {
-        const { title, supportingText, color, className, actions, onClose, onHidePermanently } = this.options;
+        const { title, supportingText, color, className, actions, onClose, onHidePermanently, hidePermanentlyLabel } = this.options;
         // message 타입은 neutral, error, warning, success 4가지 색상만 지원
         let actualColor = color;
         if (color === 'info') {
@@ -47,6 +47,7 @@ export class MessageNotification {
             actions,
             onClose,
             onHidePermanently,
+            hidePermanentlyLabel,
         }));
         // FeaturedIcon을 content-wrapper에 추가
         if (featuredIconElement) {

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

@@ -33,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/temp/assets/scripts/notification/messageTemplate.d.ts

@@ -5,6 +5,7 @@ export interface MessageTemplateParams {
     actions?: NotificationAction[];
     onClose?: () => void;
     onHidePermanently?: () => void;
+    hidePermanentlyLabel?: string;
 }
 /**
  * Message Notification의 마크업을 만든다.

package/dist/temp/assets/scripts/notification/messageTemplate.js

@@ -1,3 +1,4 @@
+import { HIDE_PERMANENTLY_LABEL } from '../../../constant/notification';
 import { CLASS_NAMES, MESSAGE_SIZES, SVG_ICONS } from './const';
 import { renderActions, renderSupportingText } from './utils';
 /**
@@ -11,7 +12,7 @@ const ACTION_BUTTON_SIZE = 'xs';
  * 동일한 클래스 트리를 산출해야 한다 — SCSS 한 벌을 두 구현이 공유한다.
  */
 export function buildMessageTemplate(params) {
-    const { title, supportingText, actions, onClose, onHidePermanently } = params;
+    const { title, supportingText, actions, onClose, onHidePermanently, hidePermanentlyLabel } = params;
     return `
     <div class="${CLASS_NAMES.MESSAGE.CONTAINER}">
       <div class="${CLASS_NAMES.MESSAGE.CONTENT}">
@@ -21,7 +22,7 @@ export function buildMessageTemplate(params) {
             ${renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT)}
           </div>
         </div>
-        ${renderActionsContainer(actions, onClose, onHidePermanently)}
+        ${renderActionsContainer({ actions, onClose, onHidePermanently, hidePermanentlyLabel })}
       </div>
     </div>
   `;
@@ -31,30 +32,39 @@ export function buildMessageTemplate(params) {
  * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
-function renderActionsContainer(actions, onClose, onHidePermanently) {
+function renderActionsContainer(params) {
+    const { actions, onClose, onHidePermanently, hidePermanentlyLabel } = params;
     const actionsHtml = renderActions(actions ?? [], CLASS_NAMES.MESSAGE.ACTIONS, ACTION_BUTTON_SIZE);
-    const footerHtml = renderFooterContainer(onClose, onHidePermanently);
+    const footerHtml = renderFooterContainer({ onClose, onHidePermanently, hidePermanentlyLabel });
     if (!actionsHtml && !footerHtml)
         return '';
     return `<div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">${actionsHtml}${footerHtml}</div>`;
 }
 /** 다시 보지 않기 + 닫기 그룹. 전용 래퍼를 쓰는 이유는 `CLASS_NAMES.MESSAGE.FOOTER_CONTAINER` 참조. */
-function renderFooterContainer(onClose, onHidePermanently) {
+function renderFooterContainer(params) {
+    const { onClose, onHidePermanently, hidePermanentlyLabel } = params;
     if (!onHidePermanently && !onClose)
         return '';
     return `
     <div class="${CLASS_NAMES.MESSAGE.FOOTER_CONTAINER}">
-      ${renderHidePermanentlyButton(onHidePermanently)}
+      ${renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel)}
       ${renderCloseButton(onClose)}
     </div>
   `;
 }
-function renderHidePermanentlyButton(onHidePermanently) {
+/**
+ * 다시 보지 않기 버튼.
+ *
+ * `label`은 이 함수의 반환값이 `wrapper.innerHTML`에 들어가기 전에 `sanitizeHtml`로
+ * 처리되므로 별도 이스케이프하지 않는다 — `renderSupportingText`와 같은 정책이다.
+ */
+function renderHidePermanentlyButton(onHidePermanently, hidePermanentlyLabel) {
     if (!onHidePermanently)
         return '';
+    const label = hidePermanentlyLabel ?? HIDE_PERMANENTLY_LABEL.message;
     return `
     <button type="button" class="${CLASS_NAMES.COMMON.ACTION_BUTTON} ${CLASS_NAMES.MESSAGE.HIDE_LINK}" data-hide-permanently="true">
-      다시 보지 않기
+      ${label}
     </button>
   `;
 }

package/dist/temp/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/temp/constant/notification.js

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

package/dist/temp/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/temp/src/components/overlays/notification/FullWidthNotification.js

@@ -3,6 +3,7 @@ import { AlertTriangle, CheckCircle, InfoCircle, MessageChatSquare, XClose } fro
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../../constant/color';
+import { HIDE_PERMANENTLY_LABEL } from '../../../../constant/notification';
 const iconMap = {
     neutral: MessageChatSquare,
     error: AlertTriangle,
@@ -17,7 +18,7 @@ const iconColorMap = {
     success: 'green600',
     info: 'violet600',
 };
-const FullWidthNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, actions, autoClose = 0, supportTextLink, onHidePermanently, ...rest }, ref) => {
+const FullWidthNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, actions, autoClose = 0, supportTextLink, onHidePermanently, hidePermanentlyLabel = HIDE_PERMANENTLY_LABEL.fullWidth, ...rest }, ref) => {
     const [shouldRemove, setShouldRemove] = useState(false);
     const closeIconSize = {
         width: 20,
@@ -51,6 +52,6 @@ const FullWidthNotification = forwardRef(({ title, supportingText, color = 'neut
     return (_jsx("div", { ref: ref, className: classNames('ncua-full-width-notification', `ncua-full-width-notification--${color}`, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-full-width-notification__container", children: _jsxs("div", { className: "ncua-full-width-notification__content", children: [_jsxs("div", { className: "ncua-full-width-notification__content-wrapper", children: [(() => {
                                 const IconComponent = iconMap[color];
                                 return (_jsx(IconComponent, { width: 16, height: 16, color: COLOR[iconColorMap[color]], className: "ncua-full-width-notification__icon" }));
-                            })(), _jsxs("div", { className: "ncua-full-width-notification__text-container", children: [_jsx("span", { className: "ncua-full-width-notification__title", children: title }), !supportTextLink && supportingText && (_jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText })), supportTextLink && supportingText && (_jsx("a", { href: supportTextLink, className: "ncua-full-width-notification__link", children: _jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText }) }))] })] }), _jsxs("div", { className: "ncua-full-width-notification__actions-container", children: [actions && (_jsx("div", { className: "ncua-full-width-notification__actions", children: actions.map((action) => (_jsx("button", { onClick: action.onClick, className: classNames('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`), children: action.label }, `${action.label}-${action.hierarchy}`))) })), onHidePermanently && (_jsx("button", { type: "button", className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'), onClick: onHidePermanently, children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30" })), onClose && (_jsx("button", { type: "button", className: "ncua-full-width-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { ...closeIconSize, color: COLOR[iconColorMap[color]] }) }))] })] }) }) }));
+                            })(), _jsxs("div", { className: "ncua-full-width-notification__text-container", children: [_jsx("span", { className: "ncua-full-width-notification__title", children: title }), !supportTextLink && supportingText && (_jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText })), supportTextLink && supportingText && (_jsx("a", { href: supportTextLink, className: "ncua-full-width-notification__link", children: _jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText }) }))] })] }), _jsxs("div", { className: "ncua-full-width-notification__actions-container", children: [actions && (_jsx("div", { className: "ncua-full-width-notification__actions", children: actions.map((action) => (_jsx("button", { onClick: action.onClick, className: classNames('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`), children: action.label }, `${action.label}-${action.hierarchy}`))) })), onHidePermanently && (_jsx("button", { type: "button", className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'), onClick: onHidePermanently, children: hidePermanentlyLabel })), onClose && (_jsx("button", { type: "button", className: "ncua-full-width-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { ...closeIconSize, color: COLOR[iconColorMap[color]] }) }))] })] }) }) }));
 });
 export { FullWidthNotification };

package/dist/temp/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/temp/src/components/overlays/notification/MessageNotification.js

@@ -16,10 +16,10 @@ const iconColorMap = {
     warning: 'orange500',
     success: 'green600',
 };
-const MessageNotification = forwardRef(({ title, supportingText, icon: Icon, color = 'neutral', onClose, className, actions, onHidePermanently, ...rest }, ref) => {
+const MessageNotification = forwardRef(({ title, supportingText, icon: Icon, color = 'neutral', onClose, className, actions, onHidePermanently, hidePermanentlyLabel, ...rest }, ref) => {
     // message 타입은 neutral, error, warning, success 4가지 색상만 지원
     const validColor = color === 'info' ? 'neutral' : color;
-    return (_jsx("div", { ref: ref, className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-message-notification__container", children: _jsxs("div", { className: "ncua-message-notification__content", children: [_jsx(MessageNotificationContent, { title: title, supportingText: supportingText, icon: Icon || iconMap[validColor], iconColor: validColor, showIcon: Boolean(iconMap[validColor]) }), _jsx(MessageNotificationActions, { actions: actions, onClose: onClose, onHidePermanently: onHidePermanently, closeIconColor: COLOR[iconColorMap[validColor] || 'gray700'] })] }) }) }));
+    return (_jsx("div", { ref: ref, className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-message-notification__container", children: _jsxs("div", { className: "ncua-message-notification__content", children: [_jsx(MessageNotificationContent, { title: title, supportingText: supportingText, icon: Icon || iconMap[validColor], iconColor: validColor, showIcon: Boolean(iconMap[validColor]) }), _jsx(MessageNotificationActions, { actions: actions, onClose: onClose, onHidePermanently: onHidePermanently, hidePermanentlyLabel: hidePermanentlyLabel, closeIconColor: COLOR[iconColorMap[validColor] || 'gray700'] })] }) }) }));
 });
 MessageNotification.displayName = 'MessageNotification';
 export { MessageNotification };

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

@@ -15,6 +15,7 @@ interface MessageNotificationActionsProps {
     actions?: NotificationAction[];
     onClose?: () => void;
     onHidePermanently?: () => void;
+    hidePermanentlyLabel?: ReactNode;
     closeIconColor: string;
 }
 /**
@@ -22,6 +23,6 @@ interface MessageNotificationActionsProps {
  * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
-declare const MessageNotificationActions: ({ actions, onClose, onHidePermanently, closeIconColor, }: MessageNotificationActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+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/temp/src/components/overlays/notification/MessageNotificationParts.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Pin02, XClose } from '@ncds/ui-admin-icon';
+import { HIDE_PERMANENTLY_LABEL } from '../../../../constant/notification';
 import { Button } from '../../action/button';
 import { FeaturedIcon, } from '../../image-and-icons/featured-icon/FeaturedIcon';
 /** 아이콘 + 제목/서포팅 텍스트 영역. */
@@ -17,11 +18,11 @@ const MessageNotificationContent = ({ title, supportingText, icon, iconColor, sh
  * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
-const MessageNotificationActions = ({ actions, onClose, onHidePermanently, closeIconColor, }) => {
+const MessageNotificationActions = ({ actions, onClose, onHidePermanently, hidePermanentlyLabel = HIDE_PERMANENTLY_LABEL.message, closeIconColor, }) => {
     const hasActions = Boolean(actions?.length);
     const hasFooter = Boolean(onHidePermanently || onClose);
     if (!hasActions && !hasFooter)
         return null;
-    return (_jsxs("div", { className: "ncua-message-notification__actions-container", children: [hasActions && (_jsx("div", { className: "ncua-message-notification__actions", children: actions?.map((action) => (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action?.onClick }, `${action.label}-${action.hierarchy}`))) })), hasFooter && (_jsxs("div", { className: "ncua-message-notification__footer-container", children: [onHidePermanently && (_jsx("button", { type: "button", className: "ncua-notification__action-button ncua-message-notification__hide-link", onClick: onHidePermanently, children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30" })), onClose && (_jsx("button", { type: "button", className: "ncua-message-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { width: 20, height: 20, color: closeIconColor }) }))] }))] }));
+    return (_jsxs("div", { className: "ncua-message-notification__actions-container", children: [hasActions && (_jsx("div", { className: "ncua-message-notification__actions", children: actions?.map((action) => (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action?.onClick }, `${action.label}-${action.hierarchy}`))) })), hasFooter && (_jsxs("div", { className: "ncua-message-notification__footer-container", children: [onHidePermanently && (_jsx("button", { type: "button", className: "ncua-notification__action-button ncua-message-notification__hide-link", onClick: onHidePermanently, children: hidePermanentlyLabel })), onClose && (_jsx("button", { type: "button", className: "ncua-message-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { width: 20, height: 20, color: closeIconColor }) }))] }))] }));
 };
 export { MessageNotificationActions, MessageNotificationContent };

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

@@ -68,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/temp/src/components/overlays/notification/__tests__/hidePermanentlyLabel.test.d.ts

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

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

@@ -0,0 +1,160 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { FullWidthNotification } from '../FullWidthNotification';
+import { MessageNotification } from '../MessageNotification';
+import { Notification } from '../Notification';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const SELECTOR = {
+    /** message 타입 — 고도몰이 textContent 덮어쓰기에 쓰는 하위호환 계약 선택자. */
+    MESSAGE_HIDE_LINK: '.ncua-message-notification__hide-link',
+    /** full-width 타입 — 다시보지 않기 버튼. */
+    FULL_WIDTH_LINK: '.ncua-full-width-notification__link',
+    ACTION_BUTTON: '.ncua-notification__action-button',
+};
+/** 각 타입의 현행 기본 문구. 표기 통일은 별도 결정 사항이므로 서로 다른 값을 그대로 유지한다. */
+const DEFAULT_LABEL = {
+    MESSAGE: '다시 보지 않기',
+    FULL_WIDTH: '다시보지 않기',
+};
+const mounted = [];
+function render(element) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(element);
+    });
+    mounted.push({ root, container });
+    return container;
+}
+function renderMessage(props = {}) {
+    return render(createElement(MessageNotification, { title: '알림 제목', ...props }));
+}
+function renderFullWidth(props = {}) {
+    return render(createElement(FullWidthNotification, { title: '알림 제목', ...props }));
+}
+function renderNotification(props = {}) {
+    return render(createElement(Notification, { title: '알림 제목', ...props }));
+}
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    }
+});
+describe('hidePermanentlyLabel (React) — message 타입', () => {
+    it('R-1: prop 미지정 시 기본 문구 "다시 보지 않기"가 렌더된다', () => {
+        // Given: hidePermanentlyLabel 없이 onHidePermanently만 주어지고
+        // When: MessageNotification을 렌더하면
+        const container = renderMessage({ onHidePermanently: vi.fn() });
+        // Then: 현행 기본 문구가 그대로 노출된다 (시각적 변화 0)
+        const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+        expect(hideLink?.textContent).toBe(DEFAULT_LABEL.MESSAGE);
+    });
+    it('R-2: prop 지정 시 그 값이 렌더된다', () => {
+        // Given: 커스텀 라벨이 주어지고
+        // When: 렌더하면
+        const container = renderMessage({ onHidePermanently: vi.fn(), hidePermanentlyLabel: '30일간 보지 않기' });
+        // Then: 하드코딩 문구 대신 전달한 값이 노출된다
+        const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+        expect(hideLink?.textContent).toBe('30일간 보지 않기');
+    });
+    it('R-3: ReactNode 라벨을 받아 엘리먼트로 렌더한다', () => {
+        // Given: 문자열이 아닌 ReactNode 라벨이 주어지고
+        const label = createElement('span', { className: 'custom-hide-label' }, '커스텀 노드');
+        // When: 렌더하면
+        const container = renderMessage({ onHidePermanently: vi.fn(), hidePermanentlyLabel: label });
+        // Then: 노드가 hide-link 내부에 그대로 마운트된다
+        const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+        expect(hideLink?.querySelector('.custom-hide-label')?.textContent).toBe('커스텀 노드');
+    });
+    it('R-4: 라벨을 바꿔도 __hide-link 클래스 계약이 유지된다', () => {
+        // Given: 커스텀 라벨이 주어지고
+        // When: 렌더하면
+        const container = renderMessage({ onHidePermanently: vi.fn(), hidePermanentlyLabel: '커스텀' });
+        // Then: 고도몰의 textContent 덮어쓰기가 계속 동작하도록 기존 클래스가 모두 남는다
+        const hideLink = container.querySelector(SELECTOR.MESSAGE_HIDE_LINK);
+        expect(hideLink).not.toBeNull();
+        expect(hideLink?.classList.contains('ncua-notification__action-button')).toBe(true);
+        expect(hideLink?.classList.contains('ncua-message-notification__hide-link')).toBe(true);
+    });
+    it('R-5: onHidePermanently 없이 라벨만 주면 버튼이 렌더되지 않는다', () => {
+        // Given: 핸들러 없이 라벨만 주어지고
+        // When: 렌더하면
+        const container = renderMessage({ hidePermanentlyLabel: '커스텀' });
+        // Then: 라벨만으로는 버튼이 생기지 않는다 (핸들러가 렌더 조건)
+        expect(container.querySelector(SELECTOR.MESSAGE_HIDE_LINK)).toBeNull();
+    });
+    it('R-6: 라벨이 DOM 속성으로 새어나가지 않는다', () => {
+        // Given: 커스텀 라벨이 주어지고
+        // When: 렌더하면
+        const container = renderMessage({ onHidePermanently: vi.fn(), hidePermanentlyLabel: '커스텀' });
+        // Then: rest 스프레드를 타고 루트 div의 속성으로 흘러들지 않는다
+        const root = container.querySelector('.ncua-message-notification');
+        expect(root?.hasAttribute('hidepermanentlylabel')).toBe(false);
+    });
+});
+describe('hidePermanentlyLabel (React) — full-width 타입', () => {
+    it('R-7: prop 미지정 시 기본 문구 "다시보지 않기"가 렌더된다', () => {
+        // Given: hidePermanentlyLabel 없이 onHidePermanently만 주어지고
+        // When: FullWidthNotification을 렌더하면
+        const container = renderFullWidth({ onHidePermanently: vi.fn() });
+        // Then: message 타입과 다른 현행 문구가 그대로 유지된다 (표기 통일은 별도 결정)
+        const hideButton = container.querySelector(SELECTOR.FULL_WIDTH_LINK);
+        expect(hideButton?.textContent).toBe(DEFAULT_LABEL.FULL_WIDTH);
+    });
+    it('R-8: prop 지정 시 그 값이 렌더된다', () => {
+        // Given: 커스텀 라벨이 주어지고
+        // When: 렌더하면
+        const container = renderFullWidth({ onHidePermanently: vi.fn(), hidePermanentlyLabel: '오늘 하루 보지 않기' });
+        // Then: 전달한 값이 노출된다
+        const hideButton = container.querySelector(SELECTOR.FULL_WIDTH_LINK);
+        expect(hideButton?.textContent).toBe('오늘 하루 보지 않기');
+    });
+    it('R-9: 라벨을 바꿔도 기존 클래스 계약이 유지된다', () => {
+        // Given: 커스텀 라벨이 주어지고
+        // When: 렌더하면
+        const container = renderFullWidth({ onHidePermanently: vi.fn(), hidePermanentlyLabel: '커스텀' });
+        // Then: 액션 버튼 클래스가 그대로 남는다
+        const hideButton = container.querySelector(SELECTOR.FULL_WIDTH_LINK);
+        expect(hideButton?.classList.contains('ncua-notification__action-button')).toBe(true);
+        expect(hideButton?.classList.contains('ncua-notification__action-button--text')).toBe(true);
+    });
+    it('R-10: onHidePermanently 없이 라벨만 주면 버튼이 렌더되지 않는다', () => {
+        // Given: 핸들러 없이 라벨만 주어지고
+        // When: 렌더하면
+        const container = renderFullWidth({ hidePermanentlyLabel: '커스텀' });
+        // Then: 액션 버튼이 생기지 않는다
+        expect(container.querySelector(SELECTOR.ACTION_BUTTON)).toBeNull();
+    });
+});
+describe('hidePermanentlyLabel (React) — Notification 공유 Props 경유', () => {
+    it('R-11: type="message"에서 공유 Props의 라벨이 전달된다', () => {
+        // Given: 공유 Notification props로 라벨이 주어지고
+        // When: type="message"로 렌더하면
+        const container = renderNotification({
+            type: 'message',
+            onHidePermanently: vi.fn(),
+            hidePermanentlyLabel: '공유 프롭 라벨',
+        });
+        // Then: message 구현까지 라벨이 도달한다
+        expect(container.querySelector(SELECTOR.MESSAGE_HIDE_LINK)?.textContent).toBe('공유 프롭 라벨');
+    });
+    it('R-12: type="full-width"에서 공유 Props의 라벨이 전달된다', () => {
+        // Given: 공유 Notification props로 라벨이 주어지고
+        // When: type="full-width"로 렌더하면
+        const container = renderNotification({
+            type: 'full-width',
+            onHidePermanently: vi.fn(),
+            hidePermanentlyLabel: '공유 프롭 라벨',
+        });
+        // Then: full-width 구현까지 라벨이 도달한다
+        expect(container.querySelector(SELECTOR.FULL_WIDTH_LINK)?.textContent).toBe('공유 프롭 라벨');
+    });
+});