[이상달] Sprint5

[asksa1256]

요구사항

기본

• 중고마켓 페이지 주소는 “/items” 입니다.

• 페이지 주소가 “/items” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.

• 상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.

• 상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.

• '상품 등록하기' 버튼을 누르면 “/additem” 로 이동합니다. ( 빈 페이지 )

• 전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.

• 중고마켓 반응형

1. 베스트 상품

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

2. 전체 상품

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

심화

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

주요 변경사항

• 전체 상품 섹션의 '상품 등록하기'와 '검색' 순서 변경:
  보통 검색창 오른쪽에 검색 버튼이 있는데, 시안에서는 '상품 등록하기' 버튼이 있어서 사용자가 헷갈릴 우려가 있다고 판단했습니다.
  또한 상품 '검색'과 상품 '정렬'이 상품 등록보다는 서로 연관되어 있으므로, 둘 사이에 있던 상품 등록 버튼을 맨 첫번째로 옮겼습니다.
• 상품 썸네일 링크 깨졌을 경우 대체 이미지로 변경.

배포 사이트

https://panda-market-react-sd.netlify.app/

스크린샷

중고마켓 메인

• 정렬 최신순, 페이지네이션 적용
  

중고마켓 정렬 좋아요순

중고마켓 페이지네이션

• 중간 페이지
  

• 마지막 페이지
  

중고마켓 반응형

• 태블릿
  

• 모바일
  

• 모바일 드롭다운
  

멘토에게

• 검색 기능은 요구 사항에 없어서 일단 요구 사항까지만 개발하여 PR 올리고, 코드 리뷰 반영하면서 추가 구현하고자 합니다.
• 컴포넌트들이 많아지면서 module.css를 다루기 복잡해졌는데, Tailwind CSS로 바꿔도 괜찮을까요?
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!
첫 리액트 미션인데 이해력도 높으시고, 전체적으로 깔끔하게 잘 작성하셨네요 👍

주요 리뷰 포인트

• 리턴문 가독성 높이기
• 응집도 관련 피드백
• 디렉토리 구조 관련 피드백

[addiescode-sj]

질문에 대한 답변

멘토에게

• 검색 기능은 요구 사항에 없어서 일단 요구 사항까지만 개발하여 PR 올리고, 코드 리뷰 반영하면서 추가 구현하고자 합니다.
• 컴포넌트들이 많아지면서 module.css를 다루기 복잡해졌는데, Tailwind CSS로 바꿔도 괜찮을까요?
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

네, 패키지 설치는 필요에 따라 자유롭게 설치하고 사용하셔도됩니다 :)