[김보미] Sprint12

[Kbomi16]

요구사항

기본

중고마켓

• ‘상품 등록하기’ 버튼을 누르면 “/additem” 로 이동합니다.
• 각 상품 클릭 시 상품 상세 페이지로 이동합니다.
• 상품 상세 페이지 주소는 “/items/{productId}” 입니다.

상품 상세

• 내가 등록한 상품일 경우 상품 수정, 삭제가 가능합니다.
• 문의하기 input창에 값을 입력 후 ‘등록’ 버튼을 누르면 댓글이 등록됩니다.
• 내가 등록한 댓글은 수정, 삭제가 가능합니다.

상품 등록

• 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
• 활성화된 ‘등록' 버튼을 누르면 상품 등록이 완료됩니다.
• 등록이 완료되면 해당 상품 상세 페이지로 이동합니다.

주요 변경사항

• 상품 등록시 해당 상품 상세페이지로 이동.
• 내가 쓴 댓글과 내가 등록한 상품일시 수정, 삭제 버튼이 뜨도록 구현했습니다. (옵션바 클릭시 박스 나옴.)

스크린샷

멘토에게

• 전 미션 때까지 쭉 Next로 하다가 이번에 다시 React로 돌아와 옮기는데 시간이 많이 걸렸습니다..
• 기존 module.css -> tailwindcss로 변경했습니다.
• 전에 짠 코드라 두서없는 코드,, 가 너무 많습니다. 요구사항 위주로 봐주세요! (리액트쿼리, 댓글 수정, 삭제)
• 리액트 쿼리는 아직 잘 몰라서 Item.tsx 파일에서 데이터 페칭하는 부분에만 적용해봤습니다ㅠㅠ..

[lunaticscode]

accessToken은 굳이 state로 관리하기보다는 아래처럼 관리해주시면 더욱 코드가 간결해집니다.

const accessToken = useMemo(() => localStorage.getItem('accessToken'), []);

[lunaticscode]

현재 pathName에 의해서 UI가 렌더링 되는 부분이 많습니다. 그렇기 때문에 다른 prop이나 state에 의해 불필요한 재선언이 안되게끔 코드를 작성해주셔야 합니다.

const pathName = useMemo(() => location.pathname, [location.pathname]);

[lunaticscode]

현재 totalPages props로 Math.ceil(totalPosts / pageSize) 값이 들어오는 상황인데, 이렇게 되면 만약 생성되는 page 버튼이 pageSize를 초과하는 경우가 나오지 않나요..?

ex) totalPosts의 lenght가 212인 경우 페이지네이션 UI는 <이전> [21] [22] <다음> 이렇게 렌더링되어야 하는데, 현재 경우는 <이전> [1] ~ [22] <다음> 이렇게 생성될 것 같네요.

[lunaticscode]

아래 67번 라인의 patchProducts도 마찬가지, 해당 api가 실패하는 경우 단순 log 출력이 아닌 사용자에게 메시지를 직접 전달해주시면됩니다.

[lunaticscode]

Content-Type을 분기처리할때는 아래처럼 해주시면 됩니다.

if(config.data instanceof FormData) {
     config.headers['Content-Type'] = 'multipart/form-data';
}

[lunaticscode]

handleFormSubmit의 결과가 실패가 뜨더라도 게시글 등록이 완료됬다는 아래 alert이 동작하게 됩니다.

이런 부분은 수정이 반드시 필요합니다.