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,6 +2,7 @@
 
 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 categoryData from '@/src/data/category.json';
@@ -11,18 +12,19 @@ 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,
   onEdit = () => {},
   onSubmit = () => {},
   data,
@@ -34,18 +36,26 @@ export default function CreateCrewForm({
     setValue,
     trigger,
     clearErrors,
+    watch,
     formState: { errors, isValid, isSubmitting },
   } = useForm<CreateCrewFormTypes>({
     defaultValues: data,
     mode: 'onBlur',
   });
 
+  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) => {
@@ -62,10 +72,13 @@ export default function CreateCrewForm({
   useEffect(() => {
     setCategoryIndex(categoryData.findIndex((category) => category.title.label === mainCategory));
     setRegionIndex(regionData.findIndex((region) => region.main.label === mainLocation));
+    if (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 +118,6 @@ export default function CreateCrewForm({
             )}
           />
         </div>
-
         <div className="flex flex-col gap-3">
           <label
             htmlFor="crew-category"
@@ -123,7 +135,7 @@ export default function CreateCrewForm({
                   {...field}
                   variant="default"
                   inWhere="form"
-                  placeholder="메인 카테고리"
+                  placeholder={type === 'edit' ? field.value : '메인 카테고리'}
                   data={categoryData.map((category) => category.title)}
                   className="flex-1"
                   onChange={(value) => {
@@ -142,7 +154,7 @@ export default function CreateCrewForm({
                   {...field}
                   variant="default"
                   inWhere="form"
-                  placeholder="세부 카테고리"
+                  placeholder={type === 'edit' && field.value ? field.value : '세부 카테고리'}
                   data={categoryData[categoryIndex]?.items || []}
                   className="flex-1"
                   error={errors.subCategory?.message}
@@ -176,7 +188,7 @@ export default function CreateCrewForm({
             render={({ field }) => (
               <FileInputWrap
                 {...field}
-                isEdit={isEdit}
+                isEdit={type === 'edit'}
                 sample={ImgCrewSampleUrls}
                 onChange={(newValue) => {
                   field.onChange(newValue);
@@ -205,7 +217,7 @@ export default function CreateCrewForm({
                   {...field}
                   variant="default"
                   inWhere="form"
-                  placeholder="특별시/도"
+                  placeholder={type === 'edit' ? field.value : '특별시/도'}
                   data={regionData.map((region) => region.main)}
                   className="flex-1"
                   onChange={(value) => {
@@ -225,7 +237,7 @@ export default function CreateCrewForm({
                   {...field}
                   variant="default"
                   inWhere="form"
-                  placeholder="시/군/구"
+                  placeholder={type === 'edit' && field.value ? field.value : '시/군/구'}
                   data={regionData[regionIndex]?.areas || []}
                   className="flex-1"
                   error={errors.subLocation?.message}
@@ -271,7 +283,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,7 +305,7 @@ 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"

src/app/(crew)/crew/create/page.tsx

@@ -1,58 +1,43 @@
 'use client';
 
-import { toast } from 'react-toastify';
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
 import { Loader } from '@mantine/core';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { createCrew } from '@/src/_apis/crew/crew';
 import { getImageUrl } from '@/src/_apis/image/get-image-url';
-import CreateCrewForm from '@/src/app/(crew)/crew/_components/create-crew-form';
+import { useCreateCrewQuery } from '@/src/_queries/crew/crew-detail-queries';
+import CreateCrewForm from '@/src/app/(crew)/crew/create/_components/create-crew-form';
 import { CreateCrewFormTypes, CreateCrewRequestTypes } from '@/src/types/create-crew';
 import IcoCreateCrew from '@/public/assets/icons/ic-create-crew.svg';
 
 export default function CreateCrewPage() {
-  const router = useRouter();
+  const savedInfo = JSON.parse(localStorage.getItem('createCrew') ?? '');
   const initialValue: CreateCrewFormTypes = {
-    title: '',
-    mainCategory: '',
-    subCategory: null,
-    imageUrl: null,
-    mainLocation: '',
-    subLocation: null,
-    totalCount: 4,
-    introduce: '',
+    title: savedInfo?.title,
+    mainCategory: savedInfo?.mainCategory,
+    subCategory: savedInfo?.subCategory,
+    imageUrl: savedInfo?.imageUrl,
+    mainLocation: savedInfo?.mainLocation,
+    subLocation: savedInfo?.subLocation,
+    totalCount: savedInfo?.totalCount,
+    introduce: savedInfo?.introduce,
   };
-  const queryClient = useQueryClient();
-  const { isPending, mutate } = useMutation({
-    mutationFn: (data: CreateCrewRequestTypes) => createCrew(data),
-    onSuccess: (data) => {
-      if (data === null || data === undefined) {
-        return;
-      }
-      queryClient.invalidateQueries({ queryKey: ['crewLists', 'crewDetail'] });
-      router.push(`/crew/detail/${data.crewId}`);
-    },
-    onError: (error) => {
-      toast.error(error.message);
-    },
-  });
 
-  const handleSubmit = async (data: CreateCrewFormTypes) => {
-    let newImageUrl = data.imageUrl as string;
-    if (data.imageUrl instanceof File) {
-      const imgResponse = await getImageUrl(data.imageUrl, 'CREW');
+  const { isPending, mutate } = useCreateCrewQuery();
+
+  const handleSubmit = async (createdData: CreateCrewFormTypes) => {
+    let newImageUrl = createdData.imageUrl as string;
+    if (createdData.imageUrl instanceof File) {
+      const imgResponse = await getImageUrl(createdData.imageUrl, 'CREW');
       newImageUrl = imgResponse?.imageUrl as string;
     }
     const newData: CreateCrewRequestTypes = {
-      title: data.title,
-      mainCategory: data.mainCategory,
-      subCategory: data.subCategory ?? '',
+      title: createdData.title,
+      mainCategory: createdData.mainCategory,
+      subCategory: createdData.subCategory ?? '',
       imageUrl: newImageUrl ?? '',
-      mainLocation: data.mainLocation,
-      subLocation: data.subLocation ?? '',
-      totalCount: data.totalCount,
-      introduce: data.introduce,
+      mainLocation: createdData.mainLocation,
+      subLocation: createdData.subLocation === '전체' ? '' : (createdData.subLocation ?? ''),
+      totalCount: createdData.totalCount,
+      introduce: createdData.introduce,
     };
 
     mutate(newData);
@@ -78,7 +63,7 @@ export default function CreateCrewPage() {
         </figure>
         <h2 className="text-2xl font-bold text-gray-900 md:text-3.5xl">크루 만들기</h2>
       </div>
-      <CreateCrewForm data={initialValue} onSubmit={handleSubmit} />
+      <CreateCrewForm data={initialValue} onSubmit={handleSubmit} type="create" />
     </div>
   );
 }