@ncds/ui-admin 1.8.21-alpha.8 → 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/navigation/pagination/Pagination.js

@@ -19,7 +19,9 @@ export const Pagination = _ref => {
   const [start, setStart] = 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 (isFunction(onPageChange)) {
       onPageChange(pageNum);

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

@@ -12,6 +12,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) {
@@ -34,6 +40,8 @@ afterEach(() => {
   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');
 describe('#332 Pagination — totalPage 축소 시 start 보정', () => {
   it('totalPage 가 줄면 start 를 마지막 그룹으로 보정하고 범위 밖 페이지 버튼을 표시하지 않는다', () => {
     // 1) 100 페이지에서 91 페이지 보는 중 → 91~100 그룹 표시
@@ -56,4 +64,70 @@ describe('#332 Pagination — totalPage 축소 시 start 보정', () => {
     expect(nums[0]).toBe(GROUP_START_50_PAGES);
     expect(Math.max(...nums)).toBeLessThanOrEqual(LAST_PAGE_50);
   });
+});
+describe('Pagination — mo 모드 이전/다음 버튼 노출', () => {
+  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 로 숨겨지므로 이전·다음 버튼이 있어야 이동할 수 있다
+    expect(prevOf(el)).not.toBeNull();
+    expect(nextOf(el)).not.toBeNull();
+  });
+  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: 이전만 막히고 다음은 누를 수 있다
+    expect(prevOf(first)?.disabled).toBe(true);
+    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: 반대로 다음이 막힌다
+    expect(prevOf(last)?.disabled).toBe(false);
+    expect(nextOf(last)?.disabled).toBe(true);
+  });
+  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: 이동할 곳이 없으므로 버튼도 없다
+    expect(prevOf(el)).toBeNull();
+    expect(nextOf(el)).toBeNull();
+  });
+  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: 페이지 번호로 직접 이동하므로 점프 버튼은 나오지 않는다
+    expect(prevOf(el)).toBeNull();
+    expect(nextOf(el)).toBeNull();
+    expect(pageNums(el)).toHaveLength(LAST_PAGE_3);
+  });
 });

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();
+  });
+});