refactor: 전체 참여자 관리: '수정 완료'시, Toast 띄우기 (#636)

* refactor: 불필요한 상태(changedMembers) 제거 및 렌더링 성능 개선

* refactor: isCanRequest의 이름을 isCanSubmit으로 변경

* rename: EventMemberManage의 파일 이름을 EventMember로 변경

* refactor: delete와 put 요청에 await 추가

* refactor: 중복 이름 확인 로직을 set.length를 활용하여 간단하게 수정

* feat: 수정이 완료되었을 경우 수정 완료 toast 띄우기

* fix: 백엔드 api 변경으로 put 요청 변경

* refactor: isCanSubmit 이름을 canSubmit으로 변경

* style: lint 적용

client/src/hooks/useAccount.ts

@@ -81,7 +81,7 @@ const useAccount = () => {
 
     setCanSubmit(!existEmptyField && isChanged && accountNumberErrorMessage === null);
   }, [bankName, accountNumber, bankNameState, accountNumberState, accountNumberErrorMessage]);
-  
+
   return {
     bankName: bankNameState,
     accountNumber: accountNumberState,

client/src/hooks/useEventMember.ts

@@ -3,13 +3,14 @@ import {useEffect, useState, useCallback, useMemo} from 'react';
 import {Report} from 'types/serviceType';
 import validateMemberName from '@utils/validate/validateMemberName';
 
+import toast from './useToast/toast';
 import useRequestDeleteMember from './queries/member/useRequestDeleteMember';
 import useRequestPutMembers from './queries/member/useRequestPutMembers';
 import useRequestGetReports from './queries/report/useRequestGetReports';
 
 interface ReturnUseEventMember {
   reports: Report[];
-  isCanSubmit: boolean;
+  canSubmit: boolean;
   changeMemberName: (memberId: number, newName: string) => void;
   toggleDepositStatus: (memberId: number) => void;
   handleDeleteMember: (memberId: number) => void;
@@ -28,7 +29,7 @@ const useEventMember = (): ReturnUseEventMember => {
     setReports(initialReports);
   }, [initialReports]);
 
-  const isCanSubmit = useMemo(() => {
+  const canSubmit = useMemo(() => {
     // 중복되는 이름이 존재하는지 확인
     const hasDuplicateMemberName = (): boolean => {
       const nameSet = new Set(reports.map(member => member.memberName));
@@ -71,13 +72,16 @@ const useEventMember = (): ReturnUseEventMember => {
     [setReports, validateMemberName],
   );
 
-  const toggleDepositStatus = useCallback((memberId: number) => {
-    setReports(prevReports =>
-      prevReports.map(report =>
-        report.memberId === memberId ? {...report, isDeposited: !report.isDeposited} : report,
-      ),
-    );
-  }, []);
+  const toggleDepositStatus = useCallback(
+    (memberId: number) => {
+      setReports(prevReports =>
+        prevReports.map(report =>
+          report.memberId === memberId ? {...report, isDeposited: !report.isDeposited} : report,
+        ),
+      );
+    },
+    [setReports],
+  );
 
   // 삭제할 member를 따로 deleteMembers 상태에서 id만 저장
   const handleDeleteMember = useCallback((memberId: number) => {
@@ -107,7 +111,7 @@ const useEventMember = (): ReturnUseEventMember => {
     }
   }, [deleteMembers, reports, initialReports, deleteAsyncMember, putAsyncMember]);
 
-  return {reports, isCanSubmit, changeMemberName, handleDeleteMember, updateMembersOnServer, toggleDepositStatus};
+  return {reports, canSubmit, changeMemberName, handleDeleteMember, updateMembersOnServer, toggleDepositStatus};
 };
 
 export default useEventMember;

client/src/pages/EventPage/AdminPage/EventMember.tsx

@@ -9,7 +9,7 @@ import {useTheme} from '@components/Design';
 import {eventMemberStyle, memberList, eventMember, memberEditInput, noneReports} from './EventMember.style';
 
 const EventMember = () => {
-  const {reports, isCanSubmit, changeMemberName, handleDeleteMember, updateMembersOnServer, toggleDepositStatus} =
+  const {reports, canSubmit, changeMemberName, handleDeleteMember, updateMembersOnServer, toggleDepositStatus} =
     useEventMember();
 
   return (
@@ -46,7 +46,7 @@ const EventMember = () => {
         {reports.length === 0 ? (
           <></>
         ) : (
-          <FixedButton disabled={!isCanSubmit} onClick={updateMembersOnServer} style={{zIndex: '100'}}>
+          <FixedButton disabled={!canSubmit} onClick={updateMembersOnServer} style={{zIndex: '100'}}>
             수정완료
           </FixedButton>
         )}