[박세정] sprint5

[celina823]

배포링크

요구사항

기본

중고마켓 페이지

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

심화

[ O ] 커스텀 hook을 만들어 필요한 곳에 활용해 보세요.
[ O ] 중고 마켓의 카드 컴포넌트 반응형 기준은 다음과 같습니다.
베스트 상품 {Desktop : 4열, Tablet : 2열, Mobile : 1열}
전체 상품 {Desktop : 5열, Tablet : 3열, Mobile : 2열}
[ O ]반응형에 따른 페이지 네이션 기능을 구현합니다.
[ O ] 반응형으로 보여지는 물품들의 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.

주요 변경사항

• 리액트 사용

스크린샷

Desktop 사이즈

Tablet 사이즈

Mobile 사이즈

멘토에게

• 미디어 쿼리가 의도한대로 잘 되지 않아 어렵습니다. 특히 ① 판매중인 상품이 써있는 제목줄(titleLineSellProduct)부분의 배치와 ②모바일 사이즈에서의 드롭다운, ③판매중인 상품의 카드와 이미지 요소(sellProductList와 그 내부 요소들)의 크기를 맞추는 게 어려워 제대로 구현하지 못했습니다.
  ▷ ①판매중인 상품이 써있는 제목줄(titleLineSellProduct)부분의 배치: 모바일 사이즈(max-width: 743px)가 되면 두 줄이 되도록 Product.css파일 반응형 디자인 설정 부분에서 의도하였으나 화면 너비가 600px은 되어야 의도했던 배열이 나옵니다.
  ▷ ②모바일 사이즈에서의 드롭다운: 모바일 사이즈에서 드롭다운 내 이미지를 변경하는 방법을 잘 모르겠고, 모바일 사이즈에서 뿐만 아니라 데스크탑과 태블릿 사이즈일 때 오른쪽에 있는 아래방향 화살표 이미지를 변경하려고 시도하였으나 실패했습니다.
  ▷ ③판매중인 상품의 카드와 이미지 요소(sellProductList와 그 내부 요소들)의 크기: 이미지의 픽셀을 지정하면 안될 것 같은데, 100%로 지정하면 화면 사이즈에는 맞는데 이미지가 늘려져서 나와서 어쩔 수 없이 피그마 내의 픽셀을 참고하여 지정했습니다.
• 깃 저장소를 불러오고나면 리액트 실행이 안돼서 commit 메세지를 추가할 수 없었습니다. 올바르게 하려면 어떤 절차로 진행해야하는지 알고 싶습니다!
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.