feat: 공간 조건 적용 사용성 개선 (FE)

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,

frontend/src/api/setting.ts

@@ -0,0 +1,25 @@
+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 | null;
+  settingViewType: string | null;
+}
+
+export const querySettingSummary = ({
+  mapId,
+  spaceId,
+  selectedDateTime,
+  settingViewType,
+}: QuerySettingSummaryParams) => {
+  return api.get<QuerySettingSummarySuccess>(
+    `/maps/${mapId}/spaces/${spaceId}/settings/summary${QS.create({
+      selectedDateTime: selectedDateTime,
+      settingViewType: settingViewType,
+    })}`
+  );
+};

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<Props>`
+  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``;

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<Props>): JSX.Element => {
+  if (modalRoot === null) {
+    modalRoot = document.createElement('div');
+    modalRoot.setAttribute('id', 'modal');
+    document.body.appendChild(modalRoot);
+  }
+
+  const handleMouseDownOverlay: MouseEventHandler<HTMLDivElement> = ({ target, currentTarget }) => {
+    if (isClosableDimmer && target === currentTarget) {
+      onClose();
+    }
+  };
+
+  return createPortal(
+    <Styled.Overlay open={open} onMouseDown={handleMouseDownOverlay}>
+      <Styled.Modal>
+        {open && showCloseButton && (
+          <Styled.CloseButton onClick={onClose}>
+            <CloseIcon />
+          </Styled.CloseButton>
+        )}
+        {open && children}
+      </Styled.Modal>
+    </Styled.Overlay>,
+    modalRoot
+  );
+};
+
+SummaryModal.Inner = Styled.Inner;
+SummaryModal.Header = Styled.Header;
+SummaryModal.Content = Styled.Content;
+
+export default SummaryModal;

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 = <TData = AxiosResponse<QuerySettingSummarySuccess>>(
+  params: QuerySettingSummaryParams,
+  options?: UseQueryOptions<
+    AxiosResponse<QuerySettingSummarySuccess>,
+    AxiosError<ErrorResponse>,
+    TData,
+    [QueryKey, QuerySettingSummaryParams]
+  >
+): UseQueryResult<TData, AxiosError<ErrorResponse>> =>
+  useQuery(['getSettingSummary', params], () => querySettingSummary(params), options);
+
+export default useSettingSummary;

frontend/src/pages/GuestMap/units/ReservationForm.styled.ts

@@ -32,23 +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: -1rem;
+export const SettingSummary = styled.p<{ fontWeight?: string }>`
+  white-space: pre-line;
+  line-height: normal;
   font-size: 0.75rem;
-  height: 1em;
   color: ${({ theme }) => theme.gray[500]};
   ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`};
 `;

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,8 +23,9 @@ 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';
 import * as Styled from './ReservationForm.styled';
 
@@ -64,6 +65,19 @@ 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}`,
+      settingViewType: 'FLAT',
+    },
+    { enabled: selectedSpaceId !== null && !isNaN(parseInt(selectedSpaceId)) }
+  );
+  const settingsSummary = getSettingsSummary.data?.data?.summary ?? '';
+
   const onSuccessCreateReservation = (
     _: unknown,
     { reservation }: PostGuestReservationParams | PostMemberGuestReservationParams
@@ -165,28 +179,10 @@ const ReservationForm = ({ map }: Props) => {
             />
           )}
           {spacesMap?.[Number(selectedSpaceId)] && (
-            <Styled.TimeFormMessageWrapper>
-              <Styled.TimeFormMessage fontWeight="bold">예약 가능 시간</Styled.TimeFormMessage>
-              <Styled.TimeFormMessageList>
-                {spacesMap[Number(selectedSpaceId)].settings.map(
-                  (
-                    {
-                      settingStartTime,
-                      settingEndTime,
-                      reservationMaximumTimeUnit,
-                      reservationMinimumTimeUnit,
-                    },
-                    index
-                  ) => (
-                    <Styled.TimeFormMessage key={index}>
-                      {settingStartTime.slice(0, 5)} ~ {settingEndTime.slice(0, 5)}
-                      (최소 {formatTimePrettier(reservationMinimumTimeUnit)}, 최대{' '}
-                      {formatTimePrettier(reservationMaximumTimeUnit)})
-                    </Styled.TimeFormMessage>
-                  )
-                )}{' '}
-              </Styled.TimeFormMessageList>
-            </Styled.TimeFormMessageWrapper>
+            <Styled.SettingSummaryWrapper>
+              <Styled.SettingSummary fontWeight="bold">예약 가능 시간</Styled.SettingSummary>
+              <Styled.SettingSummary>{settingsSummary}</Styled.SettingSummary>
+            </Styled.SettingSummaryWrapper>
           )}
         </Styled.InputWrapper>
 

frontend/src/pages/GuestReservation/GuestReservation.tsx

@@ -289,6 +289,8 @@ const GuestReservation = (): JSX.Element => {
               <MemberGuestReservationForm
                 isEditMode={isEditMode}
                 space={getSpace.data?.data}
+                spaceId={spaceId}
+                mapId={mapId}
                 reservation={reservation}
                 date={date}
                 userName={userName ?? ''}
@@ -298,6 +300,8 @@ const GuestReservation = (): JSX.Element => {
             ) : (
               <GuestReservationForm
                 isEditMode={isEditMode}
+                mapId={mapId}
+                spaceId={spaceId}
                 space={getSpace.data?.data}
                 reservation={reservation}
                 date={date}

frontend/src/pages/GuestReservation/units/GuestReservationForm.styles.ts

@@ -22,19 +22,19 @@ 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`
-  left: 0.75rem;
-  bottom: -1rem;
+export const SettingSummary = styled.p<{ fontWeight?: string }>`
+  white-space: pre-line;
+  line-height: normal;
   font-size: 0.75rem;
-  height: 1em;
   color: ${({ theme }) => theme.gray[500]};
+  ${({ fontWeight }) => fontWeight && `font-weight: ${fontWeight}`};
 `;
 
 export const ButtonWrapper = styled.div`