Locate reservation table in create page (#90)

Co-authored-by: bluehorn07 <[email protected]>
PoApper · Mar 7, 2024 · 4caa007 · 4caa007
1 parent e13df8d
commit 4caa007
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/pages/reservation/equipment/[association]/create.tsx b/pages/reservation/equipment/[association]/create.tsx
@@ -10,6 +10,7 @@ import { PoPoAxios } from '@/lib/axios.instance'
 import { IEquipment } from '@/types/reservation.interface'
 import { IUser } from '@/types/user.interface'
 import ReservationDatetimePicker from '@/components/reservation/reservation.datetime.picker'
+import EquipReservationTable from '@/components/reservation/equip.reservation.table'
 
 type ObjectType = {
   [key: string]: string
@@ -141,6 +142,16 @@ const EquipReservationCreatePage: React.FunctionComponent<{
             setDate={setDate} setStartTime={setStartTime} setEndTime={setEndTime}
           />
         </Form.Group>
+
+        <div className={'field'}>
+          <label>예약 현황</label>
+          <div>
+            <EquipReservationTable
+              associationName={association}
+              selectedDate={date.format('YYYYMMDD')}
+              />
+          </div>
+        </div>
 
         <Message>
           <Message.Header>예약한 장비의 예약비를 꼭 확인해주세요!</Message.Header>

diff --git a/pages/reservation/place/[region]/[placeName]/create.tsx b/pages/reservation/place/[region]/[placeName]/create.tsx
@@ -12,6 +12,7 @@ import { isOnOpeningHours } from '@/lib/opening_hours'
 import { hourDiff, roundUpByDuration } from '@/lib/time-date'
 import ReservationDatetimePicker from '@/components/reservation/reservation.datetime.picker'
 import OpeningHoursList from '@/components/reservation/opening_hours.list'
+import PlaceReservationTable from '@/components/reservation/place.reservation.table'
 
 const RegionKorNameMapping = {
   STUDENT_HALL: '학생 회관',
@@ -21,7 +22,7 @@ const RegionKorNameMapping = {
   RESIDENTIAL_COLLEGE: 'RC',
 }
 
-const PlaceReservationCreatePage: React.FunctionComponent<{ placeInfo: IPlace, selectedDate: string }> = ({ placeInfo, selectedDate }) => {
+const PlaceReservationCreatePage: React.FunctionComponent<{ placeInfo: IPlace, selectedDate: string, placeName: string }> = ({ placeInfo, selectedDate, placeName }) => {
   const router = useRouter()
 
 
@@ -120,6 +121,13 @@ const PlaceReservationCreatePage: React.FunctionComponent<{ placeInfo: IPlace, s
 
         <Divider/>
 
+        <div className={'field'} style={{maxWidth: 240}}>
+          <label>사용 가능 시간</label>
+          <div style={{color: 'gray'}}>
+            <OpeningHoursList openingHours={JSON.parse(placeInfo.opening_hours)}/>
+          </div>
+        </div>
+
         <Form.Group>
           <ReservationDatetimePicker
             date={date} startTime={startTime} endTime={endTime}
@@ -134,11 +142,14 @@ const PlaceReservationCreatePage: React.FunctionComponent<{ placeInfo: IPlace, s
             </Message>
           )
         }
-
-        <div className={'field'} style={{maxWidth: 240}}>
-          <label>사용 가능 시간</label>
-          <div style={{color: 'gray'}}>
-            <OpeningHoursList openingHours={JSON.parse(placeInfo.opening_hours)}/>
+
+        <div className={'field'}>
+          <label>예약 현황</label>
+          <div>
+            <PlaceReservationTable
+              placeName={placeName}
+              selectedDate={date.format('YYYYMMDD')}
+              />
           </div>
         </div>