[Fix] Axios 인스턴스에 공통 응답(에러 포함) 처리 함수 추가

[Chiman2937]

📝 변경 사항

Tip

이 변경사항은 기존 axios 인스턴스(baseAPI)를 수정하지 않았기 때문에 breaking change가 아닙니다.

🎯 목적

백엔드의 공통 응답 형식(CommonSuccessResponse<T>)을 자동으로 처리하여,
클라이언트 코드에서는 실제 데이터(T)만 다루게 됩니다.

💡 공통 응답 Type 추가

export interface CommonSuccessResponse<T> {
  status: number;
  message: string;
  data: T;
}

💡 공통 응답 처리 헬퍼 함수 추가 (api)

공통 응답 형식에서 data 필드만 추출하여 반환합니다.

// 공통 응답 형식 처리를 위한 api 헬퍼
export const api = {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  get: async <T>(url: string, config?: any): Promise<T> => {
    const response = await baseAPI.get<CommonSuccessResponse<T>>(url, config);
    return response.data.data; // T 만 반환
  },
  ...
};

💡 React Query 에러 타입 전역 설정

모든 useQuery에서 자동으로 CommonErrorResponse 타입 추론됩니다.

// types/react-query.d.ts
declare module '@tanstack/react-query' {
  interface Register {
    defaultError: CommonErrorResponse;
  }
}

💡 Mock Data 용 응답 처리 헬퍼 함수 추가

MSW 핸들러에서 공통 응답 형식을 생성할 수 있습니다.

export const createSuccessResponse = <T>(data: T): CommonSuccessResponse<T> => ({
  status: 200,
  message: '요청이 정상적으로 처리되었습니다.',
  data,
});

✨ 마이그레이션 가이드

API 호출 변경

// ❌ Before
const response = await baseAPI.get('/users/1');
const user = response.data.data; // 수동으로 data 추출

// ✅ After
const user = await api.get('/users/1'); // 자동으로 data만 반환

React Query 에러 처리

const { data, error } = useGetUser(userId);

if (error) {
  // error는 자동으로 CommonErrorResponse 타입
  console.log(error.errorCode); // 타입 안전
  console.log(error.detail);
}

MSW 핸들러

// ❌ Before
http.get('/users/:id', () => {
  return HttpResponse.json({
    status: 200,
    message: '성공',
    data: user,
  });
});

// ✅ After
http.get('/users/:id', () => {
  return HttpResponse.json(createSuccessResponse(user));
});

---

🔗 관련 이슈

Closes #125

---

🧪 테스트 방법

• 수동 테스트 검증(로컬 환경)
• 유닛 테스트 검증
• 통합 테스트 검증

---

📸 스크린샷 (선택)

---

📋 체크리스트

• 관련 문서를 업데이트했습니다 (필요한 경우)
• 테스트를 추가/수정했습니다 (필요한 경우)
• Breaking change가 있다면 명시했습니다

---

💬 추가 코멘트

---

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review

---

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chiyoung-fix/axios

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎨 Storybook Report

ℹ️ Story 변경사항이 감지되지 않았습니다

이 PR에는 Story 변경이 없어서 빌드를 스킵했습니다.

Status	Storybook	Build Log	Updated (UTC)
⏭️ Skipped	-	-	2025-12-09 06:26:47

[github-actions]

📊 Coverage Report

Status	Build Log	Updated (UTC)
✅ Ready	View Build	2025-12-09 06:27:08

📉 #127을 main에 병합하면 coverage가 0.29% 감소합니다.

Coverage 요약

@@             Coverage Diff             @@
##             main     #127       +/-   ##
===========================================
- Coverage   28.45%   28.16%    -0.29%     
===========================================
  Files         120      121        +1     
  Lines        4685     4732       +47     
  Branches      216      217        +1     
===========================================
  Hits         1333     1333         0     
+ Misses       3352     3399       +47     

영향받은 파일

✅ 이 PR로 영향받은 파일이 없습니다

수정된 모든 파일이 현재 coverage를 유지했습니다.

[github-actions]

🚀 PR Preview Report

✨ Build가 성공적으로 완료되었습니다.

Preview에서 변경사항을 확인하세요.

Status	Preview	Build Log	Updated (UTC)
✅ Ready	Visit Preview	View Logs	2025-12-09 06:28:18

[wooktori]

고생하셨습니다~~