Merge pull request #906 from woowacourse-teams/dev

release: v2.0.0
woowacourse-teams · Feb 13, 2023 · 82cb35f · 82cb35f
2 parents a5a4034 + bf95080
commit 82cb35f
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 25 deletions.
diff --git a/frontend/src/pages/GuestMap/GuestMap.styles.ts b/frontend/src/pages/GuestMap/GuestMap.styles.ts
@@ -16,6 +16,10 @@ export const MapContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: relative;
+
+  @media (max-width: ${({ theme: { breakpoints } }) => breakpoints.sm}px) {
+    display: none;
+  }
 `;
 
 export const SelectBox = styled.div`

diff --git a/frontend/src/pages/GuestMap/GuestMap.tsx b/frontend/src/pages/GuestMap/GuestMap.tsx
@@ -118,6 +118,7 @@ const GuestMap = ({ map }: GuestMapProps): JSX.Element => {
       setSelectedSpaceIdForm?.(`${spaceId}`);
     } else if (selectedSwitchLabel === SWITCH_LABEL_LIST[1]) {
       setSelectedSpaceId(spaceId);
+      setSelectedSpaceIdForm?.(`${spaceId}`);
     }
   };
 

diff --git a/frontend/src/pages/GuestMap/providers/GuestMapFormProvider.tsx b/frontend/src/pages/GuestMap/providers/GuestMapFormProvider.tsx
@@ -28,6 +28,7 @@ export interface GuestMapFormProviderValue {
   selectedSpaceId: string;
   setSelectedSpaceId?: React.Dispatch<React.SetStateAction<string>>;
   timePicker?: ReturnType<typeof useTimePicker>;
+  spaceList?: SpaceResponse[];
   availableSpaceList?: SpaceResponse[];
   spacesMap?: Record<number, SpaceResponse>;
 }
@@ -84,6 +85,8 @@ const GuestMapFormProvider = ({ mapId, children }: GuestMapFormProviderProps) =>
     { enabled: !!timePicker.range.start && !!timePicker.range.end }
   );
 
+  const spaceList = getSpaces.data?.data.spaces ?? [];
+
   const availableSpaceList =
     getSpaceAvailable.data?.data.spaces
       .filter((space) => space.isAvailable)
@@ -95,6 +98,7 @@ const GuestMapFormProvider = ({ mapId, children }: GuestMapFormProviderProps) =>
     selectedSpaceId,
     setSelectedSpaceId,
     timePicker,
+    spaceList,
     availableSpaceList,
     spacesMap,
   };

diff --git a/frontend/src/pages/GuestMap/units/Aside.styled.tsx b/frontend/src/pages/GuestMap/units/Aside.styled.tsx
@@ -7,6 +7,11 @@ export const Container = styled.aside`
   min-width: ${({ theme }) => theme.breakpoints.sm}px;
   box-shadow: 0.25rem 0 0.25rem 0 ${({ theme }) => theme.shadow};
   z-index: ${Z_INDEX.ASIDE};
+
+  @media (max-width: ${({ theme: { breakpoints } }) => breakpoints.sm}px) {
+    width: 100%;
+    min-width: 0;
+  }
 `;
 
 export const Notice = styled.div`

diff --git a/frontend/src/pages/GuestMap/units/Aside.tsx b/frontend/src/pages/GuestMap/units/Aside.tsx
@@ -38,7 +38,7 @@ const Aside = ({ map, selectedLabel, onClickSwitch, selectedSpaceId, onDelete, o
       ) : (
         <ReservationList
           map={map}
-          selectedSpaceId={selectedSpaceId}
+          // selectedSpaceId={selectedSpaceId}
           onEdit={onEdit}
           onDelete={onDelete}
         />

diff --git a/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts b/frontend/src/pages/GuestMap/units/ReservationForm.styled.ts
@@ -38,6 +38,12 @@ export const TimeFormMessageWrapper = styled.div`
   margin-top: 0.5rem;
 `;
 
+export const TimeFormMessageList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
 export const TimeFormMessage = styled.p<{ fontWeight?: string }>`
   left: 0.75rem;
   bottom: -1rem;

