diff --git a/src/app/api/fetcher.ts b/src/app/api/fetcher.ts index ddcb3fa5..9d8b7eac 100644 --- a/src/app/api/fetcher.ts +++ b/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; diff --git a/src/app/api/login.ts b/src/app/api/login.ts index 14a02bb5..ccf0f545 100644 --- a/src/app/api/login.ts +++ b/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 }; diff --git a/src/app/oauth2/code/google/page.tsx b/src/app/oauth2/code/google/page.tsx index ebb3c020..8289215d 100644 --- a/src/app/oauth2/code/google/page.tsx +++ b/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
; }; diff --git a/src/containers/main/GoogleLoginButton/index.tsx b/src/containers/main/GoogleLoginButton/index.tsx index 674a609a..5e861d3d 100644 --- a/src/containers/main/GoogleLoginButton/index.tsx +++ b/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