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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/cjs/src/components/feedback-and-status/badge/Badge.js +1 -1
  2. package/dist/cjs/src/components/layout/page-title/__tests__/pageTitleStyle.test.js +94 -0
  3. package/dist/cjs/src/components/navigation/pagination/Pagination.js +14 -14
  4. package/dist/cjs/src/components/navigation/pagination/__tests__/Pagination.test.js +17 -0
  5. package/dist/cjs/src/generated/scoped-css.js +1 -1
  6. package/dist/cjs/vitest.config.js +12 -1
  7. package/dist/esm/src/components/feedback-and-status/badge/Badge.js +1 -1
  8. package/dist/esm/src/components/layout/page-title/__tests__/pageTitleStyle.test.js +91 -0
  9. package/dist/esm/src/components/navigation/pagination/Pagination.js +14 -14
  10. package/dist/esm/src/components/navigation/pagination/__tests__/Pagination.test.js +17 -0
  11. package/dist/esm/src/generated/scoped-css.js +1 -1
  12. package/dist/esm/vitest.config.js +12 -1
  13. package/dist/temp/src/components/feedback-and-status/badge/Badge.d.ts +1 -1
  14. package/dist/temp/src/components/feedback-and-status/badge/Badge.js +1 -1
  15. package/dist/temp/src/components/layout/page-title/__tests__/pageTitleStyle.test.d.ts +1 -0
  16. package/dist/temp/src/components/layout/page-title/__tests__/pageTitleStyle.test.js +94 -0
  17. package/dist/temp/src/components/navigation/pagination/Pagination.js +14 -14
  18. package/dist/temp/src/components/navigation/pagination/__tests__/Pagination.test.js +7 -0
  19. package/dist/temp/src/generated/scoped-css.js +1 -1
  20. package/dist/temp/vitest.config.js +11 -0
  21. package/dist/types/src/components/feedback-and-status/badge/Badge.d.ts +1 -1
  22. package/dist/types/src/components/layout/page-title/__tests__/pageTitleStyle.test.d.ts +1 -0
  23. package/dist/ui-admin/assets/styles/style.css +15 -18
  24. package/package.json +1 -1
@@ -29,7 +29,18 @@ var _default = exports.default = (0, _config.defineConfig)({
29
29
  // 'lcov' 대신 'lcovonly' — 'lcov' 는 HTML 리포트까지 생성한다.
30
30
  reporter: ['text-summary', ['lcovonly', {
31
31
  projectRoot: REPO_ROOT
32
- }]]
32
+ }]],
33
+ // 회귀 방지 하한선 — 실측에서 약 2%p 낮춘 값 (ui-admin-mcp 와 같은 여유폭).
34
+ // 실측 기준: 2026-10-12, 25cb4d96 — stmts 54.91 / branch 44.63 / funcs 55.20 / lines 55.80
35
+ // 최종 목표: 93 / 88 (lines 95 · branches 90). 테스트 보강 단계마다 실측 −2 로 인상한다.
36
+ // autoUpdate: false — 값은 실측을 확인하고 사람이 직접 올린다.
37
+ thresholds: {
38
+ autoUpdate: false,
39
+ statements: 53,
40
+ branches: 43,
41
+ functions: 53,
42
+ lines: 54
43
+ }
33
44
  }
34
45
  }
35
46
  });
