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

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

@@ -9,7 +9,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/esm/src/components/forms-and-input/input-base/InputBase.js

@@ -5,12 +5,18 @@ import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../../constant/color';
 import { HintText } from '../../shared/hintText/HintText';
 import { Label } from '../../shared/label/Label';
-// 슬롯 아이콘(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 = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     size = 'xs',
@@ -118,8 +124,8 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
       onClick: onClearText,
       children: _jsx(X, {
         className: "ncua-input__clear-icon",
-        width: iconSvgSize[size],
-        height: iconSvgSize[size]
+        width: statusIconSvgSize[size],
+        height: statusIconSvgSize[size]
       })
     });
   };
@@ -129,8 +135,8 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
         className: "ncua-input__icon-wrap ncua-input__right-icon",
         children: _jsx(InfoCircle, {
           className: "ncua-input__destructive-icon",
-          width: iconSvgSize[size],
-          height: iconSvgSize[size]
+          width: statusIconSvgSize[size],
+          height: statusIconSvgSize[size]
         })
       });
     }
@@ -139,8 +145,8 @@ const InputBase = /*#__PURE__*/forwardRef((_ref, ref) => {
         className: "ncua-input__icon-wrap ncua-input__right-icon",
         children: _jsx(CheckCircle, {
           className: "ncua-input__validation-icon",
-          width: iconSvgSize[size],
-          height: iconSvgSize[size]
+          width: statusIconSvgSize[size],
+          height: statusIconSvgSize[size]
         })
       });
     }

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

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

package/dist/esm/src/components/overlays/notification/CalloutNotification.js

@@ -1,16 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
+const WIDTH_CLASS = {
+  full: 'ncua-callout-notification--full',
+  fit: 'ncua-callout-notification--fit'
+};
 const CalloutNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     color = 'neutral',
     className,
     title,
+    width,
     ...rest
   } = _ref;
   return _jsx("div", {
     ref: ref,
-    className: classNames('ncua-callout-notification', `ncua-callout-notification--${color}`, className),
+    className: classNames('ncua-callout-notification', `ncua-callout-notification--${color}`, width && WIDTH_CLASS[width], className),
     ...rest,
     children: title
   });

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

@@ -4,10 +4,15 @@ import { CalloutNotification } from './CalloutNotification';
 import { FloatingNotification } from './FloatingNotification';
 import { FullWidthNotification } from './FullWidthNotification';
 import { MessageNotification } from './MessageNotification';
