Feat/132/create edit gathering api 연결

src/_apis/gathering/gathering-detail-apis.ts

@@ -1,5 +1,5 @@
 import { fetchApi } from '@/src/utils/api';
-import { GatheringDetailType } from '@/src/types/gathering-data';
+import { CreateGatheringRequestTypes, GatheringDetailType } from '@/src/types/gathering-data';
 
 // NOTE: 약속 디테일 불러오기
 export async function GetGatheringDetail(
@@ -52,3 +52,18 @@ export async function LeaveGathering(crewId: number, gatheringId: number): Promi
     },
   });
 }
+
+export async function createGathering(id: number, data: CreateGatheringRequestTypes) {
+  try {
+    await fetchApi(`/api/crews/${id}/gatherings`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include', // Include authentication credentials
+      body: JSON.stringify(data),
+    });
+  } catch (error) {
+    throw error;
+  }
+}

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

@@ -1,9 +1,29 @@
-import { useQuery } from '@tanstack/react-query';
-import { GetGatheringDetail } from '@/src/_apis/gathering/gathering-detail-apis';
+import { toast } from 'react-toastify';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { GetGatheringDetail, createGathering } from '@/src/_apis/gathering/gathering-detail-apis';
+import { CreateGatheringRequestTypes } from '@/src/types/gathering-data';
 
 export function useGetGatheringDetailQuery(crewId: number, gatheringId: number) {
   return useQuery({
     queryKey: ['gatheringDetail', crewId, gatheringId],
     queryFn: () => GetGatheringDetail(crewId, gatheringId),
   });
 }
+
+export function useCreateGatheringQuery(crewId: number) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: CreateGatheringRequestTypes) => createGathering(crewId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['gatheringList', crewId],
+        refetchType: 'all',
+      });
+      toast.success('크루가 생성되었습니다.');
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+  });
+}

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

@@ -2,7 +2,6 @@
 
 import Image from 'next/image';
 import { Loader } from '@mantine/core';
-import { getImageUrl } from '@/src/_apis/image/get-image-url';
 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';

src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form/index.tsx

@@ -2,6 +2,7 @@
 
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { NumberInput } from '@mantine/core';
+import { getImageUrl } from '@/src/_apis/image/get-image-url';
 import Button from '@/src/components/common/input/button';
 import DateTimePicker from '@/src/components/common/input/date-time-picker';
 import FileInputWrap from '@/src/components/common/input/file-input-wrap';
