feat: 수정 성공 또는 실패에 따른 UI 표현

Author: gihwan-dev

src/apis/groupScheduleApis.ts

@@ -1,6 +1,20 @@
 import supabase from '@/supabase';
 import { Member } from '@/types/Member';
 
+interface UpdateGroupSchedule {
+  name: string;
+  description: string;
+  startDate: string;
+  endDate: string;
+  memo: string;
+  scheduleId: string;
+}
+
+interface UpdateGroupScheduleMember {
+  updatedMemberList: Member[];
+  groupId: string;
+}
+
 export const getOneGroupSchedule = async (scheduleId: string) => {
   const { data, error } = await supabase.from('group_schedules').select('*').eq('id', +scheduleId);
 
@@ -15,15 +29,6 @@ export const getOneGroupSchedule = async (scheduleId: string) => {
   return data[0];
 };
 
-interface UpdateGroupSchedule {
-  name: string;
-  description: string;
-  startDate: string;
-  endDate: string;
-  memo: string;
-  scheduleId: string;
-}
-
 export const updateGroupSchedule = async ({
   name,
   description,
@@ -50,11 +55,6 @@ export const updateGroupSchedule = async ({
   return data;
 };
 
-interface UpdateGroupScheduleMember {
-  updatedMemberList: Member[];
-  groupId: string;
-}
-
 export const updateGroupScheduleMember = async ({ updatedMemberList, groupId }: UpdateGroupScheduleMember) => {
   const { error: deleteError } = await supabase.from('group_user_ralations').delete().eq('group_id', groupId);
   if (deleteError) {

src/components/Group/GroupForm.tsx

@@ -13,6 +13,7 @@ interface Props {
   endDate?: string;
   memo?: string | null;
   memberList?: Member[];
+  isLoading?: boolean;
   onSubmit: (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => void;
 }
 
@@ -24,6 +25,7 @@ const GroupForm: FC<Props> = ({
   memo = '',
   memberList = [],
   onSubmit,
+  isLoading = false,
 }) => {
   const [member, setMember] = useState<Member[]>(memberList);
 
@@ -43,8 +45,12 @@ const GroupForm: FC<Props> = ({
         <UserInvite member={member} setMember={onClick} />
         <GroupFormMemoInput memo={memo ?? ''} />
       </div>
-      <button type="submit" className="btn btn-outline btn-primary w-full">
-        저장
+      <button
+        disabled={isLoading}
+        type="submit"
+        className={`btn btn-outline btn-primary w-full ${isLoading ? 'disabled' : ''}`}
+      >
+        {isLoading ? <span className="loading" /> : '저장'}
       </button>
     </form>
   );

src/components/common/Loading/Loading.tsx

@@ -5,6 +5,7 @@ interface Props {
   display: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity';
   size: 'xs' | 'sm' | 'md' | 'lg';
   color: 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+  transparent?: boolean;
 }
 
 const styleMap = {
@@ -28,12 +29,10 @@ const styleMap = {
   error: 'text-error',
 };
 
-const Loading: React.FC<Props> = ({ display, size, color }) => {
+const Loading: React.FC<Props> = ({ display, size, color, transparent = false }) => {
   return (
     <div
-      className={
-        'fixed left-0 top-0 z-50 flex h-screen w-screen flex-col items-center justify-center overflow-hidden bg-base-100'
-      }
+      className={`fixed left-0 top-0 z-50 flex h-screen w-screen flex-col items-center justify-center overflow-hidden bg-base-100 ${transparent ? 'bg-opacity-50' : ''}`}
     >
       <Logo />
       <span className={`loading absolute bottom-20 ${styleMap[display]} ${styleMap[size]} ${styleMap[color]}`}></span>

src/pages/EditGroupSchedulePage.tsx

@@ -5,6 +5,7 @@ import { Loading } from '.';
 import { Member } from '@/types/Member';
 import { useUpdateGroupSchedule } from '@/react-queries/useUpdateGroupSchedule';
 import { useGetGroupScheduleDefaultData } from '@/hooks/useGetGroupScheduleDefaultData';
+import Dialog from '@/components/common/Dialog';
 
 const EditGroupSchedulePage = () => {
   const params = useParams<{ groupId: string; scheduleId: string }>();
@@ -15,7 +16,7 @@ const EditGroupSchedulePage = () => {
     scheduleId,
     groupId,
   );
-  const { mutate, isError: updateHasError, isPending: updateIsPending } = useUpdateGroupSchedule();
+  const { mutate, successDialog, errorDialogRef, isPending: updateIsPending } = useUpdateGroupSchedule();
 
   if (isError) {
     return <div>{error!.message}</div>;
@@ -40,10 +41,6 @@ const EditGroupSchedulePage = () => {
     mutate(updatePayload);
   };
 
-  if (updateHasError) {
-    // TODO: 에러 다이얼로그 표시
-  }
-
   if (updateIsPending) {
     // TODO: 로딩 스피너 표시
   }
@@ -63,7 +60,10 @@ const EditGroupSchedulePage = () => {
             endDate={groupScheduleData!.end_date}
             memo={groupScheduleData!.memo}
             memberList={groupMemberData}
+            isLoading={updateIsPending}
           />
+          <Dialog ref={errorDialogRef} desc="오류가 발생했습니다. 다시시도해 주세요." />
+          <Dialog ref={successDialog} desc="성공적으로 수정했습니다." />
         </div>
       )}
     </>

src/react-queries/useUpdateGroupSchedule.ts

@@ -3,7 +3,7 @@ import { useMutation } from '@tanstack/react-query';
 import { queries } from './queryKeys';
 import { Member } from '@/types/Member';
 import { useNavigate } from 'react-router-dom';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 interface UpdateGroupSchedule {
   name: string;
@@ -15,14 +15,23 @@ interface UpdateGroupSchedule {
   newMemberList: Member[];
 }
 
+interface DialogElement {
+  openModal: () => void;
+  closeModal: () => void;
+}
+
 export const useUpdateGroupSchedule = () => {
   const navigator = useNavigate();
 
+  const errorDialogRef = useRef<DialogElement | null>(null);
+  const successDialog = useRef<DialogElement | null>(null);
+
   const {
     mutate: updateGroupScheduleMutate,
     isPending: updateGroupScheduleIsPending,
     isSuccess: updateGroupScheduleIsSuccess,
     isError: updateGroupScheduleIsError,
+    reset: updateGroupScheduleReset,
   } = useMutation({
     mutationKey: queries.groupSchedule.update.queryKey,
     mutationFn: updateGroupSchedule,
@@ -33,6 +42,7 @@ export const useUpdateGroupSchedule = () => {
     isPending: updateGroupMemberIsPending,
     isSuccess: updateGroupMemberIsSuccess,
     isError: updateGroupMemberIsError,
+    reset: updateGroupMemberReset,
   } = useMutation({
     mutationKey: queries.group.updateMember.queryKey,
     mutationFn: updateGroupScheduleMember,
@@ -48,13 +58,30 @@ export const useUpdateGroupSchedule = () => {
 
   useEffect(() => {
     if (updateGroupScheduleIsSuccess && updateGroupMemberIsSuccess) {
-      navigator(-1);
+      successDialog.current?.openModal();
+      updateGroupMemberReset();
+      updateGroupScheduleReset();
+    }
+  }, [
+    updateGroupScheduleIsSuccess,
+    updateGroupMemberIsSuccess,
+    navigator,
+    updateGroupMemberReset,
+    updateGroupScheduleReset,
+  ]);
+
+  useEffect(() => {
+    if (updateGroupScheduleIsError || updateGroupMemberIsError) {
+      errorDialogRef.current?.openModal();
+      updateGroupMemberReset();
+      updateGroupScheduleReset();
     }
-  }, [updateGroupScheduleIsSuccess, updateGroupMemberIsSuccess, navigator]);
+  }, [updateGroupScheduleIsError, updateGroupMemberIsError, updateGroupMemberReset, updateGroupScheduleReset]);
 
   return {
     mutate,
     isPending: updateGroupScheduleIsPending || updateGroupMemberIsPending,
-    isError: updateGroupScheduleIsError || updateGroupMemberIsError,
+    errorDialogRef,
+    successDialog,
   };
 };