-const Notification = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Notification = /*#__PURE__*/forwardRef(
+// 단일 type 에만 유효한 prop 은 rest 에서 분리해 해당 분기로만 명시 전달한다.
+// rest 에 남기면 다른 type 의 하위 컴포넌트가 div 로 스프레드해 DOM 속성으로 출력된다.
+(_ref, ref) => {
   let {
     type = 'floating',
     color = 'neutral',
+    width,
+    supportTextLink,
     ...rest
   } = _ref;
   if (type === 'floating') {
@@ -20,6 +25,7 @@ const Notification = /*#__PURE__*/forwardRef((_ref, ref) => {
   if (type === 'full-width') {
     return _jsx(FullWidthNotification, {
       color: color,
+      supportTextLink: supportTextLink,
       ...rest,
       ref: ref
     });
@@ -32,9 +38,23 @@ const Notification = /*#__PURE__*/forwardRef((_ref, ref) => {
     });
   }
   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 _jsx(CalloutNotification, {
       color: color,
-      ...rest
+      width: width,
+      ...calloutProps,
+      ref: ref
     });
   }
   return null;

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

@@ -0,0 +1,125 @@
+// @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 } from 'vitest';
+import { CalloutNotification } from '../CalloutNotification';
+import { Notification } from '../Notification';
+// 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 = createRoot(container);
+  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__*/createElement(CalloutNotification, {
+    title: '안내 문구',
+    ...props
+  }));
+};
+const renderNotification = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return mount(/*#__PURE__*/createElement(Notification, {
+    type: 'callout',
+    title: '안내 문구',
+    ...props
+  }));
+};
+afterEach(() => {
+  act(() => {
+    root?.unmount();
+  });
+  container?.remove();
+  root = null;
+  container = null;
+});
+describe('CalloutNotification — width prop', () => {
+  it('width 미지정 시 너비 클래스를 붙이지 않는다 (부모 너비를 채우는 기본 스타일 유지)', () => {
+    const element = renderCallout();
+    expect(element.classList.contains('ncua-callout-notification--full')).toBe(false);
+    expect(element.classList.contains('ncua-callout-notification--fit')).toBe(false);
+  });
+  it("width='full' 은 --full modifier 를 붙인다", () => {
+    const element = renderCallout({
+      width: 'full'
+    });
+    expect(element.classList.contains('ncua-callout-notification--full')).toBe(true);
+    expect(element.classList.contains('ncua-callout-notification--fit')).toBe(false);
+  });
+  it("width='fit' 은 --fit modifier 를 붙인다", () => {
+    const element = renderCallout({
+      width: 'fit'
+    });
+    expect(element.classList.contains('ncua-callout-notification--fit')).toBe(true);
+    expect(element.classList.contains('ncua-callout-notification--full')).toBe(false);
+  });
+  it('width 는 DOM 속성으로 새지 않는다', () => {
+    const element = renderCallout({
+      width: 'fit'
+    });
+    expect(element.hasAttribute('width')).toBe(false);
+  });
+  it('width 는 베이스/컬러 클래스와 외부 className 을 유지한 채 추가된다', () => {
+    const element = renderCallout({
+      width: 'fit',
+      color: 'info',
+      className: 'custom'
+    });
+    expect(element.classList.contains(BASE)).toBe(true);
+    expect(element.classList.contains(`${BASE}--info`)).toBe(true);
+    expect(element.classList.contains('custom')).toBe(true);
+  });
+});
+describe('Notification type="callout" — 위임 계약', () => {
+  it('width 를 CalloutNotification 으로 전달한다', () => {
+    const element = renderNotification({
+      width: 'fit'
+    });
+    expect(element.classList.contains(BASE)).toBe(true);
+    expect(element.classList.contains('ncua-callout-notification--fit')).toBe(true);
+  });
+  // Notification 의 callout 분기가 제외하는 prop 전체. 여기 누락된 prop 은 DOM 속성으로 출력된다.
+  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']) {
+      expect(element.hasAttribute(attr), attr).toBe(false);
+    }
+    expect(element.textContent).toBe('안내 문구');
+  });
+  it('ref 를 callout 루트 엘리먼트로 전달한다', () => {
+    let captured = null;
+    mount(/*#__PURE__*/createElement(Notification, {
+      type: 'callout',
+      title: '안내 문구',
+      ref: node => {
+        captured = node;
+      }
+    }));
+    expect(captured).not.toBeNull();
+    expect(captured.classList.contains(BASE)).toBe(true);
+  });
+});

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

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeAll, describe, expect, it } from 'vitest';
+import { Notification } from '../Notification';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root = null;
+let container = null;
+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 = createRoot(container);
+  act(() => {
+    root?.render(/*#__PURE__*/createElement(Notification, {
+      title: '안내 문구',
+      ...props
+    }));
+  });
+  const rendered = container.firstElementChild;
+  return rendered instanceof HTMLElement ? rendered : null;
+};
+afterEach(() => {
+  act(() => {
+    root?.unmount();
+  });
+  container?.remove();
+  root = null;
+  container = null;
+});
+describe('Notification — type 별 위임', () => {
+  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
+    });
+    expect(element?.classList.contains(baseClass)).toBe(true);
+  });
+  it('type 미지정은 floating 으로 렌더한다', () => {
+    const element = render({});
+    expect(element?.classList.contains('ncua-floating-notification')).toBe(true);
+  });
+  it.each(['floating', 'full-width', 'message'])('type=%s 에 callout 전용 width 를 주어도 DOM 속성으로 새지 않는다', type => {
+    const element = render({
+      type,
+      width: 'fit'
+    });
+    expect(element?.hasAttribute('width')).toBe(false);
+  });
+  it.each(['floating', 'message'])('type=%s 에 full-width 전용 supportTextLink 를 주어도 DOM 속성으로 새지 않는다', type => {
+    const element = render({
+      type,
+      supportingText: '보조',
+      supportTextLink: 'https://example.com'
+    });
+    expect(element?.hasAttribute('supporttextlink')).toBe(false);
+  });
+  it('정의되지 않은 type 은 아무것도 렌더하지 않는다', () => {
+    const element = render({
+      type: 'banner'
+    });
+    expect(element).toBeNull();
+  });
+});

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

@@ -7,11 +7,13 @@ import { InputBase } from '../../forms-and-input/input-base';
 import { Radio } from '../../forms-and-input/radio';
 import { Pagination } from '../../navigation/pagination';
 import { Modal } from '../modal';
-import { TIP_TITLE, Tip } from './PostcodeSearchModalTip';
+import { Tip } from './PostcodeSearchModalTip';
 /** 기획서 기준값 */
 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 를 갖는다. */
@@ -117,6 +119,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;
@@ -160,6 +164,8 @@ const PostcodeSearchModal = _ref2 => {
               size: "sm",
               fullWidth: true,
               value: searchQuery,
+              clearText: !!searchQuery,
+              onClearText: () => onSearchQueryChange(''),
               onChange: handleSearchQueryChange,
               onKeyDown: handleSearchKeyDown,
               placeholder: SEARCH_PLACEHOLDER,
@@ -172,10 +178,10 @@ const PostcodeSearchModal = _ref2 => {
               hierarchy: "secondary",
               onClick: handleSearch
             })]
-          }), hasResults && _jsxs("div", {
+          }), showSearchHint && _jsxs("div", {
             children: [_jsx("p", {
               className: "ncua-postcode-search-modal__result-title",
-              children: TIP_TITLE
+              children: "\uC544\uB798 \uC870\uD569\uC73C\uB85C \uAC80\uC0C9 \uC2DC \uC8FC\uC18C\uB97C \uB354 \uC27D\uAC8C \uCC3E\uC744 \uC218 \uC788\uC5B4\uC694."
             }), _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/esm/src/components/overlays/postcode-search-modal/__tests__/PostcodeSearchModal.test.js

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