{idx + 1}
{reservation.place.name}
{reservation.booker.name}
diff --git a/components/reservation/opening_hours.list.jsx b/components/reservation/opening_hours.list.jsx
new file mode 100644
index 0000000..75afafd
--- /dev/null
+++ b/components/reservation/opening_hours.list.jsx
@@ -0,0 +1,52 @@
+import { KoreanWeekday } from '@/utils/opening_hours'
+
+const OpeningHoursList = ({ openingHours }) => {
+ let isBriefCase;
+ if (openingHours['Everyday']) {
+ isBriefCase = false;
+ } else {
+ let cnt = 0;
+ for(const day of Object.keys(openingHours)) {
+ if(openingHours[day] === '00:00-24:00') {
+ cnt += 1;
+ }
+ }
+ isBriefCase = (cnt > 5);
+ }
+
+ return (
+
+ {
+ Object.keys(openingHours).map(day => {
+ if(isBriefCase && openingHours[day] === '00:00-24:00') {
+ return;
+ }
+
+ return (
+
+
+ {KoreanWeekday[day]}:
+
+
+ {openingHours[day]}
+
+
+ )
+ },
+ )
+ }
+ {
+ isBriefCase ? (
+
+
그외:
+
+ 00:00-24:00
+
+
+ ) : null
+ }
+
+
+ e.preventDefault()}
+ dateFormat={'yyyy-MM-dd'}
+ minDate={now.toDate()}
+ // maxDate={now.add(30, 'day').toDate()}
+ selected={date.toDate()}
+ onChange={(date) => {
+ const targetDate = moment(date).format('YYYY-MM-DD')
+ const nowDate = now.format('YYYY-MM-DD');
+ if (targetDate === nowDate) {
+ setDate(now);
+ setStartTime(now);
+ setEndTime(nowNext30Min);
+ } else {
+ setDate(moment(targetDate + 'T00:00'));
+ setStartTime(moment(targetDate + 'T00:00'));
+ setEndTime(moment(targetDate + 'T00:30'));
+ }
+ }}
+ />
+
+
+
+
+ e.preventDefault()}
+ dateFormat={'hh:mm aa'}
+ selected={startTime.toDate()}
+ minTime={date.toDate()}
+ maxTime={moment(date.format('YYYY-MM-DD') + 'T23:59').toDate()}
+ onChange={(startTime) => {
+ const newStartTime = moment(startTime);
+ const newStartTimeNext30Min = moment(newStartTime).add(30, 'minute');
+ setStartTime(newStartTime);
+ setEndTime(newStartTimeNext30Min);
+ }}/>
+
+
+
+
+ e.preventDefault()}
+ dateFormat={'hh:mm aa'}
+ selected={endTime.toDate()}
+ minTime={
+ moment(startTime).add(30, 'minute').toDate()
+ }
+ maxTime={
+ (endTime.format('HHmm') === '0000') ?
+ moment(date.format('YYYY-MM-DD') + 'T00:00').toDate() // edge-case
+ : moment(date.format('YYYY-MM-DD') + 'T23:59').toDate()
+ }
+ onChange={(endTime) => {setEndTime(moment(endTime))}}/>
+
+
+ )
+}
+
+export default ReservationDatetimePicker;
\ No newline at end of file
diff --git a/components/reservation/reservation.menubar.jsx b/components/reservation/reservation.menubar.jsx
index bec8ea5..bdd48b4 100644
--- a/components/reservation/reservation.menubar.jsx
+++ b/components/reservation/reservation.menubar.jsx
@@ -6,6 +6,11 @@ export default class ReservationMenubar extends Component {
render() {
return (