feat: 행동대장 v1.0.1

HDesign/src/components/EditableItem/EditableItem.Input.tsx

@@ -29,10 +29,13 @@ export const EditableItemInput = forwardRef<HTMLInputElement, InputProps>(functi
 
   return (
     <div css={inputWrapperStyle}>
+      <input type="number" />
+
       <Flex flexDirection="row">
         <div ref={shadowRef} css={editingContainerStyle}>
           <Text size={textSize}>{htmlProps.value || htmlProps.placeholder}</Text>
         </div>
+
         {isFixed && <IsFixedIcon />}
         <div css={underlineStyle({theme, hasError, hasFocus})}>
           <input

client/package.json

@@ -69,7 +69,7 @@
     "@emotion/react": "^11.11.4",
     "@sentry/react": "^8.25.0",
     "@tanstack/react-query": "^5.51.23",
-    "haengdong-design": "^0.1.81",
+    "haengdong-design": "^0.1.82",
     "jest-canvas-mock": "^2.5.2",
     "react": "^18.3.1",
     "react-copy-to-clipboard": "^5.1.0",

client/src/components/MemberReportList/MemberReportList.tsx

@@ -1,20 +1,30 @@
-import {ExpenseList, Flex, Input} from 'haengdong-design';
-import React, {useState} from 'react';
+import {ExpenseList, Flex, Input, Text} from 'haengdong-design';
+import React, {useEffect, useState} from 'react';
 
 import useSearchMemberReportList from '@hooks/useSearchMemberReportList/useSearchMemberReportList';
 
 const MemberReportList = () => {
   const [name, setName] = useState('');
-  const {memberReportSearchList} = useSearchMemberReportList({name});
+  const {memberReportSearchList, memberReportList} = useSearchMemberReportList({name});
 
   const changeName = ({target}: React.ChangeEvent<HTMLInputElement>) => {
     setName(target.value);
   };
 
   return (
     <Flex flexDirection="column" gap="0.5rem" paddingInline="0.5rem">
-      <Input inputType="search" value={name} onChange={changeName} placeholder="참여자 이름" />
-      <ExpenseList expenseList={memberReportSearchList} />
+      {memberReportList.length > 0 ? (
+        <>
+          <Input inputType="search" value={name} onChange={changeName} placeholder="참여자 이름" />
+          {memberReportSearchList.length !== 0 && <ExpenseList expenseList={memberReportSearchList} />}
+        </>
+      ) : (
+        <Flex width="100%" justifyContent="center">
+          <Text size="body" textColor="gray" style={{paddingTop: '1rem'}}>
+            지금은 참여자가 한 명도 없어요. :(
+          </Text>
+        </Flex>
+      )}
     </Flex>
   );
 };

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

@@ -1,6 +1,7 @@
 import type {BillAction} from 'types/serviceType';
 
 import {BottomSheet, EditableItem, FixedButton, Flex, Text} from 'haengdong-design';
+import {useEffect} from 'react';
 
 import validatePurchase from '@utils/validate/validatePurchase';
 import useRequestGetStepList from '@hooks/queries/useRequestGetStepList';
@@ -64,6 +65,10 @@ const PutAndDeleteBillActionModal = ({
     actions.find(({actionId}) => actionId === billAction.actionId),
   )[0].members;
 
+  useEffect(() => {
+    console.log(inputList);
+  }, [inputList]);
+
   return (
     <BottomSheet isOpened={isBottomSheetOpened} onClose={() => setIsBottomSheetOpened(false)}>
       <form

client/src/components/StepList/StepList.tsx

@@ -1,4 +1,4 @@
-import {Flex} from 'haengdong-design';
+import {Flex, Text} from 'haengdong-design';
 import {useEffect, useMemo, useState} from 'react';
 
 import {BillStep, MemberStep} from 'types/serviceType';
@@ -58,17 +58,25 @@ const StepList = ({isAddEditableItem = false, setIsAddEditableItem = () => {}}:
 
   return (
     <Flex flexDirection="column" gap="0.5rem" paddingInline="0.5rem">
-      {stepList.map((step, index) => (
-        <Step
-          index={index}
-          step={step}
-          lastBillItemIndex={lastBillItemIndex}
-          lastItemIndex={lastItemIndex}
-          key={`${step.stepName}${index}`}
-          isAddEditableItem={isAddEditableItem}
-          setIsAddEditableItem={setIsAddEditableItem}
-        />
-      ))}
+      {stepList.length > 0 ? (
+        stepList.map((step, index) => (
+          <Step
+            index={index}
+            step={step}
+            lastBillItemIndex={lastBillItemIndex}
+            lastItemIndex={lastItemIndex}
+            key={`${step.stepName}${index}`}
+            isAddEditableItem={isAddEditableItem}
+            setIsAddEditableItem={setIsAddEditableItem}
+          />
+        ))
+      ) : (
+        <Flex width="100%" justifyContent="center">
+          <Text size="body" textColor="gray" style={{paddingTop: '1rem'}}>
+            지금은 지출 내역이 없어요. :(
+          </Text>
+        </Flex>
+      )}
     </Flex>
   );
 };

client/src/hooks/useSearchMemberReportList/useSearchMemberReportList.tsx

@@ -10,6 +10,7 @@ const useSearchMemberReportList = ({name}: UseSearchMemberReportListParams) => {
 
   return {
     memberReportSearchList: memberReportList.filter(memberReport => memberReport.name.includes(name)),
+    memberReportList,
   };
 };