From b70fad099f1f0a0b3e06bb011f7ee2f0811a98d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yoonkyoung=20=28=EB=B9=99=EB=B4=89=29?=
 <dev.yoonkyoung@gmail.com>
Date: Fri, 18 Oct 2024 17:39:30 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20=EC=95=BD=EC=86=8D=20=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=20=ED=99=95=EC=9D=B8=20=EB=AA=A8=EB=8B=AC=20=EB=B3=B5=EA=B5=AC?=
 =?UTF-8?q?=20develop=20=EB=B8=8C=EB=9E=9C=EC=B9=98=EC=97=90=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20(#415)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(MeetingCreationConfirmModal): 약속 생성 확인 모달 구현

* feat(CreateMeetingPage): 퍼널에서 입력된 정보를 모달과 연결하여 약속 생성 정보 확인 기능 추가

* refactor(MeetingCreationConfirmModal): p 태그로 변경
---
 .../MeetingCreationConfirmModal.styles.ts     | 32 ++++++++
 .../MeetingCreationConfirmModal/index.tsx     | 73 +++++++++++++++++++
 .../src/pages/CreateMeetingPage/index.tsx     | 71 +++++++++++-------
 3 files changed, 150 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/MeetingCreationConfirmModal.styles.ts
 create mode 100644 frontend/src/pages/CreateMeetingPage/components/MeetingCreationConfirmModal/index.tsx

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 (
+    <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
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<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}
+      />
+    </>
   );
 }