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 }; 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: { 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} /> <가입성공 /> 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(() => {