4.6 KiB

Raw Blame History

[체크리스트] 페이징 단락(그룹) 번호 네비게이션 - PageGroupNav 공통 컴포넌트

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

공정 상태

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

구현 체크리스트

1단계: PageGroupNav 공통 컴포넌트 생성

frontend/components/common/PageGroupNav.tsx 파일 생성
PageGroupNavProps 인터페이스 정의 (currentPage, totalPages, onPageChange, disabled, groupSize)
단락 계산 로직 구현 (currentGroupIndex, groupStartPage, lastGroupIndex 등)
10개 고정 슬롯 배열 생성 (빈 슬롯은 null)
<< 첫 단락 버튼 (isFirstGroup일 때 비활성화)
< 이전 단락 버튼 (isFirstGroup일 때 비활성화)
페이지 번호 버튼 렌더링 (현재 페이지 variant="default", 나머지 variant="outline")
빈 슬롯 렌더링 (동일 크기 빈 div)
> 다음 단락 버튼 (isLastGroup일 때 비활성화)
>> 마지막 단락 버튼 (isLastGroup일 때 비활성화, 마지막 단락 첫 페이지로 이동)
고정 너비 스타일 적용 (h-8 w-8 sm:h-9 sm:w-9)
totalPages가 0 또는 1일 때 엣지 케이스 처리

2단계: v2-table-list 통합

TableListComponent.tsx에 PageGroupNav import 추가
paginationJSX의 중앙 컨트롤 영역(5139~5182행)을 <PageGroupNav> 호출로 교체
props 연결: currentPage, totalPages, handlePageChange, loading
좌측(페이지크기 입력) 영역 변경 없음 확인
우측(내보내기/새로고침) 영역 변경 없음 확인

3단계: 검증

품목정보 화면에서 페이지 번호 클릭 동작 확인
< > 단락 이동 동작 확인 (1~10 → 11~20 → ...)
<< >> 첫/끝 단락 이동 동작 확인
>> 클릭 시 마지막 단락의 첫 페이지 선택 확인 (마지막 페이지가 아님)
첫 단락에서 << < 비활성화 확인
마지막 단락에서 > >> 비활성화 확인
고정 슬롯: 단락 이동 시 버튼 위치 변동 없음 확인
고정 너비: 1자리/2자리 숫자에서 버튼 크기 동일 확인
마지막 단락이 10개 미만일 때 빈 슬롯으로 위치 고정 확인
totalPages가 1일 때 정상 동작 확인 (단일 페이지)
로딩 중 모든 버튼 비활성화 확인
페이지 크기 변경 시 첫 페이지로 리셋 확인

4단계: 정리

린트 에러 없음 확인
이 체크리스트 완료 표시 업데이트

5단계: 표시갯수(pageSize) 캐시 정책

표시갯수 입력 시 onChange → 표시만 변경, 실제 적용은 onBlur/Enter
입력 필드 값 string 타입으로 변경 (백스페이스로 비우기 가능)
표시갯수 변경 시 1페이지로 리셋 + 데이터 정상 로드
onConfigChange로 DB/부모 전파 제거 (pageSize는 세션 전용)
localStorage → sessionStorage 전환 (탭 닫으면 자동 소멸)
키를 탭 ID 스코프로 변경 (pageSize_{tabId}_{tableName})
F5 새로고침 시 활성 탭 캐시 삭제 → 기본값 20 초기화
탭 바 새로고침 버튼 시 캐시 삭제 → 기본값 20 초기화
비활성 탭 캐시 유지 (탭 전환 시 복원)

6단계: 테이블 캐시 탭 격리

tableStateKey 탭 ID 스코프 (tableState_{tabId}_{tableName}) + sessionStorage
filterSettingKey 탭 ID 스코프 (filterSettings_{tabId}_{base}) + sessionStorage
groupSettingKey 탭 ID 스코프 (groupSettings_{tabId}_{base}) + sessionStorage
clearTabCache 확장 (tableState_/pageSize_/filterSettings_/groupSettings_ 일괄 삭제)
TabContent.tsx 모듈 레벨 플래그로 F5 감지 → 활성 탭 캐시만 삭제
tabStore.refreshTab에 clearTabCache 추가

변경 이력

날짜	내용
2026-03-11	계획서, 맥락노트, 체크리스트 작성 완료
2026-03-11	1단계(PageGroupNav 생성) + 2단계(v2-table-list 통합) + 4단계(린트) 완료. 3단계(수동 검증)은 브라우저에서 확인 필요
2026-03-11	추가 개선: 선택 페이지 강조(ring + font-bold), 빈 슬롯 cursor-default 적용. 3단계 검증 완료. 전체 완료
2026-03-11	5단계: pageSize 입력 UX 개선 + 캐시 정책 (sessionStorage + 탭 스코프 + F5/탭새로고침 초기화)
2026-03-11	6단계: 테이블 전체 캐시를 탭별 격리 (localStorage → sessionStorage + 탭 ID 스코프)