@ncds/ui-admin 1.8.21-alpha.1 → 1.8.21-alpha.10

package/dist/cjs/src/components/forms-and-input/password-input/__tests__/PasswordInput.test.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _PasswordInput = require("../PasswordInput");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+function mountPasswordInput() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(/*#__PURE__*/(0, _react.createElement)(_PasswordInput.PasswordInput, props));
+  });
+  const unmount = () => {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  };
+  return {
+    container,
+    unmount
+  };
+}
+(0, _vitest.describe)('PasswordInput — 자물쇠 아이콘 색상', () => {
+  // 자물쇠 색은 CSS 가 결정한다. 인라인 color 를 넘기면 상태 규칙이 무시되므로,
+  // "인라인 색이 없고 슬롯 아이콘 공통 클래스를 탄다" 는 것이 색상 반영의 전제다.
+  (0, _vitest.it)('자물쇠에 인라인 색을 넘기지 않고 슬롯 아이콘 공통 클래스를 탄다', () => {
+    // Given/When: 기본 상태로 렌더하면
+    const view = mountPasswordInput();
+    // Then: 상태 규칙을 타는 클래스가 붙고 인라인 색은 없다
+    const lockIcon = view.container.querySelector('.ncua-input__left-icon');
+    (0, _vitest.expect)(lockIcon).not.toBeNull();
+    (0, _vitest.expect)(lockIcon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+    (0, _vitest.expect)(lockIcon?.hasAttribute('color')).toBe(false);
+    view.unmount();
+  });
+  // 값이 있는 채로 비활성화되면 has-value 가 살아 있어 자물쇠가 진하게 남던 문제
+  (0, _vitest.it)('값이 있는 채로 disabled 여도 자물쇠가 상태 규칙 대상으로 남는다', () => {
+    // Given/When: 값이 있는 비활성화 상태로 렌더하면
+    const view = mountPasswordInput({
+      value: 'secret',
+      disabled: true,
+      onChange: _vitest.vi.fn()
+    });
+    // Then: 루트에 is-disabled 와 has-value 가 함께 붙고, 자물쇠는 공통 클래스를 유지한다
+    const root = view.container.querySelector('.ncua-input');
+    (0, _vitest.expect)(root?.classList.contains('is-disabled')).toBe(true);
+    (0, _vitest.expect)(root?.classList.contains('has-value')).toBe(true);
+    (0, _vitest.expect)(view.container.querySelector('.ncua-input__left-icon')?.classList.contains('ncua-input__slot-icon')).toBe(true);
+    view.unmount();
+  });
+});

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/layout/ncua-scope/NcuaScope.js

@@ -23,6 +23,12 @@ const STYLE_HOISTING_PROPS = {
   href: STYLE_KEY,
   precedence: 'default'
 };
+// SSR 은 <style> 의 자식 텍스트를 HTML 이스케이프하지만(' -> &#x27;), 브라우저는 <style>
+// 안을 raw text 로 읽어 되돌리지 않는다. 그러면 CSS 가 깨지고 하이드레이션도 불일치한다.
+// innerHTML 로 넣으면 서버가 원문 그대로 내보낸다.
+const STYLE_CONTENT = {
+  __html: _scopedCss.NCUA_SCOPED_CSS
+};
 /**
  * NCUA 스타일을 이 엘리먼트 하위로 한정하는 경계.
  *
@@ -59,10 +65,10 @@ const NcuaScope = exports.NcuaScope = /*#__PURE__*/(0, _react.forwardRef)((_ref,
     value: true,
     children: [shouldRenderStyle && (SUPPORTS_STYLE_HOISTING ? (0, _jsxRuntime.jsx)("style", {
       ...STYLE_HOISTING_PROPS,
-      children: _scopedCss.NCUA_SCOPED_CSS
+      dangerouslySetInnerHTML: STYLE_CONTENT
     }) : (0, _jsxRuntime.jsx)("style", {
       "data-ncua-scope": STYLE_KEY,
-      children: _scopedCss.NCUA_SCOPED_CSS
+      dangerouslySetInnerHTML: STYLE_CONTENT
     })), (0, _jsxRuntime.jsx)("div", {
       ref: ref,
       className: (0, _classnames.default)('ncua-scope', className),

package/dist/cjs/src/components/navigation/pagination/Pagination.js

@@ -26,7 +26,9 @@ const Pagination = _ref => {
   const [start, setStart] = (0, _react.useState)(1);
   const noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
   const noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
-  const showJumpPageButton = totalPage > pageCount;
+  // mo 는 CSS 가 페이지 번호 목록과 first/last 를 숨겨 prev/next 만 남는다.
+  // pc 기준(totalPage > pageCount)을 그대로 쓰면 페이지가 적을 때 이동 수단이 하나도 없다.
+  const showJumpPageButton = breakPoint === 'mo' ? totalPage > 1 : totalPage > pageCount;
   const handleClickButton = pageNum => {
     if ((0, _lodashEs.isFunction)(onPageChange)) {
       onPageChange(pageNum);

package/dist/cjs/src/components/navigation/pagination/__tests__/Pagination.test.js

@@ -15,6 +15,12 @@ const CURRENT_PAGE = 91; // 100페이지 기준 마지막 그룹(91~100)을 보
 const GROUP_START_100_PAGES = 91; // currentPage=91 일 때의 그룹 시작
 const GROUP_START_50_PAGES = 41; // totalPage=50 으로 줄었을 때의 마지막 그룹 시작
 const LAST_PAGE_50 = 50;
+/** 페이지 그룹 크기(10) 이하로 나뉘는 건수 — 3페이지 */
+const TOTAL_COUNT_3_PAGES = 30;
+/** TOTAL_COUNT_3_PAGES 기준 총 페이지 수 = 마지막 페이지 번호 */
+const LAST_PAGE_3 = 3;
+/** 페이지가 하나뿐인 건수 */
+const TOTAL_COUNT_1_PAGE = 8;
 let root = null;
 let container = null;
 function render(props) {
@@ -37,6 +43,8 @@ function render(props) {
   container = null;
 });
 const pageNums = el => Array.from(el.querySelectorAll('.ncua-pagination__page-num')).map(b => Number(b.textContent));
+const prevOf = el => el.querySelector('.ncua-pagination__before');
+const nextOf = el => el.querySelector('.ncua-pagination__next');
 (0, _vitest.describe)('#332 Pagination — totalPage 축소 시 start 보정', () => {
   (0, _vitest.it)('totalPage 가 줄면 start 를 마지막 그룹으로 보정하고 범위 밖 페이지 버튼을 표시하지 않는다', () => {
     // 1) 100 페이지에서 91 페이지 보는 중 → 91~100 그룹 표시
@@ -59,4 +67,70 @@ const pageNums = el => Array.from(el.querySelectorAll('.ncua-pagination__page-nu
     (0, _vitest.expect)(nums[0]).toBe(GROUP_START_50_PAGES);
     (0, _vitest.expect)(Math.max(...nums)).toBeLessThanOrEqual(LAST_PAGE_50);
   });
+});
+(0, _vitest.describe)('Pagination — mo 모드 이전/다음 버튼 노출', () => {
+  (0, _vitest.it)('페이지가 그룹 크기 이하여도 mo 에서는 이전·다음 버튼이 노출된다', () => {
+    // Given/When: 3페이지(그룹 크기 10 이하) 분량을 mo 로 렌더하면
+    const el = render({
+      totalCount: TOTAL_COUNT_3_PAGES,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 1,
+      breakPoint: 'mo'
+    });
+    // Then: mo 는 페이지 번호 목록이 CSS 로 숨겨지므로 이전·다음 버튼이 있어야 이동할 수 있다
+    (0, _vitest.expect)(prevOf(el)).not.toBeNull();
+    (0, _vitest.expect)(nextOf(el)).not.toBeNull();
+  });
+  (0, _vitest.it)('첫 페이지에서는 이전 버튼이, 마지막 페이지에서는 다음 버튼이 비활성이다', () => {
+    // Given/When: 3페이지 중 첫 페이지를 mo 로 렌더하면
+    const first = render({
+      totalCount: TOTAL_COUNT_3_PAGES,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 1,
+      breakPoint: 'mo'
+    });
+    // Then: 이전만 막히고 다음은 누를 수 있다
+    (0, _vitest.expect)(prevOf(first)?.disabled).toBe(true);
+    (0, _vitest.expect)(nextOf(first)?.disabled).toBe(false);
+    // When: 마지막 페이지로 이동하면
+    const last = render({
+      totalCount: TOTAL_COUNT_3_PAGES,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: LAST_PAGE_3,
+      breakPoint: 'mo'
+    });
+    // Then: 반대로 다음이 막힌다
+    (0, _vitest.expect)(prevOf(last)?.disabled).toBe(false);
+    (0, _vitest.expect)(nextOf(last)?.disabled).toBe(true);
+  });
+  (0, _vitest.it)('페이지가 하나뿐이면 mo 에서도 이전·다음 버튼을 내보내지 않는다', () => {
+    // Given/When: 1페이지 분량을 mo 로 렌더하면
+    const el = render({
+      totalCount: TOTAL_COUNT_1_PAGE,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 1,
+      breakPoint: 'mo'
+    });
+    // Then: 이동할 곳이 없으므로 버튼도 없다
+    (0, _vitest.expect)(prevOf(el)).toBeNull();
+    (0, _vitest.expect)(nextOf(el)).toBeNull();
+  });
+  (0, _vitest.it)('pc 는 기존대로 페이지 그룹을 넘길 때만 점프 버튼을 노출한다', () => {
+    // Given/When: 3페이지 분량을 pc 로 렌더하면
+    const el = render({
+      totalCount: TOTAL_COUNT_3_PAGES,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 1,
+      breakPoint: 'pc'
+    });
+    // Then: 페이지 번호로 직접 이동하므로 점프 버튼은 나오지 않는다
+    (0, _vitest.expect)(prevOf(el)).toBeNull();
+    (0, _vitest.expect)(nextOf(el)).toBeNull();
+    (0, _vitest.expect)(pageNums(el)).toHaveLength(LAST_PAGE_3);
+  });
 });

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

@@ -9,8 +9,7 @@ var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _color = require("../../../../constant/color");
-var _button = require("../../action/button");
-var _FeaturedIcon = require("../../image-and-icons/featured-icon/FeaturedIcon");
+var _MessageNotificationParts = require("./MessageNotificationParts");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconMap = {
   neutral: _uiAdminIcon.Pin02,
@@ -34,18 +33,11 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
     className,
     actions,
     onHidePermanently,
+    hidePermanentlyLabel,
     ...rest
   } = _ref;
   // message 타입은 neutral, error, warning, success 4가지 색상만 지원
   const validColor = color === 'info' ? 'neutral' : color;
-  const iconColor = validColor;
-  const featuredIconProps = {
-    icon: Icon || iconMap[validColor] || _uiAdminIcon.Pin02,
-    size: 'lg',
-    color: iconColor,
-    theme: 'light-circle'
-  };
-  const closeIconColor = _color.COLOR[iconColorMap[validColor] || 'gray700'];
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
     className: (0, _classnames.default)('ncua-message-notification', `ncua-message-notification--${validColor}`, className),
@@ -55,50 +47,18 @@ const MessageNotification = exports.MessageNotification = /*#__PURE__*/(0, _reac
       className: "ncua-message-notification__container",
       children: (0, _jsxRuntime.jsxs)("div", {
         className: "ncua-message-notification__content",
-        children: [(0, _jsxRuntime.jsxs)("div", {
-          className: "ncua-message-notification__content-wrapper",
-          children: [iconMap[validColor] && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, {
-            ...featuredIconProps,
-            className: "ncua-message-notification__icon"
-          }), (0, _jsxRuntime.jsxs)("div", {
-            className: "ncua-message-notification__text-container",
-            children: [(0, _jsxRuntime.jsx)("span", {
-              className: "ncua-message-notification__title",
-              children: title
-            }), supportingText && (0, _jsxRuntime.jsx)("span", {
-              className: "ncua-message-notification__supporting-text",
-              children: supportingText
-            })]
-          })]
-        }), (0, _jsxRuntime.jsx)("div", {
-          className: "ncua-message-notification__actions-container",
-          children: actions && (0, _jsxRuntime.jsx)("div", {
-            className: "ncua-message-notification__actions",
-            children: actions.map(action => (0, _jsxRuntime.jsx)(_button.Button, {
-              size: "xs",
-              hierarchy: action.hierarchy || 'text',
-              label: action.label,
-              onClick: action?.onClick
-            }, `${action.label}-${action.hierarchy}`))
-          })
-        }), (0, _jsxRuntime.jsxs)("div", {
-          className: "ncua-message-notification__footer-container",
-          children: [onHidePermanently && (0, _jsxRuntime.jsx)("button", {
-            type: "button",
-            className: (0, _classnames.default)('ncua-notification__action-button', 'ncua-notification__action-button--link', 'ncua-message-notification__hide-link'),
-            onClick: onHidePermanently,
-            children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30"
-          }), onClose && (0, _jsxRuntime.jsx)("button", {
-            type: "button",
-            className: "ncua-message-notification__close-button",
-            onClick: onClose,
-            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30",
-            children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
-              width: 20,
-              height: 20,
-              color: closeIconColor
-            })
-          })]
+        children: [(0, _jsxRuntime.jsx)(_MessageNotificationParts.MessageNotificationContent, {
+          title: title,
+          supportingText: supportingText,
+          icon: Icon || iconMap[validColor],
+          iconColor: validColor,
+          showIcon: Boolean(iconMap[validColor])
+        }), (0, _jsxRuntime.jsx)(_MessageNotificationParts.MessageNotificationActions, {
+          actions: actions,
+          onClose: onClose,
+          onHidePermanently: onHidePermanently,
+          hidePermanentlyLabel: hidePermanentlyLabel,
+          closeIconColor: _color.COLOR[iconColorMap[validColor] || 'gray700']
         })]
       })
     })

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

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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");
+/** 아이콘 + 제목/서포팅 텍스트 영역. */
+const MessageNotificationContent = _ref => {
+  let {
+    title,
+    supportingText,
+    icon,
+    iconColor,
+    showIcon
+  } = _ref;
+  const featuredIconProps = {
+    icon: icon || _uiAdminIcon.Pin02,
+    size: 'md',
+    color: iconColor,
+    theme: 'light-circle'
+  };
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "ncua-message-notification__content-wrapper",
+    children: [showIcon && (0, _jsxRuntime.jsx)(_FeaturedIcon.FeaturedIcon, {
+      ...featuredIconProps,
+      className: "ncua-message-notification__icon"
+    }), (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-message-notification__text-container",
+      children: [(0, _jsxRuntime.jsx)("span", {
+        className: "ncua-message-notification__title",
+        children: title
+      }), supportingText && (0, _jsxRuntime.jsx)("span", {
+        className: "ncua-message-notification__supporting-text",
+        children: supportingText
+      })]
+    })]
+  });
+};
+/**
+ * 액션 버튼 그룹 + 닫기 그룹을 감싸는 우측 영역.
+ * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
+ * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
+ */
+exports.MessageNotificationContent = MessageNotificationContent;
+const MessageNotificationActions = _ref2 => {
+  let {
+    actions,
+    onClose,
+    onHidePermanently,
+    hidePermanentlyLabel = _notification.HIDE_PERMANENTLY_LABEL.message,
+    closeIconColor
+  } = _ref2;
+  const hasActions = Boolean(actions?.length);
+  const hasFooter = Boolean(onHidePermanently || onClose);
+  if (!hasActions && !hasFooter) return null;
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "ncua-message-notification__actions-container",
+    children: [hasActions && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-message-notification__actions",
+      children: actions?.map(action => (0, _jsxRuntime.jsx)(_button.Button, {
+        size: "xs",
+        hierarchy: action.hierarchy || 'text',
+        label: action.label,
+        onClick: action?.onClick
+      }, `${action.label}-${action.hierarchy}`))
+    }), hasFooter && (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-message-notification__footer-container",
+      children: [onHidePermanently && (0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: "ncua-notification__action-button ncua-message-notification__hide-link",
+        onClick: onHidePermanently,
+        children: hidePermanentlyLabel
+      }), onClose && (0, _jsxRuntime.jsx)("button", {
+        type: "button",
+        className: "ncua-message-notification__close-button",
+        onClick: onClose,
+        "aria-label": "\uC54C\uB9BC \uB2EB\uAE30",
+        children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
+          width: 20,
+          height: 20,
+          color: closeIconColor
+        })
+      })]
+    })]
+  });
+};
+exports.MessageNotificationActions = MessageNotificationActions;

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

