diff --git a/frontend/src/components/Switch/Switch.styled.ts b/frontend/src/components/Switch/Switch.styled.ts
index 8f55d2c46..6fdb9de94 100644
--- a/frontend/src/components/Switch/Switch.styled.ts
+++ b/frontend/src/components/Switch/Switch.styled.ts
@@ -19,6 +19,7 @@ export const SwitchButton = styled.button<{ selected: boolean }>`
font-size: 1rem;
background-color: ${({ theme, selected }) => (selected ? theme.primary[500] : theme.gray[100])};
color: ${({ theme, selected }) => (selected ? theme.white : theme.black[500])};
+ cursor: pointer;
&:last-of-type {
margin-right: 0;
diff --git a/frontend/src/constants/routes.tsx b/frontend/src/constants/routes.tsx
index 147693ba1..314e67824 100644
--- a/frontend/src/constants/routes.tsx
+++ b/frontend/src/constants/routes.tsx
@@ -1,5 +1,6 @@
import React, { ReactNode } from 'react';
import GuestMain from 'pages/GuestMain/GuestMain';
+import GuestMapContainer from 'pages/GuestMap/GuestMapContainer';
import ManagerMapList from 'pages/ManagerMapList/ManagerMapList';
import PATH from './path';
@@ -55,7 +56,7 @@ export const PUBLIC_ROUTES: Route[] = [
},
{
path: PATH.GUEST_MAP,
- component: ,
+ component: ,
},
{
path: PATH.GUEST_RESERVATION,
diff --git a/frontend/src/hooks/useTimePicker.ts b/frontend/src/hooks/useTimePicker.ts
index 6b5e64b22..fdafc9415 100644
--- a/frontend/src/hooks/useTimePicker.ts
+++ b/frontend/src/hooks/useTimePicker.ts
@@ -3,7 +3,7 @@ import { MouseEventHandler, useState } from 'react';
import { Step } from 'components/TimePicker/TimePicker';
import { Midday, Range, Time } from 'types/time';
-type SelectedTime = keyof Range | null;
+export type SelectedTime = keyof Range | null;
interface Props {
initialStartTime?: Date;
diff --git a/frontend/src/pages/GuestMap/GuestMap.styles.ts b/frontend/src/pages/GuestMap/GuestMap.styles.ts
index 5e5342731..a4f297e9f 100644
--- a/frontend/src/pages/GuestMap/GuestMap.styles.ts
+++ b/frontend/src/pages/GuestMap/GuestMap.styles.ts
@@ -13,47 +13,6 @@ export const MapContainer = styled.div`
position: relative;
`;
-export const MapItem = styled.div<{ width: number; height: number }>`
- flex: 1;
- padding: 1.5rem;
- min-width: ${({ width }) => width}px;
- min-height: ${({ height }) => height}px;
- display: flex;
- justify-content: center;
- align-items: center;
-
- @media (max-width: ${({ width }) => width}px) {
- position: absolute;
- top: 0;
- left: 0;
- }
-`;
-
-export const Space = styled.g`
- cursor: pointer;
-`;
-
-export const SpaceRect = styled.rect`
- &:hover {
- opacity: 0.5;
- }
-`;
-
-export const SpacePolygon = styled.polygon`
- &:hover {
- opacity: 0.5;
- }
-`;
-
-export const SpaceAreaText = styled.text`
- dominant-baseline: middle;
- text-anchor: middle;
- fill: ${({ theme }) => theme.black[700]};
- font-size: 1rem;
- pointer-events: none;
- user-select: none;
-`;
-
export const SelectBox = styled.div`
display: flex;
flex-direction: column;
diff --git a/frontend/src/pages/GuestMap/GuestMap.tsx b/frontend/src/pages/GuestMap/GuestMap.tsx
index b535807aa..17e6e9b67 100644
--- a/frontend/src/pages/GuestMap/GuestMap.tsx
+++ b/frontend/src/pages/GuestMap/GuestMap.tsx
@@ -1,38 +1,42 @@
import { AxiosError } from 'axios';
import dayjs, { Dayjs } from 'dayjs';
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { useMutation } from 'react-query';
import { useHistory, useLocation, useParams } from 'react-router-dom';
import { deleteGuestReservation } from 'api/guestReservation';
import Header from 'components/Header/Header';
-import { EDITOR } from 'constants/editor';
import MESSAGE from 'constants/message';
-import PALETTE from 'constants/palette';
-import PATH, { HREF } from 'constants/path';
-import useGuestMap from 'hooks/query/useGuestMap';
+import { HREF } from 'constants/path';
import useGuestReservations from 'hooks/query/useGuestReservations';
import useGuestSpaces from 'hooks/query/useGuestSpaces';
import { AccessTokenContext } from 'providers/AccessTokenProvider';
-import { Area, MapDrawing, MapItem, Reservation, ScrollPosition, Space } from 'types/common';
-import { DrawingAreaShape } from 'types/editor';
+import { Area, MapItem, Reservation, ScrollPosition, Space } from 'types/common';
import { GuestPageURLParams } from 'types/guest';
import { ErrorResponse } from 'types/response';
import { formatDate } from 'utils/datetime';
-import { getPolygonCenterPoint } from 'utils/editor';
import { isNullish } from 'utils/type';
import * as Styled from './GuestMap.styles';
+import { GuestMapFormContext } from './providers/GuestMapFormProvider';
import Aside from './units/Aside';
+import GuestMapDrawing from './units/GuestMapDrawing';
import LoginPopup from './units/LoginPopup';
import PasswordInputModal from './units/PasswordInputModal';
+export const SWITCH_LABEL_LIST = ['예약하기', '예약현황'];
+
export interface GuestMapState {
spaceId?: Space['id'];
targetDate?: Dayjs;
scrollPosition?: ScrollPosition;
}
-const GuestMap = (): JSX.Element => {
+interface GuestMapProps {
+ map: MapItem;
+}
+
+const GuestMap = ({ map }: GuestMapProps): JSX.Element => {
const { accessToken } = useContext(AccessTokenContext);
+ const { setSelectedSpaceId: setSelectedSpaceIdForm } = useContext(GuestMapFormContext);
const [passwordInputModalOpen, setPasswordInputModalOpen] = useState(false);
const [selectedReservation, setSelectedReservation] = useState();
@@ -49,34 +53,16 @@ const GuestMap = (): JSX.Element => {
const targetDate = location.state?.targetDate;
const scrollPosition = location.state?.scrollPosition;
- const [map, setMap] = useState(null);
- const mapDrawing = map?.mapDrawing;
- useGuestMap(
- { sharingMapId },
- {
- onError: () => {
- history.replace(PATH.NOT_FOUND);
- },
- onSuccess: (response) => {
- const mapData = response.data;
-
- try {
- setMap({
- ...mapData,
- mapDrawing: JSON.parse(mapData.mapDrawing) as MapDrawing,
- });
- } catch (error) {
- alert(MESSAGE.GUEST_MAP.MAP_DRAWING_PARSE_ERROR);
- }
- },
- retry: false,
- }
- );
+ const mapDrawing = map.mapDrawing;
const [spaceList, setSpaceList] = useState([]);
const [selectedSpaceId, setSelectedSpaceId] = useState(spaceId ?? null);
const [date, setDate] = useState(targetDate ? dayjs(targetDate).tz() : dayjs().tz());
+ const [selectedSwitchLabel, setSelectedSwitchLabel] = useState(
+ SWITCH_LABEL_LIST[0]
+ );
+
const spaces = useMemo(() => {
const result: { [key: string]: Space } = {};
spaceList.forEach((item) => (result[item.id] = item));
@@ -85,9 +71,9 @@ const GuestMap = (): JSX.Element => {
}, [spaceList]);
useGuestSpaces(
- { mapId: map?.mapId as number },
+ { mapId: map.mapId },
{
- enabled: map?.mapId !== undefined,
+ enabled: map.mapId !== undefined,
onSuccess: (response) => {
const { spaces } = response.data;
@@ -102,7 +88,7 @@ const GuestMap = (): JSX.Element => {
const getReservations = useGuestReservations(
{
- mapId: map?.mapId as number,
+ mapId: map.mapId,
spaceId: selectedSpaceId as number,
date: formatDate(date),
},
@@ -123,8 +109,16 @@ const GuestMap = (): JSX.Element => {
},
});
+ const handleClickSwitch = (label: typeof SWITCH_LABEL_LIST[number]) => {
+ setSelectedSwitchLabel(label);
+ };
+
const handleClickSpaceArea = (spaceId: number) => {
- setSelectedSpaceId(spaceId);
+ if (selectedSwitchLabel === SWITCH_LABEL_LIST[0]) {
+ setSelectedSpaceIdForm?.(`${spaceId}`);
+ } else if (selectedSwitchLabel === SWITCH_LABEL_LIST[1]) {
+ setSelectedSpaceId(spaceId);
+ }
};
const handleEdit = (reservation: Reservation) => {
@@ -133,7 +127,7 @@ const GuestMap = (): JSX.Element => {
history.push({
pathname: HREF.GUEST_RESERVATION_EDIT(sharingMapId),
state: {
- mapId: map?.mapId,
+ mapId: map.mapId,
spaceId: spaces[selectedSpaceId].id,
reservation,
selectedDate: formatDate(date),
@@ -143,22 +137,22 @@ const GuestMap = (): JSX.Element => {
};
const deleteLoginReservation = (reservationId: number) => {
- if (typeof map?.mapId !== 'number' || selectedSpaceId === null) return;
+ if (typeof map.mapId !== 'number' || selectedSpaceId === null) return;
if (!window.confirm(MESSAGE.GUEST_MAP.DELETE_CONFIRM)) return;
removeReservation.mutate({
- mapId: map?.mapId,
+ mapId: map.mapId,
spaceId: selectedSpaceId,
reservationId: reservationId,
});
};
const handleDeleteGuestReservation = (passwordInput: string) => {
- if (typeof map?.mapId !== 'number' || selectedSpaceId === null) return;
+ if (typeof map.mapId !== 'number' || selectedSpaceId === null) return;
removeReservation.mutate({
- mapId: map?.mapId,
+ mapId: map.mapId,
spaceId: selectedSpaceId,
password: passwordInput,
reservationId: Number(selectedReservation?.id),
@@ -180,7 +174,7 @@ const GuestMap = (): JSX.Element => {
history.push({
pathname: HREF.GUEST_RESERVATION(sharingMapId),
state: {
- mapId: map?.mapId,
+ mapId: map.mapId,
spaceId: spaces[selectedSpaceId].id,
selectedDate: formatDate(date),
scrollPosition: { x: mapRef?.current?.scrollLeft, y: mapRef?.current?.scrollTop },
@@ -205,87 +199,16 @@ const GuestMap = (): JSX.Element => {
}, [targetDate]);
return (
-
- {map && }
+ <>
+
setLoginPopupOpen(true)} />
{mapDrawing && (
-
-
-
+
)}
@@ -302,7 +225,7 @@ const GuestMap = (): JSX.Element => {
onLogin={handleLogin}
/>
)}
-
+
);
};
diff --git a/frontend/src/pages/GuestMap/GuestMapContainer.tsx b/frontend/src/pages/GuestMap/GuestMapContainer.tsx
new file mode 100644
index 000000000..12b2cd2da
--- /dev/null
+++ b/frontend/src/pages/GuestMap/GuestMapContainer.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import MESSAGE from 'constants/message';
+import PATH from 'constants/path';
+import useGuestMap from 'hooks/query/useGuestMap';
+import { MapDrawing, MapItem } from 'types/common';
+import { GuestPageURLParams } from 'types/guest';
+import GuestMap from './GuestMap';
+import * as Styled from './GuestMap.styles';
+import GuestMapFormProvider from './providers/GuestMapFormProvider';
+
+const GuestMapContainer = () => {
+ const { sharingMapId } = useParams();
+ const history = useHistory();
+
+ const [map, setMap] = useState(null);
+
+ useGuestMap(
+ { sharingMapId },
+ {
+ onError: () => {
+ history.replace(PATH.NOT_FOUND);
+ },
+ onSuccess: (response) => {
+ const mapData = response.data;
+
+ try {
+ setMap({
+ ...mapData,
+ mapDrawing: JSON.parse(mapData.mapDrawing) as MapDrawing,
+ });
+ } catch (error) {
+ alert(MESSAGE.GUEST_MAP.MAP_DRAWING_PARSE_ERROR);
+ }
+ },
+ retry: false,
+ }
+ );
+
+ if (map === null) return <>;
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default GuestMapContainer;
diff --git a/frontend/src/pages/GuestMap/providers/GuestMapFormProvider.tsx b/frontend/src/pages/GuestMap/providers/GuestMapFormProvider.tsx
new file mode 100644
index 000000000..c9f9daeed
--- /dev/null
+++ b/frontend/src/pages/GuestMap/providers/GuestMapFormProvider.tsx
@@ -0,0 +1,105 @@
+import { createContext, useMemo, useState } from 'react';
+import DATE from 'constants/date';
+import SPACE from 'constants/space';
+import useGuestSpaceAvailable from 'hooks/query/useGuestSpaceAvailable';
+import useGuestSpaces from 'hooks/query/useGuestSpaces';
+import useInputs from 'hooks/useInputs';
+import useTimePicker from 'hooks/useTimePicker';
+import { Space } from 'types/common';
+import { SpaceResponse } from 'types/response';
+import { Time } from 'types/time';
+import { formatDate, formatTimeWithSecond } from 'utils/datetime';
+
+interface GuestMapForm {
+ description: string;
+ password: string;
+ date: string;
+ name: string;
+}
+
+interface GuestMapFormProviderProps {
+ mapId: number;
+ children?: React.ReactNode;
+}
+
+export interface GuestMapFormProviderValue {
+ formValues: GuestMapForm;
+ onChangeFormValues?: (event: React.ChangeEvent) => void;
+ selectedSpaceId: string;
+ setSelectedSpaceId?: React.Dispatch>;
+ timePicker?: ReturnType;
+ availableSpaceList?: SpaceResponse[];
+ spacesMap?: Record;
+}
+
+const convertTimeToDate = (date: string, time: Time | null) => {
+ if (time === null) {
+ return null;
+ }
+
+ return `${date}T${formatTimeWithSecond(time)}${DATE.TIMEZONE_OFFSET}`;
+};
+
+const initialValue: GuestMapFormProviderValue = {
+ formValues: {
+ description: '',
+ password: '',
+ date: formatDate(new Date()),
+ name: '',
+ },
+ selectedSpaceId: '',
+};
+
+export const GuestMapFormContext = createContext(initialValue);
+
+const GuestMapFormProvider = ({ mapId, children }: GuestMapFormProviderProps) => {
+ const [formValues, onChangeFormValues] = useInputs(initialValue.formValues);
+
+ const [selectedSpaceId, setSelectedSpaceId] = useState('');
+
+ const timePicker = useTimePicker({
+ step: SPACE.RESERVATION.MIN_STEP,
+ initialStartTime: undefined,
+ initialEndTime: undefined,
+ });
+
+ const getSpaces = useGuestSpaces({ mapId });
+ const spacesMap = useMemo(() => {
+ if (!getSpaces.data?.data) {
+ return {};
+ }
+
+ return getSpaces.data.data.spaces.reduce((prev, cur) => {
+ prev[cur.id] = cur;
+ return prev;
+ }, {} as Record);
+ }, [getSpaces.data?.data]);
+
+ const getSpaceAvailable = useGuestSpaceAvailable(
+ {
+ mapId,
+ startDateTime: convertTimeToDate(formValues.date, timePicker.range.start)!,
+ endDateTime: convertTimeToDate(formValues.date, timePicker.range.end)!,
+ },
+ { enabled: !!timePicker.range.start && !!timePicker.range.end }
+ );
+
+ const availableSpaceList =
+ getSpaceAvailable.data?.data.spaces
+ .filter((space) => space.isAvailable)
+ .map((space) => spacesMap[space.spaceId]) ?? [];
+
+ const value: GuestMapFormProviderValue = {
+ formValues,
+ onChangeFormValues,
+ selectedSpaceId,
+ setSelectedSpaceId,
+ timePicker,
+ availableSpaceList,
+ spacesMap,
+ };
+
+ return {children};
+};
+
+export default GuestMapFormProvider;
diff --git a/frontend/src/pages/GuestMap/units/Aside.tsx b/frontend/src/pages/GuestMap/units/Aside.tsx
index 4c2327619..dface1c3f 100644
--- a/frontend/src/pages/GuestMap/units/Aside.tsx
+++ b/frontend/src/pages/GuestMap/units/Aside.tsx
@@ -1,20 +1,16 @@
-import React, { useState } from 'react';
import Switch from 'components/Switch/Switch';
-import { MapItem, Space } from 'types/common';
+import { MapItem } from 'types/common';
+import { SWITCH_LABEL_LIST } from '../GuestMap';
import * as Styled from './Aside.styled';
import ReservationForm from './ReservationForm';
interface Props {
map: MapItem;
+ selectedLabel: typeof SWITCH_LABEL_LIST[number];
+ onClickSwitch: (label: typeof SWITCH_LABEL_LIST[number]) => void;
}
-const SWITCH_LABEL_LIST = ['예약하기', '예약현황'];
-
-const Aside = ({ map }: Props) => {
- const [selectedLabel, setSelectedLabel] = useState(
- SWITCH_LABEL_LIST[0]
- );
-
+const Aside = ({ map, selectedLabel, onClickSwitch }: Props) => {
return (
{map.notice && (
@@ -27,7 +23,7 @@ const Aside = ({ map }: Props) => {
setSelectedLabel(label)}
+ onClick={onClickSwitch}
/>
diff --git a/frontend/src/pages/GuestMap/units/GuestMapDrawing.styles.ts b/frontend/src/pages/GuestMap/units/GuestMapDrawing.styles.ts
new file mode 100644
index 000000000..cea0efe6c
--- /dev/null
+++ b/frontend/src/pages/GuestMap/units/GuestMapDrawing.styles.ts
@@ -0,0 +1,60 @@
+import styled, { css } from 'styled-components';
+
+interface SpaceElementProps {
+ disabled: boolean;
+}
+
+const disabledCSS = css`
+ opacity: 0.2;
+ pointer-events: none;
+ filter: brightness(0.5);
+
+ &:hover {
+ opacity: 0.2;
+ }
+`;
+
+export const MapItem = styled.div<{ width: number; height: number }>`
+ flex: 1;
+ padding: 1.5rem;
+ min-width: ${({ width }) => width}px;
+ min-height: ${({ height }) => height}px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ @media (max-width: ${({ width }) => width}px) {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+`;
+
+export const Space = styled.g`
+ cursor: pointer;
+`;
+
+export const SpaceRect = styled.rect`
+ &:hover {
+ opacity: 0.7;
+ }
+
+ ${({ disabled }) => disabled && disabledCSS};
+`;
+
+export const SpacePolygon = styled.polygon`
+ &:hover {
+ opacity: 0.7;
+ }
+
+ ${({ disabled }) => disabled && disabledCSS};
+`;
+
+export const SpaceAreaText = styled.text`
+ dominant-baseline: middle;
+ text-anchor: middle;
+ fill: ${({ theme }) => theme.black[700]};
+ font-size: 1rem;
+ pointer-events: none;
+ user-select: none;
+`;
diff --git a/frontend/src/pages/GuestMap/units/GuestMapDrawing.tsx b/frontend/src/pages/GuestMap/units/GuestMapDrawing.tsx
new file mode 100644
index 000000000..85de54f63
--- /dev/null
+++ b/frontend/src/pages/GuestMap/units/GuestMapDrawing.tsx
@@ -0,0 +1,105 @@
+import React, { useContext, useMemo } from 'react';
+import { EDITOR } from 'constants/editor';
+import PALETTE from 'constants/palette';
+import { MapDrawing, Space } from 'types/common';
+import { DrawingAreaShape } from 'types/editor';
+import { SpaceResponse } from 'types/response';
+import { getPolygonCenterPoint } from 'utils/editor';
+import { GuestMapFormContext } from '../providers/GuestMapFormProvider';
+import * as Styled from './GuestMapDrawing.styles';
+
+interface GuestMapDrawingProps {
+ mapDrawing: MapDrawing;
+ spaceList: Space[];
+ onClickSpaceArea: (spaceId: Space['id']) => void;
+}
+
+const GuestMapDrawing = ({ mapDrawing, spaceList, onClickSpaceArea }: GuestMapDrawingProps) => {
+ const { availableSpaceList } = useContext(GuestMapFormContext);
+
+ const availableSpace = useMemo(() => {
+ return (
+ availableSpaceList?.reduce((acc: Record, cur) => {
+ acc[cur.id] = cur;
+
+ return acc;
+ }, {}) ?? {}
+ );
+ }, [availableSpaceList]);
+
+ return (
+
+
+
+ );
+};
+
+export default GuestMapDrawing;
diff --git a/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts b/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts
index dd7cbac5f..8ade4edde 100644
--- a/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts
+++ b/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts
@@ -34,17 +34,17 @@ export const InputsRow = styled.div`
export const TimeFormMessageWrapper = styled.div`
display: flex;
- flex-direction: column;
gap: 0.25rem;
margin-top: 0.5rem;
`;
-export const TimeFormMessage = styled.p`
+export const TimeFormMessage = styled.p<{ fontWeight?: string }>`
left: 0.75rem;
bottom: -1rem;
font-size: 0.75rem;
height: 1em;
color: ${({ theme }) => theme.gray[500]};
+ ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`};
`;
export const ButtonWrapper = styled.div`
diff --git a/frontend/src/pages/GuestMap/units/ReservationForm.tsx b/frontend/src/pages/GuestMap/units/ReservationForm.tsx
index 4e1a1a95e..86e7e61ba 100644
--- a/frontend/src/pages/GuestMap/units/ReservationForm.tsx
+++ b/frontend/src/pages/GuestMap/units/ReservationForm.tsx
@@ -1,12 +1,12 @@
import { AxiosError } from 'axios';
import dayjs from 'dayjs';
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext } from 'react';
import { useMutation } from 'react-query';
import { useHistory } from 'react-router-dom';
import {
- postMemberGuestReservation,
postGuestReservation,
PostGuestReservationParams,
+ postMemberGuestReservation,
PostMemberGuestReservationParams,
} from 'api/guestReservation';
import { ReactComponent as CalendarIcon } from 'assets/svg/calendar.svg';
@@ -19,103 +19,57 @@ import MESSAGE from 'constants/message';
import { HREF } from 'constants/path';
import RESERVATION from 'constants/reservation';
import SPACE from 'constants/space';
-import useGuestSpaceAvailable from 'hooks/query/useGuestSpaceAvailable';
-import useGuestSpaces from 'hooks/query/useGuestSpaces';
import useMember from 'hooks/query/useMember';
-import useInputs from 'hooks/useInputs';
-import useTimePicker from 'hooks/useTimePicker';
import { AccessTokenContext } from 'providers/AccessTokenProvider';
-import { MapItem, Space } from 'types/common';
-import { ErrorResponse, SpaceResponse } from 'types/response';
-import { Time } from 'types/time';
-import { formatDate, formatTimePrettier, formatTimeWithSecond, isPastDate } from 'utils/datetime';
+import { MapItem } from 'types/common';
+import { ErrorResponse } from 'types/response';
+import { formatTimePrettier, formatTimeWithSecond, isPastDate } from 'utils/datetime';
import { isNullish } from 'utils/type';
+import { GuestMapFormContext } from '../providers/GuestMapFormProvider';
import * as Styled from './ReservationForm.styled';
interface Props {
map: MapItem;
}
-interface Form {
- description: string;
- password: string;
- date: string;
- name: string;
-}
-
-const converTimeToDate = (date: string, time: Time | null) => {
- if (time === null) {
- return null;
- }
-
- return `${date}T${formatTimeWithSecond(time)}${DATE.TIMEZONE_OFFSET}`;
-};
-
const ReservationForm = ({ map }: Props) => {
const history = useHistory();
const { accessToken } = useContext(AccessTokenContext);
+ const {
+ formValues,
+ onChangeFormValues,
+ selectedSpaceId,
+ setSelectedSpaceId,
+ timePicker,
+ availableSpaceList,
+ spacesMap,
+ } = useContext(GuestMapFormContext);
const member = useMember({
enabled: !!accessToken,
});
const userName = member.data?.data.userName;
- const [selectedSpaceId, setSelectedSpaceId] = useState('');
- const [values, onChangeValues] = useInputs