Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React 김재욱 #138

Merged

Conversation

WooGie911
Copy link
Collaborator

요구사항

기본

  • 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을 만들어 필요한 곳에 활용해 보세요.
  • 반응형에 따른 페이지 네이션 기능을 구현합니다.
  • 반응형으로 보여지는 물품들의 개수를 다르게 설정할때 서버에 보내는 pageSize값을 적절하게 설정합니다.

주요 변경사항

  • 중고마켓 페이지 구현
  • products api로 데이터 받아와서 보여주기
  • 정렬 기능 구현
  • 검색 기능 구현
  • 페이지네이션 기능 구현
  • 반응형 및 css 구현 실패.

스크린샷

image

멘토에게

  • 프로젝트 세팅 및 기능 구현에 급급해 css가 박살이 났습니다...
  • 다음 미션 진행 전에 빠르게 마무리 하고 진행하겠습니다.
  • 반응형을 못했습니다. 정렬, 검색, 페이지네이션 다 되는데 페이지 사이즈에 따라 물건 개수 바뀌는걸 못했습니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@WooGie911 WooGie911 requested a review from coldplay126 March 9, 2025 16:17
Copy link
Collaborator

@coldplay126 coldplay126 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전반적으로 컴포넌트 단위로 잘 쪼개주신 것 같습니다!
page 폴더 하위에 컴포넌트 단위로 css와 jsx 파일 구분해 주신 점도 아주 좋습니다.

과제 진행하느라 고생 많으셨습니다!

Comment on lines +12 to +15
<div onClick={() => (window.location.href = "/privacy")}>
Privacy Policy
</div>
<div onClick={() => (window.location.href = "/faq")}>FAQ</div>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

리액트를 사용해 보고 계시니 js 기본 기능이 아닌 link 를 사용해보시는건 어떨까요?
link

Comment on lines +9 to +16
useEffect(() => {
const fetchData = async () => {
const newBestProducts = await getProductsList(1, 4, "favorite", "");
setBestProductsState(newBestProducts);
};

fetchData();
}, []);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getProductsList 변수를 하드 코딩이 아닌 다른 방식으로 처리해 보시는건 어떨까요?

@@ -0,0 +1,32 @@
// eslint-disable-next-line react/prop-types
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eslint 여기서 비활성화 하신 이유가 있을까요? react/prop-types가 발생하는게 부담스러운 경우 eslint.config.js에서 비활성화 해 주시는게 더 좋습니다!

Comment on lines +10 to +11
src={product.images[0]}
alt={product.name}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이미지가 없는 경우 product.images[0]는 어떻게 될까요? 방어코드가 추가되면 더욱 좋을 것 같습니다!

Comment on lines +8 to +12
const keyPressHandler = (e) => {
if (e.key === "Enter") {
setSearchByState(searchByInputState);
}
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

enter를 눌렀을 때만 검색되도록 작업하신 점 훌륭합니다! 매 입력시 API를 호출한다면 서버에도 부담이 많이 되겠죠.
다만 현 코드에서 유저가 enter를 입력해야 검색이 된다는 것을 알 수 있을까요? 유저에게 인지시킬 방법이 있는지 생각해 보면 좋을 것 같습니다!

@coldplay126 coldplay126 merged commit dc9fb6c into codeit-sprint-fullstack:react-김재욱 Mar 12, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants