From b771c52645bda832ce05e04def0ffc4c425ef734 Mon Sep 17 00:00:00 2001
From: Soyeon Choe <77609591+soi-ha@users.noreply.github.com>
Date: Thu, 26 Sep 2024 15:35:14 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=A0=84=EC=B2=B4=20=EC=B0=B8?=
 =?UTF-8?q?=EC=97=AC=EC=9E=90=20=EA=B4=80=EB=A6=AC:=20'=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20=EC=99=84=EB=A3=8C'=EC=8B=9C,=20Toast=20=EB=9D=84=EC=9A=B0?=
 =?UTF-8?q?=EA=B8=B0=20(#636)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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                |  2 +-
 client/src/hooks/useEventMember.ts            | 24 +++++++++++--------
 .../pages/EventPage/AdminPage/EventMember.tsx |  4 ++--
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/client/src/hooks/useAccount.ts b/client/src/hooks/useAccount.ts
index 0c6ed13b3..418656cc5 100644
--- a/client/src/hooks/useAccount.ts
+++ b/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,
diff --git a/client/src/hooks/useEventMember.ts b/client/src/hooks/useEventMember.ts
index 617022db5..20ea319f1 100644
--- a/client/src/hooks/useEventMember.ts
+++ b/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;
diff --git a/client/src/pages/EventPage/AdminPage/EventMember.tsx b/client/src/pages/EventPage/AdminPage/EventMember.tsx
index 91fb8b276..95a7d5482 100644
--- a/client/src/pages/EventPage/AdminPage/EventMember.tsx
+++ b/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>
         )}