useMutation + axiosInstance 적용기 (vite + react-query)

상황

• 회원가입 다이얼로그에서 API 호출 필요
• /user/signup 엔드포인트로 POST 요청 필요
• API 요청에 react-query의 useMutation 사용
• 요청 baseURL은 .env로 분리하여 관리

구조

• axiosInstance에 baseURL 지정하여 재사용성 확보
• signupUser()는 axios를 통해 POST 요청을 보내는 함수로 분리
• useSignup()에서 useMutation()으로 signupUser 래핑
• SignupDialog 컴포넌트 내에서 mutate() 호출
• DialogRenderer 추상화 구조를 통해 onConfirm()으로 결과 전달

문제 상황 및 해결

문제 1: mutationFn에서 void 반환 → 타입 오류

// 잘못된 코드
mutationFn: (data) => {
  axios.post(...);
}

useMutation은 Promise 반환 필요 → return axios.post(...) 필요

문제 2: result.data 접근 시 타입 에러

• signupUser()에서 이미 response.data 반환
• 따라서 onSuccess(result)에서 result는 data 자체
• .data를 다시 접근하여 타입 불일치 발생

// 잘못된 코드
onSuccess: (result) => {
  onConfirm(result.data);
}

// 올바른 코드
onSuccess: (result) => {
  onConfirm(result);
}

문제 3: 요청이 5173 포트로 전송

• .env에 VITE_API_BASE_URL=http://192.168.1.111:3000 설정했으나 반영되지 않음
• 원인: axiosInstance 사용하지 않고 axios.post() 직접 사용
• 해결: axiosInstance에서 baseURL 설정 후, 모든 요청에서 axiosInstance 사용으로 통일

export const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
});

문제 4: CORS 에러 발생

• 요청은 3000 포트로 정상 전달되었으나, CORS 정책으로 차단
• 해결: 백엔드에서 app.enableCors() 호출하여 프론트엔드 도메인 허용

---

마무리 구조

• .env 설정
• axiosInstance 정의
• signupUser() 분리
• useSignup()에서 useMutation() 사용
• SignupDialog에서 mutate() 호출
• DialogRenderer에서 onConfirm()으로 전달