[FE] 전체 참여자 BottomSheet 내부 디자인 퍼블리싱

client/src/components/InputAndDeleteButton/InputAndDeleteButton.style.ts

@@ -0,0 +1,9 @@
+import {css} from '@emotion/react';
+
+export const InputAndDeleteButtonContainer = () =>
+  css({
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    gap: '1rem',
+  });

client/src/components/InputAndDeleteButton/InputAndDeleteButton.tsx

@@ -0,0 +1,18 @@
+import {Icon, IconButton, LabelGroupInput} from 'haengdong-design';
+
+import {InputAndDeleteButtonContainer} from './InputAndDeleteButton.style';
+
+const InputAndDeleteButton = () => {
+  return (
+    <div css={InputAndDeleteButtonContainer}>
+      <div css={{flexGrow: 1}}>
+        <LabelGroupInput.Element elementKey="e" />
+      </div>
+      <IconButton variants="tertiary" size="medium">
+        <Icon iconType="trash" iconColor="onTertiary" />
+      </IconButton>
+    </div>
+  );
+};
+
+export default InputAndDeleteButton;

client/src/components/Modal/ModalBasedOnMemberCount/ModalBasedOnMemberCount.tsx

@@ -0,0 +1,46 @@
+import {SetAllMemberListModal, SetInitialMemberListModal, SetActionListModal} from '@components/Modal/index';
+
+interface ModalBasedOnMemberCountProps {
+  memberNameList: string[];
+  isOpenBottomSheet: boolean;
+  isOpenAllMemberListButton: boolean;
+  setOrder: React.Dispatch<React.SetStateAction<number>>;
+  setIsOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOpenAllMemberListButton: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const ModalBasedOnMemberCount = ({
+  memberNameList,
+  isOpenBottomSheet,
+  isOpenAllMemberListButton,
+  setOrder,
+  setIsOpenBottomSheet,
+  setIsOpenAllMemberListButton,
+}: ModalBasedOnMemberCountProps) => {
+  if (isOpenAllMemberListButton) {
+    return (
+      <SetAllMemberListModal
+        setIsOpenBottomSheet={setIsOpenBottomSheet}
+        isOpenBottomSheet={isOpenBottomSheet}
+        setIsOpenAllMemberListButton={setIsOpenAllMemberListButton}
+      />
+    );
+  }
+  switch (memberNameList.length) {
+    case 0:
+      return (
+        <SetInitialMemberListModal setIsOpenBottomSheet={setIsOpenBottomSheet} isOpenBottomSheet={isOpenBottomSheet} />
+      );
+
+    default:
+      return (
+        <SetActionListModal
+          setOrder={setOrder}
+          setIsOpenBottomSheet={setIsOpenBottomSheet}
+          isOpenBottomSheet={isOpenBottomSheet}
+        />
+      );
+  }
+};
+
+export default ModalBasedOnMemberCount;

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

@@ -8,11 +8,11 @@ import useDynamicBillActionInput from '@hooks/useDynamicBillActionInput';
 import style from './AddBillActionListModalContent.style';
 
 interface AddBillActionListModalContentProps {
-  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
   setOrder: React.Dispatch<React.SetStateAction<number>>;
 }
 
-const AddBillActionListModalContent = ({setOpenBottomSheet, setOrder}: AddBillActionListModalContentProps) => {
+const AddBillActionListModalContent = ({setIsOpenBottomSheet, setOrder}: AddBillActionListModalContentProps) => {
   const {
     inputPairList,
     inputRefList,
@@ -28,7 +28,7 @@ const AddBillActionListModalContent = ({setOpenBottomSheet, setOrder}: AddBillAc
 
     // TODO: (@weadie) 요청 실패시 오류 핸들 필요
     addBill(getFilledInputPairList().map(({title, price}) => ({title, price: Number(price)}))); // TODO: (@weadie) DTO같은게 다이내믹에 필요할까?
-    setOpenBottomSheet(false);
+    setIsOpenBottomSheet(false);
   };
 
   return (

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

@@ -11,10 +11,10 @@ import style from './AddMemberActionListModalContent.style';
 
 interface AddMemberActionListModalContentProps {
   inOutAction: MemberType;
-  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const AddMemberActionListModalContent = ({inOutAction, setOpenBottomSheet}: AddMemberActionListModalContentProps) => {
+const AddMemberActionListModalContent = ({inOutAction, setIsOpenBottomSheet}: AddMemberActionListModalContentProps) => {
   const {
     inputList,
     inputRefList,
@@ -30,7 +30,7 @@ const AddMemberActionListModalContent = ({inOutAction, setOpenBottomSheet}: AddM
 
   const handleUpdateMemberListSubmit = () => {
     updateMemberList({memberNameList: getFilledInputList().map(({value}) => value), type: inOutAction});
-    setOpenBottomSheet(false);
+    setIsOpenBottomSheet(false);
   };
 
   return (

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

@@ -10,12 +10,12 @@ import style from './SetActionListModal.style';
 export type ActionType = '지출' | '인원';
 
 interface SetActionModalContentProps {
-  openBottomSheet: boolean;
-  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  isOpenBottomSheet: boolean;
+  setIsOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
   setOrder: React.Dispatch<React.SetStateAction<number>>;
 }
 
-const SetActionListModal = ({openBottomSheet, setOpenBottomSheet, setOrder}: SetActionModalContentProps) => {
+const SetActionListModal = ({isOpenBottomSheet, setIsOpenBottomSheet, setOrder}: SetActionModalContentProps) => {
   const [action, setAction] = useState<ActionType>('지출');
   const [inOutAction, setInOutAction] = useState<InOutType>('탈주');
 
@@ -28,7 +28,7 @@ const SetActionListModal = ({openBottomSheet, setOpenBottomSheet, setOrder}: Set
   };
 
   return (
-    <BottomSheet isOpened={openBottomSheet} onClose={() => setOpenBottomSheet(false)}>
+    <BottomSheet isOpened={isOpenBottomSheet} onClose={() => setIsOpenBottomSheet(false)}>
       <div css={style.container}>
         <div css={style.switchContainer}>
           <Switch value={action} onChange={handleActionTypeChange} values={['지출', '인원']} />
@@ -38,12 +38,12 @@ const SetActionListModal = ({openBottomSheet, setOpenBottomSheet, setOrder}: Set
         </div>
 
         {action === '지출' && (
-          <AddBillActionListModalContent setOpenBottomSheet={setOpenBottomSheet} setOrder={setOrder} />
+          <AddBillActionListModalContent setIsOpenBottomSheet={setIsOpenBottomSheet} setOrder={setOrder} />
         )}
         {action === '인원' && (
           <AddMemberActionListModalContent
             inOutAction={inOutAction === '탈주' ? 'OUT' : 'IN'}
-            setOpenBottomSheet={setOpenBottomSheet}
+            setIsOpenBottomSheet={setIsOpenBottomSheet}
           />
         )}
       </div>

client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts

@@ -0,0 +1,28 @@
+import {css} from '@emotion/react';
+
+export const allMemberListModalStyle = () =>
+  css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+    width: '100%',
+    height: '100%',
+  });
+
+export const allMemberListModalTitleStyle = () =>
+  css({
+    display: 'flex',
+    justifyContent: 'space-between',
+    width: '100%',
+    padding: '0 1.5rem',
+  });
+
+export const allMemberListModalLabelGroupInputStyle = () =>
+  css({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '0 1rem',
+    paddingBottom: '10rem',
+
+    overflow: 'auto',
+  });

client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx

@@ -0,0 +1,48 @@
+import {BottomSheet, Text, LabelGroupInput, FixedButton} from 'haengdong-design';
+
+import InputAndDeleteButton from '@components/InputAndDeleteButton/InputAndDeleteButton';
+
+import {
+  allMemberListModalLabelGroupInputStyle,
+  allMemberListModalStyle,
+  allMemberListModalTitleStyle,
+} from './SetAllMemberListModal.style';
+
+interface SetAllMemberListModalProps {
+  isOpenBottomSheet: boolean;
+  setIsOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOpenAllMemberListButton: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const SetAllMemberListModal = ({
+  isOpenBottomSheet,
+  setIsOpenBottomSheet,
+  setIsOpenAllMemberListButton,
+}: SetAllMemberListModalProps) => {
+  const handleCloseAllMemberListModal = () => {
+    setIsOpenAllMemberListButton(prev => !prev);
+    setIsOpenBottomSheet(false);
+  };
+
+  return (
+    <BottomSheet isOpened={isOpenBottomSheet} onClose={handleCloseAllMemberListModal}>
+      <div css={allMemberListModalStyle}>
+        <div css={allMemberListModalTitleStyle}>
+          <Text size="bodyBold">전체 참여자 수정하기</Text>
+          {/* TODO: (@soha): 인원 텍스트 색 수정 필요 */}
+          <Text size="bodyBold" color="sematic">
+            총 N명
+          </Text>
+        </div>
+        <div css={allMemberListModalLabelGroupInputStyle}>
+          <LabelGroupInput labelText="이름">
+            <InputAndDeleteButton />
+          </LabelGroupInput>
+        </div>
+        <FixedButton children="수정 완료" />
+      </div>
+    </BottomSheet>
+  );
+};
+
+export default SetAllMemberListModal;

client/src/components/Modal/SetInitialMemberListModal/SetInitialMemberListModal.tsx

@@ -11,11 +11,11 @@ import {
 } from './SetInitialMemberListModal.style';
 
 interface SetInitialMemberListProps {
-  openBottomSheet: boolean;
-  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  isOpenBottomSheet: boolean;
+  setIsOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const SetInitialMemberListModal = ({openBottomSheet, setOpenBottomSheet}: SetInitialMemberListProps) => {
+const SetInitialMemberListModal = ({isOpenBottomSheet, setIsOpenBottomSheet}: SetInitialMemberListProps) => {
   const {
     inputList,
     inputRefList,
@@ -30,11 +30,11 @@ const SetInitialMemberListModal = ({openBottomSheet, setOpenBottomSheet}: SetIni
 
   const handleSubmit = () => {
     updateMemberList({memberNameList: getFilledInputList().map(({value}) => value), type: 'IN'});
-    setOpenBottomSheet(false);
+    setIsOpenBottomSheet(false);
   };
 
   return (
-    <BottomSheet isOpened={openBottomSheet} onClose={() => setOpenBottomSheet(false)}>
+    <BottomSheet isOpened={isOpenBottomSheet} onClose={() => setIsOpenBottomSheet(false)}>
       <div css={setInitialMemberListModalStyle}>
         <Text size="bodyBold">초기 인원 설정하기</Text>
         <div css={setInitialMemberListModalInputGroupStyle}>

client/src/components/Modal/index.ts

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

client/src/components/StepList/BillStepItem.tsx

@@ -8,11 +8,12 @@ import {PutAndDeleteBillActionModal} from '@components/Modal/SetActionModal/PutA
 interface BillStepItemProps {
   step: BillStep;
   isOpenBottomSheet: boolean;
-  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const BillStepItem: React.FC<BillStepItemProps> = ({step, isOpenBottomSheet, setOpenBottomSheet}) => {
   const [clickedIndex, setClickedIndex] = useState(-1);
+
   const totalPrice = step.actions.reduce((acc, cur) => acc + cur.price, 0);
 
   const handleDragHandleItemClick = (index: number) => {

client/src/components/StepList/MemberStepItem.tsx

@@ -7,23 +7,23 @@ import {DeleteMemberActionModal} from '@components/Modal/SetActionModal/DeleteMe
 interface MemberStepItemProps {
   step: MemberStep;
   isOpenBottomSheet: boolean;
-  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const MemberStepItem: React.FC<MemberStepItemProps> = ({step, isOpenBottomSheet, setOpenBottomSheet}) => {
+const MemberStepItem: React.FC<MemberStepItemProps> = ({step, isOpenBottomSheet, setIsOpenBottomSheet}) => {
   return (
     <>
       <DragHandleItem
         backgroundColor="white"
         prefix={`${step.actions.map(({name}) => name).join(', ')} ${step.type === 'IN' ? '들어옴' : '나감'}`}
-        onClick={() => setOpenBottomSheet(prev => !prev)}
+        onClick={() => setIsOpenBottomSheet(prev => !prev)}
       />
       {isOpenBottomSheet && (
         <DeleteMemberActionModal
           memberActionType={step.type}
           memberActionList={step.actions}
           isBottomSheetOpened={isOpenBottomSheet}
-          setIsBottomSheetOpened={setOpenBottomSheet}
+          setIsBottomSheetOpened={setIsOpenBottomSheet}
         />
       )}
     </>

client/src/components/StepList/Step.tsx

@@ -10,12 +10,16 @@ interface StepProps {
 }
 
 const Step = ({step}: StepProps) => {
-  const [isOpenBottomSheet, setOpenBottomSheet] = useState<boolean>(false);
+  const [isOpenBottomSheet, setIsOpenBottomSheet] = useState<boolean>(false);
 
   if (step.type === 'BILL') {
-    return <BillStepItem step={step} isOpenBottomSheet={isOpenBottomSheet} setOpenBottomSheet={setOpenBottomSheet} />;
+    return (
+      <BillStepItem step={step} isOpenBottomSheet={isOpenBottomSheet} setIsOpenBottomSheet={setIsOpenBottomSheet} />
+    );
   } else if (step.type === 'IN' || step.type === 'OUT') {
-    return <MemberStepItem step={step} isOpenBottomSheet={isOpenBottomSheet} setOpenBottomSheet={setOpenBottomSheet} />;
+    return (
+      <MemberStepItem step={step} isOpenBottomSheet={isOpenBottomSheet} setIsOpenBottomSheet={setIsOpenBottomSheet} />
+    );
   } else {
     return <></>;
   }

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

@@ -1,10 +1,16 @@
 import {css} from '@emotion/react';
 
-export const ReceiptStyle = () =>
+export const receiptStyle = () =>
   css({
     display: 'flex',
     flexDirection: 'column',
     gap: '8px',
     padding: '0 8px',
     paddingBottom: '8.75rem',
   });
+
+export const titleAndListButtonContainerStyle = () =>
+  css({
+    display: 'flex',
+    flexDirection: 'column',
+  });