3.1 KiB

Raw Blame History

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

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

공정 상태

전체 진행률: 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	문서 최신화: 버그 수정 내역 반영, 코드 설계 섹션 제거 (구현 완료)