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

@@ -7,7 +7,7 @@ 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 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';
 

src/app/(crew)/crew/_components/create-gathering-form/index.tsx → 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

@@ -0,0 +1,57 @@
+'use client';
+
+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 { 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}
+      opened={opened}
+      onClose={close}
+      onEdit={handleEdit}
+      onSubmit={handleSubmit}
+    />
+  );
+}

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

@@ -1,11 +1,11 @@
 import { Modal, ScrollArea } from '@mantine/core';
-import CreateGatheringForm from '@/src/app/(crew)/crew/_components/create-gathering-form';
+import CreateGatheringForm from '@/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-form';
 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.tsx → src/app/(crew)/crew/detail/[id]/_components/create-gathering/index.tsx

@@ -3,11 +3,11 @@
 import { useRouter } from 'next/navigation';
 import { useDisclosure } from '@mantine/hooks';
 import { useAuthStore } from '@/src/store/use-auth-store';
-import CreateGatheringModalContainer from '@/src/app/(crew)/crew/_components/create-gathering-modal/container';
+import CreateGatheringModalContainer from '@/src/app/(crew)/crew/detail/[id]/_components/create-gathering/create-gathering-modal/container';
 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,7 @@
 import Image from 'next/image';
 import { useParams } from 'next/navigation';
 import { useGetCrewDetailQuery } from '@/src/_queries/crew/crew-detail-queries';
-import CreateCrewForm from '@/src/app/(crew)/crew/_components/create-crew-form';
+import CreateCrewForm from '@/src/app/(crew)/crew/create/_components/create-crew-form';
 import { CreateCrewFormTypes } from '@/src/types/create-crew';
 import IcoCreateCrew from '@/public/assets/icons/ic-create-crew.svg';
 

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/gathering-card/container.tsx

@@ -5,7 +5,7 @@ import { toast } from 'react-toastify';
 import { useDisclosure } from '@mantine/hooks';
 import { useGetGatheringDetailQuery } from '@/src/_queries/gathering/gathering-detail-queries';
 import { ApiError } from '@/src/utils/api';
-import GatheringDetailModalContainer from '@/src/app/(crew)/crew/_components/gathering-detail-modal/container';
+import GatheringDetailModalContainer from '@/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/container';
 import { GatheringType } from '@/src/types/gathering-data';
 import GatheringCardPresenter from './presenter';
 

src/components/common/gathering-card/scheduled-gathering-card/container.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import GatheringDetailModalContainer from '@/src/app/(crew)/crew/_components/gathering-detail-modal/container';
+import GatheringDetailModalContainer from '@/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/container';
 import ScheduledGatheringCardPresenter from './presenter';
 
 interface ScheduledGatheringCardContainerProps {

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);
     }
   };