From bbf8b4d1ec0ef6948c803121a00721f698a7ce18 Mon Sep 17 00:00:00 2001
From: Soyeon Choe <soy2302ten@gmail.com>
Date: Wed, 21 Aug 2024 14:00:45 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20member=20action=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=ED=9B=84,=20=EB=B9=88=20stepList=EA=B0=80=20=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/StepList/Step.tsx     | 9 ++++++---
 client/src/components/StepList/StepList.tsx | 7 +++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/src/components/StepList/Step.tsx b/client/src/components/StepList/Step.tsx
index 5d1631a79..f6c89475b 100644
--- 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
index 42500af94..755bf8ac6 100644
--- 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">