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

package/dist/cjs/assets/scripts/notification/FullWidthNotification.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FullWidthNotification = void 0;
+var _notification = require("../../../constant/notification");
 var _sanitize = require("../utils/sanitize");
 var _const = require("./const");
 var _utils = require("./utils");
@@ -30,7 +31,8 @@ class FullWidthNotification {
       actions,
       onClose,
       supportTextLink,
-      onHidePermanently
+      onHidePermanently,
+      hidePermanentlyLabel
     } = this.options;
     const wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.FULL_WIDTH.BASE, color, className);
     const iconHtml = _const.FULL_WIDTH_ICON_MAP[color](_const.FULL_WIDTH_SIZES.ICON);
@@ -41,7 +43,8 @@ class FullWidthNotification {
       actions,
       onClose,
       supportTextLink,
-      onHidePermanently
+      onHidePermanently,
+      hidePermanentlyLabel
     }));
     return wrapper;
   }
@@ -53,7 +56,8 @@ class FullWidthNotification {
       actions,
       onClose,
       supportTextLink,
-      onHidePermanently
+      onHidePermanently,
+      hidePermanentlyLabel
     } = params;
     return `
       <div class="${_const.CLASS_NAMES.FULL_WIDTH.CONTAINER}">
@@ -67,18 +71,25 @@ class FullWidthNotification {
           </div>
           <div class="${_const.CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">
             ${actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.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 ?? _notification.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/cjs/assets/scripts/notification/MessageNotification.js

@@ -31,7 +31,8 @@ class MessageNotification {
       className,
       actions,
       onClose,
-      onHidePermanently
+      onHidePermanently,
+      hidePermanentlyLabel
     } = this.options;
     // message 타입은 neutral, error, warning, success 4가지 색상만 지원
     let actualColor = color;
@@ -60,7 +61,8 @@ class MessageNotification {
       supportingText,
       actions,
       onClose,
-      onHidePermanently
+      onHidePermanently,
+      hidePermanentlyLabel
     }));
     // FeaturedIcon을 content-wrapper에 추가
     if (featuredIconElement) {

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.buildMessageTemplate = buildMessageTemplate;
+var _notification = require("../../../constant/notification");
 var _const = require("./const");
 var _utils = require("./utils");
 /**
@@ -22,7 +23,8 @@ function buildMessageTemplate(params) {
     supportingText,
     actions,
     onClose,
-    onHidePermanently
+    onHidePermanently,
+    hidePermanentlyLabel
   } = params;
   return `
     <div class="${_const.CLASS_NAMES.MESSAGE.CONTAINER}">
