[김지연] sprint5

[dani784601]

기본 요구사항

공통

• Github에 스프린트 미션 PR을 만들어 주세요.
• React를 사용해 진행합니다.

중고마켓 페이지

• PC, Tablet, Mobile 디자인에 해당하는 중고마켓 페이지를 만들어 주세요.
• 중고마켓 페이지 url path는 별도로 설정하지 않고, ‘/’에 보이도록 합니다.
• 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products” 를 사용해주세요.
• 상단 네비게이션 바, 푸터는 랜딩 페이지와 동일한 스타일과 규칙으로 만들어주세요.
• 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products” 를 활용해주세요.
  • 상품 목록 페이지네이션 기능을 구현합니다.
  • 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 구현하세요.
  • 상품 목록 검색 기능을 구현합니다.
  • 베스트 상품 데이터는 https://panda-market-api.vercel.app/docs/에 명세된 GET 메소드 “/products”의 정렬 기준 favorite을 사용해주세요.

심화 요구사항

공통

• 커스텀 hook을 만들어 필요한 곳에 활용해 보세요.

중고마켓 페이지

• 중고 마켓의 카드 컴포넌트 반응형 기준은 다음과 같습니다.
  • 베스트 상품
    • Desktop : 4열
    • Tablet : 2열
    • Mobile : 1열
  • 전체 상품
    • Desktop : 5열
    • Tablet : 3열
    • Mobile : 2열
• 반응형에 따른 페이지 네이션 기능을 구현합니다.
  • 반응형으로 보여지는 물품들의 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.

[kimjong95]

전체적으로 폴더구조는 깔끔해보입니다.

다만 assets 내부에 지정해두진 font나 로고 파일들은 정적컨텐츠이기때문에 public하위에 static파일들을 모아주시는게 유효할 수 있습니다.

UI를 구성하실때 radix를 사용해서 구현해주셨는데, 그러한 컴포넌트를 직접 작성해보는것도 추천드립니다. HTML요소를 얼마나 잘 다루는지도 컴포넌트를 최적화하는데 도움이 될 수 있습니다!

[kimjong95]

pnpm으로 패키지매니저를 구성하셨군요!

pnpm은 npm에비해서 팬텀디펜던시를 해결해주거나, 의존성을 link방식으로 제공하기에 용량이나 install 속도에 이점이 있습니다!
인지하시고 있다면 좋고 아니라면 어떻게 이런 내용들이 개선될 수 있는지 확인해보시면 좋을것 같아요!

[kimjong95]

react-router를통해 라우터를 구성해주신것 좋습니다!
react-router는 라우터도 구성해주만 react-router는 라우터에 구성된 컴포넌트들을 알아서 스플리팅 해주며 SPA에서의 성능최적화도 제공해주고있는데요, 이와 별개로 같은 페이지 내부에서도 첫 화면에 필요하지 않은 컴포넌트(팝오버, Confirm등의 UI들)들은 첫화면을 그릴때 필요없기때문에 사용하는 순간 load할 수 있어야합니다. react-router가 지원하는 방식처럼 모듈자체를 lazy load 할 수 있어야 한다는 점 기억해주시면 좋을것 같습니다.