From 29d1597eccd1ebe55615674ff3d8150251b1c551 Mon Sep 17 00:00:00 2001
From: badahertz52 <badahertz52@gmail.com>
Date: Wed, 31 Jul 2024 14:34:47 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20HTTP=20=EC=9A=94=EC=B2=AD=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=8B=9C=20status=20code=EB=B3=84=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=83=81=ED=99=A9=EC=9D=84=20=EB=8C=80=EC=9D=91?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=ED=95=A8=EC=88=98=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?(#151)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

* fix: 오타 수정
---
 frontend/src/apis/apiErrorMessageCreator.ts | 11 +++++++++++
 frontend/src/apis/review.ts                 | 10 +++++-----
 frontend/src/constants/apiErrorMessage.ts   | 15 +++++++++++++++
 frontend/src/constants/index.ts             |  2 ++
 4 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/apis/apiErrorMessageCreator.ts
 create mode 100644 frontend/src/constants/apiErrorMessage.ts

diff --git a/frontend/src/apis/apiErrorMessageCreator.ts b/frontend/src/apis/apiErrorMessageCreator.ts
new file mode 100644
index 000000000..fdfa231a3
--- /dev/null
+++ b/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;
diff --git a/frontend/src/apis/review.ts b/frontend/src/apis/review.ts
index 9790f0df0..9b7aa7366 100644
--- a/frontend/src/apis/review.ts
+++ b/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();
diff --git a/frontend/src/constants/apiErrorMessage.ts b/frontend/src/constants/apiErrorMessage.ts
new file mode 100644
index 000000000..2d65190a4
--- /dev/null
+++ b/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}$/;
diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
index c3a84df74..ade74ffe4 100644
--- a/frontend/src/constants/index.ts
+++ b/frontend/src/constants/index.ts
@@ -1 +1,3 @@
 export * from './page';
+export * from './apiErrorMessage';
+export * from './review';