style: openBottomSheet 상태명을 isOpenBottomSheet로 변경. 외에도 FixedButton Bo…

…ttomSheet와 전체 참여자 BottomSheet 상태명 상세히 변경
woowacourse-teams · Aug 8, 2024 · 1c9a2f0 · 1c9a2f0
1 parent 4288514
commit 1c9a2f0
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 60 deletions.
diff --git a/...ents/Modal/SetActionModal/AddBillActionListModalContent/AddBillActionListModalContent.tsx b/...ents/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 (

diff --git a/.../Modal/SetActionModal/AddMemberActionListModalContent/AddMemberActionListModalContent.tsx b/.../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 (

diff --git a/client/src/components/Modal/SetActionModal/SetActionListModal.tsx b/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>

diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx
@@ -8,9 +8,9 @@ import {
 } from './SetAllMemberListModal.style';
 
 interface SetAllMemberListModalProps {
-  openBottomSheet: boolean;
-  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
-  setIsClickAllMemberListButton: React.Dispatch<React.SetStateAction<boolean>>;
+  isOpenBottomSheet: boolean;
+  setIsOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOpenAllMemberListButton: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const InputAndDeleteButton = () => {
@@ -27,17 +27,17 @@ const InputAndDeleteButton = () => {
 };
 
 const SetAllMemberListModal = ({
-  openBottomSheet,
-  setOpenBottomSheet,
-  setIsClickAllMemberListButton,
+  isOpenBottomSheet,
+  setIsOpenBottomSheet,
+  setIsOpenAllMemberListButton,
 }: SetAllMemberListModalProps) => {
   const handleCloseAllMemberListModal = () => {
-    setIsClickAllMemberListButton(prev => !prev);
-    setOpenBottomSheet(false);
+    setIsOpenAllMemberListButton(prev => !prev);
+    setIsOpenBottomSheet(false);
   };
 
   return (
-    <BottomSheet isOpened={openBottomSheet} onClose={handleCloseAllMemberListModal}>
+    <BottomSheet isOpened={isOpenBottomSheet} onClose={handleCloseAllMemberListModal}>
       <div css={allMemberListModalStyle}>
         <div css={allMemberListModalTitleStyle}>
           <Text size="bodyBold">전체 참여자 수정하기</Text>

diff --git a/client/src/components/Modal/SetInitialMemberListModal/SetInitialMemberListModal.tsx b/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}>

diff --git a/client/src/components/StepList/BillStepItem.tsx b/client/src/components/StepList/BillStepItem.tsx
@@ -5,10 +5,10 @@ import {DragHandleItem, DragHandleItemContainer} from 'haengdong-design';
 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 BillStepItem: React.FC<BillStepItemProps> = ({step, isOpenBottomSheet, setIsOpenBottomSheet}) => {
   const totalPrice = step.actions.reduce((acc, cur) => acc + cur.price, 0);
 
   return (

diff --git a/client/src/components/StepList/MemberStepItem.tsx b/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}
         />
       )}
     </>

diff --git a/client/src/components/StepList/Step.tsx b/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 <></>;
   }

diff --git a/client/src/pages/EventPage/AdminPage/AdminPage.tsx b/client/src/pages/EventPage/AdminPage/AdminPage.tsx
@@ -12,49 +12,51 @@ import {receiptStyle, titleAndListButtonContainerStyle} from './AdminPage.style'
 
 interface ModalBasedOnMemberCountProps {
   memberNameList: string[];
-  openBottomSheet: boolean;
-  isClickAllMemberListButton: boolean;
+  isOpenBottomSheet: boolean;
+  isOpenAllMemberListButton: boolean;
   setOrder: React.Dispatch<React.SetStateAction<number>>;
-  setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
-  setIsClickAllMemberListButton: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsOpenAllMemberListButton: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const ModalBasedOnMemberCount = ({
   memberNameList,
-  openBottomSheet,
-  isClickAllMemberListButton,
+  isOpenBottomSheet,
+  isOpenAllMemberListButton,
   setOrder,
-  setOpenBottomSheet,
-  setIsClickAllMemberListButton,
+  setIsOpenBottomSheet,
+  setIsOpenAllMemberListButton,
 }: ModalBasedOnMemberCountProps) => {
-  if (isClickAllMemberListButton) {
+  if (isOpenAllMemberListButton) {
     return (
       <SetAllMemberListModal
-        setOpenBottomSheet={setOpenBottomSheet}
-        openBottomSheet={openBottomSheet}
-        setIsClickAllMemberListButton={setIsClickAllMemberListButton}
+        setIsOpenBottomSheet={setIsOpenBottomSheet}
+        isOpenBottomSheet={isOpenBottomSheet}
+        setIsOpenAllMemberListButton={setIsOpenAllMemberListButton}
       />
     );
   }
   switch (memberNameList.length) {
     case 0:
-      return <SetInitialMemberListModal setOpenBottomSheet={setOpenBottomSheet} openBottomSheet={openBottomSheet} />;
+      return (
+        <SetInitialMemberListModal setIsOpenBottomSheet={setIsOpenBottomSheet} isOpenBottomSheet={isOpenBottomSheet} />
+      );
 
     default:
       return (
         <SetActionListModal
           setOrder={setOrder}
-          setOpenBottomSheet={setOpenBottomSheet}
-          openBottomSheet={openBottomSheet}
+          setIsOpenBottomSheet={setIsOpenBottomSheet}
+          isOpenBottomSheet={isOpenBottomSheet}
         />
       );
   }
 };
 
 const AdminPage = () => {
-  const [openBottomSheet, setOpenBottomSheet] = useState(false);
+  const [isOpenFixedButtonBottomSheet, setIsOpenFixedBottomBottomSheet] = useState(false);
   const [order, setOrder] = useState<number>(1);
-  const [isClickAllMemberListButton, setIsClickAllMemberListButton] = useState(false);
+  const [isOpenAllMemberListButton, setIsOpenAllMemberListButton] = useState(false);
 
   // TODO: (@weadie) eventName이 새로고침시 공간이 없다가 생겨나 레이아웃이 움직이는 문제
   const [eventName, setEventName] = useState(' ');
@@ -75,8 +77,8 @@ const AdminPage = () => {
   }, [eventId]);
 
   const handleOpenAllMemberListButton = () => {
-    setOpenBottomSheet(prev => !prev);
-    setIsClickAllMemberListButton(prev => !prev);
+    setIsOpenFixedBottomBottomSheet(prev => !prev);
+    setIsOpenAllMemberListButton(prev => !prev);
   };
 
   return (
@@ -99,16 +101,16 @@ const AdminPage = () => {
         <StepList />
         <FixedButton
           children={memberNameList.length === 0 ? '초기인원 설정하기' : '행동 추가하기'}
-          onClick={() => setOpenBottomSheet(prev => !prev)}
+          onClick={() => setIsOpenFixedBottomBottomSheet(prev => !prev)}
         />
-        {openBottomSheet && (
+        {isOpenFixedButtonBottomSheet && (
           <ModalBasedOnMemberCount
             memberNameList={memberNameList}
             setOrder={setOrder}
-            setOpenBottomSheet={setOpenBottomSheet}
-            openBottomSheet={openBottomSheet}
-            isClickAllMemberListButton={isClickAllMemberListButton}
-            setIsClickAllMemberListButton={setIsClickAllMemberListButton}
+            setIsOpenBottomSheet={setIsOpenFixedBottomBottomSheet}
+            isOpenBottomSheet={isOpenFixedButtonBottomSheet}
+            isOpenAllMemberListButton={isOpenAllMemberListButton}
+            setIsOpenAllMemberListButton={setIsOpenAllMemberListButton}
           />
         )}
       </section>