Merge pull request #127 from team-offonoff/feat/signup-api

feat: 회원가입 폼 api 연결

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 };

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[];
 }

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;

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;

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<ConfigKeys, ConfigField> = {
   NICKNAME: {

src/routes/Auth/signup/Signup.tsx

@@ -16,7 +16,7 @@ const Signup = () => {
   return (
     <Funnel>
       <Funnel.Step name="정보입력">
-        <정보입력 />
+        <정보입력 memberId={state.memberId} />
       </Funnel.Step>
       <Funnel.Step name="가입성공">
         <가입성공 />

src/routes/Auth/signup/정보입력.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<SingnUpRequestDTO, 'memberId'>;
 
-const 정보입력 = () => {
-  const methods = useForm<SignUpForm>({ mode: 'onChange' });
+const 정보입력 = ({ memberId }: { memberId: number }) => {
+  const methods = useForm<Omit<SingnUpRequestDTO, 'memberId'>>({ 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<SignUpForm> = (data) => {
-    console.log(data);
+  const handleSubmitForm: SubmitHandler<SignupForm> = (data) => {
+    signupMutation.mutate({ ...data, memberId });
   };
 
   useEffect(() => {