@ncds/ui-admin 1.8.28-alpha.0 → 1.8.28-alpha.2

package/dist/cjs/src/components/navigation/horizontal-tab/__tests__/HorizontalTab.test.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _HorizontalTab = require("../HorizontalTab");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } // @vitest-environment jsdom
+//
+// HorizontalTab (src/components/navigation/horizontal-tab/HorizontalTab.tsx) 위험 경로 — 위험 목록표 HT-xx.
+// swiper/react 는 mock — Swiper 는 받은 props 를 기록하고 children 을 div 로, SwiperSlide 는
+// className 을 가진 div 로 렌더한다 (슬라이드 계산은 swiper 소관). TabButton 은 실구현.
+const mocks = _vitest.vi.hoisted(() => ({
+  swiperProps: _vitest.vi.fn()
+}));
+_vitest.vi.mock('swiper/react', async () => {
+  const {
+    createElement: h
+  } = await Promise.resolve().then(() => _interopRequireWildcard(require('react')));
+  return {
+    Swiper: _ref => {
+      let {
+        children,
+        ...props
+      } = _ref;
+      mocks.swiperProps(props);
+      return h('div', {
+        className: 'swiper-mock'
+      }, children);
+    },
+    SwiperSlide: _ref2 => {
+      let {
+        children,
+        className
+      } = _ref2;
+      return h('div', {
+        className
+      }, children);
+    }
+  };
+});
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const UNDERLINE_GAP = 16;
+const DEFAULT_GAP = 8;
+let root = null;
+let container = null;
+(0, _vitest.beforeEach)(() => {
+  mocks.swiperProps.mockReset();
+});
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const render = props => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_HorizontalTab.HorizontalTab, props));
+  });
+  return container;
+};
+const click = element => {
+  (0, _testUtils.act)(() => {
+    element.click();
+  });
+};
+const tabs = view => Array.from(view.querySelectorAll('.ncua-tab-button'));
+const activeLabels = view => tabs(view).filter(tab => tab.classList.contains('is-active')).map(tab => tab.textContent);
+const buttonMenus = onClick => [{
+  id: 'order',
+  label: '주문',
+  onClick
+}, {
+  id: 'claim',
+  label: '클레임',
+  onClick
+}, {
+  id: 'settle',
+  label: '정산',
+  onClick
+}];
+(0, _vitest.describe)('HorizontalTab — 탭 목록과 활성 탭 (HT-01)', () => {
+  (0, _vitest.it)('HT-01 menus 를 슬라이드마다 TabButton 으로 렌더하고 activeTab 과 id 가 같은 탭만 is-active', () => {
+    const view = render({
+      menus: buttonMenus(),
+      activeTab: 'claim'
+    });
+    (0, _vitest.expect)(view.querySelectorAll('.ncua-horizontal-tab__item')).toHaveLength(buttonMenus().length);
+    (0, _vitest.expect)(tabs(view).map(tab => tab.textContent)).toEqual(['주문', '클레임', '정산']);
+    (0, _vitest.expect)(activeLabels(view)).toEqual(['클레임']);
+  });
+  (0, _vitest.it)('HT-01 링크 메뉴는 id 가 아니라 href 를 activeTab 과 비교한다', () => {
+    const menus = [{
+      id: 'order',
+      label: '주문',
+      href: '/orders'
+    }, {
+      id: '/claims',
+      label: '클레임',
+      href: '/claims-list'
+    }];
+    const view = render({
+      menus,
+      activeTab: '/orders'
+    });
+    (0, _vitest.expect)(activeLabels(view)).toEqual(['주문']);
+  });
+  (0, _vitest.it)('HT-01 activeTab 이 어떤 탭과도 맞지 않으면 활성 탭이 없다', () => {
+    const view = render({
+      menus: buttonMenus(),
+      activeTab: 'none'
+    });
+    (0, _vitest.expect)(activeLabels(view)).toEqual([]);
+  });
+});
+(0, _vitest.describe)('HorizontalTab — 탭 click (HT-02)', () => {
+  (0, _vitest.it)('HT-02 탭을 click 하면 그 메뉴의 onClick 을 그 메뉴 id 로 호출한다', () => {
+    const onClick = _vitest.vi.fn();
+    const view = render({
+      menus: buttonMenus(onClick),
+      activeTab: 'order'
+    });
+    click(tabs(view)[2]);
+    (0, _vitest.expect)(onClick).toHaveBeenCalledWith('settle');
+  });
+});
+(0, _vitest.describe)('HorizontalTab — 빈 메뉴 (HT-03)', () => {
+  _vitest.it.each([['빈 배열', {
+    menus: []
+  }], ['미지정', {}]])('HT-03 menus 가 %s 이면 아무것도 렌더하지 않는다', (_label, props) => {
+    const view = render(props);
+    (0, _vitest.expect)(view.innerHTML).toBe('');
+    (0, _vitest.expect)(mocks.swiperProps).not.toHaveBeenCalled();
+  });
+});
+(0, _vitest.describe)('HorizontalTab — 슬라이드 간격 (HT-04)', () => {
+  _vitest.it.each([['underline', UNDERLINE_GAP], ['button-primary', DEFAULT_GAP], ['button-white', DEFAULT_GAP], ['underline-fill', DEFAULT_GAP]])('HT-04 type %s 면 Swiper 를 slidesPerView auto · spaceBetween %i 로 만든다', (type, gap) => {
+    render({
+      type,
+      menus: buttonMenus()
+    });
+    (0, _vitest.expect)(mocks.swiperProps.mock.lastCall?.[0]).toEqual({
+      slidesPerView: 'auto',
+      spaceBetween: gap
+    });
+  });
+});
+(0, _vitest.describe)('HorizontalTab — 재렌더 시 탭 재마운트 (HT-05)', () => {
+  (0, _vitest.it)('HT-05 activeTab 이 바뀌어 다시 렌더하면 모든 탭 버튼이 새 노드로 바뀌어 포커스를 잃는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (슬라이드 key 가 렌더마다 새 uniqueId 라 재렌더마다 재마운트, 키보드 포커스 유실)
+    const view = render({
+      menus: buttonMenus(),
+      activeTab: 'order'
+    });
+    const before = tabs(view)[1];
+    before.focus();
+    (0, _vitest.expect)(document.activeElement).toBe(before);
+    render({
+      menus: buttonMenus(),
+      activeTab: 'claim'
+    });
+    (0, _vitest.expect)(before.isConnected).toBe(false);
+    (0, _vitest.expect)(tabs(view)[1]).not.toBe(before);
+    (0, _vitest.expect)(document.activeElement).toBe(document.body);
+  });
+  _vitest.it.todo('HT-05 activeTab 이 바뀌어도 탭 버튼 노드와 포커스가 유지된다 (기대, #597)');
+});
+(0, _vitest.describe)('HorizontalTab — 클래스와 TabButton 전달 (HT-06)', () => {
+  (0, _vitest.it)('HT-06 기본은 button-primary · sm 클래스이고 full-width 는 없다', () => {
+    const view = render({
+      menus: buttonMenus()
+    });
+    const rootElement = view.querySelector('.ncua-horizontal-tab');
+    (0, _vitest.expect)(rootElement?.classList.contains('ncua-horizontal-tab--button-primary')).toBe(true);
+    (0, _vitest.expect)(rootElement?.classList.contains('ncua-horizontal-tab--sm')).toBe(true);
+    (0, _vitest.expect)(rootElement?.classList.contains('full-width')).toBe(false);
+  });
+  (0, _vitest.it)('HT-06 type·size·fullWidth·className 을 루트 클래스로 반영한다', () => {
+    const view = render({
+      menus: buttonMenus(),
+      type: 'underline',
+      size: 'lg',
+      fullWidth: true,
+      className: 'my-tabs'
+    });
+    const rootElement = view.querySelector('.ncua-horizontal-tab');
+    (0, _vitest.expect)(rootElement?.classList.contains('ncua-horizontal-tab--underline')).toBe(true);
+    (0, _vitest.expect)(rootElement?.classList.contains('ncua-horizontal-tab--lg')).toBe(true);
+    (0, _vitest.expect)(rootElement?.classList.contains('full-width')).toBe(true);
+    (0, _vitest.expect)(rootElement?.classList.contains('my-tabs')).toBe(true);
+  });
+  (0, _vitest.it)('HT-06 TabButton 에 넘기는 size·tabButtonType 은 DOM 속성으로 새지 않는다', () => {
+    const view = render({
+      menus: buttonMenus(),
+      type: 'underline',
+      size: 'lg'
+    });
+    (0, _vitest.expect)(tabs(view)[0].hasAttribute('size')).toBe(false);
+    (0, _vitest.expect)(tabs(view)[0].hasAttribute('tabbuttontype')).toBe(false);
+  });
+});

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

