[FE] 약속 생성 확인 모달 복구 (#414)

* feat(MeetingCreationConfirmModal): 약속 생성 확인 모달 구현 * feat(CreateMeetingPage): 퍼널에서 입력된 정보를 모달과 연결하여 약속 생성 정보 확인 기능 추가 * refactor(MeetingCreationConfirmModal): p 태그로 변경
woowacourse-teams · Oct 18, 2024 · 50c327f · 50c327f
1 parent 9d033d6
commit 50c327f
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 26 deletions.
diff --git a/...eMeetingPage/components/MeetingCreationConfirmModal/MeetingCreationConfirmModal.styles.ts b/...eMeetingPage/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
@@ -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 (
+    <ConfirmModal
+      isOpen={isModalOpen}
+      onClose={onModalClose}
+      onConfirm={onModalConfirmButtonClick}
+      position="center"
+      size="small"
+      title="입력하신 약속 정보를 확인해주세요."
+    >
+      <div css={s_descriptionContainer}>
+        <p css={s_description}>
+          <strong>약속명</strong> {meetingName}
+        </p>
+        <p css={s_description}>
+          <strong>주최자</strong> {hostName}
+        </p>
+        {!isOnlyDaysOptionChecked && (
+          <p css={s_description}>
+            <strong>약속 시간</strong> {startTime} ~ {endTime}
+          </p>
+        )}
+        <div css={s_availableDateDescription}>
+          <strong>가능 날짜</strong>
+          {groupDates(selectedDates).map(([monthYear, dates]) => {
+            const [year, month] = monthYear.split('-');
+            return (
+              <div css={s_availableDatesContainer} key={monthYear}>
+                <h3>
+                  {year}년 {month}월
+                </h3>
+                <p>{dates.join(', ')}</p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </ConfirmModal>
+  );
+}
diff --git 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<Steps>(meetingStepValues, '약속이름');
+
   const {
     meetingNameInput,
     isMeetingNameInvalid,
@@ -25,31 +31,44 @@ export default function CreateMeetingPage() {
   } = useCreateMeeting();
 
   return (
-    <Funnel>
-      <Funnel.Step name={CREATE_MEETING_STEPS.meetingName}>
-        <MeetingName
-          meetingNameInput={meetingNameInput}
-          isMeetingNameInvalid={isMeetingNameInvalid}
-          onNextStep={() => setStep(CREATE_MEETING_STEPS.meetingHostInfo)}
-        />
-      </Funnel.Step>
-      <Funnel.Step name={CREATE_MEETING_STEPS.meetingHostInfo}>
-        <MeetingHostInfo
-          hostNickNameInput={hostNickNameInput}
-          hostPasswordInput={hostPasswordInput}
-          isHostInfoInvalid={isHostInfoInvalid}
-          onNextStep={() => setStep(CREATE_MEETING_STEPS.meetingDateTime)}
-        />
-      </Funnel.Step>
-      <Funnel.Step name={CREATE_MEETING_STEPS.meetingDateTime}>
-        <MeetingDateTime
-          meetingDateInput={meetingDateInput}
-          meetingTimeInput={meetingTimeInput}
-          meetingTypeInput={meetingTypeInput}
-          isCreateMeetingFormInvalid={isCreateMeetingFormInvalid}
-          onMeetingCreateButtonClick={handleMeetingCreateButtonClick}
-        />
-      </Funnel.Step>
-    </Funnel>
+    <>
+      <Funnel>
+        <Funnel.Step name={CREATE_MEETING_STEPS.meetingName}>
+          <MeetingName
+            meetingNameInput={meetingNameInput}
+            isMeetingNameInvalid={isMeetingNameInvalid}
+            onNextStep={() => setStep(CREATE_MEETING_STEPS.meetingHostInfo)}
+          />
+        </Funnel.Step>
+        <Funnel.Step name={CREATE_MEETING_STEPS.meetingHostInfo}>
+          <MeetingHostInfo
+            hostNickNameInput={hostNickNameInput}
+            hostPasswordInput={hostPasswordInput}
+            isHostInfoInvalid={isHostInfoInvalid}
+            onNextStep={() => setStep(CREATE_MEETING_STEPS.meetingDateTime)}
+          />
+        </Funnel.Step>
+        <Funnel.Step name={CREATE_MEETING_STEPS.meetingDateTime}>
+          <MeetingDateTime
+            meetingDateInput={meetingDateInput}
+            meetingTimeInput={meetingTimeInput}
+            meetingTypeInput={meetingTypeInput}
+            isCreateMeetingFormInvalid={isCreateMeetingFormInvalid}
+            onMeetingCreateButtonClick={onToggleConfirmModal}
+          />
+        </Funnel.Step>
+      </Funnel>
+      <MeetingCreationConfirmModal
+        isModalOpen={isConfirmModalOpen}
+        onModalClose={onToggleConfirmModal}
+        onModalConfirmButtonClick={handleMeetingCreateButtonClick}
+        meetingName={meetingNameInput.value}
+        hostName={hostNickNameInput.value}
+        selectedDates={Array.from(meetingDateInput.selectedDates)}
+        startTime={meetingTimeInput.startTime.value}
+        endTime={meetingTimeInput.endTime.value}
+        isOnlyDaysOptionChecked={meetingTypeInput.isChecked}
+      />
+    </>
   );
 }