[김상우A] Sprint 4

[codribble]

기본 요구사항

공통

• 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값을 적절하게 설정합니다.

---

커밋 컨벤션이 익숙하지가 않아서... 커밋 메세지가 중구난방이라 죄송합니다ㅠ

[iamjaeholee]

안녕하세요, 상우님! 스프린트 미션4 수고 많으셨어요 🥇

코드 전반적으로 잘 구성되어 있었습니다! 특히 아래 부분들이 인상 깊었어요.

• SearchForm, Sorting, Pagination, ProductList, ProductWrap 등 역할에 맞게 컴포넌트가 잘 분리되어 있었어요.
• src/api/products.js로 API 호출 로직을 별도 파일로 분리하신 점도 좋았습니다.
• usePageSize 커스텀 훅을 만들어서 반응형 페이지 사이즈 로직을 재사용 가능하게 분리하신 점이 특히 좋았어요!
• 상품이 없을 때 "등록된 상품이 없습니다." 빈 상태 처리도 세심하게 잘 되어 있었습니다.

개선이 필요한 부분들은 아래 파일별 코멘트에 남겨두었으니 참고해 주세요 😊

[iamjaeholee]

베스트 상품은 항상 favorite 정렬로 고정되어 있어서 검색어나 정렬 기준이 바뀌어도 결과가 변하지 않아요. 그런데 현재는 keyword, sorting이 변경될 때마다 베스트 상품 API도 함께 호출되고 있습니다. 베스트 상품 fetch를 별도 useEffect로 분리하면 불필요한 API 호출을 줄일 수 있어요!

// 베스트 상품 전용 useEffect (bestLimit 변경 시에만 재호출)
useEffect(() => {
  const fetchBest = async () => {
    const best = await getProductList(1, bestLimit, "favorite");
    setBestProducts(best?.list ?? []);
  };
  fetchBest();
}, [bestLimit]);

// 전체 상품 전용 useEffect
useEffect(() => {
  const fetchProducts = async () => {
    const data = await getProductList(page, totalLimit, sorting, keyword);
    setProducts(data?.list ?? []);
    setTotalCount(data?.totalCount ?? 0);
  };
  fetchProducts();
}, [page, sorting, keyword, totalLimit]);

그리고 .vite/deps/ 폴더는 Vite가 빌드 시 자동으로 생성하는 캐시 파일들이라 커밋할 필요가 없어요. .gitignore에 .vite/를 추가해서 앞으로 커밋에 포함되지 않도록 해주세요!