@ncds/ui-admin 1.8.21-alpha.8 → 1.8.21

package/dist/cjs/src/components/feedback-and-status/badge/Badge.js

@@ -16,7 +16,7 @@ const BADGE_ICON_SIZE = 12;
 /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
 const NEW_BADGE_ICON_SIZE = {
   sm: 12,
-  md: 14
+  md: 16
 };
 const Badge = _ref => {
   let {

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

@@ -12,12 +12,18 @@ var _color = require("../../../../constant/color");
 var _HintText = require("../../shared/hintText/HintText");
 var _Label = require("../../shared/label/Label");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-// 슬롯 아이콘(leadingElement/trailingElement)과 상태 아이콘(clear·validation·destructive)은 같은 크기를 쓴다.
+// 슬롯 아이콘(leadingElement/trailingElement)은 인풋 크기에 맞춰 커진다.
 // slot.size 를 명시하면 그 값이 우선한다.
 const iconSvgSize = {
   xs: 14,
   sm: 20
 };
+// 상태 아이콘(clear·validation·destructive)은 인풋 크기와 무관하게 16px 로 고정한다.
+// 슬롯 아이콘은 sm 에서 20px 로 커지므로 두 상수를 하나로 합치지 않는다.
+const statusIconSvgSize = {
+  xs: 14,
+  sm: 16
+};
 const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     size = 'xs',
@@ -125,8 +131,8 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
       onClick: onClearText,
       children: (0, _jsxRuntime.jsx)(_uiAdminIcon.X, {
         className: "ncua-input__clear-icon",
-        width: iconSvgSize[size],
-        height: iconSvgSize[size]
+        width: statusIconSvgSize[size],
+        height: statusIconSvgSize[size]
       })
     });
   };
@@ -136,8 +142,8 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
         className: "ncua-input__icon-wrap ncua-input__right-icon",
         children: (0, _jsxRuntime.jsx)(_uiAdminIcon.InfoCircle, {
           className: "ncua-input__destructive-icon",
-          width: iconSvgSize[size],
-          height: iconSvgSize[size]
+          width: statusIconSvgSize[size],
+          height: statusIconSvgSize[size]
         })
       });
     }
@@ -146,8 +152,8 @@ const InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref,
         className: "ncua-input__icon-wrap ncua-input__right-icon",
         children: (0, _jsxRuntime.jsx)(_uiAdminIcon.CheckCircle, {
           className: "ncua-input__validation-icon",
-          width: iconSvgSize[size],
-          height: iconSvgSize[size]
+          width: statusIconSvgSize[size],
+          height: statusIconSvgSize[size]
         })
       });
     }

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

@@ -80,8 +80,9 @@ function mountInputBase() {
       height: svg?.getAttribute('height')
     };
   };