diff --git a/frontend/src/pages/GuestMap/units/ReservationForm.tsx b/frontend/src/pages/GuestMap/units/ReservationForm.tsx
@@ -167,23 +167,25 @@ const ReservationForm = ({ map }: Props) => {
           {spacesMap?.[Number(selectedSpaceId)] && (
             <Styled.TimeFormMessageWrapper>
               <Styled.TimeFormMessage fontWeight="bold">예약 가능 시간</Styled.TimeFormMessage>
-              {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>
+                {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/GuestMap/units/ReservationList.styled.ts b/frontend/src/pages/GuestMap/units/ReservationList.styled.ts
@@ -47,3 +47,21 @@ export const MessageWrapper = styled.div`
   display: flex;
   justify-content: center;
 `;
+
+export const InputWrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.625rem;
+
+  & > label,
+  & > div {
+    flex: 1;
+  }
+`;
+
+export const SpaceOption = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+`;
diff --git a/frontend/src/pages/GuestMap/units/ReservationList.tsx b/frontend/src/pages/GuestMap/units/ReservationList.tsx
@@ -1,11 +1,13 @@
 import dayjs from 'dayjs';
-import { useContext, useState } from 'react';
+import { Dispatch, SetStateAction, useContext, useState } from 'react';
 import { ReactComponent as CalendarIcon } from 'assets/svg/calendar.svg';
 import { ReactComponent as DeleteIcon } from 'assets/svg/delete.svg';
 import { ReactComponent as EditIcon } from 'assets/svg/edit.svg';
+import ColorDot from 'components/ColorDot/ColorDot';
 import IconButton from 'components/IconButton/IconButton';
 import Input from 'components/Input/Input';
 import ManagerReservationListItem from 'components/ManagerReservationListItem/ManagerReservationListItem';
+import Select from 'components/Select/Select';
 import DATE from 'constants/date';
 import useGuestReservations from 'hooks/query/useGuestReservations';
 import useGuestSpace from 'hooks/query/useGuestSpace';
@@ -14,17 +16,24 @@ import { MapItem, Reservation } from 'types/common';
 import { formatDate, isPastTime } from 'utils/datetime';
 import { getReservationStatus } from 'utils/reservation';
 import { isNullish } from 'utils/type';
+import { GuestMapFormContext } from '../providers/GuestMapFormProvider';
 import * as Styled from './ReservationList.styled';
 
 interface Props {
   map: MapItem;
-  selectedSpaceId: number | null;
+  // selectedSpaceId: number | null;
   onEdit: (reservation: Reservation) => void;
   onDelete: (reservation: Reservation) => void;
 }
 
-const ReservationList = ({ map: { mapId }, selectedSpaceId, onDelete, onEdit }: Props) => {
+const ReservationList = ({
+  map: { mapId },
+  // selectedSpaceId,
+  onDelete,
+  onEdit,
+}: Props) => {
   const { accessToken } = useContext(AccessTokenContext);
+  const { spaceList, selectedSpaceId, setSelectedSpaceId } = useContext(GuestMapFormContext);
 
   const [date, setDate] = useState<string>(dayjs().format('YYYY-MM-DD'));
 
@@ -35,28 +44,44 @@ const ReservationList = ({ map: { mapId }, selectedSpaceId, onDelete, onEdit }:
   } = useGuestReservations(
     {
       mapId: mapId,
-      spaceId: selectedSpaceId as number,
+      spaceId: +selectedSpaceId,
       date: formatDate(dayjs(date)),
     },
     {
-      enabled: !isNullish(selectedSpaceId) && dayjs(date).isValid(),
+      enabled: !!selectedSpaceId && !isNullish(selectedSpaceId) && dayjs(date).isValid(),
     }
   );
 
   const { data: space } = useGuestSpace(
     {
       mapId,
-      spaceId: selectedSpaceId as number,
+      spaceId: +selectedSpaceId,
     },
     {
-      enabled: !isNullish(selectedSpaceId),
+      enabled: !!selectedSpaceId && !isNullish(selectedSpaceId),
     }
   );
 
   const handleDate = (e: React.ChangeEvent<HTMLInputElement>) => {
     setDate(e.target.value);
   };
 
+  console.log('spaceList', spaceList);
+
+  const getSpaceOptions = () => {
+    return (
+      spaceList?.map((space) => ({
+        value: `${space.id}`,
+        children: (
+          <Styled.SpaceOption>
+            <ColorDot size="medium" color={space.color} />
+            {space.name}
+          </Styled.SpaceOption>
+        ),
+      })) ?? []
+    );
+  };
+
   return (
     <Styled.ReservationListWrapper>
       <Styled.SpaceTitle>
@@ -74,6 +99,15 @@ const ReservationList = ({ map: { mapId }, selectedSpaceId, onDelete, onEdit }:
         onChange={handleDate}
         required
       />
+      <Styled.InputWrapper>
+        <Select
+          name="space"
+          label="공간 선택"
+          options={getSpaceOptions()}
+          value={String(selectedSpaceId)}
+          onChange={(id) => setSelectedSpaceId?.(id)}
+        />
+      </Styled.InputWrapper>
       <>
         {isLoadingError && (
           <Styled.Message>