feat: 카카오 로그인 실패 처리 구현

ShinjungOh · Jul 18, 2023 · 787845f · 787845f
1 parent 8716487
commit 787845f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 35 deletions.
diff --git a/src/main.tsx b/src/main.tsx
@@ -2,8 +2,4 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);
diff --git a/src/pages/AuthKakaoPage.tsx b/src/pages/AuthKakaoPage.tsx
@@ -3,25 +3,30 @@ import { useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router';
 import { PATH } from '@lib/const/path';
 import { ACCESS_TOKEN, USER } from '@lib/const/localstorage';
-import { http } from '../api/http';
+import { handleAxiosError, http } from '../api/http';
 
 export default function AuthKakaoPage() {
   const navigate = useNavigate();
   const [params] = useSearchParams();
   const code = params.get('code');
 
   const handleSigninKakao = useCallback(async () => {
-    const responseSignIn = await http.post<{ token: string; user: { name: string } }>('/user/oauth/kakao', { code });
-    const isSuccess = responseSignIn.success;
-
-    if (isSuccess && responseSignIn.data) {
-      const accessToken = responseSignIn.data.token;
-      const userProfile = {
-        name: responseSignIn.data.user.name,
-      };
-      localStorage.setItem(ACCESS_TOKEN, JSON.stringify(accessToken));
-      localStorage.setItem(USER, JSON.stringify(userProfile));
-      navigate(PATH.CALENDAR);
+    try {
+      const responseSignIn = await http.post<{ token: string; user: { name: string } }>('/user/oauth/kakao', { code });
+      const isSuccess = responseSignIn.success;
+      if (isSuccess && responseSignIn.data) {
+        const accessToken = responseSignIn.data.token;
+        const userProfile = {
+          name: responseSignIn.data.user.name,
+        };
+        localStorage.setItem(ACCESS_TOKEN, JSON.stringify(accessToken));
+        localStorage.setItem(USER, JSON.stringify(userProfile));
+        navigate(PATH.CALENDAR);
+      }
+    } catch (e) {
+      const error = handleAxiosError(e);
+      alert(error.msg);
+      navigate(PATH.HOME);
     }
   }, [code, navigate]);
 

diff --git a/src/pages/SigninPage.tsx b/src/pages/SigninPage.tsx
@@ -44,25 +44,27 @@ export default function SigninPage() {
   );
 
   const handleClickSignIn = async () => {
-    if (!isDisabledSubmit) {
-      try {
-        const responseSignIn = await http.post<{ user: { user_token: string; name: string } }>('/user/signin', {
-          email: user.email,
-          password: user.password,
-        });
-        if (responseSignIn.data) {
-          const accessToken = responseSignIn.data.user.user_token;
-          const userProfile = {
-            name: responseSignIn.data.user.name,
-          };
-          localStorage.setItem(ACCESS_TOKEN, JSON.stringify(accessToken));
-          localStorage.setItem(USER, JSON.stringify(userProfile));
-          navigate(PATH.CALENDAR);
-        }
-      } catch (e) {
-        const error = handleAxiosError(e);
-        alert(error.msg);
+    if (isDisabledSubmit) {
+      return;
+    }
+
+    try {
+      const responseSignIn = await http.post<{ user: { user_token: string; name: string } }>('/user/signin', {
+        email: user.email,
+        password: user.password,
+      });
+      if (responseSignIn.data) {
+        const accessToken = responseSignIn.data.user.user_token;
+        const userProfile = {
+          name: responseSignIn.data.user.name,
+        };
+        localStorage.setItem(ACCESS_TOKEN, JSON.stringify(accessToken));
+        localStorage.setItem(USER, JSON.stringify(userProfile));
+        navigate(PATH.CALENDAR);
       }
+    } catch (e) {
+      const error = handleAxiosError(e);
+      alert(error.msg);
     }
   };