feat: member action 추가후, 빈 stepList가 생성되지 않는 에러 해결

woowacourse-teams · Aug 21, 2024 · bbf8b4d · bbf8b4d
1 parent 6152fc5
commit bbf8b4d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/client/src/components/StepList/Step.tsx b/client/src/components/StepList/Step.tsx
@@ -9,18 +9,21 @@ interface StepProps {
   step: BillStep | MemberStep;
   isAddEditableItem: boolean;
   lastBillItemIndex: number;
-  setIsAddEditableItem: React.Dispatch<React.SetStateAction<boolean>>;
+  lastItemIndex: number;
   index: number;
+  setIsAddEditableItem: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const Step = ({step, isAddEditableItem, lastBillItemIndex, setIsAddEditableItem, index}: StepProps) => {
+const Step = ({step, isAddEditableItem, lastBillItemIndex, lastItemIndex, setIsAddEditableItem, index}: StepProps) => {
   const [isOpenBottomSheet, setIsOpenBottomSheet] = useState<boolean>(false);
   const [isLastBillItem, setIsLastBillItem] = useState<boolean>(false);
 
   useEffect(() => {
-    if (index === lastBillItemIndex) {
+    if (index === lastBillItemIndex && lastBillItemIndex === lastItemIndex) {
       // index를 사용하여 마지막 BillStep인지 확인
       setIsLastBillItem(true);
+    } else {
+      setIsLastBillItem(false);
     }
   }, [index, lastBillItemIndex]);
 

diff --git a/client/src/components/StepList/StepList.tsx b/client/src/components/StepList/StepList.tsx
@@ -35,6 +35,9 @@ const StepList = ({isAddEditableItem, setIsAddEditableItem}: StepListProps) => {
   }, [existIndexInStepList]);
 
   useEffect(() => {
+    // 최초로 빈 stepList가 생성되고 난 후, 다시 hasAddedItem을 false로 변환하기 위한 조건문
+    if (hasAddedItem) setHasAddedItem(prev => !prev);
+
     if (isAddEditableItem && lastBillItemIndex !== lastItemIndex && !hasAddedItem) {
       setStepList(prev => [
         ...prev,
@@ -45,9 +48,9 @@ const StepList = ({isAddEditableItem, setIsAddEditableItem}: StepListProps) => {
           actions: [],
         },
       ]);
-      setHasAddedItem(true);
+      setHasAddedItem(prev => !prev);
     }
-  }, [isAddEditableItem, lastBillItemIndex, lastItemIndex, hasAddedItem]);
+  }, [isAddEditableItem, lastBillItemIndex, lastItemIndex, hasAddedItem, existIndexInStepList, stepListData]);
 
   return (
     <Flex flexDirection="column" gap="0.5rem" paddingInline="0.5rem">