feat: 그룹 일정 등록 구현

Author: gihwan-dev

src/apis/groupScheduleApis.ts

@@ -6,17 +6,47 @@ interface addGroupShedule {
   startDate: string;
   endDate: string;
   memo: string;
-  newMemberList: any[];
+  newMemberList: Member[];
 }
 
-export const addGroupSchedule = async ({ startDate, endDate, ...props }: addGroupShedule) => {
-  const { error } = await supabase
+export const addGroupScheduleFetch = async ({ startDate, endDate, newMemberList, ...props }: addGroupShedule) => {
+  // 그룹을 생성한다.
+  const { data: groupInfo, error: groupInfoError } = await supabase
+    .from('groups')
+    .insert({
+      name: props.title,
+      open: true,
+      start_date: startDate,
+      end_date: endDate,
+    })
+    .select()
+    .single();
+
+  if (!groupInfo || groupInfoError) {
+    throw groupInfoError;
+  }
+
+  // 그룹에 멤버를 추가한다.
+  const { error: groupMemberError } = await supabase.from('group_user_ralations').insert(
+    newMemberList.map((member) => ({
+      group_id: groupInfo.id,
+      user_id: member.id,
+    })),
+  );
+  if (groupMemberError) {
+    throw groupMemberError;
+  }
+  // 그룹 일정을 생성한다.
+  const { data: groupScheduleData, error: groupScheduleError } = await supabase
     .from('group_schedules')
-    .insert({ ...props, start_date: startDate, end_date: endDate });
+    .insert({ ...props, start_date: startDate, end_date: endDate, group_id: groupInfo.id })
+    .select()
+    .single();
 
-  if (error) {
-    throw error;
+  if (groupScheduleError) {
+    throw groupScheduleError;
   }
+  return groupScheduleData;
 };
 
 interface UpdateGroupSchedule {

src/hooks/useAddGroupSchedule.ts

@@ -0,0 +1,42 @@
+import { useAddNewGroup } from '@/react-queries/useAddNewGroup';
+import { Member } from '@/types/Member';
+import { useRef } from 'react';
+
+interface DialogElement {
+  openModal: () => void;
+  closeModal: () => void;
+}
+
+export const useAddGroupSchedule = () => {
+  const { mutate, isPending } = useAddNewGroup();
+  const successDialogRef = useRef<DialogElement | null>(null);
+  const failDialogRef = useRef<DialogElement | null>(null);
+
+  const addGroupSchedule = (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => {
+    const formData = new FormData(e.currentTarget);
+    const newGroupSchedule = {
+      title: formData.get('name') as string,
+      description: formData.get('description') as string,
+      startDate: formData.get('startDate') as string,
+      endDate: formData.get('endDate') as string,
+      memo: formData.get('memo') as string,
+      newMemberList: userList,
+    };
+    mutate(newGroupSchedule, {
+      onError: (error) => {
+        console.error(error);
+        failDialogRef.current?.openModal();
+      },
+      onSuccess: () => {
+        successDialogRef.current?.openModal();
+      },
+    });
+  };
+
+  return {
+    addGroupSchedule,
+    isPending,
+    successDialogRef,
+    failDialogRef,
+  };
+};

src/pages/AddGroupSchedulePage.tsx

@@ -1,27 +1,22 @@
-import { addGroupSchedule } from '@/apis/groupScheduleApis';
 import GroupForm from '@/components/Group/GroupForm';
 import AppBar from '@/components/common/AppBar';
+import Dialog from '@/components/common/Dialog';
+import { useAddGroupSchedule } from '@/hooks/useAddGroupSchedule';
 import { Member } from '@/types/Member';
 
 const AddGroupPage = () => {
+  const { addGroupSchedule, isPending, failDialogRef, successDialogRef } = useAddGroupSchedule();
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => {
     e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    const addSchedule = {
-      title: formData.get('name') as string,
-      description: formData.get('description') as string,
-      startDate: formData.get('startDate') as string,
-      endDate: formData.get('endDate') as string,
-      memo: formData.get('memo') as string,
-      newMemberList: userList,
-    };
-    addGroupSchedule(addSchedule);
+    addGroupSchedule(e, userList);
   };
 
   return (
     <div className="flex min-h-dvh w-screen flex-col overflow-x-hidden px-6">
       <AppBar backButton title={'모임 일정 등록하기'} />
-      <GroupForm onSubmit={handleSubmit} />
+      <GroupForm onSubmit={handleSubmit} isLoading={isPending} />
+      <Dialog ref={successDialogRef} desc="모임 일정이 등록되었습니다." />
+      <Dialog ref={failDialogRef} desc="모임 일정 등록에 실패했습니다." />
     </div>
   );
 };

src/react-queries/queryKeys.ts

@@ -18,5 +18,6 @@ export const queries = createQueryKeyStore({
     update: null,
     updateMember: null,
     getAllMember: (groupId: string) => [groupId],
+    add: null,
   },
 });

src/react-queries/useAddNewGroup.ts

@@ -0,0 +1,9 @@
+import { useMutation } from '@tanstack/react-query';
+import { queries } from './queryKeys';
+import { addGroupScheduleFetch } from '@/apis/groupScheduleApis';
+
+export const useAddNewGroup = () =>
+  useMutation({
+    mutationKey: queries.group.add.queryKey,
+    mutationFn: addGroupScheduleFetch,
+  });