@@ -9,7 +9,7 @@ const BADGE_ICON_SIZE = 12;
9
9
  /** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
10
10
  const NEW_BADGE_ICON_SIZE = {
11
11
  sm: 12,
12
- md: 16
12
+ md: 14
13
13
  };
14
14
  const Badge = _ref => {
15
15
  let {
@@ -0,0 +1,91 @@
1
+ import path from 'node:path';
2
+ import { compile as compileSass } from 'sass';
3
+ import { describe, expect, it } from 'vitest';
4
+ // 배경·그림자·패딩은 jsdom 에서 계산되지 않으므로, 컴파일된 CSS 에서 variant 별 규칙을 검사한다.
5
+ // (input-base/__tests__/inputAutofill.test.ts 와 같은 방식 — 컴포넌트 SCSS 엔트리를 직접 컴파일)
6
+ const PAGE_TITLE_SCSS_PATH = path.resolve(__dirname, '../../../../../assets/styles/components/page-title/_index.scss');
7
+ const compiledPageTitleCss = compileSass(PAGE_TITLE_SCSS_PATH).css;
8
+ /** 선택자 → 선언 목록. 같은 선택자가 여러 규칙에 나오면 선언을 이어 붙인다. */
9
+ const parseRules = css => {
10
+ const rules = new Map();
11
+ for (const [, selectorList, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
12
+ const declarations = body.split(';').map(declaration => declaration.trim().replace(/\s+/g, ' ')).filter(Boolean);
13
+ for (const selector of selectorList.split(',').map(selector => selector.trim().replace(/\s+/g, ' '))) {
14
+ rules.set(selector, [...(rules.get(selector) ?? []), ...declarations]);
15
+ }
16
+ }
17
+ return rules;
18
+ };
19
+ const rules = parseRules(compiledPageTitleCss);
20
+ const declarationsOf = selector => rules.get(selector) ?? [];
21
+ const propertiesOf = selector => declarationsOf(selector).map(declaration => declaration.split(':')[0].trim());
22
+ const ROOT = '.ncua-page-title';
23
+ const FIXED = '.ncua-page-title--fixed';
24
+ const PAGE_HEADER = '.ncua-page-title__page-header';
25
+ const FIXED_PAGE_HEADER = '.ncua-page-title--fixed .ncua-page-title__page-header';
26
+ describe('PageTitle 스타일 — Default (·Detail)', () => {
27
+ it('.ncua-page-title 에 background·box-shadow 가 없다 (투명, 그림자 없음)', () => {
28
+ // Given: 컴파일된 PageTitle CSS 에서
29
+ // When: 루트 규칙의 속성을 모으면
30
+ const properties = propertiesOf(ROOT);
31
+ // Then: 루트 규칙은 존재하지만 배경·그림자를 지정하지 않는다
32
+ expect(properties.length).toBeGreaterThan(0);
33
+ expect(properties).not.toContain('background');
34
+ expect(properties).not.toContain('background-color');
35
+ expect(properties).not.toContain('box-shadow');
36
+ });
37
+ it('.ncua-page-title__page-header 패딩은 32px 40px 0 이다', () => {
38
+ // Given: 컴파일된 PageTitle CSS 에서
39
+ // When: page-header 규칙을 찾으면
40
+ const declarations = declarationsOf(PAGE_HEADER);
41
+ // Then: 위 32px · 좌우 40px · 아래 0 이다
42
+ expect(declarations).toContain('padding: 32px 40px 0');
43
+ expect(declarations).not.toContain('padding: 24px 40px');
44
+ });
45
+ });
46
+ describe('PageTitle 스타일 — Fixed (·Fixed Detail)', () => {
47
+ it('.ncua-page-title--fixed 배경은 --gray-50 이다', () => {
48
+ // Given: 컴파일된 PageTitle CSS 에서
49
+ // When: fixed modifier 규칙을 찾으면
50
+ const declarations = declarationsOf(FIXED);
51
+ // Then: sticky 로 콘텐츠 위에 겹치므로 배경 Gray/50 을 가진다
52
+ expect(declarations).toContain('background: var(--gray-50)');
53
+ });
54
+ it('.ncua-page-title--fixed 하단 border 는 1px solid --gray-100 이다', () => {
55
+ // Given/When: fixed modifier 규칙을 찾으면
56
+ const declarations = declarationsOf(FIXED);
57
+ // Then: 기존 Gray/300 이 아니라 Gray/100 border 를 쓴다
58
+ expect(declarations).toContain('border-bottom: 1px solid var(--gray-100)');
59
+ expect(declarations).not.toContain('border-bottom: 1px solid var(--gray-300)');
60
+ });
61
+ it('.ncua-page-title--fixed 에 box-shadow 가 없다', () => {
62
+ // Given/When: fixed modifier 규칙의 속성을 모으면
63
+ // Then: 그림자를 지정하지 않는다
64
+ expect(propertiesOf(FIXED)).not.toContain('box-shadow');
65
+ });
66
+ it('Fixed 의 page-header 패딩은 12px 40px 로 유지된다', () => {
67
+ // Given/When: fixed 하위 page-header 규칙을 찾으면
68
+ // Then: 기존 Fixed 패딩이 그대로다 (범위 밖)
69
+ expect(declarationsOf(FIXED_PAGE_HEADER)).toContain('padding: 12px 40px');
70
+ });
71
+ it('Fixed sticky 동작(position·top·z-index)은 유지된다', () => {
72
+ // Given/When: fixed modifier 규칙을 찾으면
73
+ const declarations = declarationsOf(FIXED);
74
+ // Then: 기존 sticky 선언이 그대로다
75
+ expect(declarations).toContain('position: sticky');
76
+ expect(declarations).toContain('top: 0');
77
+ expect(declarations).toContain('z-index: 999');
78
+ });
79
+ });
80
+ describe('PageTitle 스타일 — 토큰 사용', () => {
81
+ it('배경·border 색상에 하드코딩 값 없이 CSS 변수만 쓴다 (ADR-4)', () => {
82
+ // Given/When: 루트·fixed 규칙의 배경·border 선언을 모으면
83
+ const colorDeclarations = [...declarationsOf(ROOT), ...declarationsOf(FIXED)].filter(declaration => /^(background|border-bottom)/.test(declaration));
84
+ // Then: hex·rgb·색 이름 대신 var(--*) 만 쓴다
85
+ expect(colorDeclarations.length).toBeGreaterThan(0);
86
+ for (const declaration of colorDeclarations) {
87
+ expect(declaration).not.toMatch(/#[0-9a-f]{3,8}\b|rgba?\(|(?<![-\w])white\b/i);
88
+ expect(declaration).toMatch(/var\(--[a-z0-9-]+\)/);
89
+ }
90
+ });
91
+ });
@@ -29,28 +29,28 @@ export const Pagination = _ref => {
29
29
  };
30
30
  useEffect(() => {
31
31
  const lastGroupStart = Math.max(1, Math.floor((totalPage - 1) / pageCount) * pageCount + 1);
32
- // totalPage/pageCount 가 줄어 start 가 마지막 그룹을 넘으면 마지막 그룹으로 보정한다.
32
+ // totalPage/pageCount 가 줄어 start 가 마지막 그룹을 넘으면 마지막 그룹에서 시작해 아래 규칙을 계속 적용한다.
33
33
  // (예: 100→50 페이지로 축소 시 start 가 91 에 머물러 범위 밖 버튼을 표시하던 문제)
34
- if (start > lastGroupStart) {
35
- setStart(lastGroupStart);
36
- return;
34
+ // 바로 return 하면 새 검색으로 currentPage 가 1 이 돼도 1 이 목록에 없다 (PR #603 리뷰).
35
+ const baseStart = Math.min(start, lastGroupStart);
36
+ let nextStart = baseStart;
37
+ if (currentPage === baseStart + pageCount) {
38
+ nextStart = baseStart + pageCount;
37
39
  }
38
- if (currentPage === start + pageCount) {
39
- setStart(start + pageCount);
40
+ if (currentPage > baseStart + pageCount) {
41
+ nextStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
40
42
  }
41
- if (currentPage > start + pageCount) {
42
- const newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
43
- setStart(newStart);
44
- }
45
- if (currentPage < start) {
46
- setStart(Math.max(1, start - pageCount));
43
+ if (currentPage < baseStart) {
44
+ nextStart = Math.max(1, baseStart - pageCount);
47
45
  }
48
46
  if (currentPage === 1) {
49
- setStart(1);
47
+ nextStart = 1;
50
48
  }
51
49
  if (currentPage === totalPage) {
52
- setStart(lastGroupStart);
50
+ nextStart = lastGroupStart;
53
51
  }
52
+ // currentPage 가 totalPage 를 넘는 값이어도 마지막 그룹을 넘지 않는다
53
+ setStart(Math.min(nextStart, lastGroupStart));
54
54
  // start 는 이 effect 가 setStart 로 갱신하는 대상이라 deps 에서 제외한다(넣으면 자기 갱신으로
55
55
  // 재실행). currentPage 외에 totalPage/pageCount 도 추적해, 이들이 줄어 start 가 범위를 벗어나면
56
56
  // 위에서 보정한다.
@@ -64,6 +64,23 @@ describe('#332 Pagination — totalPage 축소 시 start 보정', () => {
64
64
  expect(nums[0]).toBe(GROUP_START_50_PAGES);
65
65
  expect(Math.max(...nums)).toBeLessThanOrEqual(LAST_PAGE_50);
66
66
  });
67
+ it('totalPage 가 줄면서 currentPage 가 1 로 돌아오면 1 이 든 첫 그룹을 보인다 (PR #603 리뷰)', () => {
68
+ // 50 페이지 중 35 페이지(31~40 그룹) → 새 검색으로 25 페이지 결과의 1 페이지
69
+ const el = render({
70
+ totalCount: 750,
71
+ itemCountPerPage: 15,
72
+ pageCount: PAGE_GROUP_SIZE,
73
+ currentPage: 35
74
+ });
75
+ render({
76
+ totalCount: 375,
77
+ itemCountPerPage: 15,
78
+ pageCount: PAGE_GROUP_SIZE,
79
+ currentPage: 1
80
+ });
81
+ expect(pageNums(el)[0]).toBe(1);
82
+ expect(el.querySelector('.ncua-pagination__page-num.is-current')?.textContent).toBe('1');
83
+ });
67
84
  });
68
85
  describe('Pagination — mo 모드 이전/다음 버튼 노출', () => {
69
86
  it('페이지가 그룹 크기 이하여도 mo 에서는 이전·다음 버튼이 노출된다', () => {