From 42c5bba7a95a48f5028b3f77e985605d7d6f8e49 Mon Sep 17 00:00:00 2001 From: Soyeon Choe Date: Wed, 7 Aug 2024 14:04:33 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20ListButton=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20=EB=B0=8F=20=EB=94=94=EC=9E=90=EC=9D=B8,=20ListButton=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=EC=8B=9C=20BottomSheet=20=EB=9D=84=EC=9A=B0?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SetAllMemberListModal.tsx | 26 ++++++++++ client/src/components/Modal/index.ts | 1 + .../EventPage/AdminPage/AdminPage.style.ts | 6 +++ .../pages/EventPage/AdminPage/AdminPage.tsx | 47 ++++++++++++++----- 4 files changed, 69 insertions(+), 11 deletions(-) create mode 100644 client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx new file mode 100644 index 000000000..4287cb988 --- /dev/null +++ b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx @@ -0,0 +1,26 @@ +import {BottomSheet} from 'haengdong-design'; + +interface SetAllMemberListModalProps { + openBottomSheet: boolean; + setOpenBottomSheet: React.Dispatch>; + setIsClickAllMemberListButton: React.Dispatch>; +} + +const SetAllMemberListModal = ({ + openBottomSheet, + setOpenBottomSheet, + setIsClickAllMemberListButton, +}: SetAllMemberListModalProps) => { + const handleCloseAllMemberListModal = () => { + setIsClickAllMemberListButton(prev => !prev); + setOpenBottomSheet(false); + }; + + return ( + + test + + ); +}; + +export default SetAllMemberListModal; diff --git a/client/src/components/Modal/index.ts b/client/src/components/Modal/index.ts index a6e55f84a..7a9d0eaa4 100644 --- a/client/src/components/Modal/index.ts +++ b/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'; diff --git a/client/src/pages/EventPage/AdminPage/AdminPage.style.ts b/client/src/pages/EventPage/AdminPage/AdminPage.style.ts index 2025006d4..fbe598d54 100644 --- a/client/src/pages/EventPage/AdminPage/AdminPage.style.ts +++ b/client/src/pages/EventPage/AdminPage/AdminPage.style.ts @@ -8,3 +8,9 @@ export const ReceiptStyle = () => padding: '0 8px', paddingBottom: '8.75rem', }); + +export const TitleAndListButtonContainerStyle = () => + css({ + display: 'flex', + flexDirection: 'column', + }); diff --git a/client/src/pages/EventPage/AdminPage/AdminPage.tsx b/client/src/pages/EventPage/AdminPage/AdminPage.tsx index 2c4ccd5a9..dea22fffd 100644 --- a/client/src/pages/EventPage/AdminPage/AdminPage.tsx +++ b/client/src/pages/EventPage/AdminPage/AdminPage.tsx @@ -1,28 +1,41 @@ import {useEffect, useState} from 'react'; -import {Title, FixedButton} from 'haengdong-design'; +import {Title, FixedButton, ListButton} from 'haengdong-design'; import StepList from '@components/StepList/StepList'; import {useStepList} from '@hooks/useStepList/useStepList'; import {requestGetEventName} from '@apis/request/event'; import useEventId from '@hooks/useEventId/useEventId'; -import {SetActionListModal, SetInitialMemberListModal} from '@components/Modal'; +import {SetActionListModal, SetInitialMemberListModal, SetAllMemberListModal} from '@components/Modal'; -import {ReceiptStyle} from './AdminPage.style'; +import {ReceiptStyle, TitleAndListButtonContainerStyle} from './AdminPage.style'; interface ModalBasedOnMemberCountProps { memberNameList: string[]; openBottomSheet: boolean; + isClickAllMemberListButton: boolean; setOrder: React.Dispatch>; setOpenBottomSheet: React.Dispatch>; + setIsClickAllMemberListButton: React.Dispatch>; } const ModalBasedOnMemberCount = ({ memberNameList, openBottomSheet, + isClickAllMemberListButton, setOrder, setOpenBottomSheet, + setIsClickAllMemberListButton, }: ModalBasedOnMemberCountProps) => { + if (isClickAllMemberListButton) { + return ( + + ); + } switch (memberNameList.length) { case 0: return ; @@ -41,12 +54,11 @@ const ModalBasedOnMemberCount = ({ const AdminPage = () => { const [openBottomSheet, setOpenBottomSheet] = useState(false); const [order, setOrder] = useState(1); + const [isClickAllMemberListButton, setIsClickAllMemberListButton] = useState(false); // TODO: (@weadie) eventName이 새로고침시 공간이 없다가 생겨나 레이아웃이 움직이는 문제 const [eventName, setEventName] = useState(' '); - const {getTotalPrice, memberNameList} = useStepList(); - const {eventId} = useEventId(); // TODO: (@weadie) 아래 로직을 훅으로 분리합니다. @@ -62,16 +74,27 @@ const AdminPage = () => { getEventName(); }, [eventId]); + const handleOpenAllMemberListButton = () => { + setOpenBottomSheet(prev => !prev); + setIsClickAllMemberListButton(prev => !prev); + }; + return ( <> - + <div css={TitleAndListButtonContainerStyle}> + <Title + title={eventName} + description="“초기인원 설정하기” 버튼을 눌러서 행사 초기 인원을 설정해 주세요." + price={getTotalPrice()} + /> + <ListButton + prefix="전체 참여자" + suffix={`${memberNameList.length}명`} + onClick={handleOpenAllMemberListButton} + /> + </div> <section css={ReceiptStyle}> <StepList /> - {/* TODO: (@soha) 추후 버튼 width 화면에 맞게 수정 */} <FixedButton children={memberNameList.length === 0 ? '초기인원 설정하기' : '행동 추가하기'} onClick={() => setOpenBottomSheet(prev => !prev)} @@ -82,6 +105,8 @@ const AdminPage = () => { setOrder={setOrder} setOpenBottomSheet={setOpenBottomSheet} openBottomSheet={openBottomSheet} + isClickAllMemberListButton={isClickAllMemberListButton} + setIsClickAllMemberListButton={setIsClickAllMemberListButton} /> )} </section> From 0f58f6e331b1620417b9d82bfd39f04b186f37a8 Mon Sep 17 00:00:00 2001 From: Soyeon Choe <soy2302ten@gmail.com> Date: Wed, 7 Aug 2024 14:16:34 +0900 Subject: [PATCH 02/10] =?UTF-8?q?chore:=20css=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20upperCase=EB=A1=9C=20=EB=90=98=EC=96=B4?= =?UTF-8?q?=EC=9E=88=EB=8A=94=20=EA=B2=83=20camelCase=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/pages/EventPage/AdminPage/AdminPage.style.ts | 4 ++-- client/src/pages/EventPage/AdminPage/AdminPage.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/client/src/pages/EventPage/AdminPage/AdminPage.style.ts b/client/src/pages/EventPage/AdminPage/AdminPage.style.ts index fbe598d54..6fea4be3b 100644 --- a/client/src/pages/EventPage/AdminPage/AdminPage.style.ts +++ b/client/src/pages/EventPage/AdminPage/AdminPage.style.ts @@ -1,6 +1,6 @@ import {css} from '@emotion/react'; -export const ReceiptStyle = () => +export const receiptStyle = () => css({ display: 'flex', flexDirection: 'column', @@ -9,7 +9,7 @@ export const ReceiptStyle = () => paddingBottom: '8.75rem', }); -export const TitleAndListButtonContainerStyle = () => +export const titleAndListButtonContainerStyle = () => css({ display: 'flex', flexDirection: 'column', diff --git a/client/src/pages/EventPage/AdminPage/AdminPage.tsx b/client/src/pages/EventPage/AdminPage/AdminPage.tsx index dea22fffd..229df6084 100644 --- a/client/src/pages/EventPage/AdminPage/AdminPage.tsx +++ b/client/src/pages/EventPage/AdminPage/AdminPage.tsx @@ -8,7 +8,7 @@ import useEventId from '@hooks/useEventId/useEventId'; import {SetActionListModal, SetInitialMemberListModal, SetAllMemberListModal} from '@components/Modal'; -import {ReceiptStyle, TitleAndListButtonContainerStyle} from './AdminPage.style'; +import {receiptStyle, titleAndListButtonContainerStyle} from './AdminPage.style'; interface ModalBasedOnMemberCountProps { memberNameList: string[]; @@ -81,7 +81,7 @@ const AdminPage = () => { return ( <> - <div css={TitleAndListButtonContainerStyle}> + <div css={titleAndListButtonContainerStyle}> <Title title={eventName} description="“초기인원 설정하기” 버튼을 눌러서 행사 초기 인원을 설정해 주세요." @@ -93,7 +93,7 @@ const AdminPage = () => { onClick={handleOpenAllMemberListButton} /> </div> - <section css={ReceiptStyle}> + <section css={receiptStyle}> <StepList /> <FixedButton children={memberNameList.length === 0 ? '초기인원 설정하기' : '행동 추가하기'} From ad03fd99b74ab9f43ba315de18317d3152eb2679 Mon Sep 17 00:00:00 2001 From: Soyeon Choe <soy2302ten@gmail.com> Date: Wed, 7 Aug 2024 14:48:25 +0900 Subject: [PATCH 03/10] =?UTF-8?q?design:=20BottomSheet=20=EB=82=B4?= =?UTF-8?q?=EB=B6=80=20Title=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SetAllMemberListModal.style.ts | 18 ++++++++++++++++++ .../SetAllMemberListModal.tsx | 14 ++++++++++++-- 2 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts new file mode 100644 index 000000000..72ad3bd0a --- /dev/null +++ b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts @@ -0,0 +1,18 @@ +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', + }); diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx index 4287cb988..bf6afa9f9 100644 --- a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx +++ b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx @@ -1,4 +1,6 @@ -import {BottomSheet} from 'haengdong-design'; +import {BottomSheet, Text} from 'haengdong-design'; + +import {allMemberListModalStyle, allMemberListModalTitleStyle} from './SetAllMemberListModal.style'; interface SetAllMemberListModalProps { openBottomSheet: boolean; @@ -18,7 +20,15 @@ const SetAllMemberListModal = ({ return ( <BottomSheet isOpened={openBottomSheet} onClose={handleCloseAllMemberListModal}> - test + <div css={allMemberListModalStyle}> + <div css={allMemberListModalTitleStyle}> + <Text size="bodyBold">전체 참여자 수정하기</Text> + {/* TODO: (@soha): 인원 텍스트 색 수정 필요 */} + <Text size="bodyBold" color="sematic"> + 총 N명 + </Text> + </div> + </div> </BottomSheet> ); }; From 0b1a2e23bcf81c0a7e35147876010323cf5eb0ed Mon Sep 17 00:00:00 2001 From: Soyeon Choe <soy2302ten@gmail.com> Date: Wed, 7 Aug 2024 15:22:34 +0900 Subject: [PATCH 04/10] =?UTF-8?q?design:=20Input=EA=B3=BC=20DeleteButton?= =?UTF-8?q?=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SetAllMemberListModal.style.ts | 17 ++++++++++++ .../SetAllMemberListModal.tsx | 27 +++++++++++++++++-- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts index 72ad3bd0a..d889c8ed6 100644 --- a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts +++ b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts @@ -16,3 +16,20 @@ export const allMemberListModalTitleStyle = () => width: '100%', padding: '0 1.5rem', }); + +export const allMemberListModalLabelGroupInputStyle = () => + css({ + display: 'flex', + flexDirection: 'column', + padding: '0 1rem', + + overflow: 'auto', + }); + +export const allMemberListModalInputAndDeleteButtonContainer = () => + css({ + display: 'flex', + alignItems: 'center', + width: '100%', + gap: '1rem', + }); diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx index bf6afa9f9..84bf5687a 100644 --- a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx +++ b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx @@ -1,6 +1,11 @@ -import {BottomSheet, Text} from 'haengdong-design'; +import {BottomSheet, Text, LabelGroupInput, IconButton, Icon} from 'haengdong-design'; -import {allMemberListModalStyle, allMemberListModalTitleStyle} from './SetAllMemberListModal.style'; +import { + allMemberListModalInputAndDeleteButtonContainer, + allMemberListModalLabelGroupInputStyle, + allMemberListModalStyle, + allMemberListModalTitleStyle, +} from './SetAllMemberListModal.style'; interface SetAllMemberListModalProps { openBottomSheet: boolean; @@ -8,6 +13,19 @@ interface SetAllMemberListModalProps { setIsClickAllMemberListButton: React.Dispatch<React.SetStateAction<boolean>>; } +const InputAndDeleteButton = () => { + return ( + <div css={allMemberListModalInputAndDeleteButtonContainer}> + <div css={{flexGrow: 1}}> + <LabelGroupInput.Element elementKey="e" /> + </div> + <IconButton variants="tertiary" css={{height: '3rem', width: '3rem', borderRadius: '1rem'}}> + <Icon iconType="trash" iconColor="onTertiary" /> + </IconButton> + </div> + ); +}; + const SetAllMemberListModal = ({ openBottomSheet, setOpenBottomSheet, @@ -28,6 +46,11 @@ const SetAllMemberListModal = ({ 총 N명 </Text> </div> + <div css={allMemberListModalLabelGroupInputStyle}> + <LabelGroupInput labelText="이름"> + <InputAndDeleteButton /> + </LabelGroupInput> + </div> </div> </BottomSheet> ); From 468d7ee15ebbddd108c43e7877b95cf8bbf608ec Mon Sep 17 00:00:00 2001 From: Soyeon Choe <soy2302ten@gmail.com> Date: Wed, 7 Aug 2024 15:32:38 +0900 Subject: [PATCH 05/10] =?UTF-8?q?design:=20FixedButton=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20overflow=EB=A5=BC=20=EC=9C=84=ED=95=9C?= =?UTF-8?q?=20paddingBottom=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts | 1 + .../Modal/SetAllMemberListModal/SetAllMemberListModal.tsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts index d889c8ed6..e25c5b2ed 100644 --- a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts +++ b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts @@ -22,6 +22,7 @@ export const allMemberListModalLabelGroupInputStyle = () => display: 'flex', flexDirection: 'column', padding: '0 1rem', + paddingBottom: '10rem', overflow: 'auto', }); diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx index 84bf5687a..8759668ca 100644 --- a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx +++ b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx @@ -1,4 +1,4 @@ -import {BottomSheet, Text, LabelGroupInput, IconButton, Icon} from 'haengdong-design'; +import {BottomSheet, Text, LabelGroupInput, IconButton, Icon, FixedButton} from 'haengdong-design'; import { allMemberListModalInputAndDeleteButtonContainer, @@ -51,6 +51,7 @@ const SetAllMemberListModal = ({ <InputAndDeleteButton /> </LabelGroupInput> </div> + <FixedButton children="수정 완료" /> </div> </BottomSheet> ); From aa34237371aedc7ac1c61aca78dd3b1f2dbc9d2f Mon Sep 17 00:00:00 2001 From: Soyeon Choe <soy2302ten@gmail.com> Date: Wed, 7 Aug 2024 16:02:14 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=EC=B4=88=EA=B8=B0=20=EC=9D=B8?= =?UTF-8?q?=EC=9B=90=20=EC=84=A4=EC=A0=95=EC=9D=B4=20=EC=99=84=EB=A3=8C?= =?UTF-8?q?=EB=90=98=EC=96=B4=EC=95=BC=20ListButton=EC=9D=B4=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=EB=90=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/pages/EventPage/AdminPage/AdminPage.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/client/src/pages/EventPage/AdminPage/AdminPage.tsx b/client/src/pages/EventPage/AdminPage/AdminPage.tsx index 229df6084..9fe21a118 100644 --- a/client/src/pages/EventPage/AdminPage/AdminPage.tsx +++ b/client/src/pages/EventPage/AdminPage/AdminPage.tsx @@ -87,11 +87,13 @@ const AdminPage = () => { description="“초기인원 설정하기” 버튼을 눌러서 행사 초기 인원을 설정해 주세요." price={getTotalPrice()} /> - <ListButton - prefix="전체 참여자" - suffix={`${memberNameList.length}명`} - onClick={handleOpenAllMemberListButton} - /> + {memberNameList.length !== 0 && ( + <ListButton + prefix="전체 참여자" + suffix={`${memberNameList.length}명`} + onClick={handleOpenAllMemberListButton} + /> + )} </div> <section css={receiptStyle}> <StepList /> From 428851409b304789e5830e72fa8299efd5284521 Mon Sep 17 00:00:00 2001 From: Soyeon Choe <soy2302ten@gmail.com> Date: Thu, 8 Aug 2024 09:51:24 +0900 Subject: [PATCH 07/10] =?UTF-8?q?design:=20=EC=82=AD=EC=A0=9C=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=EC=9D=98=20size=EB=A5=BC=20css?= =?UTF-8?q?=EA=B0=80=20=EC=95=84=EB=8B=8C=20props=20size=EB=A1=9C=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Modal/SetAllMemberListModal/SetAllMemberListModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx index 8759668ca..4cd8904e6 100644 --- a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx +++ b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx @@ -19,7 +19,7 @@ const InputAndDeleteButton = () => { <div css={{flexGrow: 1}}> <LabelGroupInput.Element elementKey="e" /> </div> - <IconButton variants="tertiary" css={{height: '3rem', width: '3rem', borderRadius: '1rem'}}> + <IconButton variants="tertiary" size="medium"> <Icon iconType="trash" iconColor="onTertiary" /> </IconButton> </div> From 1c9a2f0bf0fc535001daee5a096c11e554a86cd4 Mon Sep 17 00:00:00 2001 From: Soyeon Choe <soy2302ten@gmail.com> Date: Thu, 8 Aug 2024 10:17:44 +0900 Subject: [PATCH 08/10] =?UTF-8?q?style:=20openBottomSheet=20=EC=83=81?= =?UTF-8?q?=ED=83=9C=EB=AA=85=EC=9D=84=20isOpenBottomSheet=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD.=20=EC=99=B8=EC=97=90=EB=8F=84=20FixedButton?= =?UTF-8?q?=20BottomSheet=EC=99=80=20=EC=A0=84=EC=B2=B4=20=EC=B0=B8?= =?UTF-8?q?=EC=97=AC=EC=9E=90=20BottomSheet=20=EC=83=81=ED=83=9C=EB=AA=85?= =?UTF-8?q?=20=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<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/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<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 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<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 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<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 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<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 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<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 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<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 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<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 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<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> From 9ffc763a1a5fe498128c90271efd67f61e75e23f Mon Sep 17 00:00:00 2001 From: Soyeon Choe <soy2302ten@gmail.com> Date: Thu, 8 Aug 2024 10:49:18 +0900 Subject: [PATCH 09/10] =?UTF-8?q?style:=20InputAndDeleteButton=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=8C=8C=EC=9D=BC=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InputAndDeleteButton.style.ts | 9 +++++++++ .../InputAndDeleteButton.tsx | 18 ++++++++++++++++++ .../SetAllMemberListModal.style.ts | 8 -------- .../SetAllMemberListModal.tsx | 18 +++--------------- 4 files changed, 30 insertions(+), 23 deletions(-) create mode 100644 client/src/components/InputAndDeleteButton/InputAndDeleteButton.style.ts create mode 100644 client/src/components/InputAndDeleteButton/InputAndDeleteButton.tsx diff --git a/client/src/components/InputAndDeleteButton/InputAndDeleteButton.style.ts b/client/src/components/InputAndDeleteButton/InputAndDeleteButton.style.ts new file mode 100644 index 000000000..ff9f6cf6e --- /dev/null +++ b/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', + }); diff --git a/client/src/components/InputAndDeleteButton/InputAndDeleteButton.tsx b/client/src/components/InputAndDeleteButton/InputAndDeleteButton.tsx new file mode 100644 index 000000000..5ce491099 --- /dev/null +++ b/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; diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts index e25c5b2ed..b703e43de 100644 --- a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts +++ b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.style.ts @@ -26,11 +26,3 @@ export const allMemberListModalLabelGroupInputStyle = () => overflow: 'auto', }); - -export const allMemberListModalInputAndDeleteButtonContainer = () => - css({ - display: 'flex', - alignItems: 'center', - width: '100%', - gap: '1rem', - }); diff --git a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx index a6f4ef776..7eb4ab1fb 100644 --- a/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx +++ b/client/src/components/Modal/SetAllMemberListModal/SetAllMemberListModal.tsx @@ -1,7 +1,8 @@ -import {BottomSheet, Text, LabelGroupInput, IconButton, Icon, FixedButton} from 'haengdong-design'; +import {BottomSheet, Text, LabelGroupInput, FixedButton} from 'haengdong-design'; + +import InputAndDeleteButton from '@components/InputAndDeleteButton/InputAndDeleteButton'; import { - allMemberListModalInputAndDeleteButtonContainer, allMemberListModalLabelGroupInputStyle, allMemberListModalStyle, allMemberListModalTitleStyle, @@ -13,19 +14,6 @@ interface SetAllMemberListModalProps { setIsOpenAllMemberListButton: React.Dispatch<React.SetStateAction<boolean>>; } -const InputAndDeleteButton = () => { - return ( - <div css={allMemberListModalInputAndDeleteButtonContainer}> - <div css={{flexGrow: 1}}> - <LabelGroupInput.Element elementKey="e" /> - </div> - <IconButton variants="tertiary" size="medium"> - <Icon iconType="trash" iconColor="onTertiary" /> - </IconButton> - </div> - ); -}; - const SetAllMemberListModal = ({ isOpenBottomSheet, setIsOpenBottomSheet, From 9ac94100a7b840d5a4f4a8613d1c968a6f8fe459 Mon Sep 17 00:00:00 2001 From: Soyeon Choe <soy2302ten@gmail.com> Date: Thu, 8 Aug 2024 10:55:29 +0900 Subject: [PATCH 10/10] =?UTF-8?q?style:=20ModalBasedOnMemeberCount=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModalBasedOnMemberCount.tsx | 46 +++++++++++++++++++ .../pages/EventPage/AdminPage/AdminPage.tsx | 46 +------------------ 2 files changed, 47 insertions(+), 45 deletions(-) create mode 100644 client/src/components/Modal/ModalBasedOnMemberCount/ModalBasedOnMemberCount.tsx diff --git a/client/src/components/Modal/ModalBasedOnMemberCount/ModalBasedOnMemberCount.tsx b/client/src/components/Modal/ModalBasedOnMemberCount/ModalBasedOnMemberCount.tsx new file mode 100644 index 000000000..83e6c58f1 --- /dev/null +++ b/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; diff --git a/client/src/pages/EventPage/AdminPage/AdminPage.tsx b/client/src/pages/EventPage/AdminPage/AdminPage.tsx index bef851c10..0918aa1da 100644 --- a/client/src/pages/EventPage/AdminPage/AdminPage.tsx +++ b/client/src/pages/EventPage/AdminPage/AdminPage.tsx @@ -5,54 +5,10 @@ import StepList from '@components/StepList/StepList'; import {useStepList} from '@hooks/useStepList/useStepList'; import {requestGetEventName} from '@apis/request/event'; import useEventId from '@hooks/useEventId/useEventId'; - -import {SetActionListModal, SetInitialMemberListModal, SetAllMemberListModal} from '@components/Modal'; +import ModalBasedOnMemberCount from '@components/Modal/ModalBasedOnMemberCount/ModalBasedOnMemberCount'; import {receiptStyle, titleAndListButtonContainerStyle} from './AdminPage.style'; -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} - /> - ); - } -}; - const AdminPage = () => { const [isOpenFixedButtonBottomSheet, setIsOpenFixedBottomBottomSheet] = useState(false); const [order, setOrder] = useState<number>(1);