Feat/128/edit crew api 연결

package.json

@@ -34,6 +34,7 @@
     "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({});

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

@@ -2,27 +2,31 @@
 
 import { useEffect, useState } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
+import useFormPersist from 'react-hook-form-persist';
 import { useRouter } from 'next/navigation';
 import { NumberInput } from '@mantine/core';
+import { getImageUrl } from '@/src/_apis/image/get-image-url';
 import categoryData from '@/src/data/category.json';
 import regionData from '@/src/data/region.json';
 import Button from '@/src/components/common/input/button';
 import DropDown from '@/src/components/common/input/drop-down';
 import FileInputWrap from '@/src/components/common/input/file-input-wrap';
 import TextInput from '@/src/components/common/input/text-input';
 import Textarea from '@/src/components/common/input/textarea';
-import { CreateCrewFormTypes } from '@/src/types/create-crew';
+import { CreateCrewFormTypes, EditCrewResponseTypes } from '@/src/types/create-crew';
 import ImgCrewSampleUrls from '@/public/assets/images/crew-sample';
 
 export interface CreateCrewFormProps {
-  data: CreateCrewFormTypes;
+  type: 'create' | 'edit';
+  data: CreateCrewFormTypes | EditCrewResponseTypes;
   isEdit?: boolean;
   onEdit?: (data: CreateCrewFormTypes) => void;
   onSubmit?: (data: CreateCrewFormTypes) => void;
 }
 
 export default function CreateCrewForm({
-  isEdit = false,
+  type,
+  isEdit,
   onEdit = () => {},
   onSubmit = () => {},
   data,
@@ -34,18 +38,29 @@ export default function CreateCrewForm({
     setValue,
     trigger,
     clearErrors,
+    watch,
     formState: { errors, isValid, isSubmitting },
   } = useForm<CreateCrewFormTypes>({
     defaultValues: data,
     mode: 'onBlur',
   });
 
+  if (typeof window !== 'undefined') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useFormPersist('createCrew', {
+      watch,
+      setValue,
+      storage: window.localStorage,
+    });
+  }
+
   const [categoryIndex, setCategoryIndex] = useState(0);
   const [regionIndex, setRegionIndex] = useState(0);
 
   const title = useWatch({ control, name: 'title' });
   const mainCategory = useWatch({ control, name: 'mainCategory' });
   const mainLocation = useWatch({ control, name: 'mainLocation' });
+  const subLocation = useWatch({ control, name: 'subLocation' });
   const introduce = useWatch({ control, name: 'introduce' });
 
   const handleMainCategoryChange = (newValue: string | null) => {
@@ -59,13 +74,40 @@ export default function CreateCrewForm({
     setValue('subLocation', null);
     clearErrors('subLocation');
   };
+
+  const handleFileChange = async (
+    file: File | string | null,
+    onChange: (value: string | File) => void,
+  ) => {
+    if (file instanceof File) {
+      const imgResponse = await getImageUrl(file, 'CREW');
+      onChange(imgResponse?.imageUrl || '');
+    }
+  };
+
+  const handleClear = () => {
+    setValue('title', '');
+    setValue('mainCategory', '');
+    setValue('subCategory', '');
+    setValue('imageUrl', '');
+    setValue('mainLocation', '');
+    setValue('subLocation', '');
+    setValue('totalCount', 4);
+    setValue('introduce', '');
+    localStorage.removeItem('createCrew');
+    router.back();
+  };
+
   useEffect(() => {
     setCategoryIndex(categoryData.findIndex((category) => category.title.label === mainCategory));
     setRegionIndex(regionData.findIndex((region) => region.main.label === mainLocation));
+    if (isEdit && subLocation === '') {
+      setValue('subLocation', '전체');
+    }
   }, [mainCategory, mainLocation]);
 
   return (
-    <form onSubmit={isEdit ? handleSubmit(onEdit) : handleSubmit(onSubmit)}>
+    <form onSubmit={type === 'edit' ? handleSubmit(onEdit) : handleSubmit(onSubmit)}>
       <div className="flex flex-col gap-6">
         <div className="flex flex-col gap-3">
           <div className="flex justify-between">
@@ -105,7 +147,6 @@ export default function CreateCrewForm({
             )}
           />
         </div>
-
         <div className="flex flex-col gap-3">
           <label
             htmlFor="crew-category"
@@ -123,7 +164,7 @@ export default function CreateCrewForm({
                   {...field}
                   variant="default"
                   inWhere="form"
-                  placeholder="메인 카테고리"
+                  placeholder={isEdit ? field.value : '메인 카테고리'}
                   data={categoryData.map((category) => category.title)}
                   className="flex-1"
                   onChange={(value) => {
@@ -142,7 +183,7 @@ export default function CreateCrewForm({
                   {...field}
                   variant="default"
                   inWhere="form"
-                  placeholder="세부 카테고리"
+                  placeholder={isEdit && field.value ? field.value : '세부 카테고리'}
                   data={categoryData[categoryIndex]?.items || []}
                   className="flex-1"
                   error={errors.subCategory?.message}
@@ -179,6 +220,7 @@ export default function CreateCrewForm({
                 isEdit={isEdit}
                 sample={ImgCrewSampleUrls}
                 onChange={(newValue) => {
+                  handleFileChange(newValue, field.onChange);
                   field.onChange(newValue);
                   trigger('imageUrl');
                 }}
@@ -205,7 +247,7 @@ export default function CreateCrewForm({
                   {...field}
                   variant="default"
                   inWhere="form"
-                  placeholder="특별시/도"
+                  placeholder={isEdit ? field.value : '특별시/도'}
                   data={regionData.map((region) => region.main)}
                   className="flex-1"
                   onChange={(value) => {
@@ -225,7 +267,7 @@ export default function CreateCrewForm({
                   {...field}
                   variant="default"
                   inWhere="form"
-                  placeholder="시/군/구"
+                  placeholder={isEdit && field.value ? field.value : '시/군/구'}
                   data={regionData[regionIndex]?.areas || []}
                   className="flex-1"
                   error={errors.subLocation?.message}
@@ -271,7 +313,7 @@ export default function CreateCrewForm({
               크루 소개
             </label>
             <span>
-              <span className="text-blue-500">{introduce.length}</span>/100
+              <span className="text-blue-500">{introduce?.length}</span>/100
             </span>
           </div>
           <Controller
@@ -293,11 +335,11 @@ export default function CreateCrewForm({
             disabled={!isValid || isSubmitting}
             className="btn-filled h-11 flex-1 text-base font-medium disabled:bg-gray-200"
           >
-            {isEdit ? '수정' : '확인'}
+            {type === 'create' ? '만들기' : '수정'}
           </Button>
           <Button
             type="button"
-            onClick={() => router.back()}
+            onClick={handleClear}
             className="btn-outlined h-11 w-29.5 flex-1 text-base font-medium text-blue-500"
           >
             취소