[FE] HTTP 요청 오류 시 status code별 오류 상황을 대응하는 함수 생성 (#151)

* feat: api 에러 시 표시한 메세지 생성 함수 추가

* refactor: api/review.ts에 api 오류 시 메세지를 반환하는 createApiErrorMessage 함수 적용

* docs: http 요청 실패 메세지 수정

* fix: 오타 수정

frontend/src/apis/apiErrorMessageCreator.ts

@@ -0,0 +1,11 @@
+import { API_ERROR_MESSAGE, SERVER_ERROR_REGEX } from '@/constants';
+
+const createApiErrorMessage = (statusCode: number) => {
+  const isServerError = SERVER_ERROR_REGEX.test(statusCode.toString());
+
+  if (isServerError) return API_ERROR_MESSAGE.serverError;
+
+  if (statusCode in API_ERROR_MESSAGE) return API_ERROR_MESSAGE[statusCode];
+};
+
+export default createApiErrorMessage;

frontend/src/apis/review.ts

@@ -1,6 +1,6 @@
-//리뷰 작성
 import { ReviewData, WritingReviewInfoData } from '@/types';
 
+import createApiErrorMessage from './apiErrorMessageCreator';
 import endPoint from './endpoints';
 
 export const getDataToWriteReviewApi = async (reviewerGroupId: number) => {
@@ -9,7 +9,7 @@ export const getDataToWriteReviewApi = async (reviewerGroupId: number) => {
   });
 
   if (!response.ok) {
-    throw new Error('리뷰 쓰기 위한 정보를 가져오는데 실패했습니다.');
+    throw new Error(createApiErrorMessage(response.status));
   }
 
   const data = await response.json();
@@ -26,7 +26,7 @@ export const postReviewApi = async ({ reviewData }: { reviewData: ReviewData })
   });
 
   if (!response.ok) {
-    throw new Error('리뷰를 작성하는 데 실패했습니다.');
+    throw new Error(createApiErrorMessage(response.status));
   }
 
   const data = await response.json();
@@ -43,7 +43,7 @@ export const getDetailedReviewApi = async ({ reviewId, memberId }: { reviewId: n
   });
 
   if (!response.ok) {
-    throw new Error('상세 리뷰를 불러오는 데 실패했습니다.');
+    throw new Error(createApiErrorMessage(response.status));
   }
 
   const data = await response.json();
@@ -68,7 +68,7 @@ export const getReviewListApi = async ({
   });
 
   if (!response.ok) {
-    throw new Error('리뷰 리스트를 불러오는 데 실패했습니다.');
+    throw new Error(createApiErrorMessage(response.status));
   }
 
   const data = await response.json();

frontend/src/constants/apiErrorMessage.ts

@@ -0,0 +1,15 @@
+interface ApiErrorMessages {
+  [key: number]: string;
+  serverError: string;
+}
+
+export const API_ERROR_MESSAGE: ApiErrorMessages = {
+  400: '잘못된 요청이에요.',
+  401: '인증을 실패했어요.',
+  403: '요청권한이 없어요.',
+  404: '요청하신 내용을 찾을 수 없어요.',
+  422: '올바르지 않은 데이터 형식이에요.',
+  serverError: '서버 오류가 발생했어요.',
+};
+
+export const SERVER_ERROR_REGEX = /^5\d{2}$/;

frontend/src/constants/index.ts

@@ -1 +1,3 @@
 export * from './page';
+export * from './apiErrorMessage';
+export * from './review';