Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

130-0feature/PaginationButton 컴포넌트 구현 #134

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

bluedog129
Copy link
Collaborator

@bluedog129 bluedog129 commented Oct 2, 2024

📝 Summary

페이지네이션 버튼 컴포넌트를 구현했습니다.

🖼️ Screenshots

image image

✅ PR Checklist

  • 하나의 목적을 가진 PR입니다.
  • 코딩 컨벤션과 스타일 가이드를 준수합니다. 📌Conventions
  • 불필요한 코드 중복이 없습니다.
  • 컴포넌트의 책임이 단일합니다.
  • 리액트 훅을 올바르게 사용했습니다.
  • 민감한 정보를 포함하지 않았습니다.
  • 불필요한 콘솔 로그나 주석을 포함하지 않았습니다.
  • 컴포넌트 key값에 고유한 값을 할당했습니다.

🔗 References

💬 Comments

@bluedog129 bluedog129 self-assigned this Oct 2, 2024
@bluedog129 bluedog129 linked an issue Oct 2, 2024 that may be closed by this pull request
interface PaginationButtonProps {
number: number;
currentPage: number;
onClick: (number: number) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

onClickPaginationButton 으로 바꾸어 주세요!
그리고 매개변수 네이밍이 number보단 page가 좋을 것 같습니다

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵!


export const PaginationButton = ({ number, currentPage, onClick }: PaginationButtonProps) => {
const isActive = number === currentPage;

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아래 함수 추가하시고, onClick 이벤트에 onClick={onClick(page)} 로 넣어주시면 될 거에요!

onClick = (page:number)=> () =>onClickPaginationButton(page)

const isActive = number === currentPage;

const onClick = (page: number) => () => onClickPaginationButton(page);

return (
<S.PaginationButton $isActive={isActive} onClick={() => onClick(number)}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기 onClick에 () => onClick(number) 대신 onClickPaginationButton(page) 넣어주시면 댑니다

src/components/PaginationButton/index.tsx Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🎯[Feature] PaginationButton 컴포넌트 구현
2 participants