🔀 폼 생성 api 통신 진행

src/app/api/form/[expo_id]/route.ts

@@ -0,0 +1,32 @@
+import { AxiosError } from 'axios';
+import { cookies } from 'next/headers';
+import { NextResponse } from 'next/server';
+import { apiClient } from '@/shared/libs/apiClient';
+
+export async function POST(
+  request: Request,
+  { params }: { params: { expo_id: number } },
+) {
+  const body = await request.json();
+  const { expo_id } = params;
+  const cookieStore = cookies();
+  const accessToken = cookieStore.get('accessToken')?.value;
+  const config = accessToken
+    ? {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    : {};
+  try {
+    const response = await apiClient.post(`/form/${expo_id}`, body, config);
+    return NextResponse.json(response.data);
+  } catch (error) {
+    const axiosError = error as AxiosError<{ message: string }>;
+
+    const status = axiosError.response?.status;
+    const message = axiosError.response?.data?.message;
+
+    return NextResponse.json({ error: message }, { status });
+  }
+}

src/views/create-form/api/createForm.ts

@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+export const createForm = async ({
+  data,
+  id,
+}: {
+  data: {
+    informationImage: string;
+    participantType: string;
+    dynamicForm: {
+      title: string;
+      formType: string;
+      jsonData: Record<string, string>;
+    }[];
+  };
+  id: string;
+}) => {
+  const response = await axios.post(`/api/form/${id}`, data);
+  return response;
+};

src/views/create-form/model/useCreateForm.ts

@@ -0,0 +1,34 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+import { toast } from 'react-toastify';
+import { createForm } from '../api/createForm';
+import { formCreateRouter } from './formCreateRouter';
+
+export const useCreateForm = (
+  id: string,
+  navigation: string | null,
+  router: AppRouterInstance,
+) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['createForm', id, navigation],
+    mutationFn: (formattedData: {
+      informationImage: string;
+      participantType: string;
+      dynamicForm: {
+        title: string;
+        formType: string;
+        jsonData: Record<string, string>;
+      }[];
+    }) => createForm({ data: formattedData, id }),
+    onSuccess: () => {
+      toast.success('폼이 생성되었습니다.');
+      formCreateRouter({ id, navigation, router });
+      queryClient.resetQueries({ queryKey: ['createForm', id, navigation] });
+    },
+    onError: () => {
+      toast.error('폼 생성에 실패했습니다.');
+    },
+  });
+};

src/views/create-form/ui/createForm/index.tsx

@@ -9,8 +9,8 @@ import { FormValues, Option } from '@/shared/types/create-form/type';
 import { Button, PageHeader } from '@/shared/ui';
 import FormContainer from '@/widgets/create-form/ui/FormContainer';
 import { Header } from '@/widgets/layout';
-import { formCreateRouter } from '../../model/formCreateRouter';
 import { selectOptionData } from '../../model/selectOptionData';
+import { useCreateForm } from '../../model/useCreateForm';
 
 const CreateForm = ({ id }: { id: string }) => {
   const router = useRouter();
@@ -28,21 +28,30 @@ const CreateForm = ({ id }: { id: string }) => {
     name: 'questions',
   });
 
-  const onSubmit = (data: FormValues) => {
-    const formattedData = data.questions.map((question) => ({
-      title: question.title,
-      formType: question.formType,
-      jsonData: question.options.reduce(
-        (acc, option, index) => {
-          acc[(index + 1).toString()] = option.value;
-          return acc;
-        },
-        {} as Record<string, string>,
-      ),
-    }));
+  const {
+    mutate: createForm,
+    isPending,
+    isSuccess,
+  } = useCreateForm(id, navigation, router);
 
+  const onSubmit = (data: FormValues) => {
+    const formattedData = {
+      informationImage: '',
+      participantType: navigation?.toUpperCase() || 'STANDARD',
+      dynamicForm: data.questions.map((question) => ({
+        title: question.title,
+        formType: question.formType,
+        jsonData: question.options.reduce(
+          (acc, option, index) => {
+            acc[(index + 1).toString()] = option.value;
+            return acc;
+          },
+          {} as Record<string, string>,
+        ),
+      })),
+    };
     console.log(formattedData);
-    formCreateRouter({ id, navigation, router });
+    createForm(formattedData);
   };
 
   const navigationTitles: Record<string, string> = {
@@ -85,7 +94,11 @@ const CreateForm = ({ id }: { id: string }) => {
             append({ title: '', formType: 'SENTENCE', options: [] });
           }}
         />
-        <Button type="submit" text="다음" />
+        <Button
+          type="submit"
+          text={isPending ? '제출 중...' : '다음'}
+          disabled={isPending || isSuccess}
+        />
       </form>
     </div>
   );