[FE] 지출 내역 추가 변경사항 적용

client/package.json

@@ -68,7 +68,7 @@
     "@emotion/react": "^11.11.4",
     "@sentry/react": "^8.25.0",
     "@tanstack/react-query": "^5.51.23",
-    "haengdong-design": "^0.1.74",
+    "haengdong-design": "^0.1.75",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.3.1",
@@ -80,4 +80,4 @@
     "npm": ">=10.7.0",
     "node": ">=20.15.1"
   }
-}
+}

client/src/components/StepList/BillStepItem.tsx

@@ -1,26 +1,41 @@
-import type {BillStep, MemberReport} from 'types/serviceType';
-
-import {DragHandleItem, DragHandleItemContainer} from 'haengdong-design';
+import {DragHandleItem, DragHandleItemContainer, EditableItem, Flex, Text} from 'haengdong-design';
 import {Fragment, useState} from 'react';
 import {useOutletContext} from 'react-router-dom';
 
+import {BillStep, MemberReport} from 'types/serviceType';
 import {PutAndDeleteBillActionModal} from '@components/Modal/SetActionModal/PutAndDeleteBillActionModal';
 import {MemberListInBillStep} from '@components/Modal/MemberListInBillStep';
 import {EventPageContextProps} from '@pages/EventPage/EventPageLayout';
 
+import useSetBillInput from '@hooks/useSetBillInput';
+
 interface BillStepItemProps {
   step: BillStep;
   isOpenBottomSheet: boolean;
   setIsOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  isAddEditableItem: boolean;
+  setIsAddEditableItem: React.Dispatch<React.SetStateAction<boolean>>;
+  isLastBillItem: boolean;
+  index: number;
 }
 
