From 1c9a2f0bf0fc535001daee5a096c11e554a86cd4 Mon Sep 17 00:00:00 2001 From: Soyeon Choe Date: Thu, 8 Aug 2024 10:17:44 +0900 Subject: [PATCH] =?UTF-8?q?style:=20openBottomSheet=20=EC=83=81=ED=83=9C?= =?UTF-8?q?=EB=AA=85=EC=9D=84=20isOpenBottomSheet=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD.=20=EC=99=B8=EC=97=90=EB=8F=84=20FixedButton=20Bottom?= =?UTF-8?q?Sheet=EC=99=80=20=EC=A0=84=EC=B2=B4=20=EC=B0=B8=EC=97=AC?= =?UTF-8?q?=EC=9E=90=20BottomSheet=20=EC=83=81=ED=83=9C=EB=AA=85=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=ED=9E=88=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AddBillActionListModalContent.tsx | 6 +-- .../AddMemberActionListModalContent.tsx | 6 +-- .../SetActionModal/SetActionListModal.tsx | 12 ++--- .../SetAllMemberListModal.tsx | 18 +++---- .../SetInitialMemberListModal.tsx | 10 ++-- .../src/components/StepList/BillStepItem.tsx | 4 +- .../components/StepList/MemberStepItem.tsx | 8 +-- client/src/components/StepList/Step.tsx | 10 ++-- .../pages/EventPage/AdminPage/AdminPage.tsx | 52 ++++++++++--------- 9 files changed, 66 insertions(+), 60 deletions(-) diff --git a/client/src/components/Modal/SetActionModal/AddBillActionListModalContent/AddBillActionListModalContent.tsx b/client/src/components/Modal/SetActionModal/AddBillActionListModalContent/AddBillActionListModalContent.tsx index 8fac562f5..c59388472 100644 --- a/client/src/components/Modal/SetActionModal/AddBillActionListModalContent/AddBillActionListModalContent.tsx +++ b/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>; + setIsOpenBottomSheet: React.Dispatch>; setOrder: React.Dispatch>; } -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/client/src/components/Modal/SetActionModal/AddMemberActionListModalContent/AddMemberActionListModalContent.tsx b/client/src/components/Modal/SetActionModal/AddMemberActionListModalContent/AddMemberActionListModalContent.tsx index aff2764c8..b88befbb5 100644 --- a/client/src/components/Modal/SetActionModal/AddMemberActionListModalContent/AddMemberActionListModalContent.tsx +++ b/client/src/components/Modal/SetActionModal/AddMemberActionListModalContent/AddMemberActionListModalContent.tsx @@ -11,10 +11,10 @@ import style from './AddMemberActionListModalContent.style'; interface AddMemberActionListModalContentProps { inOutAction: MemberType; - setOpenBottomSheet: React.Dispatch>; + setIsOpenBottomSheet: React.Dispatch>; } -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 index a4c38e6c4..9b4b7facf 100644 --- 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>; + isOpenBottomSheet: boolean; + setIsOpenBottomSheet: React.Dispatch>; setOrder: React.Dispatch>; } -const SetActionListModal = ({openBottomSheet, setOpenBottomSheet, setOrder}: SetActionModalContentProps) => { +const SetActionListModal = ({isOpenBottomSheet, setIsOpenBottomSheet, setOrder}: SetActionModalContentProps) => { const [action, setAction] = useState('지출'); const [inOutAction, setInOutAction] = useState('탈주'); @@ -28,7 +28,7 @@ const SetActionListModal = ({openBottomSheet, setOpenBottomSheet, setOrder}: Set }; return ( - setOpenBottomSheet(false)}> + setIsOpenBottomSheet(false)}>
@@ -38,12 +38,12 @@ const SetActionListModal = ({openBottomSheet, setOpenBottomSheet, setOrder}: Set
{action === '지출' && ( - + )} {action === '인원' && ( )}
diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx index 4cd8904e6..a6f4ef776 100644 --- 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>; - setIsClickAllMemberListButton: React.Dispatch>; + isOpenBottomSheet: boolean; + setIsOpenBottomSheet: React.Dispatch>; + setIsOpenAllMemberListButton: React.Dispatch>; } 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 ( - +
전체 참여자 수정하기 diff --git a/client/src/components/Modal/SetInitialMemberListModal/SetInitialMemberListModal.tsx b/client/src/components/Modal/SetInitialMemberListModal/SetInitialMemberListModal.tsx index d273c5e6a..070ff7cd1 100644 --- 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>; + isOpenBottomSheet: boolean; + setIsOpenBottomSheet: React.Dispatch>; } -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 ( - setOpenBottomSheet(false)}> + setIsOpenBottomSheet(false)}>
초기 인원 설정하기
diff --git a/client/src/components/StepList/BillStepItem.tsx b/client/src/components/StepList/BillStepItem.tsx index c1021ee5b..3cc87476b 100644 --- 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>; + setIsOpenBottomSheet: React.Dispatch>; } -const BillStepItem: React.FC = ({step, isOpenBottomSheet, setOpenBottomSheet}) => { +const BillStepItem: React.FC = ({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 index 8d93b373d..9a482c665 100644 --- 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>; + setIsOpenBottomSheet: React.Dispatch>; } -const MemberStepItem: React.FC = ({step, isOpenBottomSheet, setOpenBottomSheet}) => { +const MemberStepItem: React.FC = ({step, isOpenBottomSheet, setIsOpenBottomSheet}) => { return ( <> name).join(', ')} ${step.type === 'IN' ? '들어옴' : '나감'}`} - onClick={() => setOpenBottomSheet(prev => !prev)} + onClick={() => setIsOpenBottomSheet(prev => !prev)} /> {isOpenBottomSheet && ( )} diff --git a/client/src/components/StepList/Step.tsx b/client/src/components/StepList/Step.tsx index 859085800..4d0f08903 100644 --- 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(false); + const [isOpenBottomSheet, setIsOpenBottomSheet] = useState(false); if (step.type === 'BILL') { - return ; + return ( + + ); } else if (step.type === 'IN' || step.type === 'OUT') { - return ; + return ( + + ); } else { return <>; } diff --git a/client/src/pages/EventPage/AdminPage/AdminPage.tsx b/client/src/pages/EventPage/AdminPage/AdminPage.tsx index 9fe21a118..bef851c10 100644 --- 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>; - setOpenBottomSheet: React.Dispatch>; - setIsClickAllMemberListButton: React.Dispatch>; + setIsOpenBottomSheet: React.Dispatch>; + setIsOpenAllMemberListButton: React.Dispatch>; } const ModalBasedOnMemberCount = ({ memberNameList, - openBottomSheet, - isClickAllMemberListButton, + isOpenBottomSheet, + isOpenAllMemberListButton, setOrder, - setOpenBottomSheet, - setIsClickAllMemberListButton, + setIsOpenBottomSheet, + setIsOpenAllMemberListButton, }: ModalBasedOnMemberCountProps) => { - if (isClickAllMemberListButton) { + if (isOpenAllMemberListButton) { return ( ); } switch (memberNameList.length) { case 0: - return ; + return ( + + ); default: return ( ); } }; const AdminPage = () => { - const [openBottomSheet, setOpenBottomSheet] = useState(false); + const [isOpenFixedButtonBottomSheet, setIsOpenFixedBottomBottomSheet] = useState(false); const [order, setOrder] = useState(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 = () => { setOpenBottomSheet(prev => !prev)} + onClick={() => setIsOpenFixedBottomBottomSheet(prev => !prev)} /> - {openBottomSheet && ( + {isOpenFixedButtonBottomSheet && ( )}