From 70d45e4ddd3f1ea0f1b73d38d1adb7c972557e4f Mon Sep 17 00:00:00 2001 From: MOON Date: Tue, 23 Jul 2024 14:02:18 +0900 Subject: [PATCH 1/7] =?UTF-8?q?:sparkles:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EC=9D=91=EB=8B=B5=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=8A=A4=ED=82=A4=EB=A7=88=20=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/schema/auth.ts | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/schema/auth.ts b/src/schema/auth.ts index 0c287eeb..87fb2942 100644 --- a/src/schema/auth.ts +++ b/src/schema/auth.ts @@ -1,6 +1,7 @@ -import z from 'zod'; +import * as z from 'zod'; const PWD_VALIDATION_REGEX = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$/; + export const PostSignUpRequest = z .object({ email: z.string().min(1, { message: '이메일은 필수 입력입니다.' }).email({ message: '이메일 형식으로 작성해 주세요.' }), @@ -17,4 +18,22 @@ export const PostSignUpRequest = z path: ['passwordConfirmation'], }); +const User = z.object({ + id: z.number(), + email: z.string().email(), + nickname: z.string(), + teamId: z.string(), + updatedAt: z.coerce.date(), + createdAt: z.coerce.date(), + image: z.string(), +}); + +// TODO: 나중에 signin, signup의 response가 같아 같은 이름으로 통일 할 예정 +export const PostAuthResponse = z.object({ + accessToken: z.string(), + refreshToken: z.string(), + user: User, +}); + export type PostSignUpRequestType = z.infer; +export type PostAuthResponseType = z.infer; From f79b702aed27254519bc4f7ab02ba8375ece83fd Mon Sep 17 00:00:00 2001 From: MOON Date: Tue, 23 Jul 2024 14:03:57 +0900 Subject: [PATCH 2/7] =?UTF-8?q?:sparkles:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20api=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/auth.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/apis/auth.ts diff --git a/src/apis/auth.ts b/src/apis/auth.ts new file mode 100644 index 00000000..16214f0a --- /dev/null +++ b/src/apis/auth.ts @@ -0,0 +1,11 @@ +import type { PostSignUpRequestType, PostAuthResponseType } from '@/schema/auth'; +import httpClient from '.'; + +// TODO: signin, signup 단어가 비슷해 login, register로 바꿀 예정 + +const postSignup = async (request: PostSignUpRequestType): Promise => { + const response = await httpClient.post('/auth/signUp', request); + return response.data; +}; + +export default postSignup; From 8ba0103ed2f28abb2ba14070a5144de5a4a226bc Mon Sep 17 00:00:00 2001 From: MOON Date: Tue, 23 Jul 2024 14:04:50 +0900 Subject: [PATCH 3/7] =?UTF-8?q?:sparkles:=20useRegisterMutation=20hook=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useRegisterMutation.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/hooks/useRegisterMutation.ts diff --git a/src/hooks/useRegisterMutation.ts b/src/hooks/useRegisterMutation.ts new file mode 100644 index 00000000..8748ffb0 --- /dev/null +++ b/src/hooks/useRegisterMutation.ts @@ -0,0 +1,19 @@ +import postSignup from '@/apis/auth'; +import { useMutation } from '@tanstack/react-query'; +import { useRouter } from 'next/router'; + +const useRegisterMutation = () => { + const router = useRouter(); + + return useMutation({ + mutationFn: postSignup, + onSuccess: (data) => { + localStorage.setItem('accessToken', data.accessToken); + localStorage.setItem('refreshToken', data.refreshToken); + router.push('/'); + }, + onError: () => {}, + }); +}; + +export default useRegisterMutation; From e5efa3e6e324365c8d2092193718ee77e679f915 Mon Sep 17 00:00:00 2001 From: MOON Date: Tue, 23 Jul 2024 14:06:12 +0900 Subject: [PATCH 4/7] =?UTF-8?q?:zap:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=ED=8F=BC=EC=97=90=20mutaion=20hook=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/auth/SignUp.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/auth/SignUp.tsx b/src/pages/auth/SignUp.tsx index 2465c7ec..e6c52906 100644 --- a/src/pages/auth/SignUp.tsx +++ b/src/pages/auth/SignUp.tsx @@ -6,8 +6,11 @@ import { useForm } from 'react-hook-form'; import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; +import useRegisterMutation from '@/hooks/useRegisterMutation'; export default function SignUp() { + const mutationRegister = useRegisterMutation(); + const form = useForm({ resolver: zodResolver(PostSignUpRequest), mode: 'onBlur', @@ -28,7 +31,7 @@ export default function SignUp() {
- + mutationRegister.mutate(values))} className='flex flex-col items-center w-full h-full px-6'> Date: Tue, 23 Jul 2024 15:40:40 +0900 Subject: [PATCH 5/7] =?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 4e9e01a53e23855cd1f4b8f86ecd719a4122dccf Mon Sep 17 00:00:00 2001 From: MOON Date: Tue, 23 Jul 2024 15:41:40 +0900 Subject: [PATCH 6/7] =?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/useRegisterMutation.ts | 35 +++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/src/hooks/useRegisterMutation.ts b/src/hooks/useRegisterMutation.ts index 8748ffb0..302ca05a 100644 --- a/src/hooks/useRegisterMutation.ts +++ b/src/hooks/useRegisterMutation.ts @@ -1,6 +1,8 @@ import postSignup from '@/apis/auth'; +import { toast } from '@/components/ui/use-toast'; import { useMutation } from '@tanstack/react-query'; import { useRouter } from 'next/router'; +import { AxiosError } from 'axios'; const useRegisterMutation = () => { const router = useRouter(); @@ -12,7 +14,38 @@ const useRegisterMutation = () => { localStorage.setItem('refreshToken', data.refreshToken); router.push('/'); }, - onError: () => {}, + onError: (error: AxiosError) => { + if (!error.response) { + toast({ + description: '네트워크 오류가 발생했습니다. 인터넷 연결을 확인해주세요.', + className: 'border-state-error text-state-error font-semibold', + }); + return; + } + + const { status } = error.response; + + if (status === 400) { + toast({ + description: '이미 사용중인 이메일입니다.', + className: 'border-state-error text-state-error font-semibold', + }); + return; + } + + if (status === 500) { + toast({ + description: '이미 존재하는 닉네임입니다.', + className: 'border-state-error text-state-error font-semibold', + }); + return; + } + + toast({ + description: '알 수 없는 오류가 발생했습니다. 잠시 후 다시 시도해주세요.', + className: 'border-state-error text-state-error font-semibold', + }); + }, }); }; From ea2264f2384dfae496765c8f0a4bd0f309002dbe Mon Sep 17 00:00:00 2001 From: MOON Date: Wed, 24 Jul 2024 20:03:19 +0900 Subject: [PATCH 7/7] =?UTF-8?q?:zap:=20isAxiosError=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useRegisterMutation.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/hooks/useRegisterMutation.ts b/src/hooks/useRegisterMutation.ts index 302ca05a..d8db666e 100644 --- a/src/hooks/useRegisterMutation.ts +++ b/src/hooks/useRegisterMutation.ts @@ -2,7 +2,7 @@ import postSignup from '@/apis/auth'; import { toast } from '@/components/ui/use-toast'; import { useMutation } from '@tanstack/react-query'; import { useRouter } from 'next/router'; -import { AxiosError } from 'axios'; +import { isAxiosError } from 'axios'; const useRegisterMutation = () => { const router = useRouter(); @@ -14,8 +14,8 @@ const useRegisterMutation = () => { localStorage.setItem('refreshToken', data.refreshToken); router.push('/'); }, - onError: (error: AxiosError) => { - if (!error.response) { + onError: (error) => { + if (!isAxiosError(error)) { toast({ description: '네트워크 오류가 발생했습니다. 인터넷 연결을 확인해주세요.', className: 'border-state-error text-state-error font-semibold', @@ -23,7 +23,7 @@ const useRegisterMutation = () => { return; } - const { status } = error.response; + const { status } = error.response || {}; if (status === 400) { toast({