@@ -33,7 +35,12 @@ function buildMessageTemplate(params) {
             ${(0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.MESSAGE.SUPPORTING_TEXT)}
           </div>
         </div>
-        ${renderActionsContainer(actions, onClose, onHidePermanently)}
+        ${renderActionsContainer({
+    actions,
+    onClose,
+    onHidePermanently,
+    hidePermanentlyLabel
+  })}
       </div>
     </div>
   `;
@@ -43,27 +50,49 @@ function buildMessageTemplate(params) {
  * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
-function renderActionsContainer(actions, onClose, onHidePermanently) {
+function renderActionsContainer(params) {
+  const {
+    actions,
+    onClose,
+    onHidePermanently,
+    hidePermanentlyLabel
+  } = params;
   const actionsHtml = (0, _utils.renderActions)(actions ?? [], _const.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="${_const.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="${_const.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 ?? _notification.HIDE_PERMANENTLY_LABEL.message;
   return `
     <button type="button" class="${_const.CLASS_NAMES.COMMON.ACTION_BUTTON} ${_const.CLASS_NAMES.MESSAGE.HIDE_LINK}" data-hide-permanently="true">
-      다시 보지 않기
+      ${label}
     </button>
   `;
 }

package/dist/cjs/constant/notification.js

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

package/dist/cjs/src/components/forms-and-input/input-base/InputBase.js

@@ -39,26 +39,27 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
     ...props
   } = _ref;
   const inputRef = (0, _react.useRef)(null);
-  const [textCount, setTextCount] = (0, _react.useState)(0);
-  const [hasValue, setHasValue] = (0, _react.useState)(false);
-  // 값 유무는 DOM에서 읽는다 — props.value로 판정하면 uncontrolled Input에서 항상 빈 값으로 보인다.
-  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled 값이 프로그래밍적으로 바뀔 때는 input 이벤트가 나지 않아 props.value로 재동기화해야 한다
+  // controlled 인풋은 props.value 로 길이를 알 수 있으므로 상태를 두지 않는다.
+  // 입력마다 setState 를 하면 조합 중(한글 IME)에 리렌더가 끼어들어 조합이 끊긴다.
+  const isControlled = props.value !== undefined;
+  const [uncontrolledLength, setUncontrolledLength] = (0, _react.useState)(0);
+  const valueLength = isControlled ? String(props.value ?? '').length : uncontrolledLength;
+  const hasValue = valueLength > 0;
+  const textCount = valueLength;
+  // uncontrolled 인풋만 DOM 값을 읽어 따라간다 — props.value 가 없어 길이를 알 방법이 이것뿐이다.
   (0, _react.useEffect)(() => {
+    if (isControlled) return;
     const input = inputRef.current;
     if (!input) return;
     const syncFromInput = () => {
-      const {
-        length
-      } = input.value;
-      setHasValue(length > 0);
-      setTextCount(length);
+      setUncontrolledLength(input.value.length);
     };
     syncFromInput();
     input.addEventListener('input', syncFromInput);
     return () => {
       input.removeEventListener('input', syncFromInput);
     };
-  }, [props.value]);
+  }, [isControlled]);
   const renderOutsideSlot = (slot, position) => {
     if (slot.type === 'custom' && slot.placement !== 'outside') {
       return null;
@@ -72,10 +73,15 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
           children: slot.label
         });
       case 'text':
-        return (0, _jsxRuntime.jsx)("span", {
-          className: (0, _classnames.default)(`ncua-input__${position}-text`, `ncua-input__${position}-text--${size}`),
-          children: slot.text
-        });
+        {
+          // 클래스명은 리터럴로 쓴다 — MCP 의 BEM 추출기가 `ncua-input__${position}-text` 형태의
+          // 템플릿 리터럴에서는 `ncua-input__` 조각만 읽어 완성된 클래스를 잡지 못한다.
+          const textClass = position === 'leading' ? 'ncua-input__leading-text' : 'ncua-input__trailing-text';
+          return (0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(textClass, `${textClass}--${size}`),
+            children: slot.text
+          });
+        }
       case 'custom':
         return slot.children;
       default:

package/dist/cjs/src/components/index.js

@@ -498,6 +498,17 @@ Object.keys(_notification).forEach(function (key) {
     }
   });
 });
+var _postcodeSearchModal = require("./overlays/postcode-search-modal");
+Object.keys(_postcodeSearchModal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _postcodeSearchModal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _postcodeSearchModal[key];
+    }
+  });
+});
 var _tooltip = require("./overlays/tooltip");
 Object.keys(_tooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/src/components/overlays/notification/FullWidthNotification.js

@@ -9,6 +9,7 @@ var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _color = require("../../../../constant/color");
+var _notification = require("../../../../constant/notification");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.MessageChatSquare,
@@ -35,6 +36,7 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
     autoClose = 0,
     supportTextLink,
     onHidePermanently,
+    hidePermanentlyLabel = _notification.HIDE_PERMANENTLY_LABEL.fullWidth,
     ...rest
   } = _ref;
   const [shouldRemove, setShouldRemove] = (0, _react.useState)(false);
@@ -116,7 +118,7 @@ const FullWidthNotification = exports.FullWidthNotification = /*#__PURE__*/(0, _
             type: "button",
             className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'),
             onClick: onHidePermanently,
-            children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30"
+            children: hidePermanentlyLabel
           }), onClose && (0, _jsxRuntime.jsx)("button", {
             type: "button",
             className: "ncua-full-width-notification__close-button",

package/dist/cjs/src/components/overlays/notification/MessageNotification.js

@@ -33,6 +33,7 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
     className,
     actions,
     onHidePermanently,
+    hidePermanentlyLabel,
     ...rest
   } = _ref;
   // message 타입은 neutral, error, warning, success 4가지 색상만 지원
@@ -56,6 +57,7 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
           actions: actions,
           onClose: onClose,
           onHidePermanently: onHidePermanently,
+          hidePermanentlyLabel: hidePermanentlyLabel,
           closeIconColor: _color.COLOR[iconColorMap[validColor] || 'gray700']
         })]
       })

package/dist/cjs/src/components/overlays/notification/MessageNotificationParts.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.MessageNotificationContent = exports.MessageNotificationActions = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _notification = require("../../../../constant/notification");
 var _button = require("../../action/button");
 var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
 /** 아이콘 + 제목/서포팅 텍스트 영역. */
@@ -51,6 +52,7 @@ const MessageNotificationActions = _ref2 => {
     actions,
     onClose,
     onHidePermanently,
+    hidePermanentlyLabel = _notification.HIDE_PERMANENTLY_LABEL.message,
     closeIconColor
   } = _ref2;
   const hasActions = Boolean(actions?.length);
@@ -72,7 +74,7 @@ const MessageNotificationActions = _ref2 => {
         type: "button",
         className: "ncua-notification__action-button ncua-message-notification__hide-link",
         onClick: onHidePermanently,
-        children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
+        children: hidePermanentlyLabel
       }), onClose && (0, _jsxRuntime.jsx)("button", {
         type: "button",
         className: "ncua-message-notification__close-button",

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

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