vexplor_dev/docs/ycshin-node/PGN[체크]-페이징-직접입력.md

[체크리스트] 페이징 - 페이지 번호 직접 입력 네비게이션

관련 문서: 계획서 | 맥락노트

---

공정 상태

• 전체 진행률: 100% (완료)
• 현재 단계: 완료

---

구현 체크리스트

1단계: 이전 설계 산출물 정리

• frontend/components/common/PageGroupNav.tsx 삭제
• TableListComponent.tsx에서 PageGroupNav import 제거 (있으면) — 이미 없음

2단계: 입력 필드 구현

• pageInputValue 로컬 상태 추가 (useState<string>)
• currentPage 변경 시 pageInputValue 동기화 (useEffect)
• commitPageInput 핸들러 구현 (parseInt + clamp + handlePageChange)
• paginationJSX 중앙의 <span> → <input> + / + <span> 교체
• inputMode="numeric" 적용
• onFocus에 전체 선택 (e.target.select())
• onChange에 setPageInputValue (표시만 변경)
• onKeyDown Enter에 commitPageInput + blur()
• onBlur에 commitPageInput
• disabled={loading} 적용
• 기존 좌측 페이지크기 입력과 일관된 스타일 적용

3단계: 버그 수정

• handlePageSizeChange에 onConfigChange 호출 추가 (pageSize + currentPage: 1 전달)
• fetchTableDataInternal에서 currentPage를 단일 소스로 변경 (stale tableConfig.pagination?.currentPage 문제 해결)
• useCallback 의존성에서 tableConfig.pagination?.currentPage 제거
• useMemo 의존성에 pageInputValue 추가

4단계: 검증

• 입력 필드에 숫자 입력 후 Enter → 해당 페이지로 이동
• 입력 필드에 숫자 입력 후 포커스 아웃 → 해당 페이지로 이동
• 0 입력 → 1로 보정
• totalPages 초과 입력 → totalPages로 보정
• 빈 값으로 blur → 현재 페이지 유지
• 비숫자(abc) 입력 후 Enter → 현재 페이지 유지
• 입력 필드 클릭 시 기존 숫자 전체 선택 확인
• < > 버튼 클릭 시 입력 필드 값도 갱신 확인
• << >> 버튼 클릭 시 입력 필드 값도 갱신 확인
• 로딩 중 입력 필드 비활성화 확인
• 좌측 페이지크기 입력과 스타일 일관성 확인
• 기존 << < > >> 버튼 동작 변화 없음 확인
• 페이지크기 변경 시 1페이지로 리셋 + 데이터 정상 로딩 확인

5단계: 정리

• 린트 에러 없음 확인 (기존 에러만 존재, 신규 없음)
• 문서(계획서/맥락노트/체크리스트) 최신화 완료

---

변경 이력

날짜	내용
2026-03-11	최초 설계: 10개 번호 버튼 그룹 (PageGroupNav)
2026-03-11	설계 변경: 입력 필드 방식으로 전면 재작성
2026-03-11	구현 완료: 입력 필드 + 유효성 검증
2026-03-11	버그 수정: 페이지크기 변경 시 빈 데이터 문제 (onConfigChange 누락 + stale currentPage)
2026-03-11	문서 최신화: 버그 수정 내역 반영, 코드 설계 섹션 제거 (구현 완료)