@@ -0,0 +1,246 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _MessageNotification = require("../MessageNotification");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const SELECTOR = {
+  ROOT: '.ncua-message-notification',
+  CONTENT: '.ncua-message-notification__content',
+  CONTENT_WRAPPER: '.ncua-message-notification__content-wrapper',
+  ICON: '.ncua-message-notification__icon',
+  ACTIONS_CONTAINER: '.ncua-message-notification__actions-container',
+  ACTIONS: '.ncua-message-notification__actions',
+  FOOTER_CONTAINER: '.ncua-message-notification__footer-container',
+  HIDE_LINK: '.ncua-message-notification__hide-link',
+  CLOSE_BUTTON: '.ncua-message-notification__close-button'
+};
+const mounted = [];
+function renderMessageNotification() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root.render(/*#__PURE__*/(0, _react.createElement)(_MessageNotification.MessageNotification, {
+      title: '알림 제목',
+      ...props
+    }));
+  });
+  mounted.push({
+    root,
+    container
+  });
+  return container;
+}
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => {
+      root.unmount();
+    });
+    container.remove();
+  }
+});
+(0, _vitest.describe)('MessageNotification (React) — DOM 구조 계약', () => {
+  (0, _vitest.it)('U-1: __footer-container가 __actions-container의 자식으로 렌더된다', () => {
+    // Given: 다시 보지 않기·닫기 핸들러가 주어지고
+    // When: MessageNotification을 렌더하면
+    const container = renderMessageNotification({
+      onHidePermanently: _vitest.vi.fn(),
+      onClose: _vitest.vi.fn()
+    });
+    // Then: footer-container는 actions-container의 직계 자식이다 (content의 직계 자식이 아니다)
+    const actionsContainer = container.querySelector(SELECTOR.ACTIONS_CONTAINER);
+    const footerContainer = container.querySelector(SELECTOR.FOOTER_CONTAINER);
+    (0, _vitest.expect)(actionsContainer).not.toBeNull();
+    (0, _vitest.expect)(footerContainer).not.toBeNull();
+    (0, _vitest.expect)(footerContainer?.parentElement).toBe(actionsContainer);
+  });
+  (0, _vitest.it)('U-2: actions 지정 시 __actions와 __footer-container가 __actions-container 안에 순서대로 공존한다', () => {
+    // Given: 액션 버튼 2개와 다시 보지 않기·닫기 핸들러가 주어지고
+    const actions = [{
+      label: '조회하기',
+      hierarchy: 'text',
+      onClick: _vitest.vi.fn()
+    }, {
+      label: '포인트 충전',
+      hierarchy: 'text-gray',
+      onClick: _vitest.vi.fn()
+    }];
+    // When: 렌더하면
+    const container = renderMessageNotification({
+      actions,
+      onHidePermanently: _vitest.vi.fn(),
+      onClose: _vitest.vi.fn()
+    });
+    // Then: actions-container의 자식은 [actions, footer-container] 순서다
+    const actionsContainer = container.querySelector(SELECTOR.ACTIONS_CONTAINER);
+    const actionsGroup = container.querySelector(SELECTOR.ACTIONS);
+    const footerContainer = container.querySelector(SELECTOR.FOOTER_CONTAINER);
+    (0, _vitest.expect)(actionsContainer).not.toBeNull();
+    (0, _vitest.expect)(Array.from(actionsContainer?.children ?? [])).toEqual([actionsGroup, footerContainer]);
+  });
+  (0, _vitest.it)('U-3: onHidePermanently·onClose·actions 미지정 시 빈 컨테이너가 남지 않는다', () => {
+    // Given/When: 우측 그룹에 표시할 요소가 하나도 없는 상태로 렌더하면
+    const container = renderMessageNotification();
+    // Then: actions-container도 footer-container도 렌더되지 않는다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.ACTIONS_CONTAINER)).toBeNull();
+    (0, _vitest.expect)(container.querySelector(SELECTOR.FOOTER_CONTAINER)).toBeNull();
+    // 본문 영역은 그대로 유지된다
+    (0, _vitest.expect)(container.querySelector(SELECTOR.CONTENT_WRAPPER)).not.toBeNull();
+  });
+  (0, _vitest.it)('U-3-a: actions만 지정하면 actions-container만 남고 footer-container는 없다', () => {
+    // Given/When: 액션 버튼만 있고 닫기 그룹이 없으면
+    const container = renderMessageNotification({
+      actions: [{
+        label: '조회하기',
+        hierarchy: 'text',
+        onClick: _vitest.vi.fn()
+      }]
+    });
+    // Then: actions-container는 존재하고 그 자식은 actions 그룹 하나뿐이다
+    const actionsContainer = container.querySelector(SELECTOR.ACTIONS_CONTAINER);
+    const actionsGroup = container.querySelector(SELECTOR.ACTIONS);
+    (0, _vitest.expect)(actionsContainer).not.toBeNull();
+    (0, _vitest.expect)(container.querySelector(SELECTOR.FOOTER_CONTAINER)).toBeNull();
+    (0, _vitest.expect)(Array.from(actionsContainer?.children ?? [])).toEqual([actionsGroup]);
+  });
+  (0, _vitest.it)('U-3-b: onClose만 지정하면 footer-container에 닫기 버튼만 담긴다', () => {
+    // Given/When: 닫기 핸들러만 지정하면
+    const container = renderMessageNotification({
+      onClose: _vitest.vi.fn()
+    });
+    // Then: footer-container에는 닫기 버튼 1개만 존재하고 hide-link는 없다
+    const footerContainer = container.querySelector(SELECTOR.FOOTER_CONTAINER);
+    (0, _vitest.expect)(footerContainer?.children).toHaveLength(1);
+    (0, _vitest.expect)(footerContainer?.querySelector(SELECTOR.CLOSE_BUTTON)).not.toBeNull();
+    (0, _vitest.expect)(footerContainer?.querySelector(SELECTOR.HIDE_LINK)).toBeNull();
+  });
+  (0, _vitest.it)('U-4: FeaturedIcon이 md 사이즈(40px 원 / 20px 아이콘)로 렌더된다', () => {
+    // Given/When: error 색상으로 렌더하면
+    const container = renderMessageNotification({
+      color: 'error'
+    });
+    // Then: featured-icon은 --md 수식자를 가지며 내부 SVG는 20px다
+    const icon = container.querySelector(SELECTOR.ICON);
+    (0, _vitest.expect)(icon).not.toBeNull();
+    (0, _vitest.expect)(icon?.classList.contains('ncua-featured-icon--md')).toBe(true);
+    (0, _vitest.expect)(icon?.classList.contains('ncua-featured-icon--lg')).toBe(false);
+    (0, _vitest.expect)(icon?.querySelector('svg')?.getAttribute('width')).toBe('20');
+  });
+  (0, _vitest.it)('hide-link는 구현별 수식자(--link/--text) 없이 공통 클래스 2개만 갖는다', () => {
+    // Given/When: 다시 보지 않기 핸들러를 지정해 렌더하면
+    const container = renderMessageNotification({
+      onHidePermanently: _vitest.vi.fn()
+    });
+    // Then: SCSS 미정의 수식자 --link에 의존하지 않는다
+    const hideLink = container.querySelector(SELECTOR.HIDE_LINK);
+    (0, _vitest.expect)(hideLink?.className.split(' ').filter(Boolean).sort()).toEqual(['ncua-message-notification__hide-link', 'ncua-notification__action-button']);
+  });
+});
+(0, _vitest.describe)('MessageNotification (React) — 공개 API 회귀 방지', () => {
+  (0, _vitest.it)('지원하지 않는 color("info")는 neutral로 폴백한다', () => {
+    // Given/When: message 타입이 지원하지 않는 info 색상을 넘기면
+    const container = renderMessageNotification({
+      color: 'info'
+    });
+    // Then: neutral 수식자로 렌더되고 info 수식자는 없다
+    const root = container.querySelector(SELECTOR.ROOT);
+    (0, _vitest.expect)(root?.classList.contains('ncua-message-notification--neutral')).toBe(true);
+    (0, _vitest.expect)(root?.classList.contains('ncua-message-notification--info')).toBe(false);
+  });
+  (0, _vitest.it)('닫기/다시 보지 않기 클릭 시 핸들러가 호출되고 접근성 속성이 유지된다', () => {
+    // Given: 핸들러를 지정해 렌더하고
+    const onClose = _vitest.vi.fn();
+    const onHidePermanently = _vitest.vi.fn();
+    const container = renderMessageNotification({
+      onClose,
+      onHidePermanently
+    });
+    // When: 각 버튼을 클릭하면
+    (0, _testUtils.act)(() => {
+      container.querySelector(SELECTOR.CLOSE_BUTTON)?.click();
+      container.querySelector(SELECTOR.HIDE_LINK)?.click();
+    });
+    // Then: 핸들러가 각각 1회 호출되고 role/aria-label이 유지된다
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onHidePermanently).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(container.querySelector(SELECTOR.ROOT)?.getAttribute('role')).toBe('alert');
+    (0, _vitest.expect)(container.querySelector(SELECTOR.CLOSE_BUTTON)?.getAttribute('aria-label')).toBe('알림 닫기');
+  });
+});
+(0, _vitest.describe)('MessageNotification (React) — 액션 버튼 색상(hierarchy)', () => {
+  const SIZE_MODIFIER = /^ncua-btn--(xs|sm|md|lg|xl)$/;
+  /** 사이즈를 제외한 `ncua-btn--*` 수식자 = 색상(hierarchy) 수식자. */
+  function buttonHierarchyModifiers(root) {
+    return Array.from(root.querySelectorAll('.ncua-btn')).map(button => Array.from(button.classList).find(name => name.startsWith('ncua-btn--') && !SIZE_MODIFIER.test(name)) ?? '');
+  }
+  (0, _vitest.it)('Figma TO-BE 조합(secondary-gray / secondary)을 ncua-btn 수식자로 반영한다', () => {
+    // Given/When: 조회하기 secondary-gray, 포인트 충전 secondary로 렌더하면
+    const container = renderMessageNotification({
+      actions: [{
+        label: '조회하기',
+        hierarchy: 'secondary-gray',
+        onClick: _vitest.vi.fn()
+      }, {
+        label: '포인트 충전',
+        hierarchy: 'secondary',
+        onClick: _vitest.vi.fn()
+      }]
+    });
+    // Then: ButtonTheme와 동일한 수식자가 순서대로 붙는다
+    (0, _vitest.expect)(buttonHierarchyModifiers(container)).toEqual(['ncua-btn--secondary-gray', 'ncua-btn--secondary']);
+  });
+  (0, _vitest.it)('text / text-gray도 계속 지원한다', () => {
+    // Given/When: 기존 어휘로 렌더하면
+    const container = renderMessageNotification({
+      actions: [{
+        label: '조회하기',
+        hierarchy: 'text',
+        onClick: _vitest.vi.fn()
+      }, {
+        label: '포인트 충전',
+        hierarchy: 'text-gray',
+        onClick: _vitest.vi.fn()
+      }]
+    });
+    // Then: 기존 수식자가 그대로 유지된다 (회귀 방지)
+    (0, _vitest.expect)(buttonHierarchyModifiers(container)).toEqual(['ncua-btn--text', 'ncua-btn--text-gray']);
+  });
+  (0, _vitest.it)('hierarchy를 생략하면 기본값 text로 렌더한다', () => {
+    // Given/When: 색상을 지정하지 않은 액션을 렌더하면
+    const container = renderMessageNotification({
+      actions: [{
+        label: '확인',
+        onClick: _vitest.vi.fn()
+      }]
+    });
+    // Then: Button의 기본값(secondary-gray)이 아니라 알림의 기본값 text가 적용된다
+    (0, _vitest.expect)(buttonHierarchyModifiers(container)).toEqual(['ncua-btn--text']);
+  });
+  (0, _vitest.it)('액션 버튼 클릭 시 onClick이 호출된다', () => {
+    // Given: secondary 색상 액션을 렌더하고
+    const onClick = _vitest.vi.fn();
+    const container = renderMessageNotification({
+      actions: [{
+        label: '포인트 충전',
+        hierarchy: 'secondary',
+        onClick
+      }]
+    });
+    // When: 버튼을 클릭하면
+    (0, _testUtils.act)(() => {
+      container.querySelector('.ncua-btn')?.click();
+    });
+    // Then: 핸들러가 1회 호출된다
+    (0, _vitest.expect)(onClick).toHaveBeenCalledTimes(1);
+  });
+});