메인 페이지의 구인구직 리스트와 슬라이드 정보를 호출하는 커스텀 훅을 구현하고, MSW 핸들러를 추가하여 개발 환경에서 API 요청을 모킹했습니다.

또한, 로딩 상태를 관리하기 위한 Spinner 컴포넌트와 AsyncBoundary를 활용하여 로딩 및 에러 처리 로직을 개선했습니다.

API 관리 구조 정리

• apis/home/에 관련 API들을 관리하도록 구조를 정리하였습니다.

• mocks 폴더에서 MSW 핸들러를 관리합니다.

• path.ts에서 API 경로를 관리하고 있습니다.

• queries, mutations로 나누어 관리하며, 쿼리 키는 queryKeys.ts에서 중앙 집중화하여 관리합니다.

• API 응답 및 요청 타입은 types/response.ts types/request.ts에서 관리합니다.

  apis
  ├── home
  │   ├── mocks
  │   │   ├── recruitmentsMockHandler.ts
  │   │   └── slidesMockHandler.ts
  │   ├── path.ts
  │   ├── queries
  │   │   ├── queryKeys.ts
  │   │   ├── useFetchRecruitments.tsx
  │   │   └── useFetchSlides.tsx
  │   └── types
  │       └── response.ts
  └── instance.ts
  

clientInstance 설정

• 환경 변수 .env의 BASE_URL을 사용하여 baseURL을 지정하였습니다.
• 로컬 스토리지에 저장된 token이 존재할 경우, 헤더에 Bearer 토큰을 주입할 수 있도록 인터셉터를 설정했습니다.
• API 응답 시 오류 발생 시 이를 처리하는 인터셉터도 추가되었습니다.

useFetchRecruitments 훅 구현

export const useFetchRecruitments = (): UseSuspenseQueryResult<RecruitmentResponse[], AxiosError> => {
  return useSuspenseQuery<RecruitmentResponse[], AxiosError>({
    queryKey: [QUERY_KEYS.RECRUITMENTS], // recruitments
    queryFn: () => getRecruitments(),
  });
};

• 메인 페이지의 구인구직 리스트를 불러오는 커스텀 훅을 구현하였습니다.
• 쿼리 키는 QUERY_KEYS.RECRUITMENTS로 관리되며, AsyncBoundary 및 Spinner와 함께 로딩 및 에러 상태를 처리합니다.
• msw의 recruitmentsMockHandler를 통해 모킹 데이터를 제공하여 개발 중에도 API 호출을 테스트할 수 있습니다.
• 해당 훅은 RecruitmentList 컴포넌트에서 사용되어지고 있습니다.