@ncds/ui-admin 1.8.21-alpha.9 → 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/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();
+  });
+});

package/dist/cjs/src/components/overlays/postcode-search-modal/PostcodeSearchModal.js

@@ -19,6 +19,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const PAGE_SIZE = 15;
 /** 페이지 번호 그룹 크기 — 초과 시 Pagination 이 점프 버튼을 노출한다 */
 const PAGER_WINDOW = 10;
+/** 검색 조합 안내 문구를 띄우는 기준 — 결과가 이 수를 넘을 때만 노출한다 */
+const SEARCH_HINT_MIN_TOTAL_COUNT = 30;
 /** 반응형 전환 기준 — assets/styles/base/_variable.scss 의 $breakpoint 와 동일 */
 const MOBILE_BREAKPOINT = 768;
 /** 본문 스크롤 컨테이너. Modal.Content 가 overflow-y:auto 를 갖는다. */
@@ -124,6 +126,8 @@ const PostcodeSearchModal = _ref2 => {
   }, [open]);
   const hasError = Boolean(errorCode);
   const hasResults = !hasError && results.length > 0;
+  // 결과가 적으면 굳이 검색 조합을 안내하지 않는다.
+  const showSearchHint = hasResults && totalCount > SEARCH_HINT_MIN_TOTAL_COUNT;
   // 검색을 실행한 검색어와 현재 입력값이 같을 때만 "결과 없음"으로 본다.
   // 입력 중에는 두 값이 달라지고, 응답을 기다리는 동안에는 loading 이 막는다.
   const showEmptyState = !hasError && !loading && results.length === 0 && searchQuery !== '' && searchQuery === searchedQuery;
@@ -167,6 +171,8 @@ const PostcodeSearchModal = _ref2 => {
               size: "sm",
               fullWidth: true,
               value: searchQuery,
+              clearText: !!searchQuery,
+              onClearText: () => onSearchQueryChange(''),
               onChange: handleSearchQueryChange,
               onKeyDown: handleSearchKeyDown,
               placeholder: SEARCH_PLACEHOLDER,
@@ -179,10 +185,10 @@ const PostcodeSearchModal = _ref2 => {
               hierarchy: "secondary",
               onClick: handleSearch
             })]
-          }), hasResults && (0, _jsxRuntime.jsxs)("div", {
+          }), showSearchHint && (0, _jsxRuntime.jsxs)("div", {
             children: [(0, _jsxRuntime.jsx)("p", {
               className: "ncua-postcode-search-modal__result-title",
-              children: _PostcodeSearchModalTip.TIP_TITLE
+              children: "\uC544\uB798 \uC870\uD569\uC73C\uB85C \uAC80\uC0C9 \uC2DC \uC8FC\uC18C\uB97C \uB354 \uC27D\uAC8C \uCC3E\uC744 \uC218 \uC788\uC5B4\uC694."
             }), (0, _jsxRuntime.jsx)("p", {
               className: "ncua-postcode-search-modal__result-desc",
               children: "\uB3C4\uB85C\uBA85+\uAC74\uBB3C\uBC88\uD638, \uC9C0\uC5ED\uBA85+\uC9C0\uBC88, \uC9C0\uC5ED\uBA85+\uAC74\uBB3C\uBA85(\uC544\uD30C\uD2B8\uBA85)"

package/dist/cjs/src/components/overlays/postcode-search-modal/__tests__/PostcodeSearchModal.test.js

@@ -287,7 +287,7 @@ const paginationOf = el => el.querySelector('.ncua-pagination');
     (0, _vitest.expect)(countLabelOf(el)?.textContent).toBe(`검색 ${LARGE_RESULT_COUNT}개`);
     (0, _vitest.expect)(itemsOf(el)).toHaveLength(PAGE_SIZE);
     (0, _vitest.expect)(tipOf(el)).toBeNull();
-    (0, _vitest.expect)(resultTitleOf(el)?.textContent).toBe('아래 조합으로 검색하면 원하는 주소를 더 쉽게 찾을 수 있어요.');
+    (0, _vitest.expect)(resultTitleOf(el)?.textContent).toBe('아래 조합으로 검색 시 주소를 더 쉽게 찾을 수 있어요.');
     (0, _vitest.expect)(resultDescOf(el)?.textContent).toBe('도로명+건물번호, 지역명+지번, 지역명+건물명(아파트명)');
   });
   (0, _vitest.it)('검색 인풋과 안내 문구가 같은 고정 영역 안에 묶이고 결과 목록은 그 밖에 있다', () => {