refactor: 로딩 스피너, 에러 페이지, 토스트 관련 기능 구현

✏️ 작업 내용

루트 페이지 변경 => `/gatherings' 로 변경
loading.tsx 만들어 로딩 스피너 적용
error.tsx 만들어 에러 페이지 적용
react-hot-toast 이용한 토스트 기능 적용
/gatherings 초기값 dateTime 으로 sorting
toast.config 추가하여 공통 스타일링 적용
중복된 try...catch 수정

📷 스크린샷

loading spinner

무한 스크롤 시 스피너

https://github.com/user-attachments/assets/a7521959-e384-435d-858d-eb8b337a3275

페이지 전환 시 스피너

https://github.com/user-attachments/assets/e03c0400-bafc-4af7-9376-aa4c0bda9ce0

error.tsx

없는 Id 값을 주소창에 쳤을 경우 나타나게 하는 에러 페이지

https://github.com/user-attachments/assets/fd0415dd-3919-4acf-a9b4-f79a154ea734

toast

react-hot-toast 세팅 후 적용

https://github.com/user-attachments/assets/d643e97f-98bf-4eed-b26a-cfc9861ca421

✍️ 사용법

loading.tsx

next.js 에서 기본적으로 제공해 주고 있는 페이지입니다. loading.tsx 라고 저장해두면 페이지 전환 시 로딩 페이지가 나타나게 됩니다.

다만, grouping 한 부분끼리만 작동되기 때문에 우선 세 군데 'loading.tsx' 를 생성해 두었습니다. 효율적인 방법을 찾으면 변경할 생각입니다.

https://nextjs.org/docs/app/api-reference/file-conventions/loading

error.tsx

이 부분도 next.js 에서 기본적으로 제공해 주고 있는 페이지입니다. error.tsx 라고 저장해두면 에러 발생 시 에러 페이지가 나타나게 됩니다.

이 부분은 일단 /gatherings 부분에만 적용해 두었습니다!

https://nextjs.org/docs/app/api-reference/file-conventions/error

react-hot-toast

react-hot-toast 라이브러리를 세팅하여 적용해 보았습니다.

Root Layout 에 <Toast /> 를 Import 하였습니다.

그 다음 사용하고자 하는 부분에서 사용하면 됩니다.

const handleWithdrawClick = async () => {
    if (hasParticipated) {
      try {
        await deleteGatheringToWithdraw(Number(params.id));
        setHasParticipated(false);
      } catch (error) {
        toast.error(
          error instanceof Error
            ? error.message
            : '모임을 취소하지 못했습니다.',
          {
            className: 'text-14 font-bold',
          },
        );
      }
    }
  };

저 에러 스타일링은 아마 다 동일하게 쓰실 것 같아서 나중에 공통으로 빼도 좋을 것 같습니다!

🎸 기타

try...catch

api 부분에서도 try...catch 를 쓰고 클라이언트 에서도 try...catch 를 써서 이중으로 쓰는 코드가 좋지 않아 보입니다. 이 부분은 우선 기능 구현 다 한 다음 리팩토링 때 변경하도록 하겠습니다.

다크모드

기능 개발 다 하면 next-theme 으로 다크모드 설정 해 봐도 좋을 것 같아요!

INtiful / SootheWithMe