Conversation
There was a problem hiding this comment.
제 코드리뷰 앞에 붙어있는 태그들의 의미는 아래와 같습니다.
- P0 : 꼭 반영해 주세요 (Request Changes) - 이슈가 발생하거나 취약점이 발견되는 케이스 등
- P1 : 반영을 적극적으로 고려해 주시면 좋을 것 같아요 (Comment)
- P2 : 이런 방법도 있을 것 같아요~ 등의 사소한 의견입니다 (Chore)
전체적으로 깔끔한 코드 구조 인것 같네요.
useProduct 커스텀 훅을 만들어 로딩상태와 fetch한 데이터를 관리하는 점 잘 하신 것 같습니다!
react에 대한 이해도가 좀 있으신 것 같아, useCallback, useMemo 등을 통한 성능 최적화에 대해서도 슬쩍 공부해보시면 좋을 것 같습니다.
남긴 리뷰 코멘트들이 다른 파일들에서도 보이는 경우가 있습니다. 코멘트를 반영하실 때 해당되는 파일뿐만 아니라 다른 파일에서도 비슷한 부분이 보인다면 같이 고쳐보시면 좋을 것 같습니다.
| let sortedProducts = [...allProducts]; | ||
| if (sort === "latest") { | ||
| sortedProducts.sort( | ||
| (a, b) => new Date(b.createdAt) - new Date(a.createdAt) | ||
| ); | ||
| } else if (sort === "favorite") { | ||
| sortedProducts.sort((a, b) => b.favoriteCount - a.favoriteCount); | ||
| } |
There was a problem hiding this comment.
[P2]
매 렌더링때마다 정렬이 수행될 것 같습니다. useMemo등을 통해 성능 최적화를 해보면 좋을 것 같습니다.
| const data = await response.json(); | ||
| setAllProducts(data.list); | ||
| } catch (error) { | ||
| console.error("상품 불러오기 실패:", error); |
There was a problem hiding this comment.
[P2]
에러인 경우 사용자가 인지하고 재시도를 할 수 있도록 toast 등을 통해 알려주는 것도 좋습니다!
| import "./Market.css"; | ||
|
|
||
| const Market = () => { | ||
| const [sort, setSort] = useState("latest"); |
There was a problem hiding this comment.
[P1]
정해져있는 상수 값들은 별도의 constant 파일로 관리하는 것이 코드 유지보수 측면에서 좋습니다.
| if (window.innerWidth > 1024) { | ||
| setPageSize(10); | ||
| } else if (window.innerWidth > 768) { | ||
| setPageSize(6); |
There was a problem hiding this comment.
[P1]
미디어 쿼리들을 위한 상수값들도 마찬가지입니다!
| {products.map((product) => ( | ||
| <ProductCard key={product.id} product={product} /> | ||
| ))} | ||
| </div> |
There was a problem hiding this comment.
[P0]
프로덕트가 한개도 없을 경우에 대한 예외처리가 되면 좋을 것 같습니다.
배열이 있을 경우에는 꼭 비어있는 배열에 대한 예외처리가 있으면 좋습니다!
| for (let i = startPage; i <= endPage; i++) { | ||
| pages.push(i); | ||
| } |
There was a problem hiding this comment.
[P2]
Array.from 을 활용해서 배열을 한번에 만들 수 있습니다.
const pages = Array.from(
{ length: endPage - startPage + 1 },
(_, i) => startPage + i
);
| <img | ||
| src={product.images[0]} | ||
| alt={product.name} | ||
| className="product-image" | ||
| /> |
There was a problem hiding this comment.
[P0]
images의 길이 0인경우에 대한 예외처리가 되면 좋을 것 같습니다.
요구사항
기본 요구사항
공통
중고마켓 페이지
심화 요구사항
공통
중고마켓 페이지
중고 마켓의 카드 컴포넌트 반응형 기준은 다음과 같습니다.
베스트 상품
Desktop : 4열
Tablet : 2열
Mobile : 1열
전체 상품
Desktop : 5열
Tablet : 3열
Mobile : 2열
반응형에 따른 페이지 네이션 기능을 구현합니다.
반응형으로 보여지는 물품들의 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.
주요 변경사항
배포 사이트 링크
https://6-sprint-mission-fe-re.vercel.app/
멘토에게