syc0123
d9611f234e
- Deleted the outdated `PageGroupNav` component and its related documentation. - Introduced a new document for the direct input navigation feature in pagination, detailing the rationale for the change and the new user experience. - Updated the checklist to reflect the completion of the new pagination input feature and its implementation steps. These changes enhance the clarity and usability of the pagination system in the project.
74 lines
3.1 KiB
Markdown
74 lines
3.1 KiB
Markdown
# [체크리스트] 페이징 - 페이지 번호 직접 입력 네비게이션
|
|
|
|
> 관련 문서: [계획서](./PGN[계획]-페이징-직접입력.md) | [맥락노트](./PGN[맥락]-페이징-직접입력.md)
|
|
|
|
---
|
|
|
|
## 공정 상태
|
|
|
|
- 전체 진행률: **100%** (완료)
|
|
- 현재 단계: 완료
|
|
|
|
---
|
|
|
|
## 구현 체크리스트
|
|
|
|
### 1단계: 이전 설계 산출물 정리
|
|
|
|
- [x] `frontend/components/common/PageGroupNav.tsx` 삭제
|
|
- [x] `TableListComponent.tsx`에서 `PageGroupNav` import 제거 (있으면) — 이미 없음
|
|
|
|
### 2단계: 입력 필드 구현
|
|
|
|
- [x] `pageInputValue` 로컬 상태 추가 (`useState<string>`)
|
|
- [x] `currentPage` 변경 시 `pageInputValue` 동기화 (`useEffect`)
|
|
- [x] `commitPageInput` 핸들러 구현 (parseInt + clamp + handlePageChange)
|
|
- [x] paginationJSX 중앙의 `<span>` → `<input>` + `/` + `<span>` 교체
|
|
- [x] `inputMode="numeric"` 적용
|
|
- [x] `onFocus`에 전체 선택 (`e.target.select()`)
|
|
- [x] `onChange`에 `setPageInputValue` (표시만 변경)
|
|
- [x] `onKeyDown` Enter에 `commitPageInput` + `blur()`
|
|
- [x] `onBlur`에 `commitPageInput`
|
|
- [x] `disabled={loading}` 적용
|
|
- [x] 기존 좌측 페이지크기 입력과 일관된 스타일 적용
|
|
|
|
### 3단계: 버그 수정
|
|
|
|
- [x] `handlePageSizeChange`에 `onConfigChange` 호출 추가 (`pageSize` + `currentPage: 1` 전달)
|
|
- [x] `fetchTableDataInternal`에서 `currentPage`를 단일 소스로 변경 (stale `tableConfig.pagination?.currentPage` 문제 해결)
|
|
- [x] `useCallback` 의존성에서 `tableConfig.pagination?.currentPage` 제거
|
|
- [x] `useMemo` 의존성에 `pageInputValue` 추가
|
|
|
|
### 4단계: 검증
|
|
|
|
- [x] 입력 필드에 숫자 입력 후 Enter → 해당 페이지로 이동
|
|
- [x] 입력 필드에 숫자 입력 후 포커스 아웃 → 해당 페이지로 이동
|
|
- [x] 0 입력 → 1로 보정
|
|
- [x] totalPages 초과 입력 → totalPages로 보정
|
|
- [x] 빈 값으로 blur → 현재 페이지 유지
|
|
- [x] 비숫자(abc) 입력 후 Enter → 현재 페이지 유지
|
|
- [x] 입력 필드 클릭 시 기존 숫자 전체 선택 확인
|
|
- [x] `< >` 버튼 클릭 시 입력 필드 값도 갱신 확인
|
|
- [x] `<< >>` 버튼 클릭 시 입력 필드 값도 갱신 확인
|
|
- [x] 로딩 중 입력 필드 비활성화 확인
|
|
- [x] 좌측 페이지크기 입력과 스타일 일관성 확인
|
|
- [x] 기존 `<< < > >>` 버튼 동작 변화 없음 확인
|
|
- [x] 페이지크기 변경 시 1페이지로 리셋 + 데이터 정상 로딩 확인
|
|
|
|
### 5단계: 정리
|
|
|
|
- [x] 린트 에러 없음 확인 (기존 에러만 존재, 신규 없음)
|
|
- [x] 문서(계획서/맥락노트/체크리스트) 최신화 완료
|
|
|
|
---
|
|
|
|
## 변경 이력
|
|
|
|
| 날짜 | 내용 |
|
|
|------|------|
|
|
| 2026-03-11 | 최초 설계: 10개 번호 버튼 그룹 (PageGroupNav) |
|
|
| 2026-03-11 | 설계 변경: 입력 필드 방식으로 전면 재작성 |
|
|
| 2026-03-11 | 구현 완료: 입력 필드 + 유효성 검증 |
|
|
| 2026-03-11 | 버그 수정: 페이지크기 변경 시 빈 데이터 문제 (onConfigChange 누락 + stale currentPage) |
|
|
| 2026-03-11 | 문서 최신화: 버그 수정 내역 반영, 코드 설계 섹션 제거 (구현 완료) |
|