[강수민] Sprint5

[hpk5802]

판다마켓

판다마켓

요구사항

기본

중고마켓

• 중고마켓 페이지 주소는 “/items” 입니다.
• 페이지 주소가 “/items” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
• 상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.
• 상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.
• '상품 등록하기' 버튼을 누르면 “/additem” 로 이동합니다. ( 빈 페이지 )
• 전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.

중고마켓 반응형

베스트 상품

• Desktop : 4개 보이기
• Tablet : 2개 보이기
• Mobile : 1개 보이기

전체 상품

• Desktop : 12개 보이기
• Tablet : 6개 보이기
• Mobile : 4개 보이기

심화

• 페이지 네이션 기능을 구현합니다.

주요 변경사항

스크린샷

멘토에게

• 스프린트 미션 4까지 페이지는 jsx로 마이그레이션 하지 않았습니다.
• 기존에 페이지를 ( / )에서 ( /items )로 redirect 시켰었는데, 스프린트 미션 4까지 내용이 뒤쪽 미션에 나오는 것 같아서 redirect 삭제했습니다.
• 검색 기능은 다음 미션에 인코딩 처리해서 추가 하겠습니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[baeggmin]

첫 리액트 미션인데 너무 잘 구현해주셨습니다!
useEffect 의 의존성만 조금 개선해주시면 더욱 좋은 코드가 될 것 같네요 👍

[baeggmin]

이 함수는 이름만 보면 totalPage 수를 계산하는 역할만 할 것 같지만, 실제로는 현재 페이지를 setState 하는 로직까지 들어있네요.
그리고 위에 언급드린 바와 같이 totalPage 는 state 로 관리하지 않아도 될 것 같아요.
결국 이 함수에서 유효한 로직은 if (currentPage > totalPageCount) setCurrentPage(totalPageCount); 이 한줄인데 이건 Paginations.jsx 컴포넌트에서 관리해도 괜찮을 로직인 것 같습니다.