-const BillStepItem: React.FC<BillStepItemProps> = ({step, isOpenBottomSheet, setIsOpenBottomSheet}) => {
+const BillStepItem: React.FC<BillStepItemProps> = ({
+  step,
+  isOpenBottomSheet,
+  setIsOpenBottomSheet,
+  isAddEditableItem,
+  setIsAddEditableItem,
+  isLastBillItem,
+  index,
+}) => {
   const {isAdmin} = useOutletContext<EventPageContextProps>();
+  const {handleBlurBillRequest, handleChangeBillInput, billInput} = useSetBillInput({setIsAddEditableItem});
+
   const [clickedIndex, setClickedIndex] = useState(-1);
   const [isOpenMemberListInBillStep, setIsOpenMemberListInBillStep] = useState(false);
 
   const stepName = `차`;
-  const totalPrice = step.actions.reduce((acc, cur) => acc + cur.price, 0);
+  const totalPrice = step.actions && step.type === 'BILL' ? step.actions.reduce((acc, cur) => acc + cur.price, 0) : 0;
 
   const handleDragHandleItemClick = (index: number) => {
     setClickedIndex(index);
@@ -39,31 +54,56 @@ const BillStepItem: React.FC<BillStepItemProps> = ({step, isOpenBottomSheet, set
   return (
     <>
       <DragHandleItemContainer
+        id={`${index}`}
         topLeftText={stepName}
         topRightText={`${step.members.length}명`}
         bottomLeftText="총액"
         bottomRightText={`${totalPrice.toLocaleString('ko-kr')} 원`}
         backgroundColor="white"
         onTopRightTextClick={handleTopRightTextClick}
       >
-        {step.actions.map((action, index) => (
-          <Fragment key={action.actionId}>
-            <DragHandleItem
-              hasDragHandler={isAdmin}
-              prefix={action.name}
-              suffix={`${action.price.toLocaleString('ko-kr')} 원`}
-              backgroundColor="lightGrayContainer"
-              onClick={() => handleDragHandleItemClick(index)}
-            />
-            {isOpenBottomSheet && clickedIndex === index && isAdmin && (
-              <PutAndDeleteBillActionModal
-                billAction={action}
-                isBottomSheetOpened={isOpenBottomSheet}
-                setIsBottomSheetOpened={setIsOpenBottomSheet}
+        {step.actions &&
+          step.type === 'BILL' &&
+          step.actions.map((action, index) => (
+            <Fragment key={action.actionId}>
+              <DragHandleItem
+                hasDragHandler={isAdmin}
+                prefix={action.name}
+                suffix={`${action.price.toLocaleString('ko-kr')} 원`}
+                backgroundColor="lightGrayContainer"
+                onClick={() => handleDragHandleItemClick(index)}
               />
-            )}
-          </Fragment>
-        ))}
+
+              {isOpenBottomSheet && clickedIndex === index && isAdmin && (
+                <PutAndDeleteBillActionModal
+                  billAction={action}
+                  isBottomSheetOpened={isOpenBottomSheet}
+                  setIsBottomSheetOpened={setIsOpenBottomSheet}
+                />
+              )}
+            </Fragment>
+          ))}
+
+        {isAddEditableItem && isLastBillItem && (
+          <EditableItem backgroundColor="lightGrayContainer" onBlur={handleBlurBillRequest}>
+            <EditableItem.Input
+              placeholder="지출 내역"
+              textSize="bodyBold"
+              value={billInput.title}
+              onChange={e => handleChangeBillInput('title', e)}
+            ></EditableItem.Input>
+            <Flex gap="0.25rem" alignItems="center">
+              <EditableItem.Input
+                placeholder="0"
+                type="number"
+                value={billInput.price}
+                onChange={e => handleChangeBillInput('price', e)}
+                style={{textAlign: 'right'}}
+              ></EditableItem.Input>
+              <Text size="caption">원</Text>
+            </Flex>
+          </EditableItem>
+        )}
       </DragHandleItemContainer>
       {isOpenMemberListInBillStep && (
         <MemberListInBillStep

client/src/components/StepList/Step.tsx

@@ -1,22 +1,42 @@
 import type {BillStep, MemberStep} from 'types/serviceType';
 
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 
 import BillStepItem from './BillStepItem';
 import MemberStepItem from './MemberStepItem';
 
 interface StepProps {
   step: BillStep | MemberStep;
+  isAddEditableItem: boolean;
+  lastBillItemIndex: number;
+  setIsAddEditableItem: React.Dispatch<React.SetStateAction<boolean>>;
+  index: number;
 }
 
-const Step = ({step}: StepProps) => {
+const Step = ({step, isAddEditableItem, lastBillItemIndex, setIsAddEditableItem, index}: StepProps) => {
   const [isOpenBottomSheet, setIsOpenBottomSheet] = useState<boolean>(false);
+  const [isLastBillItem, setIsLastBillItem] = useState<boolean>(false);
 
-  if (step.type === 'BILL') {
+  useEffect(() => {
+    if (index === lastBillItemIndex) {
+      // index를 사용하여 마지막 BillStep인지 확인
+      setIsLastBillItem(true);
+    }
+  }, [index, lastBillItemIndex]);
+
+  if (step.actions && step.type === 'BILL') {
     return (
-      <BillStepItem step={step} isOpenBottomSheet={isOpenBottomSheet} setIsOpenBottomSheet={setIsOpenBottomSheet} />
+      <BillStepItem
+        index={index}
+        step={step as BillStep}
+        isOpenBottomSheet={isOpenBottomSheet}
+        setIsOpenBottomSheet={setIsOpenBottomSheet}
+        isAddEditableItem={isAddEditableItem}
+        setIsAddEditableItem={setIsAddEditableItem}
+        isLastBillItem={isLastBillItem}
+      />
     );
-  } else if (step.type === 'IN' || step.type === 'OUT') {
+  } else if (step.actions && (step.type === 'IN' || step.type === 'OUT')) {
     return (
       <MemberStepItem step={step} isOpenBottomSheet={isOpenBottomSheet} setIsOpenBottomSheet={setIsOpenBottomSheet} />
     );

client/src/components/StepList/StepList.tsx

@@ -1,21 +1,38 @@
 import {Flex} from 'haengdong-design';
+import {useMemo} from 'react';
 
 import {BillStep, MemberStep} from 'types/serviceType';
 import useRequestGetStepList from '@hooks/queries/useRequestGetStepList';
 
 import Step from './Step';
 
-const StepList = () => {
-  // const {stepList} = useStepList();
+interface StepListProps {
+  isAddEditableItem: boolean;
+  setIsAddEditableItem: React.Dispatch<React.SetStateAction<boolean>>;
+}
 
+const StepList = ({isAddEditableItem, setIsAddEditableItem}: StepListProps) => {
   const {data: stepListData} = useRequestGetStepList();
   const stepList = stepListData ?? ([] as (MemberStep | BillStep)[]);
 
-  // TODO: (@weadie) if else 구문이 지저분하므로 리펙터링이 필요합니다.
+  const lastBillItemIndex = useMemo(() => {
+    const billSteps = stepList.map((step, index) => ({...step, index})).filter(step => step.type === 'BILL');
+
+    // billSteps 배열이 비어 있지 않으면 마지막 항목의 index를 반환, 그렇지 않으면 -1을 반환
+    return billSteps.length > 0 ? billSteps.slice(-1)[0].index : -1;
+  }, [stepList]);
+
   return (
     <Flex flexDirection="column" gap="0.5rem" paddingInline="0.5rem">
       {stepList.map((step, index) => (
-        <Step step={step} key={`${step.stepName}${index}`} />
+        <Step
+          index={index}
+          step={step}
+          lastBillItemIndex={lastBillItemIndex}
+          key={`${step.stepName}${index}`}
+          isAddEditableItem={isAddEditableItem}
+          setIsAddEditableItem={setIsAddEditableItem}
+        />
       ))}
     </Flex>
   );

client/src/hooks/useSetBillInput.ts

@@ -0,0 +1,65 @@
+import {useState} from 'react';
+
+import validatePurchase from '@utils/validate/validatePurchase';
+import {Bill} from 'types/serviceType';
+
+import useRequestPostBillList from './queries/useRequestPostBillList';
+import {BillInputType, InputPair} from './useDynamicBillActionInput';
+
+interface UseSetBillInputProps {
+  setIsAddEditableItem: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+interface UseSetBillInputReturns {
+  billInput: Bill;
+  handleChangeBillInput: (field: BillInputType, event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleBlurBillRequest: () => void;
+}
+
+const useSetBillInput = ({setIsAddEditableItem}: UseSetBillInputProps): UseSetBillInputReturns => {
+  const initialInput = {title: '', price: 0};
+  const [billInput, setBillInput] = useState<Bill>(initialInput);
+
+  const {mutate: postBillList} = useRequestPostBillList();
+
+  const handleChangeBillInput = (field: BillInputType, event: React.ChangeEvent<HTMLInputElement>) => {
+    const {value} = event.target;
+    const {isValid} = validatePurchase({
+      ...billInput,
+      [field]: value,
+    });
+
+    if (isValid) {
+      setBillInput(prev => ({
+        ...prev,
+        [field]: value,
+      }));
+    }
+  };
+
+  const handleBlurBillRequest = () => {
+    const isEmptyTitle = billInput.title.trim().length;
+    const isEmptyPrice = Number(billInput.price);
+
+    // 두 input의 값이 모두 채워졌을 때 api 요청
+    // api 요청을 하면 Input을 띄우지 않음
+    if (isEmptyTitle && isEmptyPrice) {
+      postBillList(
+        {billList: [billInput]},
+        {
+          onSuccess: () => {
+            setIsAddEditableItem(false);
+          },
+        },
+      );
+    }
+  };
+
+  return {
+    billInput,
+    handleBlurBillRequest,
+    handleChangeBillInput,
+  };
+};
+
+export default useSetBillInput;

client/src/pages/EventPage/AdminPage/AdminPage.style.ts

@@ -4,8 +4,7 @@ export const receiptStyle = () =>
   css({
     display: 'flex',
     flexDirection: 'column',
-    gap: '8px',
-    padding: '0 8px',
+    gap: '1rem',
     paddingBottom: '8.75rem',
   });
 
@@ -14,3 +13,11 @@ export const titleAndListButtonContainerStyle = () =>
     display: 'flex',
     flexDirection: 'column',
   });
+
+export const buttonGroupStyle = () =>
+  css({
+    display: 'flex',
+    width: '100%',
+    padding: '0 0.5rem',
+    gap: '0.5rem',
+  });

client/src/pages/EventPage/AdminPage/AdminPage.tsx

@@ -1,5 +1,5 @@
 import {useEffect, useState} from 'react';
-import {Title, FixedButton, ListButton} from 'haengdong-design';
+import {Title, FixedButton, ListButton, Button} from 'haengdong-design';
 import {useOutletContext} from 'react-router-dom';
 
 import StepList from '@components/StepList/StepList';
@@ -11,11 +11,12 @@ import {useTotalExpenseAmountStore} from '@store/totalExpenseAmountStore';
 
 import {EventPageContextProps} from '../EventPageLayout';
 
-import {receiptStyle, titleAndListButtonContainerStyle} from './AdminPage.style';
+import {receiptStyle, titleAndListButtonContainerStyle, buttonGroupStyle} from './AdminPage.style';
 
 const AdminPage = () => {
   const [isOpenFixedButtonBottomSheet, setIsOpenFixedButtonBottomSheet] = useState(false);
   const [isOpenAllMemberListButton, setIsOpenAllMemberListButton] = useState(false);
+  const [isAddEditableItem, setIsAddEditableItem] = useState(false);
 
   const {eventName} = useOutletContext<EventPageContextProps>();
   const {data: allMemberListData} = useRequestGetAllMemberList();
@@ -54,11 +55,24 @@ const AdminPage = () => {
         )}
       </div>
       <section css={receiptStyle}>
-        <StepList />
-        <FixedButton
-          children={allMemberList.length === 0 ? '시작인원 추가하기' : '행동 추가하기'}
-          onClick={() => setIsOpenFixedButtonBottomSheet(prev => !prev)}
-        />
+        <StepList isAddEditableItem={isAddEditableItem} setIsAddEditableItem={setIsAddEditableItem} />
+        {allMemberList.length === 0 ? (
+          <FixedButton children={'시작인원 추가하기'} onClick={() => setIsOpenFixedButtonBottomSheet(prev => !prev)} />
+        ) : (
+          <div css={buttonGroupStyle}>
+            <Button
+              size="medium"
+              variants="tertiary"
+              style={{width: '100%'}}
+              onClick={() => setIsOpenFixedButtonBottomSheet(prev => !prev)}
+            >
+              인원 변동 추가
+            </Button>
+            <Button size="medium" onClick={() => setIsAddEditableItem(true)} style={{width: '100%'}}>
+              지출 내역 추가
+            </Button>
+          </div>
+        )}
         {isOpenFixedButtonBottomSheet && (
           <ModalBasedOnMemberCount
             allMemberList={allMemberList}