91 lines
4.6 KiB
Markdown
91 lines
4.6 KiB
Markdown
# [체크리스트] 페이징 단락(그룹) 번호 네비게이션 - PageGroupNav 공통 컴포넌트
|
|
|
|
> 관련 문서: [계획서](./PGN[계획]-페이징-단락이동.md) | [맥락노트](./PGN[맥락]-페이징-단락이동.md)
|
|
|
|
---
|
|
|
|
## 공정 상태
|
|
|
|
- 전체 진행률: **100%** (완료)
|
|
- 현재 단계: 4단계 완료
|
|
|
|
---
|
|
|
|
## 구현 체크리스트
|
|
|
|
### 1단계: PageGroupNav 공통 컴포넌트 생성
|
|
|
|
- [x] `frontend/components/common/PageGroupNav.tsx` 파일 생성
|
|
- [x] `PageGroupNavProps` 인터페이스 정의 (currentPage, totalPages, onPageChange, disabled, groupSize)
|
|
- [x] 단락 계산 로직 구현 (currentGroupIndex, groupStartPage, lastGroupIndex 등)
|
|
- [x] 10개 고정 슬롯 배열 생성 (빈 슬롯은 null)
|
|
- [x] `<<` 첫 단락 버튼 (isFirstGroup일 때 비활성화)
|
|
- [x] `<` 이전 단락 버튼 (isFirstGroup일 때 비활성화)
|
|
- [x] 페이지 번호 버튼 렌더링 (현재 페이지 variant="default", 나머지 variant="outline")
|
|
- [x] 빈 슬롯 렌더링 (동일 크기 빈 div)
|
|
- [x] `>` 다음 단락 버튼 (isLastGroup일 때 비활성화)
|
|
- [x] `>>` 마지막 단락 버튼 (isLastGroup일 때 비활성화, 마지막 단락 첫 페이지로 이동)
|
|
- [x] 고정 너비 스타일 적용 (h-8 w-8 sm:h-9 sm:w-9)
|
|
- [x] totalPages가 0 또는 1일 때 엣지 케이스 처리
|
|
|
|
### 2단계: v2-table-list 통합
|
|
|
|
- [x] `TableListComponent.tsx`에 `PageGroupNav` import 추가
|
|
- [x] `paginationJSX`의 중앙 컨트롤 영역(5139~5182행)을 `<PageGroupNav>` 호출로 교체
|
|
- [x] props 연결: currentPage, totalPages, handlePageChange, loading
|
|
- [x] 좌측(페이지크기 입력) 영역 변경 없음 확인
|
|
- [x] 우측(내보내기/새로고침) 영역 변경 없음 확인
|
|
|
|
### 3단계: 검증
|
|
|
|
- [x] 품목정보 화면에서 페이지 번호 클릭 동작 확인
|
|
- [x] `< >` 단락 이동 동작 확인 (1~10 → 11~20 → ...)
|
|
- [x] `<< >>` 첫/끝 단락 이동 동작 확인
|
|
- [x] `>>` 클릭 시 마지막 단락의 첫 페이지 선택 확인 (마지막 페이지가 아님)
|
|
- [x] 첫 단락에서 `<< <` 비활성화 확인
|
|
- [x] 마지막 단락에서 `> >>` 비활성화 확인
|
|
- [x] 고정 슬롯: 단락 이동 시 버튼 위치 변동 없음 확인
|
|
- [x] 고정 너비: 1자리/2자리 숫자에서 버튼 크기 동일 확인
|
|
- [x] 마지막 단락이 10개 미만일 때 빈 슬롯으로 위치 고정 확인
|
|
- [x] totalPages가 1일 때 정상 동작 확인 (단일 페이지)
|
|
- [x] 로딩 중 모든 버튼 비활성화 확인
|
|
- [x] 페이지 크기 변경 시 첫 페이지로 리셋 확인
|
|
|
|
### 4단계: 정리
|
|
|
|
- [x] 린트 에러 없음 확인
|
|
- [x] 이 체크리스트 완료 표시 업데이트
|
|
|
|
### 5단계: 표시갯수(pageSize) 캐시 정책
|
|
|
|
- [x] 표시갯수 입력 시 onChange → 표시만 변경, 실제 적용은 onBlur/Enter
|
|
- [x] 입력 필드 값 string 타입으로 변경 (백스페이스로 비우기 가능)
|
|
- [x] 표시갯수 변경 시 1페이지로 리셋 + 데이터 정상 로드
|
|
- [x] onConfigChange로 DB/부모 전파 제거 (pageSize는 세션 전용)
|
|
- [x] localStorage → sessionStorage 전환 (탭 닫으면 자동 소멸)
|
|
- [x] 키를 탭 ID 스코프로 변경 (`pageSize_{tabId}_{tableName}`)
|
|
- [x] F5 새로고침 시 활성 탭 캐시 삭제 → 기본값 20 초기화
|
|
- [x] 탭 바 새로고침 버튼 시 캐시 삭제 → 기본값 20 초기화
|
|
- [x] 비활성 탭 캐시 유지 (탭 전환 시 복원)
|
|
|
|
### 6단계: 테이블 캐시 탭 격리
|
|
|
|
- [x] tableStateKey 탭 ID 스코프 (`tableState_{tabId}_{tableName}`) + sessionStorage
|
|
- [x] filterSettingKey 탭 ID 스코프 (`filterSettings_{tabId}_{base}`) + sessionStorage
|
|
- [x] groupSettingKey 탭 ID 스코프 (`groupSettings_{tabId}_{base}`) + sessionStorage
|
|
- [x] clearTabCache 확장 (tableState_/pageSize_/filterSettings_/groupSettings_ 일괄 삭제)
|
|
- [x] TabContent.tsx 모듈 레벨 플래그로 F5 감지 → 활성 탭 캐시만 삭제
|
|
- [x] 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 스코프) |
|