fix: 봉사 데이터 불러오기 실패 시 에러 응답 정보 콘솔 출력

봉사 데이터 불러오기 실패 시 에러 객체만 출력하던 것을, 에러 응답의 상태 코드와 메시지를 함께 출력하도록 수정하여 디버깅 용이성을 향상시킴
- 에러 발생 시 상태 코드와 메시지를 콘솔에 출력
- VolunteerApplication, VolunteerHistory 컴포넌트에서 에러 처리 로직 수정

Author: seungw0o

src/apis/volunteers/index.ts

@@ -1,34 +1,30 @@
-import { instance } from "../axios";
-import { getMyVolunteersResponse, getVolunteerResponse } from "./response";
+import { instance } from '../axios';
+import { getMyVolunteersResponse, getVolunteerResponse } from './response';
 
 const router = '/volunteers';
 
 // 봉사 활동 신청
 export const applicationVolunteer = async (volunteerId: string) => {
-    const url = `${router}/application/${volunteerId}`;
-    console.log(`Requesting POST: ${url}`);
-    await instance.post(url);
-}
+  const url = `${router}/application/${volunteerId}`;
+  await instance.post(url);
+};
 
 // 봉사 활동 신청 취소
 export const deleteApplicationVolunteer = async (volunteerId: string) => {
-    const url = `${router}/cancellation/${volunteerId}`;
-    console.log(`Requesting DELETE: ${url}`);
-    await instance.delete(url)
-}
+  const url = `${router}/cancellation/${volunteerId}`;
+  await instance.delete(url);
+};
 
 // 봉사 활동 조회
 export const getVolunteer = async () => {
-    const url = `${router}`;
-    console.log(`Requesting GET: ${url}`);
-    const {data} = await instance.get<getVolunteerResponse>(url);
-    return data;
-}
+  const url = `${router}`;
+  const { data } = await instance.get<getVolunteerResponse>(url);
+  return data;
+};
 
 // 내 봉사 신청 내역 조회
 export const getMyVolunteers = async () => {
-    const url = `${router}/my/application`;
-    console.log(`Requesting GET: ${url}`);
-    const {data} = await instance.get<getMyVolunteersResponse>(url)
-    return data;
-}
+  const url = `${router}/my/application`;
+  const { data } = await instance.get<getMyVolunteersResponse>(url);
+  return data;
+};

src/hooks/useVolunteerApi.ts

@@ -5,16 +5,21 @@ import {
   getVolunteer,
   getMyVolunteers,
 } from '../apis/volunteers';
+import {
+  getMyVolunteersResponse,
+  getVolunteerResponse,
+} from '../apis/volunteers/response';
+import { AxiosError } from 'axios';
 
 export const useGetVolunteer = () => {
-  return useQuery({
+  return useQuery<getVolunteerResponse, AxiosError>({
     queryKey: ['volunteer'],
     queryFn: getVolunteer,
   });
 };
 
 export const useGetMyVolunteers = () => {
-  return useQuery({
+  return useQuery<getMyVolunteersResponse, AxiosError>({
     queryKey: ['my-volunteers'],
     queryFn: getMyVolunteers,
   });

src/index.tsx

@@ -4,8 +4,6 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { registerSetAuthToken } from './utils/setAuthToken';
 
-console.log('process.env.REACT_APP_BASE_URL:', process.env.REACT_APP_BASE_URL);
-
 registerSetAuthToken();
 
 const root = ReactDOM.createRoot(

src/pages/Volunteer/Application.tsx

@@ -24,7 +24,13 @@ export const VolunteerApplication = () => {
   useEffect(() => {
     if (isLoading) return;
     if (isError) {
-      console.error('봉사 데이터 불러오기 실패함, ', error);
+      console.error(
+        '봉사 데이터 불러오기 실패함, ',
+        'Status:',
+        error.response?.status,
+        'Message:',
+        error.response?.data,
+      );
       return;
     }
     if (data) {

src/pages/Volunteer/History.tsx

@@ -24,7 +24,13 @@ export const VolunteerHistory = () => {
   useEffect(() => {
     if (isLoading) return;
     if (isError) {
-      console.error('봉사 데이터 불러오기 실패함, ', error);
+      console.error(
+        '봉사 데이터 불러오기 실패함, ',
+        'Status:',
+        error.response?.status,
+        'Message:',
+        error.response?.data,
+      );
       return;
     }
     if (data) {