From a81913f6ccfcf6b23663dfc1fbde62c5576aaeef Mon Sep 17 00:00:00 2001 From: MOON Date: Mon, 22 Jul 2024 10:30:14 +0900 Subject: [PATCH 1/8] =?UTF-8?q?:fire:=20AuthLayout=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pageLayout/AuthLayout/AuthLayout.tsx | 5 ----- src/pages/auth/SignIn.tsx | 5 ++--- 2 files changed, 2 insertions(+), 8 deletions(-) delete mode 100644 src/pageLayout/AuthLayout/AuthLayout.tsx diff --git a/src/pageLayout/AuthLayout/AuthLayout.tsx b/src/pageLayout/AuthLayout/AuthLayout.tsx deleted file mode 100644 index 3cc64aa7..00000000 --- a/src/pageLayout/AuthLayout/AuthLayout.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { ReactNode } from 'react'; - -export default function AuthLayout({ children }: { children: ReactNode }) { - return
{children}
; -} diff --git a/src/pages/auth/SignIn.tsx b/src/pages/auth/SignIn.tsx index d19775e1..0724a6a5 100644 --- a/src/pages/auth/SignIn.tsx +++ b/src/pages/auth/SignIn.tsx @@ -1,6 +1,5 @@ import Image from 'next/image'; import Link from 'next/link'; -import AuthLayout from '@/pageLayout/AuthLayout/AuthLayout'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { useForm } from 'react-hook-form'; @@ -27,7 +26,7 @@ export default function SignIn() { // TODO: 나중에 컴포넌트 분리하기 return ( - +
logo @@ -100,6 +99,6 @@ export default function SignIn() { logo-kakao
- + ); } From d7cc6ad00e5380437ea43ac6efdd68596bf10426 Mon Sep 17 00:00:00 2001 From: MOON Date: Mon, 22 Jul 2024 10:35:23 +0900 Subject: [PATCH 2/8] =?UTF-8?q?:art:=20onSubmit=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=9D=B8=EB=9D=BC=EC=9D=B8=EC=9C=BC=EB=A1=9C=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/auth/SignIn.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/auth/SignIn.tsx b/src/pages/auth/SignIn.tsx index 0724a6a5..54845cc8 100644 --- a/src/pages/auth/SignIn.tsx +++ b/src/pages/auth/SignIn.tsx @@ -20,10 +20,6 @@ export default function SignIn() { }, }); - function onSubmit(values: PostSigninRequestType) { - mutationSignin.mutate(values); - } - // TODO: 나중에 컴포넌트 분리하기 return (
@@ -34,7 +30,7 @@ export default function SignIn() {
- + mutationSignin.mutate(values))} className='flex flex-col items-center lg:gap-6 gap-5 w-full px-6'>
Date: Mon, 22 Jul 2024 15:04:52 +0900 Subject: [PATCH 3/8] =?UTF-8?q?:recycle:=20=EC=9D=91=EB=8B=B5=20=EC=9D=B8?= =?UTF-8?q?=ED=84=B0=EC=85=89=ED=84=B0=EC=9D=98=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EB=B0=8F=20=ED=86=A0=ED=81=B0=20=EA=B0=B1?= =?UTF-8?q?=EC=8B=A0=20=EB=A1=9C=EC=A7=81=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/index.ts | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/src/apis/index.ts b/src/apis/index.ts index a1b6aaec..4167407d 100644 --- a/src/apis/index.ts +++ b/src/apis/index.ts @@ -27,23 +27,26 @@ httpClient.interceptors.response.use( if (!refreshToken) { window.location.href = '/auth/SignIn'; - } else { - httpClient - .post('/auth/refresh-token', null, { - headers: { Authorization: `Bearer ${refreshToken}` }, - }) - .then((response) => { - const { accessToken } = response.data; - const { refreshToken: newRefreshToken } = response.data; - localStorage.setItem('accessToken', accessToken); - localStorage.setItem('refreshToken', newRefreshToken); - }) - .catch(() => { - window.location.href = '/auth/SignIn'; - }); + return Promise.reject(error); } - } else { - throw new Error(error.response.status); + + return httpClient + .post('/auth/refresh-token', null, { + headers: { Authorization: `Bearer ${refreshToken}` }, + }) + .then((response) => { + const { accessToken, refreshToken: newRefreshToken } = response.data; + localStorage.setItem('accessToken', accessToken); + localStorage.setItem('refreshToken', newRefreshToken); + + const originalRequest = error.config; + return httpClient(originalRequest); + }) + .catch(() => { + window.location.href = '/auth/SignIn'; + return Promise.reject(error); + }); } + return Promise.reject(error); }, ); From 9f18429882161cf246dc6d540efa804d4f035791 Mon Sep 17 00:00:00 2001 From: MOON Date: Mon, 22 Jul 2024 15:14:44 +0900 Subject: [PATCH 4/8] =?UTF-8?q?:recycle:=20postSignin=20api=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=EC=B2=98=EB=A6=AC=20=EB=A1=9C=EC=A7=81=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/auth.ts | 25 ++----------------------- 1 file changed, 2 insertions(+), 23 deletions(-) diff --git a/src/apis/auth.ts b/src/apis/auth.ts index 60ba8f4d..8244a9b4 100644 --- a/src/apis/auth.ts +++ b/src/apis/auth.ts @@ -1,30 +1,9 @@ import type { PostSigninRequestType, PostSigninResponseType } from '@/schema/auth'; -import { AxiosError } from 'axios'; import httpClient from '.'; const postSignin = async (request: PostSigninRequestType): Promise => { - try { - const response = await httpClient.post('/auth/signIn', request); - return response.data; - } catch (error) { - if (error instanceof AxiosError) { - // Axios 에러인 경우 - const axiosError = error as AxiosError; - if (axiosError.response) { - // 서버에서 응답이 온 경우 (예: 4xx, 5xx) - throw new Error('로그인 요청 처리 중 문제가 발생했습니다.'); - } else if (axiosError.request) { - // 요청을 보냈지만 응답을 받지 못한 경우 - throw new Error('서버 응답을 받지 못했습니다. 잠시 후 다시 시도해 주세요.'); - } else { - // 요청을 설정하는 과정에서 문제가 발생한 경우 - throw new Error('로그인 요청을 처리하는 동안 문제가 발생했습니다.'); - } - } else { - // Axios 에러가 아닌 경우 (네트워크 문제 등) - throw new Error('알 수 없는 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.'); - } - } + const response = await httpClient.post('/auth/signIn', request); + return response.data; }; export default postSignin; From ba68251c24f450df20e417cfca93c69eefc4ac5f Mon Sep 17 00:00:00 2001 From: MOON Date: Mon, 22 Jul 2024 15:27:59 +0900 Subject: [PATCH 5/8] =?UTF-8?q?:fire:=20useSignin=20hook=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/userQueryHooks.ts | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/src/hooks/userQueryHooks.ts b/src/hooks/userQueryHooks.ts index 005fcf8c..7c28fe75 100644 --- a/src/hooks/userQueryHooks.ts +++ b/src/hooks/userQueryHooks.ts @@ -1,10 +1,8 @@ -import postSignin from '@/apis/auth'; import quries from '@/apis/queries'; import { updateMe } from '@/apis/user'; import { GetUserReponseType, GetUserRequestType, PatchMeRequestType } from '@/schema/user'; import { MutationOptions } from '@/types/query'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; -import { useRouter } from 'next/router'; export const useMeQuery = () => useQuery(quries.user.getMe()); @@ -23,21 +21,3 @@ export const useUpdateMe = (options: MutationOptions) => { }, }); }; - -export const useSignin = () => { - const router = useRouter(); - - return useMutation({ - mutationFn: postSignin, - onSuccess: (data) => { - localStorage.setItem('accessToken', data.accessToken); - localStorage.setItem('refreshToken', data.refreshToken); - router.push('/'); - }, - onError: (error) => { - // NOTE: 임시 테스트용 콘솔, 토스트 추가 예정 - /* eslint-disable no-console */ - console.error(error); - }, - }); -}; From 9b205a55f8fc40fd604e6cc588aaaf87420ecfbf Mon Sep 17 00:00:00 2001 From: MOON Date: Mon, 22 Jul 2024 15:30:23 +0900 Subject: [PATCH 6/8] =?UTF-8?q?:truck:=20useSigninMutation=20hook=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F?= =?UTF-8?q?=20=ED=8C=8C=EC=9D=BC=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useSignInMutation.ts | 23 +++++++++++++++++++++++ src/pages/auth/SignIn.tsx | 4 ++-- 2 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 src/hooks/useSignInMutation.ts diff --git a/src/hooks/useSignInMutation.ts b/src/hooks/useSignInMutation.ts new file mode 100644 index 00000000..70e4d192 --- /dev/null +++ b/src/hooks/useSignInMutation.ts @@ -0,0 +1,23 @@ +import postSignin from '@/apis/auth'; +import { useMutation } from '@tanstack/react-query'; +import { useRouter } from 'next/router'; + +const useSigninMutation = () => { + const router = useRouter(); + + return useMutation({ + mutationFn: postSignin, + onSuccess: (data) => { + localStorage.setItem('accessToken', data.accessToken); + localStorage.setItem('refreshToken', data.refreshToken); + router.push('/'); + }, + onError: (error) => { + // NOTE: 임시 테스트용 콘솔, 토스트 추가 예정 + /* eslint-disable no-console */ + console.error(error); + }, + }); +}; + +export default useSigninMutation; diff --git a/src/pages/auth/SignIn.tsx b/src/pages/auth/SignIn.tsx index 54845cc8..400d0edd 100644 --- a/src/pages/auth/SignIn.tsx +++ b/src/pages/auth/SignIn.tsx @@ -6,10 +6,10 @@ import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form'; import { PostSigninRequest, PostSigninRequestType } from '@/schema/auth'; -import { useSignin } from '@/hooks/userQueryHooks'; +import useSigninMutation from '@/hooks/useSignInMutation'; export default function SignIn() { - const mutationSignin = useSignin(); + const mutationSignin = useSigninMutation(); // 폼 정의 const form = useForm({ resolver: zodResolver(PostSigninRequest), From 243e509622acf26c85c69a411a82fb00374d75b7 Mon Sep 17 00:00:00 2001 From: MOON Date: Mon, 22 Jul 2024 16:19:31 +0900 Subject: [PATCH 7/8] =?UTF-8?q?:sparkles:=20Toaster=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/_app.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 37d2f8d3..107acf01 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -3,6 +3,7 @@ import '@/styles/globals.css'; import type { AppProps } from 'next/app'; import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +import Toaster from '@/components/ui/toaster'; export default function App({ Component, pageProps }: AppProps) { const [queryClient] = React.useState(() => new QueryClient()); @@ -10,6 +11,7 @@ export default function App({ Component, pageProps }: AppProps) { + From 2c484baba3bd1a463e9fe5355d16e6124d1662ed Mon Sep 17 00:00:00 2001 From: MOON Date: Mon, 22 Jul 2024 16:20:21 +0900 Subject: [PATCH 8/8] =?UTF-8?q?:sparkles:=20toast=EB=A1=9C=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=EB=A9=94=EC=8B=9C=EC=A7=80=20=EB=9D=84=EC=9A=B0?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useSignInMutation.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/hooks/useSignInMutation.ts b/src/hooks/useSignInMutation.ts index 70e4d192..eaf9fd76 100644 --- a/src/hooks/useSignInMutation.ts +++ b/src/hooks/useSignInMutation.ts @@ -1,4 +1,5 @@ import postSignin from '@/apis/auth'; +import { toast } from '@/components/ui/use-toast'; import { useMutation } from '@tanstack/react-query'; import { useRouter } from 'next/router'; @@ -12,10 +13,8 @@ const useSigninMutation = () => { localStorage.setItem('refreshToken', data.refreshToken); router.push('/'); }, - onError: (error) => { - // NOTE: 임시 테스트용 콘솔, 토스트 추가 예정 - /* eslint-disable no-console */ - console.error(error); + onError: () => { + toast({ description: '이메일 혹은 비밀번호를 확인해주세요.', className: 'border-state-error text-state-error font-semibold' }); }, }); };