@@ -38,6 +39,16 @@ export default function CreateGatheringForm({
   const location = useWatch({ control, name: 'location' });
   const introduce = useWatch({ control, name: 'introduce' });
 
+  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 || '');
+    }
+  };
+
   return (
     <form onSubmit={isEdit ? handleSubmit(onEdit) : handleSubmit(onSubmit)}>
       <div className="flex flex-col gap-6">
@@ -103,6 +114,7 @@ export default function CreateGatheringForm({
                   {...field}
                   sample={ImgGatheringSampleUrls}
                   onChange={(newValue) => {
+                    handleFileChange(newValue, field.onChange);
                     field.onChange(newValue);
                     trigger('imageUrl');
                   }}
@@ -162,8 +174,7 @@ export default function CreateGatheringForm({
                 {...field}
                 fullDate={new Date()}
                 onChange={(date) => {
-                  const formattedDate = date.toLocaleString();
-                  onChange(formattedDate);
+                  onChange(date);
                   trigger('dateTime'); // 유효성 검사 실행
                 }}
               />

src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-modal/container.tsx

@@ -1,28 +1,50 @@
 'use client';
 
-import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
+import { Loader } from '@mantine/core';
+import { useCreateGatheringQuery } from '@/src/_queries/gathering/gathering-detail-queries';
+import { CreateGatheringFormTypes, CreateGatheringRequestTypes } from '@/src/types/gathering-data';
 import CreateGatheringModalPresenter from './presenter';
 
 export interface CreateGatheringModalContainerProps {
+  crewId: number;
   opened: boolean;
   close: () => void;
   data: CreateGatheringFormTypes;
 }
 
 export default function CreateGatheringModalContainer({
+  crewId,
   opened,
   close,
   data,
 }: CreateGatheringModalContainerProps) {
-  const handleSubmit = () => {
-    // TODO : 약속 만들기 API 연결
+  const { isPending, mutate } = useCreateGatheringQuery(crewId);
+
+  const handleSubmit = async (createdData: CreateGatheringFormTypes) => {
+    const newData: CreateGatheringRequestTypes = {
+      title: createdData.title,
+      imageUrl: (createdData.imageUrl as string) ?? '',
+      dateTime: createdData.dateTime,
+      location: createdData.location,
+      totalCount: createdData.totalCount,
+      introduce: createdData.introduce,
+    };
+
+    mutate(newData);
     close();
   };
   const handleEdit = () => {
     // TODO : 약속 수정하기 API 연결
     close();
   };
 
+  if (isPending)
+    return (
+      <div className="fixed inset-0 z-10 flex items-center justify-center">
+        <Loader size="sm" />
+      </div>
+    );
+
   return (
     <CreateGatheringModalPresenter
       data={data}

src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-modal/presenter.tsx

@@ -5,7 +5,7 @@ import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
 export interface GatheringDetailModalProps {
   opened: boolean;
   onClose: () => void;
-  onSubmit: () => void;
+  onSubmit: (data: CreateGatheringFormTypes) => void;
   onEdit: () => void;
   data: CreateGatheringFormTypes;
 }

src/app/(crew)/crew/detail/[id]/_components/create-gathering/index.tsx

@@ -7,7 +7,7 @@ import CreateGatheringModalContainer from '@/src/app/(crew)/crew/detail/[id]/_co
 import Button from '@/src/components/common/input/button';
 import { CreateGatheringFormTypes } from '@/src/types/gathering-data';
 
-export default function CreateGathering() {
+export default function CreateGathering({ crewId }: { crewId: number }) {
   const { isAuth } = useAuthStore();
   const router = useRouter();
   const [opened, { open, close }] = useDisclosure(false);
@@ -34,7 +34,12 @@ export default function CreateGathering() {
       <Button type="button" className="btn-filled px-4" onClick={handleButtonClick}>
         약속 만들기
       </Button>
-      <CreateGatheringModalContainer opened={opened} close={close} data={initialValue} />
+      <CreateGatheringModalContainer
+        crewId={crewId}
+        opened={opened}
+        close={close}
+        data={initialValue}
+      />
     </>
   );
 }

src/app/(crew)/crew/detail/[id]/edit/page.tsx

@@ -3,7 +3,6 @@
 import Image from 'next/image';
 import { useParams } from 'next/navigation';
 import { Loader } from '@mantine/core';
-import { getImageUrl } from '@/src/_apis/image/get-image-url';
 import { useEditCrewQuery, useGetCrewDetailQuery } from '@/src/_queries/crew/crew-detail-queries';
 import CreateCrewForm from '@/src/app/(crew)/crew/create/_components/create-crew-form';
 import { CreateCrewFormTypes, EditCrewRequestTypes } from '@/src/types/create-crew';

src/app/(crew)/crew/detail/[id]/page.tsx

@@ -23,7 +23,7 @@ export default async function CrewDetailPage({ params }: CrewDetailPageProps) {
           <article className="space-y-6">
             <div className="flex items-center justify-between">
               <h2 className="text-2xl font-semibold">크루 약속</h2>
-              {/* <CreateGathering /> */}
+              <CreateGathering crewId={Number(params.id)} />
             </div>
             <div className="flex w-full">
               <GatheringListSection id={id} />

src/components/common/input/date-time-picker/index.tsx

@@ -22,7 +22,6 @@ export default function DateTimePicker({ fullDate, onChange }: DateTimePickerPro
 
     if (isSelected) {
       setSelected(date);
-      onChange(date);
     }
   };