refactor: isExistSameMember 함수 훅 외부로 넘겨주지 않고 특이한 케이스를 검사하는 함수를 훅 인자로 넘겨줌

woowacourse-teams · Aug 16, 2024 · 3cba693 · 3cba693
1 parent 7584768
commit 3cba693
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/...t/src/components/Modal/SetActionModal/DeleteMemberActionModal/DeleteMemberActionModal.tsx b/...t/src/components/Modal/SetActionModal/DeleteMemberActionModal/DeleteMemberActionModal.tsx
@@ -23,16 +23,7 @@ const DeleteMemberActionModal = ({
 }: DeleteMemberActionModalProps) => {
   const {showToast} = useToast();
 
-  const {aliveActionList, deleteMemberActionList, addDeleteMemberAction, isExistSameMemberFromAfterStep} =
-    useDeleteMemberAction(memberActionList, setIsBottomSheetOpened);
-
-  const onDeleteIconClick = (member: MemberAction) => {
-    alertSpecificCaseFromAddDeleteMember(member);
-    addDeleteMemberAction(member);
-  };
-
-  // 삭제버튼 누를 때 특수한 케이스이면 토스트를 띄우는 기능
-  const alertSpecificCaseFromAddDeleteMember = (memberAction: MemberAction) => {
+  const checkAlreadyExistMemberAction = (memberAction: MemberAction) => {
     if (!memberActionList.includes(memberAction)) {
       showToast({
         isClickToClose: true,
@@ -43,7 +34,12 @@ const DeleteMemberActionModal = ({
       });
       return;
     }
+  };
 
+  const checkExistSameMemberFromAfterStep = (
+    memberAction: MemberAction,
+    isExistSameMemberFromAfterStep: (memberAction: MemberAction) => boolean,
+  ) => {
     if (isExistSameMemberFromAfterStep(memberAction)) {
       showToast({
         isClickToClose: true,
@@ -59,6 +55,13 @@ const DeleteMemberActionModal = ({
     }
   };
 
+  const {aliveActionList, deleteMemberActionList, addDeleteMemberAction} = useDeleteMemberAction({
+    memberActionList,
+    setIsBottomSheetOpened,
+    checkAlreadyExistMemberAction,
+    checkExistSameMemberFromAfterStep,
+  });
+
   return (
     <BottomSheet isOpened={isBottomSheetOpened} onClose={() => setIsBottomSheetOpened(false)}>
       <div css={bottomSheetStyle}>
@@ -73,7 +76,7 @@ const DeleteMemberActionModal = ({
                 <div style={{flexGrow: 1}}>
                   <Input disabled key={`${member.actionId}`} type="text" style={{flexGrow: 1}} value={member.name} />
                 </div>
-                <IconButton size="medium" variants="tertiary" onClick={() => onDeleteIconClick(member)}>
+                <IconButton size="medium" variants="tertiary" onClick={() => addDeleteMemberAction(member)}>
                   <Icon iconType="trash" iconColor="onTertiary" />
                 </IconButton>
               </Flex>

diff --git a/client/src/hooks/useDeleteMemberAction.tsx b/client/src/hooks/useDeleteMemberAction.tsx
@@ -10,10 +10,22 @@ import {useFetch} from '@apis/useFetch';
 
 import getEventIdByUrl from '@utils/getEventIdByUrl';
 
-const useDeleteMemberAction = (
-  memberActionList: MemberAction[],
-  setIsBottomSheetOpened: React.Dispatch<React.SetStateAction<boolean>>,
-) => {
+type UseDeleteMemberActionProps = {
+  memberActionList: MemberAction[];
+  setIsBottomSheetOpened: React.Dispatch<React.SetStateAction<boolean>>;
+  checkAlreadyExistMemberAction: (memberAction: MemberAction) => void;
+  checkExistSameMemberFromAfterStep: (
+    memberAction: MemberAction,
+    isExistSameMemberFromAfterStep: (memberAction: MemberAction) => boolean,
+  ) => void;
+};
+
+const useDeleteMemberAction = ({
+  memberActionList,
+  setIsBottomSheetOpened,
+  checkAlreadyExistMemberAction,
+  checkExistSameMemberFromAfterStep,
+}: UseDeleteMemberActionProps) => {
   const {stepList, refreshStepList} = useStepList();
   const [aliveActionList, setAliveActionList] = useState<MemberAction[]>(memberActionList);
   const eventId = getEventIdByUrl();
@@ -45,6 +57,8 @@ const useDeleteMemberAction = (
   };
 
   const addDeleteMemberAction = (memberAction: MemberAction) => {
+    checkAlreadyExistMemberAction(memberAction);
+    checkExistSameMemberFromAfterStep(memberAction, isExistSameMemberFromAfterStep);
     setAliveActionList(prev => prev.filter(aliveMember => aliveMember.actionId !== memberAction.actionId));
   };
 
@@ -62,7 +76,7 @@ const useDeleteMemberAction = (
     return memberNameList.filter(member => member === memberAction.name).length >= 2;
   };
 
-  return {aliveActionList, deleteMemberActionList, addDeleteMemberAction, isExistSameMemberFromAfterStep};
+  return {aliveActionList, deleteMemberActionList, addDeleteMemberAction};
 };
 
 export default useDeleteMemberAction;