[Feat] 무한 스크롤, 로딩 인디케이터, 엠티 뷰, 오류 alert

[simeunseo]

관련 이슈 번호

• close [Feat] 개설한 티클 리스트 페이지네이션 구현 #29
• close [Feat] 신청한 티클 리스트 페이지네이션 #30
• close [Feat] 목록 없을시 엠티 뷰 추가 #270
• close [Feat] 목록 없을시 엠티 뷰 추가 #269
• close [Feat] 티클 생성, 티클 신청시 완료 alert #268

PR이 너무 뚱뚱해졌네요 죄송함니다... 앞으로 더 나눠서 작업하도록 하겠습니다!
구현 스크린샷 위주로 봐주시면 좋을 것 같습니다.

작업 내용

• Tab 컴포넌트 사용 방식 수정
• Loading 컴포넌트 구현 및 스토리 작성
• 무한스크롤을 위한 useIntersectionObserver 훅 구현
• 티클 목록 조회 무한스크롤 및 로딩 인디케이터, 엠티 뷰 추가
• 대시보드 조회 무한스크롤 및 로딩 인디케이터, 엠티 뷰 추가
• 메인 페이지에서 검색 필드 대신 진행 예정/종료 탭 추가
• 탭 전환시 전체 리렌더링 이슈 개선
• 티클 신청시 alert
• 서버 에러시 alert

PR 포인트

전역 에러 핸들러

export const handleError = (error: unknown) => {
if (error instanceof Error) {
  if (axios.isAxiosError(error)) {
    const serverError = error.response?.data;

    // TODO: alert가 아닌 toast로 교체
    alert(serverError?.error.message || '오류가 발생했습니다.');
  }
}
};

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      staleTime: STALE_TIME,
      gcTime: STALE_TIME,
    },
    mutations: {
      onError: handleError,
    },
  },
});

mutation 에러에 대해 공통적인 에러 핸들러를 추가해놓았습니다. 서버에서 오는 에러 메시지가 그대로 띄워지게되는데, 성하님이 에러 메시지 상수 정리해놓은거 머지되면 적절한 메시지가 보여질 것 같습니다!
또한 빠르게 일단 alert()로 처리해놓았는데 toast 컴포넌트 구현 후 교체가 필요합니다.

고민과 학습내용

스크린샷

무한스크롤과 로딩 인디케이터

2024-11-26.12.26.35.mov

2024-11-26.12.27.19.mov

network throttling 걸어서 로딩 인디케이터 노출시킨건데, 평소에는 워낙 가져오는 속도가 빨라서 로딩 인디케이터가 보일 일은 거의 없을 것 같습니다.

2024-11-26.12.40.28.mov

탭 전환시 전체 리렌더링 이슈 개선

AS-IS

2024-11-26.1.34.56.mov

Banner와 티클 리스트가 하나의 컴포넌트로 합쳐져있어서 전체가 리렌더링되는 모습입니다.
컴포넌트를 분리하여 개선하였습니다.

2024-11-26.1.35.19.mov

조회 항목이 없을시 Empty 뷰

귀엽습니다

티클 신청시 alert 후 대시보드로 navigate

2024-11-26.2.11.35.mov

mutate 오류 발생시 오류 메시지 alert

자신의 티클에 신청을 한 상황입니다.
사실 이건 아예 버튼 자체를 없애놔야하기 때문에 발생할 일이 없는 오류긴 합니다.
티클 상세 조회시 자신의 티클인지와 이미 신청한 티클인지에 대한 필드가 추가로 필요합니다.
내일 데일리 스크럼때 다시 요청드리겠습니다.

2024-11-26.2.11.51.mov

[github-actions]

🎨 스토리북 확인하기

• 👀 Preview
• 🔍 Build Details

[begong313]

👍🏿

[seoko97]

Q:
제네릭을 통해 props에 대한 타입을 정의한 이유가 있을까요? 그냥 string으로 할당하지 않은 이유가 궁금합니다!

p3:
컨벤션에 맞춰서 화살표 함수로 부탁드리겠습니다!

[simeunseo]

탭 정보에 대한 타입 안정성을 위해서입니다!
탭 정보는 위에 정의한 TabData interface에 맞게 value, label, onClick 속성으로 정의하게 되는데요!

예를 들어 탭 정보가 다음과 같이 정의되었을 때

[
    {
      value: 'APPLIED',
      label: '신청한 티클 관리',
      onClick: () => {
        // do something
      },
    },
    {
      value: 'OPENED',
      label: '개설한 티클 관리',
      onClick: () => {
        // do something
      },
    },
  ];

아래와 같이 selectedTab에 정의도지 않은 Tab value를 넣으면 타입에러가 나게 됩니다.

<Tab tabItems={DASHBOARD_TAB_DATA} selectedTab='APPLIEDD' />;

제너릭으로 정의하지 않으면 이 부분에 대해 캐치가 안됩니다!