[이현서] 스프린트5

[dlgustj321]

요구사항

기본

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"의 정렬 기준 favorite을 사용해주세요.

심화 요구사항

공통

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

• 중고 마켓의 카드 컴포넌트 반응형 기준은 다음과 같습니다.
  베스트 상품
  Desktop : 4열
  Tablet : 2열
  Mobile : 1열
  전체 상품
  Desktop : 5열
  Tablet : 3열
  Mobile : 2열

• 반응형에 따른 페이지 네이션 기능을 구현합니다.

• 반응형으로 보여지는 물품들의 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.

멘토에게

• 멘토링 시간에 말씀드린 것처럼 60% 정도는 구현했습니다. 그런데 api를 가져올려고 여러번 시도는 했는데 계속 안되는 것 같습니다... ㅜㅜ
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[jjjwodls]

현서님 스프린트 고생 많으셨습니다!

완성을 다 하지 못하더라도 제출해주신건 잘 하셨어요

코드를 살펴보니 데이터를 못불러 오는 원인은

useFetchProducts

custom hook 으로 만든 부분이 잘못되어 있는걸로 보여집니다.

우선은 custom hook 을 무조껀 사용하기 보단 데이터를 먼저 가져와서 상태관리를 해보는것들 추천드립니다.

예를들어 BestProductPage 컴포넌트에서 다음과 같이 데이터를 가져와서 핸들링 할 수 있을거 같습니다.

 const [bestItems, setBestItems] = useState([]);

  useEffect(() => {
    async function fetchBestItemData(){
      const bestProducts = await getProduct();
      setBestItems(bestProducts.list);
    }
    fetchBestItemData();
  },[])


...

return (
    <main>
      <h2>베스트 상품</h2>
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
          gap: '10px',
        }}
      >

        {bestItems.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </main>
  );



...

async function getProduct(page =1, pageSize=10,sortBy ='favorite', search){

  try {
    const response = await axios.get('https://panda-market-api.vercel.app/products', {
      params: {
        sort: sortBy,
        page,
        pageSize,
        search,
      },
    });
    console.log("response",response.data)
    return response.data;
  } catch (err) {
  } finally {
  }
}

위와 같이 작업해보시면 데이터를 가져와서 정상적으로 뿌려지는걸 볼 수 있습니다.

하나하나 컴포넌트가 정상적으로 출력되는걸 우선적으로 목표로 삼고 진행해 보신 후 추후에 custom-hook 을 적용해보는걸 추천드립니다.

위 코드는 제가 샘플로 만든 코드라 매끄럽지 않을 수 있으니 참고만 해주시면 좋겠습니다.

모든 상품 조회하는 부분도 마찬가지로 작업 해보시는걸 추천드려요!

[jjjwodls]

컴포넌트를 배치해서 작업해주세요!

ex)

<div>
  <Header/>
  <BestProductsPage />
  <AllProductsPage />
  <Footer/>
</div>

[jjjwodls]

제가 코멘트 남겨드린 부분 참고하여 수정해보세요!

[jjjwodls]

검색어를 입력한 후 검색버튼을 클릭했을 때 해당 값의 변경을 감지하고 데이터를 불러오는 로직이 필요해 보입니다!

[jjjwodls]

상태관리가 정상적으로 된다면 해당 로직은 없어도 잘 동작할거에요!

[jjjwodls]

페이지 네이션 버튼은 따로 분리하여 컴포넌트로 처리하시면

가독성도 올라가고 유지보수 측면에서도 더 좋습니다!

[jjjwodls]

코멘트 남겨드린 부분이 해당 파일이니 참고 부탁드립니다