Skip to content

Conversation

@99minji
Copy link
Collaborator

@99minji 99minji commented Nov 13, 2024

[Linkbrary #18]

작업 내용

  • 페이지네이션 ui 및 기능 구현했습니다.
  • 반응형에 따른 maxPagesToShow 갯수 설정 했습니다.
  • 아래 영상은 테스트를 위해서 보여지는 갯수 조절한 상태입니다. 작업은 시안과 동일한 갯수로 설정했습니다.
Screenshot.2024-11-13.at.10.52.31.webm

추가 내용

  • 반응형에 따른 totalCount 제어는 추후 다시 적용하겠습니다.

@99minji 99minji linked an issue Nov 13, 2024 that may be closed by this pull request
1 task
Copy link
Collaborator

@hongggyelim hongggyelim left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!

Copy link
Collaborator

@junjeeong junjeeong left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!

useEffect(() => {
const handleResize = () => {
const width = window.innerWidth;
setMaxPagesToShow(width > 1024 ? 5 : 3);
Copy link
Collaborator

Choose a reason for hiding this comment

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

뭔가 햇더니 "1 2 3 ..... end" "1 2 3 4 5 .... end" 이냐의 분기점이군요👍

Copy link
Collaborator

@venise5224 venise5224 left a comment

Choose a reason for hiding this comment

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

수고하셨습니당


switch (req.method) {
case "GET":
const { page = "1", pageSize = "10" } = req.query;
Copy link
Collaborator

Choose a reason for hiding this comment

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

const page = parseInt((query.page as string) || "1", 10);
const pageSize = parseInt((query.pageSize as string) || "6", 10);

page, pageSize가 number 타입으로 넘어오는데 값이 없을 때는 string 타입으로 들어가게 되는데 문제가 없을까요 ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

쿼리 파라미터는 문자열로 받아오기 때문에 number 로 지정하면 오류가 생기더라구요!
undefined 가 발생할 수도 있어어 string 으로 해주고 parseInt 를 사용해서 number 타입으로 변환하도록 했습니다~!

{/* 페이지 번호와 생략 표시 */}
{getPageNumbers().map((pageNum, index) =>
typeof pageNum === "number" ? (
<li key={index} className={LiStyle}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

key에 index말고 다른게 딱히 생각나지는 않네요 😥

@99minji 99minji merged commit b804a55 into develop Nov 14, 2024
1 check passed
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.

Pagination UI 구현

5 participants