Skip to content

Conversation

@LeeTaegyung
Copy link
Collaborator

요구사항

기본

중고마켓

  • 중고마켓 페이지 주소는 “/items” 입니다.
  • 페이지 주소가 “/items” 일때 상단네비게이션바의 '중고마켓' 버튼의 색상은 “3692FF”입니다.
  • 상단 네비게이션 바는 이전 미션에서 구현한 랜딩 페이지와 동일한 스타일로 만들어 주세요.
  • 상품 데이터 정보는 https://panda-market-api.vercel.app/docs/#/ 에 명세된 GET 메소드 “/products” 를 사용해주세요.
  • '상품 등록하기' 버튼을 누르면 “/additem” 로 이동합니다. ( 빈 페이지 )
  • 전체 상품에서 드롭 다운으로 “최신 순” 또는 “좋아요 순”을 선택해서 정렬을 할 수 있습니다.

중고마켓 반응형

  • 베스트 상품
    • Desktop : 4개 보이기
    • Tablet : 2개 보이기
    • Mobile : 1개 보이기
  • 전체 상품
    • Desktop : 12개 보이기
    • Tablet : 6개 보이기
    • Mobile : 4개 보이기

심화

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

주요 변경사항

  • AllProductArea 컴포넌트와 BestProductArea 컴포넌트 폴더 구조 변경
  • 리스트에서 사용하는 페이지네이션 로직 분리
  • 정렬 드랍다운 컴포넌트 분리(아이템 페이지에서만 사용하기 때문에 공용 컴포넌트 폴더가 아닌 아이템페이지의 컴포넌트 폴더에 위치)
  • 반응형에 따라 변경 되는 베스트 상품 개수 ProductList 컴포넌트에서 처리되도록 처리
  • Pagination 컴포넌트에서 불필요한 최적화 삭제
  • SignupPage 및 LoginPage
    • 인풋값 개별로 상태관리 할 수 있게 수정
    • 인풋값 개별로 상태관리로 변경하면서 검증하는 handleFocusOut 함수 수정
    • 불필요한 최적화 삭제
    • AuthFOrmInput, Input, PasswordInput 컴포넌트 분리
    • 리턴문 읽기 쉽게 수정

멘토에게

  • 반복문이 큰 연산이라고 생각했었는데, 생각보다 작은 연산이었군요 ㅎㅎ; 최적화는 아직 어디에 적용을 해야 할지 감이 잘 안 잡히는 거 같습니다.
  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

Comment on lines +14 to +21
useEffect(() => {
updatePageSize();
window.addEventListener("resize", updatePageSize);

return () => {
window.removeEventListener("resize", updatePageSize);
};
}, [updatePageSize]);
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Q1.
아직 관심사 분리가 좀 잘 안되는거 같습니다.
피드백 주신대로 페이지네이션 로직을 커스텀훅으로 분리를 했는데, 분리를 하다보니 '그럼 resize 이벤트도 커스텀훅으로 분리를 해야하는건가?' 라는 고민이 들더라구요. usePagination 훅은 currentPagepageSize를 위해 만들었는데, resize 이벤트가 이 커스텀훅에 있는 것이 적합하지 않은것 같아서요. 강사님 의견이 궁금합니다.

@LeeTaegyung LeeTaegyung changed the base branch from main to React-이태경 June 24, 2025 07:39
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.

1 participant