🛠️ 네트워크 불안정 토스트 메시지 관리

[BangDori]

작업 이유

#44 이슈 해결

작업 사항

1️⃣ 네트워크 에러 토스트 중앙화 관리

• 중앙에서 관리할 수 있도록 토스트 컴포넌트를 App.tsx에서 선언하였습니다.
• 쿼리 및 뮤테이션 도중 발생하는 Success, Error 에 대한 상태를 다루기 위해 쿼리 핸들러 함수를 추가하였습니다.
• 쿼리 키는 다양한 곳에서 사용될 수 있는 상수 정보이고, 쿼리 클라이언트는 초기에 QueryClientProvider에서 추가해주는 역할이지만 React Query와 관련한 정보 자체를 하나의 폴더로 묶어두는 것이 좋다고 생각하였습니다. 또한 FSD 아키텍처의 관점에서 하나의 슬라이스로 관리하는 편이 더 좋다고 생각하여 shared 폴더로 이동하였습니다.

2️⃣ 네트워크 에러 토스트 자동 제거

• 기존의 자동 제거가 따로 없이, API 요청이 완료되어야만 사라지게 설정되어 있었는데 autoClose를 3초로 설정하여 3초 후에 자동으로 사라지도록 설정하였습니다.
• 네트워크 에러 토스트 autoClose를 설정하여도 autoClose 이후로 제거되지 않는 문제가 발생하여 toastify__progress-bar에 대한 스타일 시트를 수정하였습니다. (display: none -> visibility: hidden)

리뷰어가 중점적으로 확인해야 하는 부분

• 이슈가 정상적으로 해결되었나요?
• 토스트가 호출되는 상황에 대해 이해되지 않는 점이 있으신가요?

발견한 이슈

1️⃣ 좋아요 API 관련 이슈

좋아요 API 관련해서 이슈가 발생하였는데, delay를 설정하고 테스트하는 과정 중에 발생한 휴먼 에러였습니다.

API Timeout 테스트를 위해 delay를 설정하였는데 좋아요가 계속해서 반영되고 있었습니다. 근데 확인해보니 프론트에서는 delay로 에러 처리가 발생하여 Query에 반영되지 않는데 msw에서는 delay가 끝난 이후 서버에 데이터를 업데이트해버려서 발생한 문제였습니다..

2️⃣ 좋아요 버튼 색상 이슈

좋아요 버튼이 비활성화(isPending) 되는 상황에서 브라우저에서 제공해주는 :disabled의 기본 색상으로 적용되는 문제가 있었습니다.

</ br>

해당 문제를 해결하기 위해 _reset.scss에서 해당 색상을 inherit으로 설정하였습니다.

button {
  background-color: transparent;
  border: none;
  padding: 0;

  &:disabled {
    color: inherit;
  }
}

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-47.d37mn03xh3qyyz.amplifyapp.com

[Legitgoons]

수고하셨습니다! queryClinet의 위치에 대해서 궁금한 점이 생겨서 Comment로 달겠습니다. 다른 부분들은 모두 괜찮습니당