[FE] 차등 정산 기능 구현 및 테스트 작성

client/src/apis/request/bill.ts

@@ -1,8 +1,8 @@
-import type {Bill} from 'types/serviceType';
+import type {Bill, MemberReportInAction} from 'types/serviceType';
 
 import {BASE_URL} from '@apis/baseUrl';
 import {TEMP_PREFIX} from '@apis/tempPrefix';
-import {requestDelete, requestPostWithoutResponse, requestPut} from '@apis/fetcher';
+import {requestDelete, requestGet, requestPostWithoutResponse, requestPut} from '@apis/fetcher';
 import {WithEventId} from '@apis/withEventId.type';
 
 type RequestPostBillList = {
@@ -19,20 +19,18 @@ export const requestPostBillList = async ({eventId, billList}: WithEventId<Reque
   });
 };
 
-type RequestDeleteBillAction = {
+type RequestBillAction = {
   actionId: number;
 };
 
-export const requestDeleteBillAction = async ({eventId, actionId}: WithEventId<RequestDeleteBillAction>) => {
+export const requestDeleteBillAction = async ({eventId, actionId}: WithEventId<RequestBillAction>) => {
   await requestDelete({
     baseUrl: BASE_URL.HD,
     endpoint: `${TEMP_PREFIX}/${eventId}/bill-actions/${actionId}`,
   });
 };
 
-type RequestPutBillAction = Bill & {
-  actionId: number;
-};
+type RequestPutBillAction = Bill & RequestBillAction;
 
 export const requestPutBillAction = async ({eventId, actionId, title, price}: WithEventId<RequestPutBillAction>) => {
   await requestPut({
@@ -44,3 +42,28 @@ export const requestPutBillAction = async ({eventId, actionId, title, price}: Wi
     },
   });
 };
+
+type MemberReportList = {members: MemberReportInAction[]};
+
+export const requestGetMemberReportListInAction = async ({eventId, actionId}: WithEventId<RequestBillAction>) => {
+  return requestGet<MemberReportList>({
+    baseUrl: BASE_URL.HD,
+    endpoint: `${TEMP_PREFIX}/${eventId}/bill-actions/${actionId}/fixed`,
+  });
+};
+
+type RequestPutMemberReportList = RequestBillAction & MemberReportList;
+
+export const requestPutMemberReportListInAction = async ({
+  eventId,
+  actionId,
+  members,
+}: WithEventId<RequestPutMemberReportList>) => {
+  return requestPut({
+    baseUrl: BASE_URL.HD,
+    endpoint: `${TEMP_PREFIX}/${eventId}/bill-actions/${actionId}/fixed`,
+    body: {
+      members,
+    },
+  });
+};

client/src/constants/queryKeys.ts

@@ -4,6 +4,7 @@ const QUERY_KEYS = {
   allMemberList: 'allMemberList',
   currentInMember: 'currentInMember',
   memberReport: 'memberReport',
+  memberReportInAction: 'memberReportInAction',
 };
 
 export default QUERY_KEYS;

client/src/hooks/queries/useRequestGetMemberReportListInAction.ts

@@ -0,0 +1,24 @@
+import {useQuery} from '@tanstack/react-query';
+
+import {requestGetMemberReportListInAction} from '@apis/request/bill';
+
+import getEventIdByUrl from '@utils/getEventIdByUrl';
+
+import QUERY_KEYS from '@constants/queryKeys';
+
+const useRequestGetMemberReportListInAction = (actionId: number) => {
+  const eventId = getEventIdByUrl();
+
+  const {data, ...queryResult} = useQuery({
+    queryKey: [QUERY_KEYS.memberReportInAction, actionId],
+    queryFn: () => requestGetMemberReportListInAction({eventId, actionId}),
+    select: data => data.members,
+  });
+
+  return {
+    memberReportListInActionFromServer: data ?? [],
+    queryResult,
+  };
+};
+
+export default useRequestGetMemberReportListInAction;

client/src/hooks/queries/useRequestPutMemberReportListInAction.ts

@@ -0,0 +1,29 @@
+import {useMutation, useQueryClient} from '@tanstack/react-query';
+
+import {requestPutMemberReportListInAction} from '@apis/request/bill';
+import {MemberReportInAction} from 'types/serviceType';
+
+import getEventIdByUrl from '@utils/getEventIdByUrl';
+
+import QUERY_KEYS from '@constants/queryKeys';
+
+const useRequestPutMemberReportListInAction = (actionId: number) => {
+  const eventId = getEventIdByUrl();
+  const queryClient = useQueryClient();
+
+  const {mutate, ...mutationProps} = useMutation({
+    mutationFn: (members: MemberReportInAction[]) => requestPutMemberReportListInAction({eventId, actionId, members}),
+    onSuccess: () => {
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.stepList]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.memberReport]});
+      queryClient.invalidateQueries({queryKey: [QUERY_KEYS.memberReportInAction, actionId]});
+    },
+  });
+
+  return {
+    putMemberReportListInAction: mutate,
+    mutationProps,
+  };
+};
+
+export default useRequestPutMemberReportListInAction;

client/src/hooks/useDeleteMemberAction/useDeleteMemberAction.test.tsx

@@ -68,6 +68,7 @@ describe('useDeleteMemberAction', () => {
         name: '망쵸',
         price: null,
         sequence: 1,
+        isFixed: false,
       };
 
       result.current.deleteMemberActionList.addDeleteMemberAction(memberAction);

client/src/hooks/useMemberReportListInAction/useMemberReportInput.tsx

@@ -0,0 +1,57 @@
+import type {MemberReportInAction} from 'types/serviceType';
+
+import {useEffect, useState} from 'react';
+
+import validateMemberReportInAction from '@utils/validate/validateMemberReportInAction';
+
+type MemberReportInput = MemberReportInAction & {
+  index: number;
+};
+
+type UseMemberReportProps = {
+  data: MemberReportInAction[];
+  addAdjustedMember: (memberReport: MemberReportInAction) => void;
+  totalPrice: number;
+};
+
+const useMemberReportInput = ({data, addAdjustedMember, totalPrice}: UseMemberReportProps) => {
+  const [inputList, setInputList] = useState<MemberReportInput[]>(data.map((item, index) => ({...item, index})));
+  const [canSubmit, setCanSubmit] = useState<boolean>(false);
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const {value} = event.target;
+
+    validateAndAddAdjustedMember(value, index);
+  };
+
+  const validateAndAddAdjustedMember = (price: string, index: number) => {
+    const {isValid, errorMessage} = validateMemberReportInAction(price, totalPrice);
+    setCanSubmit(errorMessage === null);
+
+    if (isValid) {
+      const newInputList = [...inputList];
+      newInputList[index].price = Number(price);
+      setInputList(newInputList);
+
+      const memberReportData: MemberReportInAction = {
+        name: newInputList[index].name,
+        price: newInputList[index].price,
+        isFixed: newInputList[index].isFixed,
+      };
+      addAdjustedMember(memberReportData);
+    }
+  };
+
+  // addAdjustedMember로 인해 data가 변했을 때 input list의 값을 맞춰주기 위함
+  useEffect(() => {
+    setInputList(data.map((item, index) => ({...item, index})));
+  }, [data]);
+
+  return {
+    inputList,
+    onChange,
+    canSubmit,
+  };
+};
+
+export default useMemberReportInput;