refactor: 멤버 액션 삭제 훅 리팩토링 (#383)

* refactor: alive -> delete member list로 변경 * refactor: 비동기 아닌 함수 async await 제거 * fix: 훅 내에서 errorIndexList 사용하고 있지 않아서 제거했습니다.
woowacourse-teams · Aug 19, 2024 · 0173142 · 0173142
1 parent cd775ba
commit 0173142
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 14 deletions.
diff --git a/...ents/Modal/SetActionModal/AddBillActionListModalContent/AddBillActionListModalContent.tsx b/...ents/Modal/SetActionModal/AddBillActionListModalContent/AddBillActionListModalContent.tsx
@@ -17,7 +17,6 @@ const AddBillActionListModalContent = ({setIsOpenBottomSheet}: AddBillActionList
     inputPairList,
     inputRefList,
     errorMessage,
-    errorIndexList,
     handleInputChange,
     getFilledInputPairList,
     deleteEmptyInputPairElementOnBlur,
@@ -48,7 +47,6 @@ const AddBillActionListModalContent = ({setIsOpenBottomSheet}: AddBillActionList
                 onBlur={() => deleteEmptyInputPairElementOnBlur()} // TODO: (@weadie) 이 블러프롭이 내부적으로 index를 넘기고 있기 때문에 화살표 함수로 써야만하내요..
                 placeholder="지출 내역"
                 ref={el => (inputRefList.current[index * 2] = el)}
-                isError={errorIndexList.includes(index)}
               />
               <LabelGroupInput.Element
                 elementKey={`${index}`}
@@ -59,7 +57,6 @@ const AddBillActionListModalContent = ({setIsOpenBottomSheet}: AddBillActionList
                 onBlur={() => deleteEmptyInputPairElementOnBlur()}
                 placeholder="금액"
                 ref={el => (inputRefList.current[index * 2 + 1] = el)}
-                isError={errorIndexList.includes(index)}
               />
             </div>
           ))}

diff --git a/client/src/hooks/useDeleteMemberAction/useDeleteMemberAction.test.tsx b/client/src/hooks/useDeleteMemberAction/useDeleteMemberAction.test.tsx
@@ -53,7 +53,7 @@ describe('useDeleteMemberAction', () => {
       expect(result.current.stepListResult.stepList).not.toStrictEqual([]);
     });
 
-    await act(async () => {
+    act(() => {
       const memberAction = {
         actionId: 1,
         name: '망쵸',

diff --git a/client/src/hooks/useDeleteMemberAction/useDeleteMemberAction.tsx b/client/src/hooks/useDeleteMemberAction/useDeleteMemberAction.tsx
@@ -22,7 +22,7 @@ const useDeleteMemberAction = ({
   showToastExistSameMemberFromAfterStep,
 }: UseDeleteMemberActionProps) => {
   const {stepList, refreshStepList} = useStepList();
-  const [aliveActionList, setAliveActionList] = useState<MemberAction[]>(memberActionList);
+  const [deleteActionList, setDeleteActionList] = useState<MemberAction[]>([]);
   const eventId = getEventIdByUrl();
   const {fetch} = useFetch();
 
@@ -34,20 +34,15 @@ const useDeleteMemberAction = ({
         setIsBottomSheetOpened(false);
       },
       onError: () => {
-        setAliveActionList(memberActionList);
+        setDeleteActionList([]);
       },
     });
   };
 
   // TODO: (@cookie: 추후에 반복문으로 delete하는 것이 아니라 한 번에 모아서 delete 처리하기 (backend에 문의))
   const deleteMemberActionList = async () => {
-    const aliveActionIdList = aliveActionList.map(({actionId}) => actionId);
-    const deleteMemberActionIdList = memberActionList
-      .filter(({actionId}) => !aliveActionIdList.includes(actionId))
-      .map(({actionId}) => actionId);
-
-    for (const deleteMemberActionId of deleteMemberActionIdList) {
-      await deleteMemberAction(deleteMemberActionId);
+    for (const {actionId} of deleteActionList) {
+      await deleteMemberAction(actionId);
     }
   };
 
@@ -66,7 +61,7 @@ const useDeleteMemberAction = ({
   const addDeleteMemberAction = (memberAction: MemberAction) => {
     checkAlreadyExistMemberAction(memberAction, showToastAlreadyExistMemberAction);
     checkExistSameMemberFromAfterStep(memberAction, () => showToastExistSameMemberFromAfterStep(memberAction.name));
-    setAliveActionList(prev => prev.filter(aliveMember => aliveMember.actionId !== memberAction.actionId));
+    setDeleteActionList(prev => [...prev, memberAction]);
   };
 
   const isExistSameMemberFromAfterStep = (memberAction: MemberAction) => {
@@ -81,6 +76,9 @@ const useDeleteMemberAction = ({
     return memberNameList.filter(member => member === memberAction.name).length >= 2;
   };
 
+  const aliveActionList = memberActionList.filter(
+    memberAction => !deleteActionList.some(deleteAction => deleteAction.actionId === memberAction.actionId),
+  );
   return {aliveActionList, deleteMemberActionList, addDeleteMemberAction};
 };