feat: add ResponseError class

src/apis/fetch.ts

@@ -1,3 +1,14 @@
+import { ErrorResponse } from '@interfaces/api';
+
+export class ResponseError extends Error {
+  errorData: ErrorResponse;
+
+  constructor(errorData: ErrorResponse) {
+    super();
+    this.errorData = errorData;
+  }
+}
+
 class Fetch {
   private baseURL: string;
   private accessToken: string | undefined;
@@ -18,7 +29,15 @@ class Fetch {
     return data;
   }
 
-  async post<T>({ path, headers, body }: { path: string; headers?: HeadersInit; body: object }) {
+  async post<TData>({
+    path,
+    headers,
+    body,
+  }: {
+    path: string;
+    headers?: HeadersInit;
+    body: object;
+  }) {
     const response = await fetch(`${this.baseURL}${path}`, {
       method: 'POST',
       headers: {
@@ -28,8 +47,14 @@ class Fetch {
       },
       body: JSON.stringify(body),
     });
-    const data: T = await response.json();
-    return data;
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new ResponseError(data);
+    }
+
+    return data as TData;
   }
 
   setAccessToken(token: string) {

src/hooks/useFunnel/useFunnel.tsx

@@ -20,7 +20,6 @@ const useFunnel = <Steps extends string[]>(
 
   const FunnelComponent = Object.assign(
     (props: Omit<FunnelProps<Steps>, 'steps' | 'step'>) => {
-      console.log('🚀 ~ file: useFunnel.tsx:21 ~ step:', step);
       return <Funnel<Steps> steps={steps} step={step} {...props} />;
     },
     { Step }

src/interfaces/api/index.ts

@@ -0,0 +1,11 @@
+export interface ErrorResponse {
+  abCode: string;
+  errorContent: ErrorContent;
+}
+
+interface ErrorContent {
+  message: string;
+  hint: string;
+  httpCode: number;
+  payload?: number;
+}

src/routes/Auth/kakao/KakaoLogin.tsx

@@ -3,6 +3,8 @@ import { useNavigate } from 'react-router';
 
 import { kakaoLogin } from '@apis/oauth/kakao';
 
+import { ResponseError } from '@apis/fetch';
+
 import { Container } from './KakaoLogin.styles';
 
 const KakaoLogin = () => {
@@ -12,11 +14,17 @@ const KakaoLogin = () => {
 
   const handleKakaoLogin = async () => {
     if (kakaoCode) {
-      const response = await kakaoLogin(kakaoCode);
-
-      if (response.accessToken) {
-        /** TBD */
-        response.newMember ? navigate('/onboard') : navigate('/');
+      try {
+        const response = await kakaoLogin(kakaoCode);
+        if (response && response.accessToken) {
+          response.newMember ? navigate('/onboard') : navigate('/');
+        }
+      } catch (err) {
+        if (err instanceof ResponseError) {
+          if (err.errorData.abCode === 'ILLEGAL_JOIN_STATUS') {
+            navigate(`/signup`, { state: { memberId: err.errorData.errorContent.payload } });
+          }
+        }
       }
     } else {
       throw new Error('code is invalid');

src/routes/Auth/signup/Signup.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import useFunnel from '@hooks/useFunnel/useFunnel';
 
@@ -7,6 +8,8 @@ import 약관동의 from './약관동의';
 import 정보입력 from './정보입력';
 
 const Signup = () => {
+  const { state } = useLocation();
+
   const [registerData, setRegisterData] = useState();
   const steps = ['정보입력', '약관동의', '가입성공'];
   const [Funnel, setStep] = useFunnel(steps);