From 9608195283960634f754698d4e4422c3d74a2c19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 2 Jan 2024 18:59:50 +0900 Subject: [PATCH 1/4] feat: implement signup mutation --- src/apis/oauth/signup.ts | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 src/apis/oauth/signup.ts diff --git a/src/apis/oauth/signup.ts b/src/apis/oauth/signup.ts new file mode 100644 index 0000000..7b2dd66 --- /dev/null +++ b/src/apis/oauth/signup.ts @@ -0,0 +1,25 @@ +import { useMutation } from '@tanstack/react-query'; + +import client from '@apis/fetch'; + +interface SingnUpRequestDTO { + memberId: number; + nickname: string; + birth: string; + gender: string; + job: string; +} + +const signup = (req: SingnUpRequestDTO) => { + return client.post({ + path: '/auth/signup/profile', + body: req, + }); +}; + +const useSignup = () => { + return useMutation({ mutationFn: signup }); +}; + +export { useSignup }; +export type { SingnUpRequestDTO }; From bc14641896a63444f0eb4f3216edf196a5001bb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 2 Jan 2024 19:00:11 +0900 Subject: [PATCH 2/4] fix: replace id to InputType --- src/components/commons/RadioInput/RadioInput.tsx | 4 ++-- src/components/commons/SelectInput/SelectInput.tsx | 4 ++-- src/components/commons/TextInput/TextInput.tsx | 4 ++-- src/constants/form.ts | 9 +++++---- 4 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/commons/RadioInput/RadioInput.tsx b/src/components/commons/RadioInput/RadioInput.tsx index f2d99ed..b187144 100644 --- a/src/components/commons/RadioInput/RadioInput.tsx +++ b/src/components/commons/RadioInput/RadioInput.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { RegisterOptions, useFormContext } from 'react-hook-form'; -import { ConfigKeys } from 'src/constants/form'; +import { ConfigKeys, InputType } from 'src/constants/form'; import { styled } from 'styled-components'; import { colors } from '@styles/theme'; @@ -15,7 +15,7 @@ interface RadioOption { } interface RadioInputProps { - id: ConfigKeys; + id: InputType; options: RegisterOptions; radioOptions: RadioOption[]; } diff --git a/src/components/commons/SelectInput/SelectInput.tsx b/src/components/commons/SelectInput/SelectInput.tsx index ac83e4a..b08383a 100644 --- a/src/components/commons/SelectInput/SelectInput.tsx +++ b/src/components/commons/SelectInput/SelectInput.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { RegisterOptions, useFormContext } from 'react-hook-form'; -import { ConfigKeys } from 'src/constants/form'; +import { ConfigKeys, InputType } from 'src/constants/form'; import { styled } from 'styled-components'; import { colors } from '@styles/theme'; @@ -16,7 +16,7 @@ interface SelectOption { } interface SelectInputProps { - id: ConfigKeys; + id: InputType; options: RegisterOptions; selectOptions: SelectOption[]; placeholder: string; diff --git a/src/components/commons/TextInput/TextInput.tsx b/src/components/commons/TextInput/TextInput.tsx index 621848d..c0c24f0 100644 --- a/src/components/commons/TextInput/TextInput.tsx +++ b/src/components/commons/TextInput/TextInput.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { RegisterOptions, useFormContext } from 'react-hook-form'; -import { ConfigKeys } from 'src/constants/form'; +import { ConfigKeys, InputType } from 'src/constants/form'; import { colors } from '@styles/theme'; @@ -15,7 +15,7 @@ import { } from './TextInput.styles'; interface TextInputProps { - id: ConfigKeys; + id: InputType; options: RegisterOptions; placeholder: string; type?: React.HTMLInputTypeAttribute; diff --git a/src/constants/form.ts b/src/constants/form.ts index a127628..877a99a 100644 --- a/src/constants/form.ts +++ b/src/constants/form.ts @@ -5,13 +5,14 @@ interface ConfigField { } export const INPUT_TYPE = { - NICKNAME: 'NICKNAME', - BIRTHDAY: 'BIRTHDAY', - GENDER: 'GENDER', - JOB: 'JOB', + NICKNAME: 'nickname', + BIRTHDAY: 'birth', + GENDER: 'gender', + JOB: 'job', } as const; export type ConfigKeys = keyof typeof INPUT_TYPE; +export type InputType = (typeof INPUT_TYPE)[keyof typeof INPUT_TYPE]; export const CONFIG: Record = { NICKNAME: { From 3f15a57065056302c8036801ce319b2f1e453322 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 2 Jan 2024 19:00:25 +0900 Subject: [PATCH 3/4] feat: mutation on data filled --- ...225\353\263\264\354\236\205\353\240\245.tsx" | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git "a/src/routes/Auth/signup/\354\240\225\353\263\264\354\236\205\353\240\245.tsx" "b/src/routes/Auth/signup/\354\240\225\353\263\264\354\236\205\353\240\245.tsx" index 58f90ec..42c8a92 100644 --- "a/src/routes/Auth/signup/\354\240\225\353\263\264\354\236\205\353\240\245.tsx" +++ "b/src/routes/Auth/signup/\354\240\225\353\263\264\354\236\205\353\240\245.tsx" @@ -3,6 +3,7 @@ import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'; import { CONFIG, INPUT_TYPE } from 'src/constants/form'; import { GENDERS, JOBS } from 'src/constants/signup'; +import { SingnUpRequestDTO, useSignup } from '@apis/oauth/signup'; import { Col } from '@components/commons/Flex/Flex'; import InputField from '@components/commons/InputField/InputField'; import Layout from '@components/commons/Layout/Layout'; @@ -15,15 +16,11 @@ import { colors } from '@styles/theme'; import { FormContainer, NextButton } from './정보입력.styles'; -export interface SignUpForm { - NICKNAME: string; - BIRTHDAY: string; - GENDER: 'male' | 'female'; - JOB: string; -} +type SignupForm = Omit; -const 정보입력 = () => { - const methods = useForm({ mode: 'onChange' }); +const 정보입력 = ({ memberId }: { memberId: number }) => { + const methods = useForm>({ mode: 'onChange' }); + const signupMutation = useSignup(); const birthdayInput = methods.watch(INPUT_TYPE.BIRTHDAY); const nicknameProgress = methods.watch(INPUT_TYPE.NICKNAME) @@ -39,8 +36,8 @@ const 정보입력 = () => { } }; - const handleSubmitForm: SubmitHandler = (data) => { - console.log(data); + const handleSubmitForm: SubmitHandler = (data) => { + signupMutation.mutate({ ...data, memberId }); }; useEffect(() => { From 3c2c253fc568b036e1d7211ae7963db80ee3093a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=84=EC=A7=84=ED=98=B8?= Date: Tue, 2 Jan 2024 19:00:39 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20give=20memberId=20to=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=EC=9E=85=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/Auth/signup/Signup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Auth/signup/Signup.tsx b/src/routes/Auth/signup/Signup.tsx index 8322d68..16a5eb3 100644 --- a/src/routes/Auth/signup/Signup.tsx +++ b/src/routes/Auth/signup/Signup.tsx @@ -16,7 +16,7 @@ const Signup = () => { return ( - <정보입력 /> + <정보입력 memberId={state.memberId} /> <가입성공 />