diff --git a/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/MeetingCreationConfirmModal.styles.ts b/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/MeetingCreationConfirmModal.styles.ts new file mode 100644 index 00000000..630536d2 --- /dev/null +++ b/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/MeetingCreationConfirmModal.styles.ts @@ -0,0 +1,32 @@ +import { css } from '@emotion/react'; + +import theme from '@styles/theme'; + +export const s_descriptionContainer = css` + display: flex; + flex-direction: column; + gap: 0.8rem; + + strong { + ${theme.typography.captionBold} + color: ${theme.colors.primary} + } +`; + +export const s_description = css` + ${theme.typography.captionMedium} + display: flex; + gap: 0.8rem; +`; + +export const s_availableDateDescription = css` + display: flex; + flex-direction: column; + gap: 1rem; +`; + +export const s_availableDatesContainer = css` + ${theme.typography.captionMedium} + display: grid; + grid-template-columns: 2fr 5fr; +`; diff --git a/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/index.tsx b/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/index.tsx new file mode 100644 index 00000000..e86ce0f7 --- /dev/null +++ b/frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/index.tsx @@ -0,0 +1,73 @@ +import ConfirmModal from '@components/_common/Modal/ConfirmModal'; + +import groupDates from '@utils/groupDates'; + +import { + s_availableDateDescription, + s_availableDatesContainer, + s_description, + s_descriptionContainer, +} from './MeetingCreationConfirmModal.styles'; + +interface MeetingCreationConfirmModalProps { + isModalOpen: boolean; + onModalClose: () => void; + onModalConfirmButtonClick: () => void; + meetingName: string; + hostName: string; + selectedDates: string[]; + startTime: string; + endTime: string; + isOnlyDaysOptionChecked: boolean; +} + +export default function MeetingCreationConfirmModal({ + isModalOpen, + onModalClose, + onModalConfirmButtonClick, + meetingName, + hostName, + selectedDates, + startTime, + endTime, + isOnlyDaysOptionChecked, +}: MeetingCreationConfirmModalProps) { + return ( + +
+

+ 약속명 {meetingName} +

+

+ 주최자 {hostName} +

+ {!isOnlyDaysOptionChecked && ( +

+ 약속 시간 {startTime} ~ {endTime} +

+ )} +
+ 가능 날짜 + {groupDates(selectedDates).map(([monthYear, dates]) => { + const [year, month] = monthYear.split('-'); + return ( +
+

+ {year}년 {month}월 +

+

{dates.join(', ')}

+
+ ); + })} +
+
+
+ ); +} diff --git a/frontend/src/pages/CreateMeetingPage/index.tsx b/frontend/src/pages/CreateMeetingPage/index.tsx index 397c4a29..1510a6a5 100644 --- a/frontend/src/pages/CreateMeetingPage/index.tsx +++ b/frontend/src/pages/CreateMeetingPage/index.tsx @@ -2,15 +2,21 @@ import MeetingDateTime from '@pages/CreateMeetingPage/components/MeetingDateTime import MeetingHostInfo from '@pages/CreateMeetingPage/components/MeetingHostInfo'; import MeetingName from '@pages/CreateMeetingPage/components/MeetingName'; +import useConfirmModal from '@hooks/useConfirmModal/useConfirmModal'; import useCreateMeeting from '@hooks/useCreateMeeting/useCreateMeeting'; import useFunnel from '@hooks/useFunnel/useFunnel'; import { CREATE_MEETING_STEPS, meetingStepValues } from '@constants/meeting'; +import MeetingCreationConfirmModal from './components/MeetingCreationConfirmModal'; + type Steps = typeof meetingStepValues; export default function CreateMeetingPage() { + const { isConfirmModalOpen, onToggleConfirmModal } = useConfirmModal(); + const [setStep, Funnel] = useFunnel(meetingStepValues, '약속이름'); + const { meetingNameInput, isMeetingNameInvalid, @@ -25,31 +31,44 @@ export default function CreateMeetingPage() { } = useCreateMeeting(); return ( - - - setStep(CREATE_MEETING_STEPS.meetingHostInfo)} - /> - - - setStep(CREATE_MEETING_STEPS.meetingDateTime)} - /> - - - - - + <> + + + setStep(CREATE_MEETING_STEPS.meetingHostInfo)} + /> + + + setStep(CREATE_MEETING_STEPS.meetingDateTime)} + /> + + + + + + + ); }