[Feature] Pagination 컴포넌트 구현 #159
Conversation
eugene028
requested review from
ghdtjgus76,
hamo-o and
SeieunYoo
as code owners
| export interface PaginationProps { | ||
| totalPages: number; | ||
| currentPage?: number; | ||
| onChange?: (page: number) => void; | ||
| style?: CSSProperties; | ||
| backgroundColor?: ColorPalette; | ||
| className?: string; | ||
| } |
There was a problem hiding this comment.
현재 currentPage가 외부에서 주입되는 상태인 거 같은데, currentPage와 별개로 defaultPage도 추가해서 관리하면 더 좋을 거 같습니다!
There was a problem hiding this comment.
저도 외부에서 제어되는 경우/아닌 경우 모두 지원되면 좋을 거 같아요!
There was a problem hiding this comment.
확인했습니다! currentPage라고 이름이 설정되어 있지만 기존에 currentPage가 수행하는 역할은 defaultPage 였던 것 같아요!
| export interface PaginationProps { | ||
| totalPages: number; | ||
| currentPage?: number; | ||
| onChange?: (page: number) => void; | ||
| style?: CSSProperties; | ||
| backgroundColor?: ColorPalette; | ||
| className?: string; | ||
| } |
There was a problem hiding this comment.
저도 외부에서 제어되는 경우/아닌 경우 모두 지원되면 좋을 거 같아요!
| function addDotBetweenLettersAndNumbers(str: string) { | ||
| return str.replace(/([a-zA-Z]+)(\d+)/g, "$1.$2"); | ||
| } | ||
| const customBackgroundColor = (color: ColorToken | undefined) => { | ||
| if (color) { | ||
| const colorToken = color.replace(/([a-zA-Z]+)(\d+)/g, "$1.$2"); | ||
| return token.var( | ||
| `colors.${addDotBetweenLettersAndNumbers(colorToken)}` as Token | ||
| ); | ||
| } | ||
| }; |
There was a problem hiding this comment.
ask;
여기서 addDotBetweenLettersAndNumbers 로 처리한 이유가 있나용?
Box 컴포넌트에서 color 받은 거 처럼 pandacss 의 styled jsx 에 넘겨주면 dot 처리하지 않아도 될 거 같아서요!!
<styled.button
aria-label="Next page group"
className={paginationButtonStyle}
disabled={end === totalPages}
color={pageButtonBackgroundColor}
onClick={handleClickNextGroup}
>There was a problem hiding this comment.
이 친구는 왠지모르게 적용이 Box처럼 잘 안되더라구용.. ㅠ.ㅠ 고래서 일단은 style객체로 배경 색을 받을 수 있도록 처리해두기 위해서 사용한 메서드입니다..!
There was a problem hiding this comment.
혹시 ColorToken 타입을 styled-system/token 에서 가져오면 해결되지 않나요?! wow-theme의 ColorToken 타입은 red50,red100,, 이렇게 정의되어 있어서 color 프로퍼티로 바로 넘겨도 인식이 되지 않는 거 같아서요..!
🦋 Changeset detectedLatest commit: 02b486a The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
🎉 변경 사항
Pagination 컴포넌트를 구현했어요~!
일반적인 리스트에서 사용할 수도 있고, Table 컴포넌트에서도 활용 가능해요.
🚩 관련 이슈
#131
🙏 여기는 꼭 봐주세요!
Table 컴포넌트와 함께 사용하는 방법은 Table storybook에 추가해두었어요 👍