[FE] 지출 액션 수정, 삭제 기능 구현

HDesign/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haengdong-design",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

HDesign/src/components/BottomSheet/BottomSheet.tsx

@@ -19,16 +19,16 @@ import {
 const BottomSheet: React.FC<BottomSheetProps> = ({
   isOpened = false,
   children,
-  onChangeClose,
-  onChangeOpen,
+  onClose,
+  onOpen,
   ...props
 }: BottomSheetProps) => {
   const {theme} = useTheme();
   const {opened, visible, handleClose, handleDragStart, handleDrag, handleDragEnd, isDragging, translateY} =
     useBottomSheet({
       isOpened,
-      onChangeClose,
-      onChangeOpen,
+      onClose,
+      onOpen,
     });
 
   // TODO: (@todari) : children 길이 길 때 overflow button에 안가리는 영역 처리

HDesign/src/components/InOutItem/InOutItem.tsx

@@ -25,7 +25,7 @@ export const InOutItem: React.FC<InOutItemProps> = ({
 
   // TODO: (@toari) : 사람 수 많을 때 UX writing 처리
   return (
-    <DragHandleItem {...htmlProps} hasDragHandle={hasDragHandle}>
+    <DragHandleItem {...htmlProps} hasDragHandle={hasDragHandle} onClick={() => alert('안녕')}>
       <Text css={textStyle(theme, hasDragHandle)} size="bodyBold">
         {names.join(', ')} {IN_OUT_TEXT[inOutType]}
       </Text>

client/package.json

@@ -39,12 +39,12 @@
     "typescript-eslint": "^7.16.0",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "webpack-dev-server": "^5.0.4",
+    "@types/dotenv-webpack": "^7.0.7",
+    "dotenv-webpack": "^8.1.0"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
-    "@types/dotenv-webpack": "^7.0.7",
-    "dotenv-webpack": "^8.1.0",
     "haengdong-design": "^0.1.53",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

client/src/apis/request/bill.ts

@@ -1,3 +1,5 @@
+import type {Bill} from 'types/serviceType';
+
 import {BASE_URL} from '@apis/baseUrl';
 import {TEMP_PREFIX} from '@apis/tempPrefix';
 import {requestPost, requestDelete, requestPut} from '@apis/fetcher';

client/src/apis/request/member.ts

@@ -1,3 +1,5 @@
+import type {MemberType} from 'types/serviceType';
+
 import {BASE_URL} from '@apis/baseUrl';
 import {TEMP_PREFIX} from '@apis/tempPrefix';
 import {requestPost, requestDelete} from '@apis/fetcher';

client/src/apis/request/report.ts

@@ -1,3 +1,5 @@
+import type {MemberReport} from 'types/serviceType';
+
 import {BASE_URL} from '@apis/baseUrl';
 import {TEMP_PREFIX} from '@apis/tempPrefix';
 import {requestGet} from '@apis/fetcher';

client/src/apis/request/stepList.ts

@@ -1,3 +1,5 @@
+import type {StepList} from 'types/serviceType';
+
 import {BASE_URL} from '@apis/baseUrl';
 import {TEMP_PREFIX} from '@apis/tempPrefix';
 import {requestGet} from '@apis/fetcher';

client/src/components/Modal/EditBillActionModal/EditBillActionModal.tsx

@@ -0,0 +1,28 @@
+import {BottomSheet, LabelGroupInput, FixedButton, Text} from 'haengdong-design';
+import {useState} from 'react';
+
+import {BillAction} from 'types/serviceType';
+
+interface EditBillActionModalProps {
+  isOpened: boolean;
+  billAction: BillAction;
+}
+
+const EditBillActionModal = ({isOpened, billAction}: EditBillActionModalProps) => {
+  const [errorText, setErrorText] = useState('');
+
+  const [isEdited, setIsEdited] = useState(false);
+
+  return (
+    <BottomSheet isOpened={isOpened}>
+      <Text size="bodyBold">지출 내역 수정하기</Text>
+      <LabelGroupInput labelText="지출내역 / 금액" errorText={errorText}>
+        <LabelGroupInput.Element elementKey="name" value={billAction.name} />
+        <LabelGroupInput.Element elementKey="price" value={billAction.price} />
+      </LabelGroupInput>
+      <FixedButton />
+    </BottomSheet>
+  );
+};
+
+export default EditBillActionModal;

client/src/components/Modal/InOut/ComeInMember.style.ts

@@ -0,0 +1,20 @@
+import {css} from '@emotion/react';
+
+export const setInitialParticipantsStyle = () =>
+  css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1.5rem',
+    width: '100%',
+    height: '100%',
+    padding: '0 1.5rem',
+  });
+
+export const setInitialParticipantsInputGroupStyle = () =>
+  css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    overflow: 'auto',
+    paddingBottom: '11rem',
+  });

client/src/components/Modal/InOut/ComeInMember.tsx

@@ -0,0 +1,41 @@
+import type {MemberAction} from 'types/serviceType';
+
+import {Text, Input, BottomSheet, Button, Flex} from 'haengdong-design';
+
+import {useStepList} from '@hooks/useStepList/useStepList';
+import useMemberAction from '@hooks/useStepList/useMemberAction';
+
+import {setInitialParticipantsInputGroupStyle, setInitialParticipantsStyle} from './ComeInMember.style';
+
+interface SetInitialParticipantsProps {
+  openBottomSheet: boolean;
+  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  actions: MemberAction[];
+}
+
+const ComeInMember = ({openBottomSheet, setOpenBottomSheet, actions}: SetInitialParticipantsProps) => {
+  const {refreshStepList, stepList} = useStepList();
+  const {deleteMember} = useMemberAction({stepList, refreshStepList});
+
+  return (
+    <BottomSheet isOpened={openBottomSheet} onChangeClose={() => setOpenBottomSheet(false)}>
+      <div css={setInitialParticipantsStyle}>
+        <Text size="bodyBold">들어온 인원 수정하기</Text>
+        <div css={setInitialParticipantsInputGroupStyle}>
+          {actions.map(action => (
+            <Flex flexDirection="row" width="100%">
+              <div style={{flexGrow: 1}}>
+                <Input disabled key={`${action.actionId}`} type="text" style={{flexGrow: 1}} value={action.name} />
+              </div>
+              <Button style={{width: '50px'}} onClick={() => deleteMember(action)}>
+                X
+              </Button>
+            </Flex>
+          ))}
+        </div>
+      </div>
+    </BottomSheet>
+  );
+};
+
+export default ComeInMember;

client/src/components/Modal/InOut/GetOutMember.style.ts

@@ -0,0 +1,20 @@
+// import {css} from '@emotion/react';
+
+// export const setInitialParticipantsStyle = () =>
+//   css({
+//     display: 'flex',
+//     flexDirection: 'column',
+//     gap: '1.5rem',
+//     width: '100%',
+//     height: '100%',
+//     padding: '0 1.5rem',
+//   });
+
+// export const setInitialParticipantsInputGroupStyle = () =>
+//   css({
+//     display: 'flex',
+//     flexDirection: 'column',
+//     gap: '1rem',
+//     overflow: 'auto',
+//     paddingBottom: '11rem',
+//   });

client/src/components/Modal/InOut/GetOutMember.tsx

@@ -0,0 +1,17 @@
+import {BottomSheet, FixedButton} from 'haengdong-design';
+
+interface SetInitialParticipantsProps {
+  openBottomSheet: boolean;
+  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const GetOutMember = ({openBottomSheet, setOpenBottomSheet}: SetInitialParticipantsProps) => {
+  return (
+    <BottomSheet isOpened={openBottomSheet} onChangeClose={() => setOpenBottomSheet(false)}>
+      망쵸모달 나감 모달
+      <FixedButton onDeleteClick={() => alert('아아아앙')}>안녕</FixedButton>
+    </BottomSheet>
+  );
+};
+
+export default GetOutMember;

client/src/components/Modal/SetActionModal/AddBillActionListModalContent/AddBillActionListModalContent.tsx

@@ -7,12 +7,12 @@ import useDynamicBillActionInput from '@hooks/useDynamicBillActionInput';
 
 import style from './AddBillActionListModalContent.style';
 
-interface SetPurchaseProps {
+interface AddBillActionListModalContentProps {
   setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
   setOrder: React.Dispatch<React.SetStateAction<number>>;
 }
 
-const AddBillActionListModalContent = ({setOpenBottomSheet, setOrder}: SetPurchaseProps) => {
+const AddBillActionListModalContent = ({setOpenBottomSheet, setOrder}: AddBillActionListModalContentProps) => {
   const {
     inputPairList,
     inputRefList,

client/src/components/Modal/SetActionModal/AddBillActionListModalContent/index.ts

@@ -0,0 +1 @@
+export {default as AddBillActionListModalContent} from './AddBillActionListModalContent';

client/src/components/Modal/SetActionModal/AddMemberActionListModalContent/AddMemberActionListModalContent.tsx

@@ -1,19 +1,20 @@
+import type {MemberType} from 'types/serviceType';
+
 import {FixedButton, LabelGroupInput} from 'haengdong-design';
 
 import {useStepList} from '@hooks/useStepList/useStepList';
 import validateMemberName from '@utils/validate/validateMemberName';
-import {MemberType} from 'types/serviceType';
 
 import useDynamicInput from '@hooks/useDynamicInput';
 
 import style from './AddMemberActionListModalContent.style';
 
-interface UpdateMembersProps {
+interface AddMemberActionListModalContentProps {
   inOutAction: MemberType;
   setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const AddMemberActionListModalContent = ({inOutAction, setOpenBottomSheet}: UpdateMembersProps) => {
+const AddMemberActionListModalContent = ({inOutAction, setOpenBottomSheet}: AddMemberActionListModalContentProps) => {
   const {
     inputList,
     inputRefList,

client/src/components/Modal/SetActionModal/AddMemberActionListModalContent/index.ts

@@ -0,0 +1 @@
+export {default as AddMemberActionListModalContent} from './AddMemberActionListModalContent';

client/src/components/Modal/SetActionModal/SetActionListModal.tsx

@@ -1,8 +1,10 @@
+import type {InOutType} from 'types/serviceType';
+
 import {useState} from 'react';
 import {BottomSheet, Switch} from 'haengdong-design';
 
-import SetPurchase from './AddBillActionListModalContent/AddBillActionListModalContent';
-import AddMemberActionListModalContent from './AddMemberActionListModalContent/AddMemberActionListModalContent';
+import {AddBillActionListModalContent} from './AddBillActionListModalContent';
+import {AddMemberActionListModalContent} from './AddMemberActionListModalContent';
 import style from './SetActionListModal.style';
 
 export type ActionType = '지출' | '인원';
@@ -35,7 +37,9 @@ const SetActionListModal = ({openBottomSheet, setOpenBottomSheet, setOrder}: Set
           )}
         </div>
 
-        {action === '지출' && <SetPurchase setOpenBottomSheet={setOpenBottomSheet} setOrder={setOrder} />}
+        {action === '지출' && (
+          <AddBillActionListModalContent setOpenBottomSheet={setOpenBottomSheet} setOrder={setOrder} />
+        )}
         {action === '인원' && (
           <AddMemberActionListModalContent
             inOutAction={inOutAction === '탈주' ? 'OUT' : 'IN'}

client/src/components/Modal/index.ts

@@ -1,2 +1,2 @@
-export {default as SetInitialMemberListModal} from './SetInitialMemberListModal/SetInitialMemberListModal';
 export {default as SetActionListModal} from './SetActionModal/SetActionListModal';
+export {default as SetInitialMemberListModal} from './SetInitialMemberListModal/SetInitialMemberListModal';

client/src/components/StepList/BillStepItem.tsx

@@ -0,0 +1,26 @@
+import type {BillStep} from 'types/serviceType';
+
+import {StepItem} from 'haengdong-design';
+
+import EditBillActionModal from '@components/Modal/EditBillActionModal/EditBillActionModal';
+interface BillStepItemProps {
+  step: BillStep;
+  isOpenBottomSheet: boolean;
+  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const BillStepItem: React.FC<BillStepItemProps> = ({step, isOpenBottomSheet, setOpenBottomSheet}) => {
+  return (
+    <>
+      <StepItem
+        name={step.stepName === null ? '행사' : step.stepName}
+        bills={step.actions}
+        personCount={step.members.length}
+        onClick={() => setOpenBottomSheet(true)}
+      />
+      <EditBillActionModal isOpened={isOpenBottomSheet} />
+    </>
+  );
+};
+
+export default BillStepItem;

client/src/components/StepList/MemberStepItem.tsx

@@ -0,0 +1,39 @@
+import type {MemberStep} from 'types/serviceType';
+
+import {InOutItem} from 'haengdong-design';
+
+import ComeInMember from '@components/Modal/InOut/ComeInMember';
+import GetOutMember from '@components/Modal/InOut/GetOutMember';
+
+interface MemberStepItemProps {
+  step: MemberStep;
+  isOpenBottomSheet: boolean;
+  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const MemberStepItem: React.FC<MemberStepItemProps> = ({step, isOpenBottomSheet, setOpenBottomSheet}) => {
+  return (
+    <>
+      <InOutItem
+        inOutType={step.type}
+        names={step.actions.map(({name}) => name)}
+        onClick={() => setOpenBottomSheet(prev => !prev)}
+      />
+      {isOpenBottomSheet && step.type === 'IN' && (
+        <ComeInMember
+          actions={step.actions}
+          openBottomSheet={isOpenBottomSheet}
+          setOpenBottomSheet={() => setOpenBottomSheet(prev => !prev)}
+        />
+      )}
+      {isOpenBottomSheet && step.type === 'OUT' && (
+        <GetOutMember
+          openBottomSheet={isOpenBottomSheet}
+          setOpenBottomSheet={() => setOpenBottomSheet(prev => !prev)}
+        />
+      )}
+    </>
+  );
+};
+
+export default MemberStepItem;

client/src/components/StepList/Step.tsx

@@ -0,0 +1,24 @@
+import type {BillStep, MemberStep} from 'types/serviceType';
+
+import {useState} from 'react';
+
+import BillStepItem from './BillStepItem';
+import MemberStepItem from './MemberStepItem';
+
+interface StepProps {
+  step: BillStep | MemberStep;
+}
+
+const Step = ({step}: StepProps) => {
+  const [isOpenBottomSheet, setOpenBottomSheet] = useState<boolean>(false);
+
+  if (step.type === 'BILL') {
+    return <BillStepItem step={step} isOpenBottomSheet={isOpenBottomSheet} setOpenBottomSheet={setOpenBottomSheet} />;
+  } else if (step.type === 'IN' || step.type === 'OUT') {
+    return <MemberStepItem step={step} isOpenBottomSheet={isOpenBottomSheet} setOpenBottomSheet={setOpenBottomSheet} />;
+  } else {
+    return <></>;
+  }
+};
+
+export default Step;