[이상달] Sprint7

[asksa1256]

요구사항

기본

상품 상세

• 상품 상세 페이지 주소는 "/items/{productId}" 입니다.
• response 로 받은 아래의 데이터로 화면을 구현합니다.
  • favoriteCount : 하트 개수
  • images : 상품 이미지
  • tags : 상품태그
  • name : 상품 이름
  • description : 상품 설명
• 목록으로 돌아가기 버튼을 클릭하면 중고마켓 페이지 주소인 "/items" 으로 이동합니다.

상품 문의 댓글

• 문의하기에 내용을 입력하면 등록 버튼의 색상은 "3692FF"로 변합니다.
• response 로 받은 아래의 데이터로 화면을 구현합니다
  • image : 작성자 이미지
  • nickname : 작성자 닉네임
  • content : 작성자가 남긴 문구
  • description : 상품 설명
  • updatedAt : 문의글 마지막 업데이트 시간

심화

• 모든 버튼에 자유롭게 Hover효과를 적용하세요.

주요 변경사항

• 상품 댓글 목록 페이지네이션은 api가 커서 기반이라서 기존의 Pagination 컴포넌트를 CursorPagination, TotalCountPagination으로 나누고, CursorPagination을 사용했습니다.
• useForm의 폼 유효성 검사 방식을 변경했습니다. (관련해서 코멘트 형식으로 질문 드리겠습니다.)
• 지난 미션에서 질문드렸던 '페이지 새로고침 시 검색어 초기화' 기능은 강사님께서 제안해주신 방식으로 해보다가, 새로고침 되어도 검색어가 남아있는 게 사용자한테는 편리할 것 같아서 그냥 제거했습니다..😅
• 기존의 드롭다운은 드롭다운 버튼과 메뉴가 하나로 합쳐진 형태였는데, 댓글 수정 드롭다운을 구현하면서 버튼+메뉴 드롭다운 / 드롭다운 메뉴 / 드롭다운 버튼 으로 분리했습니다.

배포 링크

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

스크린샷

desktop - 댓글 있음

desktop - 댓글 없음

댓글 입력 시 '등록' 활성화

tablet

mobile

좋아요 버튼 토글 UI

2025-06-23.18-59-18.mp4

멘토에게

• useAsync 훅이 사실 코드잇 강의대로 만든 거였는데.. 처음 봤을 땐 유용해 보여서 따라했지만 쓰다 보니 의문점이 생겼습니다.
  useAsync가 fetch와 같은 비동기 작업을 선언적으로 할 수 있도록 loading, error와 같은 특정 리턴값을 보내도록 해놨는데, 리턴값 중 runAsync 같은 경우는 비동기 함수 자체라서 그런지 useAsync 안에서도 try catch문을 쓰게 되고, 외부 컴포넌트에서도 runAsync를 사용해 또다시 try catch문을 쓰는 경우가 생기더라구요. 이렇게 쓰는 게 맞을까요..?
  한편으론 useAsync의 리턴문을 {isLoading, fetchError, **runAsync**} 에서 {isLoading, fetchError, **data**}와 같이 아예 fetch가 완료된 결과물인 data를 비동기 함수 대신 리턴하면 좀 더 로직이 깔끔해지지 않을까 하는 생각이 듭니다.
  이에 대해 어떻게 생각하시는지 궁금하고, 실제로는 이러한 비동기 작업 커스텀 훅을 어떤 식으로 만드는지도 궁금합니다.
  [이미지 첨부: useAsync 밖에서도 안에서도 try catch를 쓰고 있는 모습..]
  
  

• 페이지와 기능들이 점점 추가되면서 관련 로직들이 복잡해지고 있는 것 같은데, 정리하자니 진도가 안 나가고 속도감 있게 작업하자니 정리가 안 되어서 고민입니다. 속도와 코드 퀄리티 중 어디에 무게를 두는 게 좋을까요? 코드 퀄리티가 중요하다는 생각은 들지만.. 시간 내에 다양한 기능들을 구현해보는 것도 중요한 것 같아서 조언을 받고 싶습니다.

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!
변경사항이 꽤 많아서 리뷰가 오래 걸렸네요 :)
emotion도 적극적으로 활용하시고, 좋은 시도 많이 보인것같아 잘 봤습니다 :)

주요 리뷰 포인트

• craco 채택 관련 피드백
• CommentList 관심사 분리
• useAsync 훅 사용 관련 피드백 (의도 및 제약)
• useForm custom validator 추가 제안

[addiescode-sj]

질문에 대한 답변

멘토에게

• useAsync 훅이 사실 코드잇 강의대로 만든 거였는데.. 처음 봤을 땐 유용해 보여서 따라했지만 쓰다 보니 의문점이 생겼습니다.
  useAsync가 fetch와 같은 비동기 작업을 선언적으로 할 수 있도록 loading, error와 같은 특정 리턴값을 보내도록 해놨는데, 리턴값 중 runAsync 같은 경우는 비동기 함수 자체라서 그런지 useAsync 안에서도 try catch문을 쓰게 되고, 외부 컴포넌트에서도 runAsync를 사용해 또다시 try catch문을 쓰는 경우가 생기더라구요. 이렇게 쓰는 게 맞을까요..?
  한편으론 useAsync의 리턴문을 {isLoading, fetchError, **runAsync**} 에서 {isLoading, fetchError, **data**}와 같이 아예 fetch가 완료된 결과물인 data를 비동기 함수 대신 리턴하면 좀 더 로직이 깔끔해지지 않을까 하는 생각이 듭니다.
  이에 대해 어떻게 생각하시는지 궁금하고, 실제로는 이러한 비동기 작업 커스텀 훅을 어떤 식으로 만드는지도 궁금합니다.
  [이미지 첨부: useAsync 밖에서도 안에서도 try catch를 쓰고 있는 모습..]
  
  

관련해서 본문에서 자세히 답변드렸습니다!

• 페이지와 기능들이 점점 추가되면서 관련 로직들이 복잡해지고 있는 것 같은데, 정리하자니 진도가 안 나가고 속도감 있게 작업하자니 정리가 안 되어서 고민입니다. 속도와 코드 퀄리티 중 어디에 무게를 두는 게 좋을까요? 코드 퀄리티가 중요하다는 생각은 들지만.. 시간 내에 다양한 기능들을 구현해보는 것도 중요한 것 같아서 조언을 받고 싶습니다.

마감일을 설정해두고 유연하게 개발하는 습관을 들이시는게 중요합니다.
처음에는 작은 테스크로 쪼개서 속도감있게 구현해야하는 업무 위주로 빠르게 끝내시고, 어느정도의 시간 여유를 확보한 다음 퀄리티있게 다듬는 습관을 들이시면 마감일안에 퀄리티있는 결과물을 만드는게 가능해질거예요 :)

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.