Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| setIsDropdownVisible(!isDropdownVisible); | ||
| }; | ||
|
|
||
| const onPageChange = (pageNumber) => { |
There was a problem hiding this comment.
컴포넌트 내부에서 정의해서 사용하는 이벤트 핸들러에는 보통 handleOOOO을 많이 사용해요.
그래서 handlePageChange 이름을 권장해요.
| console.log(products); | ||
| setTotalPageNum(Math.ceil(products.totalCount / pageSize)); | ||
| setItemList(products.list); | ||
| }; |
There was a problem hiding this comment.
data fetching을 위해서 useState, useEffect 사용을 반복하게 될텐데 data fetching을 위한 커스텀 훅을 만들고 재사용하는 작업 해보면 좋을 것 같아요.
|
|
||
| // 화면 크기 변경할 때마다 pageSize를 다시 계산해 넣음 | ||
| window.addEventListener("resize", handleResize); | ||
| loadData({ orderBy, page, pageSize }); |
There was a problem hiding this comment.
useEffect안에 resize 이벤트 설정도 하고, loadData 도 하는데,
서로 다른 목적의 로직은 useEffect를 분리해서 두 개를 만들어주면 하나 하나의 로직에 집중할 수 있고, 각 로직에 필요한 dependency만 설정할 수 있어 좋아요.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
중고마켓 페이지 주소는 “/items” 입니다.
페이지 주소가 “/items” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.
상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.
'상품 등록하기' 버튼을 누르면 “/additem” 로 이동합니다. ( 빈 페이지 )
전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.
중고마켓 반응형
베스트 상품
Desktop : 4개 보이기
Tablet : 2개 보이기
Mobile : 1개 보이기
[x]전체 상품
Desktop : 12개 보이기
Tablet : 6개 보이기
Mobile : 4개 보이기
심화
주요 변경사항
요구 사항을 최대한 반영해보고 아직 어설픈게 많아 우선 다음 스프린트 미션까지 진행중이면서 pr 올리게 되었습니다.