fix: can submit 문제 및 데이터가 없을 때 초기화되는 현상 해결

woowacourse-teams · Aug 21, 2024 · fc2e077 · fc2e077
2 parents 78d20a3 + b11ce8a
commit fc2e077
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/client/src/hooks/useMemberReportListInAction/useMemberReportInput.tsx b/client/src/hooks/useMemberReportListInAction/useMemberReportInput.tsx
@@ -26,7 +26,7 @@ const useMemberReportInput = ({
   const [inputList, setInputList] = useState<MemberReportInput[]>(data.map((item, index) => ({...item, index})));
   const [canSubmit, setCanSubmit] = useState<boolean>(false);
 
-  const [canEditList, setCanEditList] = useState<boolean[]>(new Array(data.length).fill(true));
+  const [canEditList, setCanEditList] = useState<boolean[]>([]);
 
   const onChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
     const {value} = event.target;
@@ -36,7 +36,6 @@ const useMemberReportInput = ({
 
   const validateAndAddAdjustedMember = (price: string, index: number) => {
     const {isValid} = validateMemberReportInAction(price, totalPrice);
-    setCanSubmit(isValid);
 
     if (isValid) {
       const newInputList = [...inputList];
@@ -52,13 +51,26 @@ const useMemberReportInput = ({
     }
   };
 
+  // 서버와 값이 같지 않고 input price의 상태가 모두 valid하다면 can submit true
+  useEffect(() => {
+    const isSamePriceState = getIsSamePriceStateAndServerState();
+    const isAllValid = inputList.every(input => validateMemberReportInAction(String(input.price), totalPrice));
+
+    setCanSubmit(!isSamePriceState && isAllValid);
+  }, [inputList]);
+
   // addAdjustedMember로 인해 data가 변했을 때 input list의 값을 맞춰주기 위함
   useEffect(() => {
     setCanSubmit(!getIsSamePriceStateAndServerState());
     setInputList(data.map((item, index) => ({...item, index})));
 
     // 남은 인원이 1명일 때 수정을 불가능하도록 설정
     const onlyOneIndex = getOnlyOneNotAdjustedRemainMemberIndex();
+
+    if (data.length !== 0) {
+      setCanEditList(new Array(data.length).fill(true));
+    }
+
     if (onlyOneIndex !== null) {
       const newCanEditList = new Array(data.length).fill(true);
       newCanEditList[onlyOneIndex] = false;

diff --git a/client/src/hooks/useMemberReportListInAction/useMemberReportListInAction.ts b/client/src/hooks/useMemberReportListInAction/useMemberReportListInAction.ts
@@ -34,10 +34,10 @@ const useMemberReportListInAction = (actionId: number, totalPrice: number) => {
   useEffect(() => {
     const totalPriceFromServer = memberReportListInActionFromServer.reduce((acc, cur) => acc + cur.price, 0);
 
-    if (totalPriceFromServer !== totalPrice) {
+    if (totalPriceFromServer !== totalPrice && totalPriceFromServer !== 0) {
       reCalculatePriceByTotalPriceChange();
     }
-  }, [totalPrice]);
+  }, [totalPrice, memberReportListInActionFromServer]);
 
   useEffect(() => {
     if (queryResult.isSuccess) {