@ncds/ui-admin 1.8.26-alpha.8 → 1.8.26-alpha.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 에서는 이전·다음 버튼이 노출된다', () => {

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

@@ -29,28 +29,28 @@ export const Pagination = _ref => {
   };
   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/esm/src/components/navigation/pagination/__tests__/Pagination.test.js

@@ -64,6 +64,23 @@ describe('#332 Pagination — totalPage 축소 시 start 보정', () => {
     expect(nums[0]).toBe(GROUP_START_50_PAGES);
     expect(Math.max(...nums)).toBeLessThanOrEqual(LAST_PAGE_50);
   });
+  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
+    });
+    expect(pageNums(el)[0]).toBe(1);
+    expect(el.querySelector('.ncua-pagination__page-num.is-current')?.textContent).toBe('1');
+  });
 });
 describe('Pagination — mo 모드 이전/다음 버튼 노출', () => {
   it('페이지가 그룹 크기 이하여도 mo 에서는 이전·다음 버튼이 노출된다', () => {

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

@@ -19,28 +19,28 @@ export const Pagination = ({ className = '', totalCount, itemCountPerPage = 10,
     };
     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/temp/src/components/navigation/pagination/__tests__/Pagination.test.js

@@ -64,6 +64,13 @@ describe('#332 Pagination — totalPage 축소 시 start 보정', () => {
         expect(nums[0]).toBe(GROUP_START_50_PAGES);
         expect(Math.max(...nums)).toBeLessThanOrEqual(LAST_PAGE_50);
     });
+    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 });
+        expect(pageNums(el)[0]).toBe(1);
+        expect(el.querySelector('.ncua-pagination__page-num.is-current')?.textContent).toBe('1');
+    });
 });
 describe('Pagination — mo 모드 이전/다음 버튼 노출', () => {
     it('페이지가 그룹 크기 이하여도 mo 에서는 이전·다음 버튼이 노출된다', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.26-alpha.8",
+  "version": "1.8.26-alpha.9",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",