✨ 피드 메인 페이지 로딩 및 에러 처리

[BangDori]

작업 이유

피드 메인 페이지 Loading 및 Error 처리

작업 사항

1️⃣ 피드 메인 페이지 Loading 처리

• 피드 메인 리스트 Loading 상황에 Skeleton UI가 렌더링되도록 처리하였습니다.

2️⃣ 피드 메인 페이지 Error 처리

• 피드 메인 리스트 최초 로딩 시 에러가 발생할 경우, NetworkError 컴포넌트가 렌더링되도록 처리하였습니다.
• 무한 스크롤 도중 에러가 발생할 경우, NetworkToastError 컴포넌트가 렌더링되도록 처리하였습니다.

3️⃣ 기타 설정

• Network 주소 개방을 위해 dev 명령어에 host 옵션을 추가하였습니다.
• Network Error Toast UI를 간편하게 만들기 위해 react-toastify 라이브러리를 추가하였습니다.
• Feed 등 Mocking 데이터를 추가하였습니다.

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

의찬님이 중점적으로 확인해주셨으면 하는 부분

해당 PR의 경우, React Query Devtools 및 코드 조작을 통해 확인할 수 있기 때문에 직접 확인부탁드리겠습니다.

• Skeleton UI가 정상적으로 동작하고 있나요?
• NetworkError 컴포넌트가 정상적으로 렌더링하고 있나요?
• NetworkToastError가 정상적으로 렌더링되고 있나요?
• NetworkError 컴포넌트와 NetworkToastError 컴포넌트의 차이점에 대해 인지하셨나요?

재서님이 중점적으로 확인해주셨으면 하는 부분

• 해당 PR의 경우 05.03 스프린트 리뷰 회의에서 시연을 통해 확인하신 이후에 리뷰해주시면 감사하겠습니다!

발견한 이슈

• Axios 인터셉터에 onError 함수를 추가하였었는데, onError 함수의 반환값으로 Project.reject가 아닌 그냥 data를 반환하고 있어 에러 처리가 정상적으로 이루어지지 않고 있었습니다.

export async function onError(error: AxiosError | Error) {
  if (isAxiosError(error)) {
    logApiErrorOnDev(error);
  }

  return error; // 🚨 수정 전, 에러가 발생한 부분
  return Promise.reject(error); // ✅ 수정 후
}

[aws-amplify-ap-northeast-2]

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

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

[Legitgoons]

수고 많으셨습니다. 이미 시연 중 발견된 이슈에 대해서는 추가적으로 작성하지 않았습니다. 혹시 이슈에 추가해야할 부분이 있다면 해주시기 바랍니다. 병합하셔도 좋습니다.