Feature/#242 로그인 버그 픽스

src/app/api/fetcher.ts

@@ -50,7 +50,7 @@ export const fetcher = (options?: FetcherOptions) => {
       if (interceptors?.response) {
         response = await interceptors.response(response);
       }
-      return await response.json();
+      return { ok: true, body: await response.json() };
     } catch (error) {
       let message = '';
       if (error instanceof Error) message = error.message;

src/app/api/login.ts

@@ -3,12 +3,10 @@ import { fetcher } from '@/app/api/fetcher';
 
 const loginFetcher = fetcher();
 
-const postGoogleLoginFetch = () => {
-  return async (code: string | null) =>
-    loginFetcher('/login/google', {
-      method: 'POST',
-      body: { code },
-    });
-};
+const postGoogleLogin = (code: string | null) =>
+  loginFetcher('/login/google', {
+    method: 'POST',
+    body: { code },
+  });
 
-export { postGoogleLoginFetch };
+export { postGoogleLogin };

src/app/oauth2/code/google/page.tsx

@@ -2,8 +2,9 @@
 
 import { useSetAtom } from 'jotai';
 import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 
-import { postGoogleLoginFetch } from '@/app/api/login';
+import { postGoogleLogin } from '@/app/api/login';
 import { userAtom } from '@/atom';
 
 const Page = ({ searchParams }: { searchParams: { code: string } }) => {
@@ -12,19 +13,22 @@ const Page = ({ searchParams }: { searchParams: { code: string } }) => {
 
   const setUser = useSetAtom(userAtom);
 
-  const login = postGoogleLoginFetch();
-  login(code).then((res) => {
-    if (res?.ok) {
-      setUser({
-        memberId: res.body?.memberId,
-        token: res.body?.token,
-        isLogin: true,
+  useEffect(() => {
+    if (code) {
+      postGoogleLogin(code).then((res) => {
+        if (res?.ok) {
+          setUser({
+            memberId: res.body?.memberId,
+            token: res.body?.token,
+            isLogin: true,
+          });
+        } else {
+          alert(res?.body?.message || '알 수 없는 오류가 발생했습니다.');
+        }
+        router.replace('/');
       });
-    } else {
-      alert(res.body.message);
     }
-    router.replace('/');
-  });
+  }, [code, router, setUser]);
 
   return <div />;
 };

src/containers/main/GoogleLoginButton/index.tsx

@@ -1,5 +1,6 @@
 import { Image, Button, Box } from '@chakra-ui/react';
 import { useAtomValue } from 'jotai';
+import { useEffect, useState } from 'react';
 
 import { userAtom } from '@/atom';
 
@@ -12,8 +13,13 @@ const GOOGLE_LOGIN_URL =
 
 const GoogleLoginButton = () => {
   const user = useAtomValue(userAtom);
+  const [isMounted, setIsMounted] = useState(false);
 
-  if (user.isLogin) {
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted || user.isLogin) {
     return <Box h={{ base: '8', lg: '10', '2xl': '14' }} />;
   }
   return (