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

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: 16
+  md: 14
 };
 const Badge = _ref => {
   let {

package/dist/cjs/src/components/layout/page-title/__tests__/pageTitleStyle.test.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _nodePath = _interopRequireDefault(require("node:path"));
+var _sass = require("sass");
+var _vitest = require("vitest");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// 배경·그림자·패딩은 jsdom 에서 계산되지 않으므로, 컴파일된 CSS 에서 variant 별 규칙을 검사한다.
+// (input-base/__tests__/inputAutofill.test.ts 와 같은 방식 — 컴포넌트 SCSS 엔트리를 직접 컴파일)
+const PAGE_TITLE_SCSS_PATH = _nodePath.default.resolve(__dirname, '../../../../../assets/styles/components/page-title/_index.scss');
+const compiledPageTitleCss = (0, _sass.compile)(PAGE_TITLE_SCSS_PATH).css;
+/** 선택자 → 선언 목록. 같은 선택자가 여러 규칙에 나오면 선언을 이어 붙인다. */
+const parseRules = css => {
+  const rules = new Map();
+  for (const [, selectorList, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const declarations = body.split(';').map(declaration => declaration.trim().replace(/\s+/g, ' ')).filter(Boolean);
+    for (const selector of selectorList.split(',').map(selector => selector.trim().replace(/\s+/g, ' '))) {
+      rules.set(selector, [...(rules.get(selector) ?? []), ...declarations]);
+    }
+  }
+  return rules;
+};
+const rules = parseRules(compiledPageTitleCss);
+const declarationsOf = selector => rules.get(selector) ?? [];
+const propertiesOf = selector => declarationsOf(selector).map(declaration => declaration.split(':')[0].trim());
+const ROOT = '.ncua-page-title';
+const FIXED = '.ncua-page-title--fixed';
+const PAGE_HEADER = '.ncua-page-title__page-header';
+const FIXED_PAGE_HEADER = '.ncua-page-title--fixed .ncua-page-title__page-header';
+(0, _vitest.describe)('PageTitle 스타일 — Default (·Detail)', () => {
+  (0, _vitest.it)('.ncua-page-title 에 background·box-shadow 가 없다 (투명, 그림자 없음)', () => {
+    // Given: 컴파일된 PageTitle CSS 에서
+    // When: 루트 규칙의 속성을 모으면
+    const properties = propertiesOf(ROOT);
+    // Then: 루트 규칙은 존재하지만 배경·그림자를 지정하지 않는다
+    (0, _vitest.expect)(properties.length).toBeGreaterThan(0);
+    (0, _vitest.expect)(properties).not.toContain('background');
+    (0, _vitest.expect)(properties).not.toContain('background-color');
+    (0, _vitest.expect)(properties).not.toContain('box-shadow');
+  });
+  (0, _vitest.it)('.ncua-page-title__page-header 패딩은 32px 40px 0 이다', () => {
+    // Given: 컴파일된 PageTitle CSS 에서
+    // When: page-header 규칙을 찾으면
+    const declarations = declarationsOf(PAGE_HEADER);
+    // Then: 위 32px · 좌우 40px · 아래 0 이다
+    (0, _vitest.expect)(declarations).toContain('padding: 32px 40px 0');
+    (0, _vitest.expect)(declarations).not.toContain('padding: 24px 40px');
+  });
+});
+(0, _vitest.describe)('PageTitle 스타일 — Fixed (·Fixed Detail)', () => {
+  (0, _vitest.it)('.ncua-page-title--fixed 배경은 --gray-50 이다', () => {
+    // Given: 컴파일된 PageTitle CSS 에서
+    // When: fixed modifier 규칙을 찾으면
+    const declarations = declarationsOf(FIXED);
+    // Then: sticky 로 콘텐츠 위에 겹치므로 배경 Gray/50 을 가진다
+    (0, _vitest.expect)(declarations).toContain('background: var(--gray-50)');
+  });
+  (0, _vitest.it)('.ncua-page-title--fixed 하단 border 는 1px solid --gray-100 이다', () => {
+    // Given/When: fixed modifier 규칙을 찾으면
+    const declarations = declarationsOf(FIXED);
+    // Then: 기존 Gray/300 이 아니라 Gray/100 border 를 쓴다
+    (0, _vitest.expect)(declarations).toContain('border-bottom: 1px solid var(--gray-100)');
+    (0, _vitest.expect)(declarations).not.toContain('border-bottom: 1px solid var(--gray-300)');
+  });
+  (0, _vitest.it)('.ncua-page-title--fixed 에 box-shadow 가 없다', () => {
+    // Given/When: fixed modifier 규칙의 속성을 모으면
+    // Then: 그림자를 지정하지 않는다
+    (0, _vitest.expect)(propertiesOf(FIXED)).not.toContain('box-shadow');
+  });
+  (0, _vitest.it)('Fixed 의 page-header 패딩은 12px 40px 로 유지된다', () => {
+    // Given/When: fixed 하위 page-header 규칙을 찾으면
+    // Then: 기존 Fixed 패딩이 그대로다 (범위 밖)
+    (0, _vitest.expect)(declarationsOf(FIXED_PAGE_HEADER)).toContain('padding: 12px 40px');
+  });
+  (0, _vitest.it)('Fixed sticky 동작(position·top·z-index)은 유지된다', () => {
+    // Given/When: fixed modifier 규칙을 찾으면
+    const declarations = declarationsOf(FIXED);
+    // Then: 기존 sticky 선언이 그대로다
+    (0, _vitest.expect)(declarations).toContain('position: sticky');
+    (0, _vitest.expect)(declarations).toContain('top: 0');
+    (0, _vitest.expect)(declarations).toContain('z-index: 999');
+  });
+});
+(0, _vitest.describe)('PageTitle 스타일 — 토큰 사용', () => {
+  (0, _vitest.it)('배경·border 색상에 하드코딩 값 없이 CSS 변수만 쓴다 (ADR-4)', () => {
+    // Given/When: 루트·fixed 규칙의 배경·border 선언을 모으면
+    const colorDeclarations = [...declarationsOf(ROOT), ...declarationsOf(FIXED)].filter(declaration => /^(background|border-bottom)/.test(declaration));
+    // Then: hex·rgb·색 이름 대신 var(--*) 만 쓴다
+    (0, _vitest.expect)(colorDeclarations.length).toBeGreaterThan(0);
+    for (const declaration of colorDeclarations) {
+      (0, _vitest.expect)(declaration).not.toMatch(/#[0-9a-f]{3,8}\b|rgba?\(|(?<![-\w])white\b/i);
+      (0, _vitest.expect)(declaration).toMatch(/var\(--[a-z0-9-]+\)/);
+    }
+  });
+});

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

@@ -36,28 +36,28 @@ const Pagination = _ref => {
   };
   (0, _react.useEffect)(() => {
     const lastGroupStart = Math.max(1, Math.floor((totalPage - 1) / pageCount) * pageCount + 1);
-    // totalPage/pageCount 가 줄어 start 가 마지막 그룹을 넘으면 마지막 그룹으로 보정한다.
+    // totalPage/pageCount 가 줄어 start 가 마지막 그룹을 넘으면 마지막 그룹에서 시작해 아래 규칙을 계속 적용한다.
     // (예: 100→50 페이지로 축소 시 start 가 91 에 머물러 범위 밖 버튼을 표시하던 문제)
-    if (start > lastGroupStart) {
-      setStart(lastGroupStart);
-      return;
+    // 바로 return 하면 새 검색으로 currentPage 가 1 이 돼도 1 이 목록에 없다 (PR #603 리뷰).
+    const baseStart = Math.min(start, lastGroupStart);
+    let nextStart = baseStart;
+    if (currentPage === baseStart + pageCount) {
+      nextStart = baseStart + pageCount;
     }
-    if (currentPage === start + pageCount) {
-      setStart(start + pageCount);
+    if (currentPage > baseStart + pageCount) {
+      nextStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
     }
-    if (currentPage > start + pageCount) {
-      const newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
-      setStart(newStart);
-    }
-    if (currentPage < start) {
-      setStart(Math.max(1, start - pageCount));
+    if (currentPage < baseStart) {
+      nextStart = Math.max(1, baseStart - pageCount);
     }
     if (currentPage === 1) {
-      setStart(1);
+      nextStart = 1;
     }
     if (currentPage === totalPage) {
-      setStart(lastGroupStart);
+      nextStart = lastGroupStart;
     }
+    // currentPage 가 totalPage 를 넘는 값이어도 마지막 그룹을 넘지 않는다
+    setStart(Math.min(nextStart, lastGroupStart));
     // start 는 이 effect 가 setStart 로 갱신하는 대상이라 deps 에서 제외한다(넣으면 자기 갱신으로
     // 재실행). currentPage 외에 totalPage/pageCount 도 추적해, 이들이 줄어 start 가 범위를 벗어나면
     // 위에서 보정한다.

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

@@ -67,6 +67,23 @@ const nextOf = el => el.querySelector('.ncua-pagination__next');
     (0, _vitest.expect)(nums[0]).toBe(GROUP_START_50_PAGES);
     (0, _vitest.expect)(Math.max(...nums)).toBeLessThanOrEqual(LAST_PAGE_50);
   });
+  (0, _vitest.it)('totalPage 가 줄면서 currentPage 가 1 로 돌아오면 1 이 든 첫 그룹을 보인다 (PR #603 리뷰)', () => {
+    // 50 페이지 중 35 페이지(31~40 그룹) → 새 검색으로 25 페이지 결과의 1 페이지
+    const el = render({
+      totalCount: 750,
+      itemCountPerPage: 15,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 35
+    });
+    render({
+      totalCount: 375,
+      itemCountPerPage: 15,
+      pageCount: PAGE_GROUP_SIZE,
+      currentPage: 1
+    });
+    (0, _vitest.expect)(pageNums(el)[0]).toBe(1);
+    (0, _vitest.expect)(el.querySelector('.ncua-pagination__page-num.is-current')?.textContent).toBe('1');
+  });
 });
 (0, _vitest.describe)('Pagination — mo 모드 이전/다음 버튼 노출', () => {
   (0, _vitest.it)('페이지가 그룹 크기 이하여도 mo 에서는 이전·다음 버튼이 노출된다', () => {