-  // 슬롯 아이콘과 상태 아이콘은 같은 크기를 쓴다 — 과거 상태 아이콘만 sm=16으로 어긋나 있었다
-  _vitest.it.each([['xs', '14'], ['sm', '20']])('size=%s 일 때 슬롯 아이콘과 상태 아이콘이 모두 %spx로 렌더된다', (size, expected) => {
+  // 슬롯 아이콘은 인풋 크기에 연동돼 sm 에서 20px 로 커지지만,
+  // 상태 아이콘(clear·validation·destructive)은 16px 로 고정한다.
+  _vitest.it.each([['xs', '14', '14'], ['sm', '20', '16']])('size=%s 일 때 슬롯 아이콘은 %spx, 상태 아이콘은 %spx로 렌더된다', (size, slotExpected, statusExpected) => {
     // Given/When: 슬롯 아이콘과 clear 버튼, destructive 상태를 함께 렌더하면
     const view = mountInputBase({
       size,
@@ -93,23 +94,27 @@ function mountInputBase() {
         icon: _uiAdminIcon.SearchLg
       }
     });
-    // Then: 슬롯·clear·destructive 아이콘의 크기가 서로 어긋나지 않는다
-    const expectedSize = {
-      width: expected,
-      height: expected
+    // Then: 슬롯 아이콘만 인풋 크기를 따라가고, 상태 아이콘은 16px 을 넘지 않는다
+    const slotSize = {
+      width: slotExpected,
+      height: slotExpected
+    };
+    const statusSize = {
+      width: statusExpected,
+      height: statusExpected
     };
-    (0, _vitest.expect)(iconSizeOf(view.container, '.ncua-input__left-icon')).toEqual(expectedSize);
-    (0, _vitest.expect)(iconSizeOf(view.container, '.ncua-input__clear-icon')).toEqual(expectedSize);
-    (0, _vitest.expect)(iconSizeOf(view.container, '.ncua-input__destructive-icon')).toEqual(expectedSize);
+    (0, _vitest.expect)(iconSizeOf(view.container, '.ncua-input__left-icon')).toEqual(slotSize);
+    (0, _vitest.expect)(iconSizeOf(view.container, '.ncua-input__clear-icon')).toEqual(statusSize);
+    (0, _vitest.expect)(iconSizeOf(view.container, '.ncua-input__destructive-icon')).toEqual(statusSize);
     view.unmount();
   });
-  _vitest.it.each([['xs', '14'], ['sm', '20']])('size=%s 일 때 validation 아이콘도 %spx로 렌더된다', (size, expected) => {
+  _vitest.it.each([['xs', '14'], ['sm', '16']])('size=%s 일 때 validation 아이콘은 %spx로 렌더된다', (size, expected) => {
     // Given/When: validation 상태로 렌더하면
     const view = mountInputBase({
       size,
       validation: true
     });
-    // Then: 다른 아이콘과 같은 크기다
+    // Then: 다른 상태 아이콘과 같은 크기다
     (0, _vitest.expect)(iconSizeOf(view.container, '.ncua-input__validation-icon')).toEqual({
       width: expected,
       height: expected

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/CalloutNotification.js

@@ -8,16 +8,21 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const WIDTH_CLASS = {
+  full: 'ncua-callout-notification--full',
+  fit: 'ncua-callout-notification--fit'
+};
 const CalloutNotification = exports.CalloutNotification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     color = 'neutral',
     className,
     title,
+    width,
     ...rest
   } = _ref;
   return (0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    className: (0, _classnames.default)('ncua-callout-notification', `ncua-callout-notification--${color}`, className),
+    className: (0, _classnames.default)('ncua-callout-notification', `ncua-callout-notification--${color}`, width && WIDTH_CLASS[width], className),
     ...rest,
     children: title
   });

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

@@ -10,10 +10,15 @@ var _CalloutNotification = require("./CalloutNotification");
 var _FloatingNotification = require("./FloatingNotification");
 var _FullWidthNotification = require("./FullWidthNotification");
 var _MessageNotification = require("./MessageNotification");
-const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
+// 단일 type 에만 유효한 prop 은 rest 에서 분리해 해당 분기로만 명시 전달한다.
+// rest 에 남기면 다른 type 의 하위 컴포넌트가 div 로 스프레드해 DOM 속성으로 출력된다.
+(_ref, ref) => {
   let {
     type = 'floating',
     color = 'neutral',
+    width,
+    supportTextLink,
     ...rest
   } = _ref;
   if (type === 'floating') {
@@ -26,6 +31,7 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
   if (type === 'full-width') {
     return (0, _jsxRuntime.jsx)(_FullWidthNotification.FullWidthNotification, {
       color: color,
+      supportTextLink: supportTextLink,
       ...rest,
       ref: ref
     });
@@ -38,9 +44,23 @@ const Notification = exports.Notification = /*#__PURE__*/(0, _react.forwardRef)(
     });
   }
   if (type === 'callout') {
+    // 나머지 3개 type 이 공유하는 prop 은 callout 이 지원하지 않으므로 여기서 제외한다.
+    const {
+      icon: _icon,
+      supportingText: _supportingText,
+      actions: _actions,
+      autoClose: _autoClose,
+      onClose: _onClose,
+      onHidePermanently: _onHidePermanently,
+      hidePermanentlyLabel: _hidePermanentlyLabel,
+      portal: _portal,
+      ...calloutProps
+    } = rest;
     return (0, _jsxRuntime.jsx)(_CalloutNotification.CalloutNotification, {
       color: color,
-      ...rest
+      width: width,
+      ...calloutProps,
+      ref: ref
     });
   }
   return null;

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

@@ -0,0 +1,128 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _CalloutNotification = require("../CalloutNotification");
+var _Notification = require("../Notification");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const BASE = 'ncua-callout-notification';
+let root = null;
+let container = null;
+const mount = element => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root?.render(element);
+  });
+  const rendered = container.firstElementChild;
+  if (!(rendered instanceof HTMLElement)) throw new Error('callout 이 렌더되지 않았다');
+  return rendered;
+};
+const renderCallout = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return mount(/*#__PURE__*/(0, _react.createElement)(_CalloutNotification.CalloutNotification, {
+    title: '안내 문구',
+    ...props
+  }));
+};
+const renderNotification = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return mount(/*#__PURE__*/(0, _react.createElement)(_Notification.Notification, {
+    type: 'callout',
+    title: '안내 문구',
+    ...props
+  }));
+};
+(0, _vitest.afterEach)(() => {
+  (0, _testUtils.act)(() => {
+    root?.unmount();
+  });
+  container?.remove();
+  root = null;
+  container = null;
+});
+(0, _vitest.describe)('CalloutNotification — width prop', () => {
+  (0, _vitest.it)('width 미지정 시 너비 클래스를 붙이지 않는다 (부모 너비를 채우는 기본 스타일 유지)', () => {
+    const element = renderCallout();
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--full')).toBe(false);
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--fit')).toBe(false);
+  });
+  (0, _vitest.it)("width='full' 은 --full modifier 를 붙인다", () => {
+    const element = renderCallout({
+      width: 'full'
+    });
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--full')).toBe(true);
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--fit')).toBe(false);
+  });
+  (0, _vitest.it)("width='fit' 은 --fit modifier 를 붙인다", () => {
+    const element = renderCallout({
+      width: 'fit'
+    });
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--fit')).toBe(true);
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--full')).toBe(false);
+  });
+  (0, _vitest.it)('width 는 DOM 속성으로 새지 않는다', () => {
+    const element = renderCallout({
+      width: 'fit'
+    });
+    (0, _vitest.expect)(element.hasAttribute('width')).toBe(false);
+  });
+  (0, _vitest.it)('width 는 베이스/컬러 클래스와 외부 className 을 유지한 채 추가된다', () => {
+    const element = renderCallout({
+      width: 'fit',
+      color: 'info',
+      className: 'custom'
+    });
+    (0, _vitest.expect)(element.classList.contains(BASE)).toBe(true);
+    (0, _vitest.expect)(element.classList.contains(`${BASE}--info`)).toBe(true);
+    (0, _vitest.expect)(element.classList.contains('custom')).toBe(true);
+  });
+});
+(0, _vitest.describe)('Notification type="callout" — 위임 계약', () => {
+  (0, _vitest.it)('width 를 CalloutNotification 으로 전달한다', () => {
+    const element = renderNotification({
+      width: 'fit'
+    });
+    (0, _vitest.expect)(element.classList.contains(BASE)).toBe(true);
+    (0, _vitest.expect)(element.classList.contains('ncua-callout-notification--fit')).toBe(true);
+  });
+  // Notification 의 callout 분기가 제외하는 prop 전체. 여기 누락된 prop 은 DOM 속성으로 출력된다.
+  (0, _vitest.it)('callout 이 지원하지 않는 prop 은 DOM 속성으로 새지 않는다', () => {
+    const element = renderNotification({
+      icon: () => null,
+      supportingText: '보조 문구',
+      supportTextLink: 'https://example.com',
+      actions: [{
+        label: '확인',
+        onClick: () => undefined
+      }],
+      autoClose: 3000,
+      portal: true,
+      onClose: () => undefined,
+      onHidePermanently: () => undefined,
+      hidePermanentlyLabel: '다시 보지 않기'
+    });
+    for (const attr of ['icon', 'supportingtext', 'supporttextlink', 'actions', 'autoclose', 'portal', 'onclose', 'onhidepermanently', 'hidepermanentlylabel']) {
+      (0, _vitest.expect)(element.hasAttribute(attr), attr).toBe(false);
+    }
+    (0, _vitest.expect)(element.textContent).toBe('안내 문구');
+  });
+  (0, _vitest.it)('ref 를 callout 루트 엘리먼트로 전달한다', () => {
+    let captured = null;
+    mount(/*#__PURE__*/(0, _react.createElement)(_Notification.Notification, {
+      type: 'callout',
+      title: '안내 문구',
+      ref: node => {
+        captured = node;
+      }
+    }));
+    (0, _vitest.expect)(captured).not.toBeNull();
+    (0, _vitest.expect)(captured.classList.contains(BASE)).toBe(true);
+  });
+});

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

@@ -0,0 +1,83 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Notification = require("../Notification");
+// @vitest-environment jsdom
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root = null;
+let container = null;
+(0, _vitest.beforeAll)(() => {
+  // jsdom 미구현 API 보정 — FloatingNotification 의 모바일 리스너가 window.matchMedia 를 호출한다.
+  if (typeof window.matchMedia !== 'function') {
+    const stub = query => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      dispatchEvent: () => false
+    });
+    window.matchMedia = stub;
+  }
+});
+// 정의되지 않은 type 의 런타임 동작까지 고정하므로 props 를 넓게 받는다.
+const render = props => {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = (0, _client.createRoot)(container);
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_Notification.Notification, {
+      title: '안내 문구',
+      ...props
+    }));
+  });
+  const rendered = container.firstElementChild;
+  return rendered instanceof HTMLElement ? rendered : null;
+};
+(0, _vitest.afterEach)(() => {
+  (0, _testUtils.act)(() => {
+    root?.unmount();
+  });
+  container?.remove();
+  root = null;
+  container = null;
+});
+(0, _vitest.describe)('Notification — type 별 위임', () => {
+  _vitest.it.each([['floating', 'ncua-floating-notification'], ['full-width', 'ncua-full-width-notification'], ['message', 'ncua-message-notification'], ['callout', 'ncua-callout-notification']])('type=%s 는 %s 를 렌더한다', (type, baseClass) => {
+    const element = render({
+      type
+    });
+    (0, _vitest.expect)(element?.classList.contains(baseClass)).toBe(true);
+  });
+  (0, _vitest.it)('type 미지정은 floating 으로 렌더한다', () => {
+    const element = render({});
+    (0, _vitest.expect)(element?.classList.contains('ncua-floating-notification')).toBe(true);
+  });
+  _vitest.it.each(['floating', 'full-width', 'message'])('type=%s 에 callout 전용 width 를 주어도 DOM 속성으로 새지 않는다', type => {
+    const element = render({
+      type,
+      width: 'fit'
+    });
+    (0, _vitest.expect)(element?.hasAttribute('width')).toBe(false);
+  });
+  _vitest.it.each(['floating', 'message'])('type=%s 에 full-width 전용 supportTextLink 를 주어도 DOM 속성으로 새지 않는다', type => {
+    const element = render({
+      type,
+      supportingText: '보조',
+      supportTextLink: 'https://example.com'
+    });
+    (0, _vitest.expect)(element?.hasAttribute('supporttextlink')).toBe(false);
+  });
+  (0, _vitest.it)('정의되지 않은 type 은 아무것도 렌더하지 않는다', () => {
+    const element = render({
+      type: 'banner'
+    });
+    (0, _vitest.expect)(element).toBeNull();
+  });
+});