✨ Feat: 공통 컴포넌트 Pagination 설계 #33
Conversation
|
@BaeZzi813 is attempting to deploy a commit to the projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
sohyun0
left a comment
sohyun0
left a comment
There was a problem hiding this comment.
고생하셨습니다! 페이지네이션은 저도 기능 구현하면서 조금더 리뷰를 이어가야할것 같아요ㅠ
| const totlaPages = Math.ceil(totalItems / ITEMS_PER_PAGE); | ||
| if (totlaPages === 0) return null; |
There was a problem hiding this comment.
Props 로 받아오는 totalItems 가 없을때 페이지네이션 보여주지 않고 함수 종료시키려고 설정했는데 값이 0이 아니라 값이 없는 경우를 생각 못했네요!
const totalPages = totalItems ? Math.ceil(totalItems / itemsPerPage) : 0;
if (totalPages < 1) return null;
로 해서 값이 없을 경우 함수 종료하도록 수정하겠습니다!
Pagination 경우에는 받아오는 저 props 들이 무조건 다 필수여야 화면에 페이지 버튼들이 그려지는 것이기 때문에 type정의에 optional 로 설정하면 안되고 모두 다 필수 조건으로 넣은다음 없는 경우 함수 종료 시키는 것이 맞다고 찾아봐서 위처럼 수정해 놓겠습니다.
추가적으로, AI 자문을 구하면서 이전 / 이후 버튼을 누르고 다른 페이지를 눌렀을 때 PageGroup 이 바뀌게 되는데 이 부분을 의존성 배열로 관리해야 한다고 해서 추가하였습니다. React Hook 이라 구조가 if 문 아래에 있으면 문제가 생겨 함수 종료할 경우 위에 선언해서 사용하는 것이 맞다고 해서 추가하였습니다.
| <Icon | ||
| className={`h-5 w-5 ${isPrevDisabled ? 'bg-gray-400' : 'cursor-pointer'}`} | ||
| onClick={() => { | ||
| if (!isPrevDisabled) { | ||
| setPageGroup(prev => Math.max(prev - 1, 0)); | ||
| } | ||
| }} | ||
| iconName='chevronLeft' | ||
| ariaLabel='이전' | ||
| /> |
There was a problem hiding this comment.
아이콘에 바로 이벤트 핸들러를 작성하였는데 접근성및 키보드 네비게이션이 보장되려면 버튼 > 아이콘 형태가 조금더 적합할것 같습니다!
There was a problem hiding this comment.
button 태그 안에 Icon 형식으로 수정하겠습니다!
| const [currentPage, setCurrentPage] = useState(totalItems > 0 ? 1 : 0); | ||
| // [currentPage, setCurrentPage] 는 부모 페이지에서 받아올 데이터 내용 | ||
| // - 그래야 페이지 바뀔 때 부모 페이지에 state 영향 줘서 리렌더링해서 화면 다시 보여줌 | ||
| // - 이후 페이지 작업 시 위의 state 선언은 부모페이지에서 하고 값들 props 로 받기 |
There was a problem hiding this comment.
그렇다면 prop자체를 {totalItems, currentPage, onPageChange} 로 작성하는건 어떠실까요!? 부모페이지에서 받아올 데이터 내용이면 Prop 에 작성이 되어야 할텐데 props 엔 전체 아이템만 받고 있는것 같아서요!
There was a problem hiding this comment.
네! 안그래도 위의 내용은 페이지 작업때 다루어질 것 같아 최대한 설명을 드리고 싶어서 적어놨습니다 :)
부모 컴포넌트에서 onPageChange 로 currentPage 의 state 변경하는 함수 만들어서 props 로 내려주는 형식으로 다같이 가져간다 생각을 하고 말씀하신대로 수정하겠습니다!
추가적으로, 피그마 시안을 다시 봤더니 인화님 페이지는 데이터 5개 / 소현님 페이지는 데이터 6개로 다르더라고요! 그래서 상수 빼고 itemsPerPage 로 페이지 하나하나마다 받아오는 데이터개수도 props 로 내릴 수 있게 변경하겠습니다!
2 participants
공통 컴포넌트 Pagination 설계
📝 작업 개요 (필수)
받아오는 데이터 양에 따라 나누어지는 페이지이동 기능인 Pagination 구현.
피그마 시안에서 전체 페이지들 보니, 페이지 버튼은 7개까지 보여지고, 한 페이지에서 보여지는 데이터 수가 5개로 다 정해져있어서
해당 두 내용은 함수 밖 상수로 설정하여 작업했습니다.
혹시나 페이지버튼 개수나 받아오는 데이터양을 피그마 시안과 다르게 바꾸고싶다 하시면,
부모 컴포넌트에서 props 로 내려주고 Pagination 에서 받아서 적용시킬 수 있도록 추후 수정 해드릴 수 있습니다.
첫 페이지에서는 '이전 버튼' , 마지막 페이지에서는 '이후 버튼' 클릭 못하게 disabled 로 막아두었습니다.
추가적으로, Footer 에서 hover 됐을 때 어두운 컬러로 수정하였습니다.
✨ 작업 내용 (필수)
📸 스크린샷
🧐 해결해야 하는 문제
🤔 리뷰어 확인 필요 사항
🔗 관련 이슈
🛠️ 후속 작업
이후 페이지 작업이 진행되고 데이터를 받아오기 시작하면
부모 컴포넌트(Pagination 을 사용하는 페이지) 에서 API 통해 받아오는 데이터를 state 로 관리하게 될테니 해당 state 값들을
Pagination(자식 컴포넌트) props 로 내려주고 사용해야해서 추후 코드 수정이 있을 예정입니다.
✅ 체크리스트 (필수)