Revert "feat: 공간 조건 적용 사용성 개선 (FE) (#964)"

This reverts commit 55f4f0b.
woowacourse-teams · Aug 3, 2023 · 6492aef · 6492aef
1 parent 55f4f0b
commit 6492aef
Show file tree

Hide file tree

Showing 24 changed files with 115 additions and 399 deletions.
diff --git a/frontend/src/__mocks__/mockData.ts b/frontend/src/__mocks__/mockData.ts
@@ -53,7 +53,6 @@ export const spaces: Spaces = {
           reservationTimeUnit: 10,
           reservationMinimumTimeUnit: 10,
           reservationMaximumTimeUnit: 1440,
-          priorityOrder: 0,
           enabledDayOfWeek: {
             monday: true,
             tuesday: true,

diff --git a/frontend/src/api/setting.ts b/frontend/src/api/setting.ts
diff --git a/frontend/src/components/Modal/SummaryModal.styles.ts b/frontend/src/components/Modal/SummaryModal.styles.ts
diff --git a/frontend/src/components/Modal/SummaryModal.tsx b/frontend/src/components/Modal/SummaryModal.tsx
diff --git a/frontend/src/hooks/query/useSettingSummary.ts b/frontend/src/hooks/query/useSettingSummary.ts
diff --git a/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts b/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts
@@ -32,33 +32,23 @@ export const InputsRow = styled.div`
   }
 `;
 
-export const SettingSummaryWrapper = styled.div`
+export const TimeFormMessageWrapper = styled.div`
   display: flex;
-  flex-direction: column;
   gap: 0.25rem;
   margin-top: 0.5rem;
 `;
 
-/**
- * 세팅이 많아질 경우를 대비 (펼치기, 접기 용도)
- */
-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 TimeFormMessageList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 `;
 
-export const SettingSummary = styled.p<{ fontWeight?: string }>`
-  white-space: pre-line;
-  line-height: normal;
+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}`};
 `;

diff --git 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, useState } from 'react';
+import React, { useContext } from 'react';
 import { useMutation } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import {
@@ -23,9 +23,8 @@ import useMember from 'hooks/query/useMember';
 import { AccessTokenContext } from 'providers/AccessTokenProvider';
 import { MapItem } from 'types/common';
 import { ErrorResponse } from 'types/response';
-import { formatTimeWithSecond, isPastDate } from 'utils/datetime';
+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';
 
@@ -65,19 +64,6 @@ 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
@@ -179,10 +165,28 @@ const ReservationForm = ({ map }: Props) => {
             />
           )}
           {spacesMap?.[Number(selectedSpaceId)] && (
-            <Styled.SettingSummaryWrapper>
-              <Styled.SettingSummary fontWeight="bold">예약 가능 시간</Styled.SettingSummary>
-              <Styled.SettingSummary>{settingsSummary}</Styled.SettingSummary>
-            </Styled.SettingSummaryWrapper>
+            <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.InputWrapper>
 

diff --git a/frontend/src/pages/GuestReservation/GuestReservation.tsx b/frontend/src/pages/GuestReservation/GuestReservation.tsx
@@ -289,8 +289,6 @@ const GuestReservation = (): JSX.Element => {
               <MemberGuestReservationForm
                 isEditMode={isEditMode}
                 space={getSpace.data?.data}
-                spaceId={spaceId}
-                mapId={mapId}
                 reservation={reservation}
                 date={date}
                 userName={userName ?? ''}
@@ -300,8 +298,6 @@ const GuestReservation = (): JSX.Element => {
             ) : (
               <GuestReservationForm
                 isEditMode={isEditMode}
-                mapId={mapId}
-                spaceId={spaceId}
                 space={getSpace.data?.data}
                 reservation={reservation}
                 date={date}

diff --git a/frontend/src/pages/GuestReservation/units/GuestReservationForm.styles.ts b/frontend/src/pages/GuestReservation/units/GuestReservationForm.styles.ts
@@ -22,19 +22,19 @@ export const InputWrapper = styled.div`
   }
 `;
 
-export const SettingSummaryWrapper = styled.div`
+export const TimeFormMessageWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   margin-top: 0.5rem;
 `;
 
-export const SettingSummary = styled.p<{ fontWeight?: string }>`
-  white-space: pre-line;
-  line-height: normal;
+export const TimeFormMessage = styled.p`
+  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`