@@ -0,0 +1,285 @@
+"use strict";
+
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _react = require("react");
+var _client = require("react-dom/client");
+var _server = require("react-dom/server");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _color = require("../../../../../constant/color");
+var _Pagination = require("../Pagination");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const ITEM_COUNT_PER_PAGE = 10;
+const TOTAL_COUNT = 250;
+const TOTAL_PAGE = TOTAL_COUNT / ITEM_COUNT_PER_PAGE;
+/** 그룹 크기 — 기본값 10 과 다르게 골라 그룹 계산이 기본값에 기대지 않게 한다 */
+const PAGE_GROUP_SIZE = 5;
+const FIRST_PAGE = 1;
+/** 첫 그룹(1~5) 안의 페이지 */
+const PAGE_IN_FIRST_GROUP = 3;
+const SECOND_GROUP_START = FIRST_PAGE + PAGE_GROUP_SIZE;
+const THIRD_GROUP_START = SECOND_GROUP_START + PAGE_GROUP_SIZE;
+/** 앞뒤 그룹이 있어 이전 · 다음이 모두 활성인 페이지 */
+const PAGE_IN_THIRD_GROUP = THIRD_GROUP_START + 1;
+const LAST_PAGE_OF_SECOND_GROUP = THIRD_GROUP_START - 1;
+const groupPages = start => Array.from({
+  length: PAGE_GROUP_SIZE
+}, (_, i) => start + i);
+const SECOND_GROUP_PAGES = groupPages(SECOND_GROUP_START);
+const THIRD_GROUP_PAGES = groupPages(THIRD_GROUP_START);
+let root = null;
+let container = null;
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_Pagination.Pagination, {
+      totalCount: TOTAL_COUNT,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: PAGE_IN_FIRST_GROUP,
+      ...props
+    }));
+  });
+  return container;
+};
+/** React 이벤트 핸들러 예외는 click() 밖으로 던져지지 않고 window error 로만 보고된다 */
+let windowErrors = [];
+const collectWindowError = event => {
+  windowErrors.push(event.error);
+  event.preventDefault();
+};
+(0, _vitest.beforeEach)(() => {
+  windowErrors = [];
+  window.addEventListener('error', collectWindowError);
+});
+(0, _vitest.afterEach)(() => {
+  window.removeEventListener('error', collectWindowError);
+  if (root && container) {
+    (0, _testUtils.act)(() => root?.unmount());
+    container.remove();
+  }
+  root = null;
+  container = null;
+});
+const mustQuery = (rootEl, selector) => {
+  const found = rootEl.querySelector(selector);
+  if (!found) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return found;
+};
+const pageButton = (el, page) => {
+  const found = Array.from(el.querySelectorAll('.ncua-pagination__page-num')).find(button => button.textContent === String(page));
+  if (!found) throw new Error(`페이지 버튼을 찾을 수 없습니다: ${page}`);
+  return found;
+};
+const pageNums = el => Array.from(el.querySelectorAll('.ncua-pagination__page-num')).map(button => Number(button.textContent));
+const click = element => (0, _testUtils.act)(() => element.click());
+(0, _vitest.describe)('Pagination — 페이지 번호 클릭 (PGN-01)', () => {
+  (0, _vitest.it)('PGN-01 페이지 번호를 클릭하면 onPageChange 로 그 번호를 알린다', () => {
+    // Given: 첫 그룹을 보는 페이지네이션
+    const onPageChange = _vitest.vi.fn();
+    const el = render({
+      onPageChange
+    });
+    // When: 4 페이지 버튼을 클릭한다
+    const target = PAGE_IN_FIRST_GROUP + 1;
+    click(pageButton(el, target));
+    // Then: 그 번호로 알린다
+    (0, _vitest.expect)(onPageChange).toHaveBeenCalledWith(target);
+  });
+  (0, _vitest.it)('PGN-01 onPageChange 가 없으면 페이지 번호를 클릭해도 예외가 나지 않는다', () => {
+    // Given: onPageChange 없이 렌더
+    const el = render();
+    // When: 페이지 버튼을 클릭한다
+    click(pageButton(el, PAGE_IN_FIRST_GROUP + 1));
+    // Then: window error 가 없다
+    (0, _vitest.expect)(windowErrors).toEqual([]);
+  });
+  (0, _vitest.it)('PGN-01 (대조) onPageChange 가 던지면 window error 로 수집된다 — 위 단언이 공허하지 않음', () => {
+    // Given: 던지는 onPageChange
+    const el = render({
+      onPageChange: () => {
+        throw new Error('의도한 예외');
+      }
+    });
+    // When: 페이지 버튼을 클릭한다
+    click(pageButton(el, PAGE_IN_FIRST_GROUP + 1));
+    // Then: 수집 배열에 예외가 남는다
+    (0, _vitest.expect)(windowErrors.length).toBeGreaterThan(0);
+  });
+});
+(0, _vitest.describe)('Pagination — pc 그룹 이동 (PGN-02)', () => {
+  _vitest.it.each([['처음', '.ncua-pagination__first', FIRST_PAGE], ['이전 그룹', '.ncua-pagination__before', SECOND_GROUP_START], ['다음 그룹', '.ncua-pagination__next', THIRD_GROUP_START + PAGE_GROUP_SIZE], ['마지막', '.ncua-pagination__last', TOTAL_PAGE]])('PGN-02 세 번째 그룹에서 %s 버튼(%s)은 onPageChange 로 %s 번호를 알린다', (_name, selector, expected) => {
+    // Given: 세 번째 그룹 첫 페이지로 렌더한 페이지네이션
+    const onPageChange = _vitest.vi.fn();
+    const el = render({
+      onPageChange,
+      currentPage: THIRD_GROUP_START
+    });
+    // When: 내비 버튼을 클릭한다
+    click(mustQuery(el, selector));
+    // Then: 그 번호로 알린다
+    (0, _vitest.expect)(onPageChange).toHaveBeenCalledWith(expected);
+  });
+  (0, _vitest.it)('PGN-02 currentPage 가 start + 그룹 크기가 되면 다음 그룹 번호로 목록을 바꾼다', () => {
+    // Given: 첫 그룹을 보던 페이지네이션
+    render();
+    // When: 다음 그룹 첫 페이지로 이동한다
+    const el = render({
+      currentPage: SECOND_GROUP_START
+    });
+    // Then: 두 번째 그룹 번호가 보인다
+    (0, _vitest.expect)(pageNums(el)).toEqual(SECOND_GROUP_PAGES);
+  });
+  (0, _vitest.it)('PGN-02 이전 그룹의 페이지로 가면 한 그룹 앞으로 목록을 바꾼다', () => {
+    // Given: 세 번째 그룹을 보던 페이지네이션
+    const before = pageNums(render({
+      currentPage: THIRD_GROUP_START
+    }));
+    // When: 두 번째 그룹의 마지막 페이지로 이동한다
+    const el = render({
+      currentPage: LAST_PAGE_OF_SECOND_GROUP
+    });
+    // Then: 세 번째 그룹에서 두 번째 그룹으로 바뀐다
+    (0, _vitest.expect)(before).toEqual(THIRD_GROUP_PAGES);
+    (0, _vitest.expect)(pageNums(el)).toEqual(SECOND_GROUP_PAGES);
+  });
+});
+/** 폼 안에 렌더하고 submit 발생을 기록한다 (preventDefault 로 jsdom 의 폼 전송을 막는다) */
+const renderInForm = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (container) throw new Error('renderInForm 은 render 와 같은 테스트에서 쓰지 않는다 — 앞선 root 가 정리되지 않는다');
+  const submits = [];
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  const formRoot = (0, _client.createRoot)(container);
+  root = formRoot;
+  (0, _testUtils.act)(() => {
+    formRoot.render(/*#__PURE__*/(0, _react.createElement)('form', {
+      onSubmit: event => {
+        event.preventDefault();
+        submits.push(event.nativeEvent);
+      }
+    }, /*#__PURE__*/(0, _react.createElement)(_Pagination.Pagination, {
+      totalCount: TOTAL_COUNT,
+      itemCountPerPage: ITEM_COUNT_PER_PAGE,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: PAGE_IN_FIRST_GROUP,
+      onPageChange: _vitest.vi.fn(),
+      ...props
+    })));
+  });
+  return {
+    el: container,
+    submits
+  };
+};
+(0, _vitest.describe)('Pagination — 폼 안 버튼 (PGN-04)', () => {
+  (0, _vitest.it)('PGN-04 폼 안에서 페이지 번호를 클릭하면 type 이 없어 폼을 제출한다', () => {
+    // 현재 동작 고정 — 결함 후보: #627 PGN-04 (페이지 번호 button 에 type 이 없어 의도 없는 폼 제출)
+    // Given: 폼 안의 페이지네이션
+    const {
+      el,
+      submits
+    } = renderInForm();
+    const target = pageButton(el, PAGE_IN_FIRST_GROUP + 1);
+    // When: 페이지 번호를 클릭한다
+    click(target);
+    // Then: type 속성이 없고 폼이 제출된다
+    (0, _vitest.expect)(target.getAttribute('type')).toBeNull();
+    (0, _vitest.expect)(submits).toHaveLength(1);
+  });
+  _vitest.it.each([['이전', '.ncua-pagination__before'], ['다음', '.ncua-pagination__next']])('PGN-04 폼 안에서 %s 버튼(공용 Button)을 클릭하면 폼을 제출한다', (_name, selector) => {
+    // 현재 동작 고정 — 결함 후보: #627 PGN-04 (#620 VNT-12 같은 뿌리 — NavButton 은 type 기본값 없는 공용 Button)
+    // Given: 세 번째 그룹(11~15)을 보는 폼 안 페이지네이션 (이전 · 다음 모두 활성)
+    const {
+      el,
+      submits
+    } = renderInForm({
+      currentPage: PAGE_IN_THIRD_GROUP
+    });
+    const nav = mustQuery(el, selector);
+    // When: 내비 버튼을 클릭한다
+    click(nav);
+    // Then: 비활성이 아닌 버튼이고 폼이 제출된다
+    (0, _vitest.expect)(nav.disabled).toBe(false);
+    (0, _vitest.expect)(submits).toHaveLength(1);
+  });
+  (0, _vitest.it)('PGN-04 (대조) restProps 로 type="button" 을 넘기면 페이지 번호 클릭이 폼을 제출하지 않는다', () => {
+    // Given: type="button" 을 넘긴 폼 안 페이지네이션 (restProps 는 페이지 번호 button 에만 전달된다)
+    const {
+      el,
+      submits
+    } = renderInForm({
+      type: 'button'
+    });
+    // When: 페이지 번호를 클릭한다
+    click(pageButton(el, PAGE_IN_FIRST_GROUP + 1));
+    // Then: submit 이 없다 — 위 케이스의 submit 기록이 배선 착시가 아님을 보인다
+    (0, _vitest.expect)(submits).toEqual([]);
+  });
+  _vitest.it.todo('PGN-04 기대 동작 (#627): 페이지 번호 · 처음 · 이전 · 다음 · 마지막 버튼은 type="button" 이라 폼을 제출하지 않는다');
+});
+/** NavButton 아이콘 크기 — pc 16 · mo 20 */
+const NAV_ICON_SIZE_PC = 16;
+const NAV_ICON_SIZE_MO = 20;
+const navIcon = (el, selector) => mustQuery(el, `${selector} svg`);
+/** 아이콘 컴포넌트의 svg 내부 도형 마크업 — 버튼 안 아이콘이 어느 아이콘인지 구분한다 */
+const iconPaths = (icon, size) => {
+  const host = document.createElement('div');
+  host.innerHTML = (0, _server.renderToStaticMarkup)(/*#__PURE__*/(0, _react.createElement)(icon, {
+    width: size,
+    height: size
+  }));
+  return mustQuery(host, 'svg').innerHTML;
+};
+(0, _vitest.describe)('Pagination — mo 이전 · 다음 (PGN-03)', () => {
+  _vitest.it.each([['이전', '.ncua-pagination__before', PAGE_IN_FIRST_GROUP - 1], ['다음', '.ncua-pagination__next', PAGE_IN_FIRST_GROUP + 1]])('PGN-03 mo 에서 %s 버튼은 currentPage 기준 한 칸 이동한 번호를 알린다', (_name, selector, expected) => {
+    // Given: mo 페이지네이션 (그룹 크기와 무관하게 한 칸씩 이동)
+    const onPageChange = _vitest.vi.fn();
+    const el = render({
+      onPageChange,
+      breakPoint: 'mo'
+    });
+    // When: 내비 버튼을 클릭한다
+    click(mustQuery(el, selector));
+    // Then: 한 칸 이동한 번호를 알린다
+    (0, _vitest.expect)(onPageChange).toHaveBeenCalledWith(expected);
+  });
+  // 비활성 · 이동 버튼 노출(pc 대조 포함)은 Pagination.test.ts 'mo 모드 이전/다음 버튼 노출' 이 고정한다
+});
+(0, _vitest.describe)('NavButton — 아이콘 색 · 크기 (PGN-05)', () => {
+  (0, _vitest.it)('PGN-05 비활성 버튼 아이콘은 gray200, 활성 버튼 아이콘은 gray700 이다', () => {
+    // Given/When: 첫 그룹 — 처음 · 이전은 비활성, 다음 · 마지막은 활성
+    const el = render();
+    // Then: 색이 상태를 따른다
+    (0, _vitest.expect)([navIcon(el, '.ncua-pagination__first').getAttribute('color'), navIcon(el, '.ncua-pagination__next').getAttribute('color')]).toEqual([_color.COLOR.gray200, _color.COLOR.gray700]);
+  });
+  _vitest.it.each([['pc', NAV_ICON_SIZE_PC, 'ncua-btn--xs'], ['mo', NAV_ICON_SIZE_MO, 'ncua-btn--sm']])('PGN-05 %s 는 아이콘 %s px · 버튼 크기 클래스 %s', (breakPoint, iconSize, sizeClass) => {
+    const el = render({
+      breakPoint
+    });
+    const next = mustQuery(el, '.ncua-pagination__next');
+    (0, _vitest.expect)(navIcon(el, '.ncua-pagination__next').getAttribute('width')).toBe(String(iconSize));
+    (0, _vitest.expect)(Array.from(next.classList)).toContain(sizeClass);
+  });
+  _vitest.it.each([['pc', '이전', '.ncua-pagination__before', 'ChevronLeft', _uiAdminIcon.ChevronLeft, NAV_ICON_SIZE_PC], ['pc', '다음', '.ncua-pagination__next', 'ChevronRight', _uiAdminIcon.ChevronRight, NAV_ICON_SIZE_PC], ['mo', '이전', '.ncua-pagination__before', 'ArrowLeft', _uiAdminIcon.ArrowLeft, NAV_ICON_SIZE_MO], ['mo', '다음', '.ncua-pagination__next', 'ArrowRight', _uiAdminIcon.ArrowRight, NAV_ICON_SIZE_MO]])('PGN-05 %s 의 %s 버튼(%s)은 %s 아이콘을 그린다', (breakPoint, _name, selector, _iconName, icon, size) => {
+    // Given/When: 이전 · 다음이 모두 활성인 세 번째 그룹
+    const el = render({
+      breakPoint,
+      currentPage: PAGE_IN_THIRD_GROUP
+    });
+    // Then: 버튼 안 svg 의 내부 도형이 기대 아이콘과 같다
+    (0, _vitest.expect)(navIcon(el, selector).innerHTML).toBe(iconPaths(icon, size));
+  });
+  (0, _vitest.it)('PGN-05 (대조) Chevron 과 Arrow 아이콘 도형은 서로 달라 위 단언이 공허하지 않다', () => {
+    (0, _vitest.expect)(iconPaths(_uiAdminIcon.ChevronRight, NAV_ICON_SIZE_PC)).not.toBe(iconPaths(_uiAdminIcon.ArrowRight, NAV_ICON_SIZE_PC));
+  });
+});