fix: 차등 적용 can submit이 valid 하지만 false되는 버그 (#428)

* fix: 0원을 허용하도록 수정

* feat: 총 금액이 변동됐을 때 재계산을 실행하는 기능 추가

* feat: 하나라도 조정값이 있는지를 판단하는 기능 추가

* test: 조정된 값이 있는지 여부를 주는 기능 test 작성

* feat: 조정되지 않은 인원이 1명일 때, input을 막아버리는 기능 추가

* feat: 서버상태와 클라이언트 상태 가격이 전부 동일하면 can submit false 기능 추가

* fix: input list가 변했을 때 can submit이 돌도록 변경

* fix: 데이터가 없을 때 초기화 되어버리는 현상 해결

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;

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) {