Merge pull request #214 from BCSDLab/feature/#212

[공통] ERROR 컨벤션 지정

.github/workflows/PICK_REVIEWER.yml

@@ -51,12 +51,6 @@ jobs:
               core.setOutput('reviewer2GithubName', reviewer2.githubName);
             }
 
-      - name: test valiable
-        uses: actions/github-script@v7
-        with: 
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: console.log(${{ steps.pick_random_reviewer.outputs.reviewer1Name }})
-
       - name: Add Reviewers
         uses: madrapps/add-reviewers@v1
         with:

src/api/index.ts

@@ -1,8 +1,10 @@
+/* eslint-disable @typescript-eslint/no-throw-literal */
 /* eslint-disable no-param-reassign */
 /* eslint-disable no-underscore-dangle */
-import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import API_PATH from 'config/constants';
 import { RefreshParams, RefreshResponse } from 'model/auth';
+import { CustomAxiosError, KoinError } from 'model/error';
 
 const client = axios.create({
   baseURL: `${API_PATH}`,
@@ -51,20 +53,46 @@ accessClient.interceptors.request.use(
   },
 );
 
+function isAxiosErrorWithResponseData(error: AxiosError<KoinError>) {
+  const { response } = error;
+  return response?.status !== undefined
+    && response.data.code !== undefined
+    && response.data.message !== undefined;
+}
+
+function createKoinErrorFromAxiosError(error: AxiosError<KoinError>): KoinError | CustomAxiosError {
+  if (isAxiosErrorWithResponseData(error)) {
+    const koinError = error.response!;
+    return {
+      type: 'KOIN_ERROR',
+      status: koinError.status,
+      code: koinError.data.code,
+      message: koinError.data.message,
+    };
+  }
+  return {
+    type: 'AXIOS_ERROR',
+    ...error,
+  };
+}
+
+client.interceptors.response.use(
+  (response) => response,
+  async (error) => { throw createKoinErrorFromAxiosError(error); },
+);
+
 accessClient.interceptors.response.use(
   (response) => response,
   async (error) => {
-    if (error.message) return Promise.reject(error.message);
-
     const originalRequest = error.config;
 
-    // accessToken만료시 새로운 accessToken으로 재요청
+    // accessToken 만료시 새로운 accessToken으로 재요청
     if (error.response?.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
-
       return refresh(originalRequest);
     }
-    return Promise.reject(error);
+
+    throw createKoinErrorFromAxiosError(error);
   },
 );
 
@@ -74,4 +102,10 @@ multipartClient.interceptors.request.use(
     return config;
   },
 );
+
+multipartClient.interceptors.response.use(
+  (response) => response,
+  async (error) => { throw createKoinErrorFromAxiosError(error); },
+);
+
 export { client, accessClient, multipartClient };

src/model/error/index.ts

@@ -0,0 +1,12 @@
+import { AxiosError } from 'axios';
+
+export interface KoinError {
+  type: 'KOIN_ERROR';
+  status: number;
+  code: number;
+  message: string;
+}
+
+export interface CustomAxiosError extends AxiosError {
+  type: 'AXIOS_ERROR';
+}

src/query/auth.ts

@@ -9,6 +9,7 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useErrorMessageStore } from 'store/errorMessageStore';
 import usePrevPathStore from 'store/path';
+import { isKoinError } from 'utils/ts/isKoinError';
 import useStepStore from 'store/useStepStore';
 
 interface VerifyInput {
@@ -57,10 +58,13 @@ export const useLogin = () => {
         navigate('/store-registration');
       }
     },
-    onError: (err: AxiosError<ErrorResponse>) => {
-      sessionStorage.removeItem('access_token');
-      localStorage.removeItem('refresh_token');
-      setLoginError(err.response?.data.message || err.message);
+    onError: (err: unknown) => {
+      if (isKoinError(err)) {
+        // TODO: 분기별 에러 처리
+        sessionStorage.removeItem('access_token');
+        localStorage.removeItem('refresh_token');
+        setLoginError(err.message || '로그인에 실패했습니다.');
+      }
     },
   });
 

src/utils/ts/isKoinError.ts

@@ -0,0 +1,10 @@
+import { KoinError } from 'model/error';
+
+export function isKoinError(error: unknown): error is KoinError {
+  try {
+    // 코인 서버 에러인지 아닌지를 확인
+    return (error as KoinError).type === 'KOIN_ERROR';
+  } catch {
+    return false;
+  }
+}