From 19c60084c869bf57cfb49d24d5fb511f28199aff Mon Sep 17 00:00:00 2001 From: sakjung Date: Mon, 3 Apr 2023 22:33:37 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20setting=20summary=20query=20?= =?UTF-8?q?=EB=AA=A8=EB=93=A0=20=EC=98=88=EC=95=BD=20=ED=8F=BC=EC=97=90=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 서버측의 API 에서 받아온 메세지를 그대로 뿌려준다 --- frontend/src/api/setting.ts | 22 ++++++++++ frontend/src/hooks/query/useSettingSummary.ts | 17 ++++++++ .../GuestMap/units/ReservationForm.styled.ts | 7 +++- .../pages/GuestMap/units/ReservationForm.tsx | 33 +++++++-------- .../GuestReservation/GuestReservation.tsx | 4 ++ .../units/GuestReservationForm.styles.ts | 9 ++-- .../units/GuestReservationForm.tsx | 41 +++++++++---------- .../units/MemberGuestReservationForm.tsx | 39 +++++++++--------- .../ManagerReservation/ManagerReservation.tsx | 1 + .../units/ManagerReservationForm.styles.ts | 9 ++-- .../units/ManagerReservationForm.tsx | 41 +++++++++---------- frontend/src/types/response.ts | 6 ++- 12 files changed, 139 insertions(+), 90 deletions(-) create mode 100644 frontend/src/api/setting.ts create mode 100644 frontend/src/hooks/query/useSettingSummary.ts diff --git a/frontend/src/api/setting.ts b/frontend/src/api/setting.ts new file mode 100644 index 000000000..148c48ea1 --- /dev/null +++ b/frontend/src/api/setting.ts @@ -0,0 +1,22 @@ +import { QS } from '@toss/utils'; +import { MapItem, Space } from '../types/common'; +import { QuerySettingSummarySuccess } from '../types/response'; +import api from './api'; + +export interface QuerySettingSummaryParams { + mapId: MapItem['mapId']; + spaceId: Space['id']; + selectedDateTime: string; +} + +export const querySettingSummary = ({ + mapId, + spaceId, + selectedDateTime, +}: QuerySettingSummaryParams) => { + return api.get( + `/maps/${mapId}/spaces/${spaceId}/settings/summary${QS.create({ + selectedDateTime, + })}` + ); +}; diff --git a/frontend/src/hooks/query/useSettingSummary.ts b/frontend/src/hooks/query/useSettingSummary.ts new file mode 100644 index 000000000..aa2b257e1 --- /dev/null +++ b/frontend/src/hooks/query/useSettingSummary.ts @@ -0,0 +1,17 @@ +import { AxiosError, AxiosResponse } from 'axios'; +import { QueryKey, useQuery, UseQueryOptions, UseQueryResult } from 'react-query'; +import { ErrorResponse, QuerySettingSummarySuccess } from 'types/response'; +import { querySettingSummary, QuerySettingSummaryParams } from '../../api/setting'; + +const useSettingSummary = >( + params: QuerySettingSummaryParams, + options?: UseQueryOptions< + AxiosResponse, + AxiosError, + TData, + [QueryKey, QuerySettingSummaryParams] + > +): UseQueryResult> => + useQuery(['getSettingSummary', params], () => querySettingSummary(params), options); + +export default useSettingSummary; diff --git a/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts b/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts index 2c2d31f78..dd0741880 100644 --- a/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts +++ b/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts @@ -34,6 +34,7 @@ export const InputsRow = styled.div` export const TimeFormMessageWrapper = styled.div` display: flex; + flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; `; @@ -46,9 +47,11 @@ export const TimeFormMessageList = styled.div` export const TimeFormMessage = styled.p<{ fontWeight?: string }>` left: 0.75rem; - bottom: -1rem; + bottom: -1.5rem; font-size: 0.75rem; - height: 1em; + height: 1.5em; + white-space: pre-line; + line-height: normal; color: ${({ theme }) => theme.gray[500]}; ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`}; `; diff --git a/frontend/src/pages/GuestMap/units/ReservationForm.tsx b/frontend/src/pages/GuestMap/units/ReservationForm.tsx index fd998eb75..1364c4529 100644 --- a/frontend/src/pages/GuestMap/units/ReservationForm.tsx +++ b/frontend/src/pages/GuestMap/units/ReservationForm.tsx @@ -25,6 +25,7 @@ import { MapItem } from 'types/common'; import { ErrorResponse } from 'types/response'; import { formatTimePrettier, formatTimeWithSecond, isPastDate } from 'utils/datetime'; import { isNullish } from 'utils/type'; +import useSettingSummary from '../../../hooks/query/useSettingSummary'; import { GuestMapFormContext } from '../providers/GuestMapFormProvider'; import * as Styled from './ReservationForm.styled'; @@ -64,6 +65,18 @@ const ReservationForm = ({ map }: Props) => { ); }; + const getSettingsSummary = useSettingSummary( + { + mapId: map?.mapId, + spaceId: parseInt(selectedSpaceId), + selectedDateTime: `${formValues.date}T${formatTimeWithSecond( + timePicker?.range.start ?? dayjs().tz() + )}${DATE.TIMEZONE_OFFSET}`, + }, + { enabled: selectedSpaceId !== null } + ); + const settingsSummary = getSettingsSummary.data?.data?.summary ?? ''; + const onSuccessCreateReservation = ( _: unknown, { reservation }: PostGuestReservationParams | PostMemberGuestReservationParams @@ -167,25 +180,7 @@ const ReservationForm = ({ map }: Props) => { {spacesMap?.[Number(selectedSpaceId)] && ( 예약 가능 시간 - - {spacesMap[Number(selectedSpaceId)].settings.map( - ( - { - settingStartTime, - settingEndTime, - reservationMaximumTimeUnit, - reservationMinimumTimeUnit, - }, - index - ) => ( - - {settingStartTime.slice(0, 5)} ~ {settingEndTime.slice(0, 5)} - (최소 {formatTimePrettier(reservationMinimumTimeUnit)}, 최대{' '} - {formatTimePrettier(reservationMaximumTimeUnit)}) - - ) - )}{' '} - + {settingsSummary} )} diff --git a/frontend/src/pages/GuestReservation/GuestReservation.tsx b/frontend/src/pages/GuestReservation/GuestReservation.tsx index 6e736ec8a..04cb5e756 100644 --- a/frontend/src/pages/GuestReservation/GuestReservation.tsx +++ b/frontend/src/pages/GuestReservation/GuestReservation.tsx @@ -289,6 +289,8 @@ const GuestReservation = (): JSX.Element => { { ) : ( ` left: 0.75rem; - bottom: -1rem; + bottom: -1.5rem; font-size: 0.75rem; - height: 1em; + height: 1.5em; + white-space: pre-line; + line-height: normal; color: ${({ theme }) => theme.gray[500]}; + ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`}; `; export const ButtonWrapper = styled.div` diff --git a/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx b/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx index cb0a049bf..3f2a11fa8 100644 --- a/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx +++ b/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx @@ -1,3 +1,4 @@ +import dayjs from 'dayjs'; import React, { ChangeEventHandler, useMemo } from 'react'; import { ReactComponent as CalendarIcon } from 'assets/svg/calendar.svg'; import Input from 'components/Input/Input'; @@ -14,15 +15,17 @@ import { Reservation, Space } from 'types/common'; import { convertSettingTimeToMinutes, convertTimeToMinutes, - formatTimePrettier, formatTimeWithSecond, isPastDate, } from 'utils/datetime'; +import useSettingSummary from '../../../hooks/query/useSettingSummary'; import { EditGuestReservationParams } from '../GuestReservation'; import * as Styled from './GuestReservationForm.styles'; interface Props { isEditMode: boolean; + mapId: number; + spaceId: number; space: Pick; reservation?: Reservation; date: string; @@ -41,6 +44,8 @@ interface Form { const GuestReservationForm = ({ isEditMode, + mapId, + spaceId, space, date, reservation, @@ -79,6 +84,18 @@ const GuestReservationForm = ({ initialEndTime: !!reservation ? new Date(reservation.endDateTime) : undefined, }); + const getSettingsSummary = useSettingSummary( + { + mapId, + spaceId, + selectedDateTime: `${date}T${formatTimeWithSecond(range.start ?? dayjs().tz())}${ + DATE.TIMEZONE_OFFSET + }`, + }, + {} + ); + const settingsSummary = getSettingsSummary.data?.data?.summary ?? ''; + const [{ name, description, password }, onChangeForm] = useInputs
({ name: reservation?.name ?? '', description: reservation?.description ?? '', @@ -152,26 +169,8 @@ const GuestReservationForm = ({ onCloseOptions={onCloseOptions} /> - 예약 가능 시간 - {space.settings.map( - ( - { - settingStartTime, - settingEndTime, - reservationMaximumTimeUnit, - reservationMinimumTimeUnit, - }, - index - ) => { - return ( - - {settingStartTime.slice(0, 5)} ~ {settingEndTime.slice(0, 5)} - (최소 {formatTimePrettier(reservationMinimumTimeUnit)}, 최대{' '} - {formatTimePrettier(reservationMaximumTimeUnit)}) - - ); - } - )} + 예약 가능 시간 + {settingsSummary} diff --git a/frontend/src/pages/GuestReservation/units/MemberGuestReservationForm.tsx b/frontend/src/pages/GuestReservation/units/MemberGuestReservationForm.tsx index 43d575306..3ae799656 100644 --- a/frontend/src/pages/GuestReservation/units/MemberGuestReservationForm.tsx +++ b/frontend/src/pages/GuestReservation/units/MemberGuestReservationForm.tsx @@ -1,3 +1,4 @@ +import dayjs from 'dayjs'; import React, { ChangeEventHandler, useMemo } from 'react'; import { ReactComponent as CalendarIcon } from 'assets/svg/calendar.svg'; import Input from 'components/Input/Input'; @@ -13,16 +14,18 @@ import { Reservation, Space } from 'types/common'; import { convertSettingTimeToMinutes, convertTimeToMinutes, - formatTimePrettier, formatTimeWithSecond, isPastDate, } from 'utils/datetime'; +import useSettingSummary from '../../../hooks/query/useSettingSummary'; import { EditMemberGuestReservationParams } from '../GuestReservation'; import * as Styled from './GuestReservationForm.styles'; interface Props { isEditMode: boolean; space: Pick; + spaceId: number; + mapId: number; reservation?: Reservation; date: string; userName: string; @@ -39,6 +42,8 @@ interface Form { const MemberGuestReservationForm = ({ isEditMode, + mapId, + spaceId, space, date, reservation, @@ -78,6 +83,18 @@ const MemberGuestReservationForm = ({ initialEndTime: !!reservation ? new Date(reservation.endDateTime) : undefined, }); + const getSettingsSummary = useSettingSummary( + { + mapId, + spaceId, + selectedDateTime: `${date}T${formatTimeWithSecond(range.start ?? dayjs().tz())}${ + DATE.TIMEZONE_OFFSET + }`, + }, + {} + ); + const settingsSummary = getSettingsSummary.data?.data?.summary ?? ''; + const [{ description }, onChangeForm] = useInputs({ description: reservation?.description ?? '', }); @@ -140,24 +157,8 @@ const MemberGuestReservationForm = ({ onCloseOptions={onCloseOptions} /> - 예약 가능 시간 - {space.settings.map( - ( - { - settingStartTime, - settingEndTime, - reservationMaximumTimeUnit, - reservationMinimumTimeUnit, - }, - index - ) => ( - - {settingStartTime.slice(0, 5)} ~ {settingEndTime.slice(0, 5)} - (최소 {formatTimePrettier(reservationMinimumTimeUnit)}, 최대{' '} - {formatTimePrettier(reservationMaximumTimeUnit)}) - - ) - )} + 예약 가능 시간 + {settingsSummary} diff --git a/frontend/src/pages/ManagerReservation/ManagerReservation.tsx b/frontend/src/pages/ManagerReservation/ManagerReservation.tsx index 3ad8e947d..e6928382b 100644 --- a/frontend/src/pages/ManagerReservation/ManagerReservation.tsx +++ b/frontend/src/pages/ManagerReservation/ManagerReservation.tsx @@ -150,6 +150,7 @@ const ManagerReservation = (): JSX.Element => { ` left: 0.75rem; - bottom: -1rem; + bottom: -1.5rem; font-size: 0.75rem; - height: 1em; + height: 1.5em; + white-space: pre-line; + line-height: normal; color: ${({ theme }) => theme.gray[500]}; + ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`}; `; diff --git a/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx b/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx index 8b93291aa..f2f5de90a 100644 --- a/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx +++ b/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx @@ -1,4 +1,5 @@ -import { ChangeEventHandler, useMemo } from 'react'; +import dayjs from 'dayjs'; +import React, { ChangeEventHandler, useMemo } from 'react'; import { ReactComponent as CalendarIcon } from 'assets/svg/calendar.svg'; import Button from 'components/Button/Button'; import Input from 'components/Input/Input'; @@ -15,14 +16,15 @@ import { ManagerSpaceAPI, Reservation } from 'types/common'; import { convertSettingTimeToMinutes, convertTimeToMinutes, - formatTimePrettier, formatTimeWithSecond, } from 'utils/datetime'; +import useSettingSummary from '../../../hooks/query/useSettingSummary'; import { CreateReservationParams, EditReservationParams } from '../ManagerReservation'; import * as Styled from './ManagerReservationForm.styles'; interface Props { isEditMode: boolean; + mapId: number; space: ManagerSpaceAPI; reservation?: Reservation; date: string; @@ -39,6 +41,7 @@ interface Form { const ManagerReservationForm = ({ isEditMode, + mapId, space, date, reservation, @@ -78,6 +81,18 @@ const ManagerReservationForm = ({ initialEndTime: !!reservation ? new Date(reservation.endDateTime) : undefined, }); + const getSettingsSummary = useSettingSummary( + { + mapId, + spaceId: space?.id, + selectedDateTime: `${date}T${formatTimeWithSecond(range.start ?? dayjs().tz())}${ + DATE.TIMEZONE_OFFSET + }`, + }, + {} + ); + const settingsSummary = getSettingsSummary.data?.data?.summary ?? ''; + const [{ name, description, password }, onChangeForm] = useInputs({ name: reservation?.name ?? '', description: reservation?.description ?? '', @@ -166,26 +181,8 @@ const ManagerReservationForm = ({ /> - 예약 가능 시간 - {space.settings.map( - ( - { - settingStartTime, - settingEndTime, - reservationMaximumTimeUnit, - reservationMinimumTimeUnit, - }, - index - ) => { - return ( - - {settingStartTime.slice(0, 5)} ~ {settingEndTime.slice(0, 5)} - (최소 {formatTimePrettier(reservationMinimumTimeUnit)}, 최대{' '} - {formatTimePrettier(reservationMaximumTimeUnit)}) - - ); - } - )} + 예약 가능 시간 + {settingsSummary} diff --git a/frontend/src/types/response.ts b/frontend/src/types/response.ts index 41594e0ff..6a5bcbdd6 100644 --- a/frontend/src/types/response.ts +++ b/frontend/src/types/response.ts @@ -1,5 +1,4 @@ import { - Area, Emoji, ManagerSpaceAPI, MapItem, @@ -53,6 +52,7 @@ export interface QueryManagerMapsSuccess { export interface QueryManagerSpaceReservationsSuccess { reservations: Reservation[]; } + export interface QueryManagerMapReservationsSuccess { data: SpaceReservation[]; } @@ -91,3 +91,7 @@ export interface QueryMemberReservationsSuccess { hasNext: boolean; pageNumber: number; } + +export interface QuerySettingSummarySuccess { + summary: string; +} From a1321e7718db7bd3c6d2606998c30ffec59beb08 Mon Sep 17 00:00:00 2001 From: sakjung Date: Tue, 4 Apr 2023 02:05:48 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EA=B3=B5=EA=B0=84=20=EC=98=88?= =?UTF-8?q?=EC=95=BD=20=EC=A1=B0=EA=B1=B4=20=EC=9A=B0=EC=84=A0=EC=88=9C?= =?UTF-8?q?=EC=9C=84=20=ED=95=84=EB=93=9C=20=EC=B6=94=EA=B0=80=ED=95=B4?= =?UTF-8?q?=EC=84=9C=20API=20=EC=8F=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 마지막에 생선된 조건이 우선 적용됨 (= 낮은 priorityOrder) --- frontend/src/__mocks__/mockData.ts | 1 + frontend/src/pages/ManagerSpaceEditor/data.ts | 2 ++ .../ManagerSpaceEditor/providers/SpaceFormProvider.tsx | 6 ++++++ frontend/src/pages/ManagerSpaceEditor/units/Form.tsx | 2 +- frontend/src/pages/ManagerSpaceEditor/units/Preset.tsx | 2 +- frontend/src/types/common.ts | 1 + 6 files changed, 12 insertions(+), 2 deletions(-) diff --git a/frontend/src/__mocks__/mockData.ts b/frontend/src/__mocks__/mockData.ts index fbfaa317f..bb28c703b 100644 --- a/frontend/src/__mocks__/mockData.ts +++ b/frontend/src/__mocks__/mockData.ts @@ -53,6 +53,7 @@ export const spaces: Spaces = { reservationTimeUnit: 10, reservationMinimumTimeUnit: 10, reservationMaximumTimeUnit: 1440, + priorityOrder: 0, enabledDayOfWeek: { monday: true, tuesday: true, diff --git a/frontend/src/pages/ManagerSpaceEditor/data.ts b/frontend/src/pages/ManagerSpaceEditor/data.ts index 607dde757..281a05a37 100644 --- a/frontend/src/pages/ManagerSpaceEditor/data.ts +++ b/frontend/src/pages/ManagerSpaceEditor/data.ts @@ -23,6 +23,7 @@ export interface SpaceFormValue { saturday: boolean; sunday: boolean; }; + priorityOrder: number; }[]; } @@ -45,6 +46,7 @@ export const initialSpaceFormValueSetting = { reservationMinimumTimeUnit: 10, reservationMaximumTimeUnit: 120, enabledDayOfWeek: initialEnabledDayOfWeek, + priorityOrder: 0, }; export const initialSpaceFormValue: Omit = { diff --git a/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx b/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx index 2495e9d64..162ff7d53 100644 --- a/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx +++ b/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx @@ -107,6 +107,12 @@ const SpaceFormProvider = ({ children }: Props): JSX.Element => { const getRequestValues = () => { const todayDate = formatDate(new Date()); + for (let i = 0; i < values.settings.length; i++) { + const setting = values.settings[i]; + setting.priorityOrder = values.settings.length - (i + 1); + console.log('setting :', setting); + } + return { space: { ...values, diff --git a/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx b/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx index 58fbd748a..048d02cb2 100644 --- a/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx +++ b/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx @@ -17,7 +17,7 @@ import useFormContext from 'hooks/useFormContext'; import { Area, Color, ManagerSpace, MapElement } from 'types/common'; import { SpaceEditorMode as Mode } from 'types/editor'; import { generateSvg, MapSvgData } from 'utils/generateSvg'; -import { colorSelectOptions, timeUnits } from '../data'; +import { colorSelectOptions, initialSpaceFormValueSetting, timeUnits } from '../data'; import { SpaceFormContext } from '../providers/SpaceFormProvider'; import * as Styled from './Form.styles'; import FormDayOfWeekSelect from './FormDayOfWeekSelect'; diff --git a/frontend/src/pages/ManagerSpaceEditor/units/Preset.tsx b/frontend/src/pages/ManagerSpaceEditor/units/Preset.tsx index 23f18b4b6..f26e257f3 100644 --- a/frontend/src/pages/ManagerSpaceEditor/units/Preset.tsx +++ b/frontend/src/pages/ManagerSpaceEditor/units/Preset.tsx @@ -72,7 +72,7 @@ const Preset = (): JSX.Element => { ...values, settings: values.settings.map((setting, index) => { if (index === selectedSettingIndex) { - return rest; + return { ...rest, priorityOrder: 0 }; } return setting; diff --git a/frontend/src/types/common.ts b/frontend/src/types/common.ts index a76c21dc1..03b622d8d 100644 --- a/frontend/src/types/common.ts +++ b/frontend/src/types/common.ts @@ -112,6 +112,7 @@ export interface SpaceSetting { saturday: boolean; sunday: boolean; }; + priorityOrder: number; } export interface Preset { From 608b1a8354d24dae959b7ce1d2423b41f9dcb5a2 Mon Sep 17 00:00:00 2001 From: sakjung Date: Tue, 4 Apr 2023 02:32:15 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EA=B3=B5=EA=B0=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EC=95=88?= =?UTF-8?q?=EB=82=B4=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../providers/SpaceFormProvider.tsx | 2 +- .../ManagerSpaceEditor/units/Form.styles.ts | 20 +++++++++++++++++++ .../pages/ManagerSpaceEditor/units/Form.tsx | 8 +++++++- 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx b/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx index 162ff7d53..0709ea98a 100644 --- a/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx +++ b/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx @@ -109,7 +109,7 @@ const SpaceFormProvider = ({ children }: Props): JSX.Element => { for (let i = 0; i < values.settings.length; i++) { const setting = values.settings[i]; - setting.priorityOrder = values.settings.length - (i + 1); + setting['priorityOrder'] = values.settings.length - (i + 1); console.log('setting :', setting); } diff --git a/frontend/src/pages/ManagerSpaceEditor/units/Form.styles.ts b/frontend/src/pages/ManagerSpaceEditor/units/Form.styles.ts index 7682a1468..dcfb45d30 100644 --- a/frontend/src/pages/ManagerSpaceEditor/units/Form.styles.ts +++ b/frontend/src/pages/ManagerSpaceEditor/units/Form.styles.ts @@ -32,6 +32,26 @@ export const TitleContainer = styled.div` margin-bottom: 1rem; `; +export const InfoMessageWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 0.25rem; + margin-top: 0.5rem; + justify-content: space-between; + margin-bottom: 2rem; +`; + +export const InfoMessage = styled.p<{ fontWeight?: string }>` + left: 0.75rem; + bottom: -1.5rem; + font-size: 0.75rem; + height: 1.5em; + white-space: pre-line; + line-height: normal; + color: ${({ theme }) => theme.gray[500]}; + ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`}; +`; + export const ContentsContainer = styled.div` display: flex; flex-direction: column; diff --git a/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx b/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx index 048d02cb2..38e5d5c6c 100644 --- a/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx +++ b/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx @@ -1,4 +1,4 @@ -import { Dispatch, FormEventHandler, SetStateAction, useEffect, useRef } from 'react'; +import React, { Dispatch, FormEventHandler, SetStateAction, useEffect, useRef } from 'react'; import { DeleteManagerSpaceParams, PostManagerSpaceParams, @@ -20,6 +20,7 @@ import { generateSvg, MapSvgData } from 'utils/generateSvg'; import { colorSelectOptions, initialSpaceFormValueSetting, timeUnits } from '../data'; import { SpaceFormContext } from '../providers/SpaceFormProvider'; import * as Styled from './Form.styles'; +import { InfoMessage, InfoMessageWrapper } from './Form.styles'; import FormDayOfWeekSelect from './FormDayOfWeekSelect'; import FormTimeUnitSelect from './FormTimeUnitSelect'; import Preset from './Preset'; @@ -186,6 +187,11 @@ const Form = ({ 예약 조건 + + + 예약 조건이 서로 겹칠 시, 뒷 순서의 예약 조건이 앞 순서의 예약 조건을 덮어씁니다. + + {values.settings.map((_, index) => ( From 6c057ccafea8255e3b12f7b892bbdb3663348de8 Mon Sep 17 00:00:00 2001 From: sakjung Date: Wed, 5 Apr 2023 02:01:15 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EC=98=88=EC=95=BD=20=EC=A1=B0?= =?UTF-8?q?=EA=B1=B4=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=B3=B4=EC=97=AC?= =?UTF-8?q?=EC=A3=BC=EB=8A=94=20=ED=98=95=EC=8B=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../GuestMap/units/ReservationForm.styled.ts | 27 ++++++++++++------- .../pages/GuestMap/units/ReservationForm.tsx | 14 +++++----- .../units/GuestReservationForm.styles.ts | 9 +++---- .../units/GuestReservationForm.tsx | 8 +++--- .../units/MemberGuestReservationForm.tsx | 8 +++--- .../units/ManagerReservationForm.styles.ts | 9 +++---- .../units/ManagerReservationForm.tsx | 11 ++++---- 7 files changed, 43 insertions(+), 43 deletions(-) diff --git a/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts b/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts index dd0741880..3983cc782 100644 --- a/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts +++ b/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts @@ -32,26 +32,33 @@ export const InputsRow = styled.div` } `; -export const TimeFormMessageWrapper = styled.div` +export const SettingSummaryWrapper = styled.div` display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; `; -export const TimeFormMessageList = styled.div` - display: flex; - flex-direction: column; - gap: 4px; +/** + * 세팅이 많아질 경우를 대비 (펼치기, 접기 용도) + */ +export const PartialSettingSummary = styled.p` + height: 80px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: horizontal; + white-space: pre-line; + line-height: normal; + font-size: 0.75rem; + color: ${({ theme }) => theme.gray[500]}; `; -export const TimeFormMessage = styled.p<{ fontWeight?: string }>` - left: 0.75rem; - bottom: -1.5rem; - font-size: 0.75rem; - height: 1.5em; +export const SettingSummary = styled.p<{ fontWeight?: string }>` white-space: pre-line; line-height: normal; + font-size: 0.75rem; color: ${({ theme }) => theme.gray[500]}; ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`}; `; diff --git a/frontend/src/pages/GuestMap/units/ReservationForm.tsx b/frontend/src/pages/GuestMap/units/ReservationForm.tsx index 1364c4529..924b7f08e 100644 --- a/frontend/src/pages/GuestMap/units/ReservationForm.tsx +++ b/frontend/src/pages/GuestMap/units/ReservationForm.tsx @@ -1,6 +1,6 @@ import { AxiosError } from 'axios'; import dayjs from 'dayjs'; -import React, { useContext } from 'react'; +import React, { useContext, useState } from 'react'; import { useMutation } from 'react-query'; import { useHistory } from 'react-router-dom'; import { @@ -23,7 +23,7 @@ import useMember from 'hooks/query/useMember'; import { AccessTokenContext } from 'providers/AccessTokenProvider'; import { MapItem } from 'types/common'; import { ErrorResponse } from 'types/response'; -import { formatTimePrettier, formatTimeWithSecond, isPastDate } from 'utils/datetime'; +import { formatTimeWithSecond, isPastDate } from 'utils/datetime'; import { isNullish } from 'utils/type'; import useSettingSummary from '../../../hooks/query/useSettingSummary'; import { GuestMapFormContext } from '../providers/GuestMapFormProvider'; @@ -73,7 +73,7 @@ const ReservationForm = ({ map }: Props) => { timePicker?.range.start ?? dayjs().tz() )}${DATE.TIMEZONE_OFFSET}`, }, - { enabled: selectedSpaceId !== null } + { enabled: selectedSpaceId !== null && !isNaN(parseInt(selectedSpaceId)) } ); const settingsSummary = getSettingsSummary.data?.data?.summary ?? ''; @@ -178,10 +178,10 @@ const ReservationForm = ({ map }: Props) => { /> )} {spacesMap?.[Number(selectedSpaceId)] && ( - - 예약 가능 시간 - {settingsSummary} - + + 예약 가능 시간 + {settingsSummary} + )} diff --git a/frontend/src/pages/GuestReservation/units/GuestReservationForm.styles.ts b/frontend/src/pages/GuestReservation/units/GuestReservationForm.styles.ts index f62c60ff0..31a16a6ba 100644 --- a/frontend/src/pages/GuestReservation/units/GuestReservationForm.styles.ts +++ b/frontend/src/pages/GuestReservation/units/GuestReservationForm.styles.ts @@ -22,20 +22,17 @@ export const InputWrapper = styled.div` } `; -export const TimeFormMessageWrapper = styled.div` +export const SettingSummaryWrapper = styled.div` display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; `; -export const TimeFormMessage = styled.p<{ fontWeight?: string }>` - left: 0.75rem; - bottom: -1.5rem; - font-size: 0.75rem; - height: 1.5em; +export const SettingSummary = styled.p<{ fontWeight?: string }>` white-space: pre-line; line-height: normal; + font-size: 0.75rem; color: ${({ theme }) => theme.gray[500]}; ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`}; `; diff --git a/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx b/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx index 3f2a11fa8..a9df6c377 100644 --- a/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx +++ b/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx @@ -168,10 +168,10 @@ const GuestReservationForm = ({ onChange={onChange} onCloseOptions={onCloseOptions} /> - - 예약 가능 시간 - {settingsSummary} - + + 예약 가능 시간 + {settingsSummary} + - - 예약 가능 시간 - {settingsSummary} - + + 예약 가능 시간 + {settingsSummary} + diff --git a/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.styles.ts b/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.styles.ts index fa0f66573..9cd814965 100644 --- a/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.styles.ts +++ b/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.styles.ts @@ -29,20 +29,17 @@ export const ButtonWrapper = styled.div` z-index: ${Z_INDEX.RESERVATION_BUTTON}; `; -export const TimeFormMessageWrapper = styled.div` +export const SettingSummaryWrapper = styled.div` display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; `; -export const TimeFormMessage = styled.p<{ fontWeight?: string }>` - left: 0.75rem; - bottom: -1.5rem; - font-size: 0.75rem; - height: 1.5em; +export const SettingSummary = styled.p<{ fontWeight?: string }>` white-space: pre-line; line-height: normal; + font-size: 0.75rem; color: ${({ theme }) => theme.gray[500]}; ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`}; `; diff --git a/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx b/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx index f2f5de90a..85314ff66 100644 --- a/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx +++ b/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx @@ -1,5 +1,5 @@ import dayjs from 'dayjs'; -import React, { ChangeEventHandler, useMemo } from 'react'; +import React, { ChangeEventHandler, useMemo, useState } from 'react'; import { ReactComponent as CalendarIcon } from 'assets/svg/calendar.svg'; import Button from 'components/Button/Button'; import Input from 'components/Input/Input'; @@ -179,11 +179,10 @@ const ManagerReservationForm = ({ onChange={onChange} onCloseOptions={onCloseOptions} /> - - - 예약 가능 시간 - {settingsSummary} - + + 예약 가능 시간 + {settingsSummary} + {isEditMode || ( From 201e7ed5d4f0bdb18bb93c45950936a96c24865a Mon Sep 17 00:00:00 2001 From: sakjung Date: Wed, 12 Apr 2023 00:27:36 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=EA=B3=B5=EA=B0=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=ED=99=94=EB=A9=B4=EC=97=90=EC=84=9C=20=EC=98=88?= =?UTF-8?q?=EC=95=BD=20=EC=A1=B0=EA=B1=B4=20=EC=84=A4=EC=A0=95=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EB=B6=80=EA=B0=80=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 현재 적용된 예약 조건 확인 기능 추가, 안내 메세지 추가 --- frontend/src/api/setting.ts | 7 ++- .../components/Modal/SummaryModal.styles.ts | 58 +++++++++++++++++++ .../src/components/Modal/SummaryModal.tsx | 53 +++++++++++++++++ .../pages/GuestMap/units/ReservationForm.tsx | 1 + .../units/GuestReservationForm.tsx | 1 + .../units/MemberGuestReservationForm.tsx | 1 + .../units/ManagerReservationForm.tsx | 1 + .../ManagerSpaceEditor/ManagerSpaceEditor.tsx | 2 + .../providers/SpaceFormProvider.tsx | 1 - .../pages/ManagerSpaceEditor/units/Form.tsx | 33 ++++++++++- .../units/SettingSummaryPopup.styles.ts | 13 +++++ .../units/SettingSummaryPopup.tsx | 40 +++++++++++++ 12 files changed, 205 insertions(+), 6 deletions(-) create mode 100644 frontend/src/components/Modal/SummaryModal.styles.ts create mode 100644 frontend/src/components/Modal/SummaryModal.tsx create mode 100644 frontend/src/pages/ManagerSpaceEditor/units/SettingSummaryPopup.styles.ts create mode 100644 frontend/src/pages/ManagerSpaceEditor/units/SettingSummaryPopup.tsx diff --git a/frontend/src/api/setting.ts b/frontend/src/api/setting.ts index 148c48ea1..467fe7b10 100644 --- a/frontend/src/api/setting.ts +++ b/frontend/src/api/setting.ts @@ -6,17 +6,20 @@ import api from './api'; export interface QuerySettingSummaryParams { mapId: MapItem['mapId']; spaceId: Space['id']; - selectedDateTime: string; + selectedDateTime: string | null; + settingViewType: string | null; } export const querySettingSummary = ({ mapId, spaceId, selectedDateTime, + settingViewType, }: QuerySettingSummaryParams) => { return api.get( `/maps/${mapId}/spaces/${spaceId}/settings/summary${QS.create({ - selectedDateTime, + selectedDateTime: selectedDateTime, + settingViewType: settingViewType, })}` ); }; diff --git a/frontend/src/components/Modal/SummaryModal.styles.ts b/frontend/src/components/Modal/SummaryModal.styles.ts new file mode 100644 index 000000000..5a026617a --- /dev/null +++ b/frontend/src/components/Modal/SummaryModal.styles.ts @@ -0,0 +1,58 @@ +import styled from 'styled-components'; +import { Z_INDEX } from 'constants/style'; + +interface Props { + open?: boolean; +} + +export const Overlay = styled.div` + display: ${({ open }) => (open ? 'flex' : 'none')}; + position: fixed; + justify-content: center; + align-items: center; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: ${({ theme }) => theme.modalOverlay}; + z-index: ${Z_INDEX.MODAL_OVERLAY}; + overflow: scroll; +`; + +export const Modal = styled.div` + width: 80%; + max-height: 70%; + min-width: 320px; + max-width: 768px; + position: absolute; + border-radius: 4px; + background-color: ${({ theme }) => theme.white}; + overflow: auto; +`; + +export const CloseButton = styled.button` + position: absolute; + padding: 0.5rem; + top: 0.5rem; + right: 1.5rem; + width: 1rem; + cursor: pointer; + border: none; + background: none; + + &:hover { + opacity: 0.7; + } +`; + +export const Inner = styled.div` + padding: 0.5rem 1rem; +`; + +export const Header = styled.h2` + font-weight: 700; + padding: 1rem; + margin-bottom: 0.5rem; +`; + +export const Content = styled.div``; diff --git a/frontend/src/components/Modal/SummaryModal.tsx b/frontend/src/components/Modal/SummaryModal.tsx new file mode 100644 index 000000000..b27e5f8f0 --- /dev/null +++ b/frontend/src/components/Modal/SummaryModal.tsx @@ -0,0 +1,53 @@ +import { MouseEventHandler, PropsWithChildren } from 'react'; +import { createPortal } from 'react-dom'; +import { ReactComponent as CloseIcon } from 'assets/svg/close.svg'; +import * as Styled from './SummaryModal.styles'; + +export interface Props { + open: boolean; + isClosableDimmer?: boolean; + showCloseButton?: boolean; + onClose: () => void; +} + +let modalRoot = document.getElementById('modal'); + +const SummaryModal = ({ + open, + isClosableDimmer, + showCloseButton, + onClose, + children, +}: PropsWithChildren): JSX.Element => { + if (modalRoot === null) { + modalRoot = document.createElement('div'); + modalRoot.setAttribute('id', 'modal'); + document.body.appendChild(modalRoot); + } + + const handleMouseDownOverlay: MouseEventHandler = ({ target, currentTarget }) => { + if (isClosableDimmer && target === currentTarget) { + onClose(); + } + }; + + return createPortal( + + + {open && showCloseButton && ( + + + + )} + {open && children} + + , + modalRoot + ); +}; + +SummaryModal.Inner = Styled.Inner; +SummaryModal.Header = Styled.Header; +SummaryModal.Content = Styled.Content; + +export default SummaryModal; diff --git a/frontend/src/pages/GuestMap/units/ReservationForm.tsx b/frontend/src/pages/GuestMap/units/ReservationForm.tsx index 924b7f08e..2cc3265d7 100644 --- a/frontend/src/pages/GuestMap/units/ReservationForm.tsx +++ b/frontend/src/pages/GuestMap/units/ReservationForm.tsx @@ -72,6 +72,7 @@ const ReservationForm = ({ map }: Props) => { selectedDateTime: `${formValues.date}T${formatTimeWithSecond( timePicker?.range.start ?? dayjs().tz() )}${DATE.TIMEZONE_OFFSET}`, + settingViewType: 'FLAT', }, { enabled: selectedSpaceId !== null && !isNaN(parseInt(selectedSpaceId)) } ); diff --git a/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx b/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx index a9df6c377..7fce7d116 100644 --- a/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx +++ b/frontend/src/pages/GuestReservation/units/GuestReservationForm.tsx @@ -91,6 +91,7 @@ const GuestReservationForm = ({ selectedDateTime: `${date}T${formatTimeWithSecond(range.start ?? dayjs().tz())}${ DATE.TIMEZONE_OFFSET }`, + settingViewType: 'FLAT', }, {} ); diff --git a/frontend/src/pages/GuestReservation/units/MemberGuestReservationForm.tsx b/frontend/src/pages/GuestReservation/units/MemberGuestReservationForm.tsx index 85f315245..5b7a3e269 100644 --- a/frontend/src/pages/GuestReservation/units/MemberGuestReservationForm.tsx +++ b/frontend/src/pages/GuestReservation/units/MemberGuestReservationForm.tsx @@ -90,6 +90,7 @@ const MemberGuestReservationForm = ({ selectedDateTime: `${date}T${formatTimeWithSecond(range.start ?? dayjs().tz())}${ DATE.TIMEZONE_OFFSET }`, + settingViewType: 'FLAT', }, {} ); diff --git a/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx b/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx index 85314ff66..125f8def3 100644 --- a/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx +++ b/frontend/src/pages/ManagerReservation/units/ManagerReservationForm.tsx @@ -88,6 +88,7 @@ const ManagerReservationForm = ({ selectedDateTime: `${date}T${formatTimeWithSecond(range.start ?? dayjs().tz())}${ DATE.TIMEZONE_OFFSET }`, + settingViewType: 'FLAT', }, {} ); diff --git a/frontend/src/pages/ManagerSpaceEditor/ManagerSpaceEditor.tsx b/frontend/src/pages/ManagerSpaceEditor/ManagerSpaceEditor.tsx index 8366ec476..63b60130b 100644 --- a/frontend/src/pages/ManagerSpaceEditor/ManagerSpaceEditor.tsx +++ b/frontend/src/pages/ManagerSpaceEditor/ManagerSpaceEditor.tsx @@ -109,6 +109,8 @@ const ManagerSpaceEditor = (): JSX.Element => { }, }); + // TODO: handleCreateSpace, handleUpdateSpace 시 priorityOrder 고려해서 request 발송 + // TODO: const handleCreateSpace = (data: Omit) => createSpace.mutate({ mapId: Number(mapId), ...data }); diff --git a/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx b/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx index 0709ea98a..92a51f1e6 100644 --- a/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx +++ b/frontend/src/pages/ManagerSpaceEditor/providers/SpaceFormProvider.tsx @@ -110,7 +110,6 @@ const SpaceFormProvider = ({ children }: Props): JSX.Element => { for (let i = 0; i < values.settings.length; i++) { const setting = values.settings[i]; setting['priorityOrder'] = values.settings.length - (i + 1); - console.log('setting :', setting); } return { diff --git a/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx b/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx index 38e5d5c6c..dc75c5114 100644 --- a/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx +++ b/frontend/src/pages/ManagerSpaceEditor/units/Form.tsx @@ -1,4 +1,11 @@ -import React, { Dispatch, FormEventHandler, SetStateAction, useEffect, useRef } from 'react'; +import React, { + Dispatch, + FormEventHandler, + SetStateAction, + useEffect, + useRef, + useState, +} from 'react'; import { DeleteManagerSpaceParams, PostManagerSpaceParams, @@ -17,13 +24,13 @@ import useFormContext from 'hooks/useFormContext'; import { Area, Color, ManagerSpace, MapElement } from 'types/common'; import { SpaceEditorMode as Mode } from 'types/editor'; import { generateSvg, MapSvgData } from 'utils/generateSvg'; -import { colorSelectOptions, initialSpaceFormValueSetting, timeUnits } from '../data'; +import { colorSelectOptions, timeUnits } from '../data'; import { SpaceFormContext } from '../providers/SpaceFormProvider'; import * as Styled from './Form.styles'; -import { InfoMessage, InfoMessageWrapper } from './Form.styles'; import FormDayOfWeekSelect from './FormDayOfWeekSelect'; import FormTimeUnitSelect from './FormTimeUnitSelect'; import Preset from './Preset'; +import SettingSummaryPopup from './SettingSummaryPopup'; interface Props { modeState: [Mode, Dispatch>]; @@ -49,6 +56,7 @@ const Form = ({ const nameInputRef = useRef(null); const [mode, setMode] = modeState; + const [settingSummaryPopupOpen, setSettingSummaryPopupOpen] = useState(false); const { values, @@ -186,12 +194,31 @@ const Form = ({ 예약 조건 + {selectedSpaceId != null && ( + + )} 예약 조건이 서로 겹칠 시, 뒷 순서의 예약 조건이 앞 순서의 예약 조건을 덮어씁니다. + {settingSummaryPopupOpen && selectedSpaceId != null && ( + setSettingSummaryPopupOpen(false)} + mapId={Number(window.location.pathname.split('/', 3).pop())} + spaceId={selectedSpaceId} + /> + )} {values.settings.map((_, index) => ( diff --git a/frontend/src/pages/ManagerSpaceEditor/units/SettingSummaryPopup.styles.ts b/frontend/src/pages/ManagerSpaceEditor/units/SettingSummaryPopup.styles.ts new file mode 100644 index 000000000..12eb86cb8 --- /dev/null +++ b/frontend/src/pages/ManagerSpaceEditor/units/SettingSummaryPopup.styles.ts @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +export const SettingSummaryPopupWrapper = styled.div` + padding: 2rem 3rem; +`; + +export const SettingSummary = styled.p<{ fontWeight?: string }>` + white-space: pre-line; + line-height: normal; + font-size: 0.75rem; + color: ${({ theme }) => theme.gray[500]}; + ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`}; +`; diff --git a/frontend/src/pages/ManagerSpaceEditor/units/SettingSummaryPopup.tsx b/frontend/src/pages/ManagerSpaceEditor/units/SettingSummaryPopup.tsx new file mode 100644 index 000000000..bc3fcfabc --- /dev/null +++ b/frontend/src/pages/ManagerSpaceEditor/units/SettingSummaryPopup.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import Modal from '../../../components/Modal/Modal'; +import SummaryModal from '../../../components/Modal/SummaryModal'; +import useSettingSummary from '../../../hooks/query/useSettingSummary'; +import * as Styled from './SettingSummaryPopup.styles'; + +interface SettingSummaryProps { + mapId: number; + spaceId: number; + open: boolean; + onClose: () => void; +} + +const SettingSummaryPopup = ({ + mapId, + spaceId, + open, + onClose, +}: SettingSummaryProps): JSX.Element => { + const getSettingsSummary = useSettingSummary( + { + mapId, + spaceId, + selectedDateTime: null, + settingViewType: 'FLAT', + }, + {} + ); + const settingsSummary = getSettingsSummary.data?.data?.summary ?? ''; + + return ( + + + {settingsSummary} + + + ); +}; + +export default SettingSummaryPopup;