Feat/128/edit crew api 연결

package.json

@@ -27,13 +27,15 @@
     "@storybook/test": "^8.3.5",
     "@tanstack/react-query": "^5.59.16",
     "@tanstack/react-query-next-experimental": "^5.59.19",
+    "@vercel/speed-insights": "^1.1.0",
     "dayjs": "^1.11.13",
     "embla-carousel-react": "^7.1.0",
     "framer-motion": "^11.11.9",
     "next": "14.2.15",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.53.1",
+    "react-hook-form-persist": "^3.0.0",
     "react-intersection-observer": "^9.13.1",
     "react-toastify": "^10.0.6",
     "zustand": "^5.0.1"

src/_apis/crew/crew.ts

@@ -1,19 +1,21 @@
 import { fetchApi } from '@/src/utils/api';
-import { CreateCrewRequestTypes, CreateCrewResponseTypes } from '@/src/types/create-crew';
+import {
+  CreateCrewRequestTypes,
+  CreateCrewResponseTypes,
+  EditCrewRequestTypes,
+  EditCrewResponseTypes,
+} from '@/src/types/create-crew';
 
 export async function createCrew(data: CreateCrewRequestTypes) {
   try {
-    const response: { data: CreateCrewResponseTypes; status: number } = await fetchApi(
-      `/api/crews`,
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include', // Include authentication credentials
-        body: JSON.stringify(data),
+    const response: { data: CreateCrewResponseTypes } = await fetchApi(`/api/crews`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
       },
-    );
+      credentials: 'include', // Include authentication credentials
+      body: JSON.stringify(data),
+    });
     if (!response.data) {
       throw new Error('Failed to create crew: No data received');
     }
@@ -23,3 +25,18 @@ export async function createCrew(data: CreateCrewRequestTypes) {
     throw error;
   }
 }
+
+export async function editCrew(id: number, data: EditCrewRequestTypes) {
+  try {
+    await fetchApi(`/api/crews/${id}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include', // Include authentication credentials
+      body: JSON.stringify(data),
+    });
+  } catch (error) {
+    throw error;
+  }
+}

src/_queries/crew/crew-detail-queries.ts

@@ -1,9 +1,53 @@
-import { useQuery } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+import { useRouter } from 'next/navigation';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createCrew, editCrew } from '@/src/_apis/crew/crew';
 import { getCrewDetail } from '@/src/_apis/crew/crew-detail-apis';
+import { CreateCrewRequestTypes, EditCrewRequestTypes } from '@/src/types/create-crew';
 
 export function useGetCrewDetailQuery(id: number) {
   return useQuery({
     queryKey: ['crewDetail', id],
     queryFn: () => getCrewDetail(id),
   });
 }
+
+export function useCreateCrewQuery() {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: CreateCrewRequestTypes) => createCrew(data),
+    onSuccess: (data) => {
+      if (data === null || data === undefined) {
+        return;
+      }
+      queryClient.invalidateQueries({ queryKey: ['crewLists', 'crewDetail'] });
+      toast.success('크루가 생성되었습니다.');
+      router.push(`/crew/detail/${data.crewId}`);
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+}
+
+export function useEditCrewQuery(id: number) {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: EditCrewRequestTypes) => editCrew(id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['crewDetail'] });
+      toast.success('크루 정보가 수정되었습니다.');
+      if (router) {
+        router.push(`/crew/detail/${id}`);
+      }
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+    retry: false,
+  });
+}

src/app/_components/category/category-container/index.tsx → src/app/(crew)/_components/category/category-container/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import category from '@/src/data/category.json';
-import InternalCategory from '@/src/app/_components/category/internal-category';
-import MainCategory from '@/src/app/_components/category/main-category';
+import InternalCategory from '@/src/app/(crew)/_components/category/internal-category';
+import MainCategory from '@/src/app/(crew)/_components/category/main-category';
 
 export interface CategoryContainerProps {
   mainCategory: string;

src/app/(crew)/crew/_components/create-crew-form/create-crew-form.stories.tsx → src/app/(crew)/crew/create/_components/create-crew-form/create-crew-form.stories.tsx

@@ -31,7 +31,7 @@ export default {
 } as Meta<typeof CreateCrewForm>;
 
 const Template: StoryFn<CreateCrewFormTypes> = function CreateCrewPageStory() {
-  return <CreateCrewForm data={initialValue} />;
+  return <CreateCrewForm data={initialValue} type="create" />;
 };
 
 export const Default = Template.bind({});