feat: axios instance 및 interceptor 작성

[bbearcookie]

🧩 이슈 번호

• close axios instance 작성 #76

✅ 작업 사항

• 공통적으로 사용되는 baseURL 을 옵션에 담은 axios 인스턴스 생성
• 모든 response 에 대해서 { ...data, statusCode: status } 데이터를 파싱하는 interceptor 작성
• IDE의 타입 추론을 위한 인터페이스 작성

👩‍💻 공유 포인트 및 논의 사항

응답 객체 내부의 data 를 번거롭게 파싱하지 않아도 되는 인터셉터를 만들었어요.

공통

• 기본적으로 모든 인스턴스는 성공 응답을 받으면 http 상태코드를 statusCode 라는 프로퍼티로 받아요.
• 그 외 data 객체의 모든 데이터는 전개 연산자로 그대로 받게 되어있어요.

사용 예시

  const getDetailPost = async (postId: string) => {
    return await baseInstance.get<Post>(`/example/posts/${postId}`);
  }

const data = await getDetailPost('5');

여기에서 data 에 실제로 들어가게 되는 내용은 아래와 같아요:

{
    "statusCode": 200,
    "userId": 1,
    "id": 5,
    "title": "모킹 포스트 5",
    "body": "모킹된 포스트에요. MSW를 이용했어요."
}

정의한 CustomAxiosInstance 인터페이스를 기반으로 데이터에 대한 타입 추론이 돼요.

baseInstance

• 일반적으로 application/json 형식의 데이터를 전달할 때 사용하는 인스턴스에요.

formDataInstance

• multipart/form-data 형식의 데이터를 전달할 때 사용하는 인스턴스에요.
• @nayeon-hub 님이 파일 업로드 기능을 구현하실 때 사용될 것 같아요! 이 인스턴스에 대한 문제가 있다면 추후에 함께 해결해보면 좋을 것 같아요.

사용 예시

import { baseInstance, formDataInstance } from @/core/api/instance';

// 일반 baseInstance 사용
const postGetExample = async (postId: string) => {
  return await baseInstance.get<Post>(`/example/posts/${postId}`);
}

// 파일 업로드를 위한 formDataInstance 사용
const fileUploadExample = async (nickname: string, image: File) => {
  return await formDataInstance.post<{ message: string }>('/upload-image', {
    nickname,
    image
  });
};

[netlify]

✅ Deploy Preview for moabam-storybook ready!

Name	Link
🔨 Latest commit	bc25e94
🔍 Latest deploy log	https://app.netlify.com/sites/moabam-storybook/deploys/6548f507f5799c0008a04c9e
😎 Deploy Preview	https://deploy-preview-77--moabam-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nayeon-hub]

LGTM👍🏻

[bbearcookie]

mutate 함수를 호출했을 때 에러 콜백에서 적절한 AxiosError 형태로 나와야 하는데.. 안되는 문제가 있네요 😭
이 부분도 해결해봐야 할 것 같습니다..