Merge pull request #160 from BCSDLab/fix/#149

[동방 예약] 주 변경 버튼 UI 수정
BCSDLab · Apr 7, 2024 · 487bf8a · 487bf8a
2 parents 056e2c7 + ff36757
commit 487bf8a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/src/page/Reservation/view/Week/index.tsx b/src/page/Reservation/view/Week/index.tsx
@@ -10,6 +10,7 @@ import makeNumberArray from 'util/hooks/makeNumberArray';
 import { useGetReservations } from 'query/reservations';
 import useBooleanState from 'util/hooks/useBooleanState';
 import { useSnackBar } from 'ts/useSnackBar';
+import { ArrowBackIosOutlined, ArrowForwardIosOutlined } from '@mui/icons-material';
 import * as S from './styles';
 import CreateReservationModal from './modal/createReservationModal';
 import DisplayTime from './modal/displayTime';
@@ -137,10 +138,14 @@ export default function Week({ currentDate, setCurrentDate }: WeekProps) {
     setDragStart({ time, day });
   };
 
-  const handleMouseEnter = ({ time }: TimeSlotSelection) => {
+  const handleMouseEnter = ({ time, day }: TimeSlotSelection) => {
     if (dragging) {
       const fixedDay = dragStart?.day;
       if (!fixedDay) return;
+      if (new Date(`${selectedYear}-${day} ${time}`) < new Date()) {
+        openSnackBar({ type: 'error', message: '지난 시간은 선택할 수 없습니다.' });
+        return;
+      }
       setDragEnd({ time, day: fixedDay });
     }
   };
@@ -196,8 +201,12 @@ export default function Week({ currentDate, setCurrentDate }: WeekProps) {
   return (
     <div css={S.weekContainer}>
       <div css={S.buttonGroup}>
-        <Button onClick={goToPrevWeek}>이전 주</Button>
-        <Button onClick={goToNextWeek}>다음 주</Button>
+        <Button css={S.prevWeekButton} onClick={goToPrevWeek}>
+          <ArrowBackIosOutlined />
+        </Button>
+        <Button css={S.nextWeekButton} onClick={goToNextWeek}>
+          <ArrowForwardIosOutlined />
+        </Button>
       </div>
       <Table>
         <TableHead>

diff --git a/src/page/Reservation/view/Week/styles.ts b/src/page/Reservation/view/Week/styles.ts
@@ -23,7 +23,21 @@ export const weekContainer = css`
 `;
 
 export const buttonGroup = css`
-  margin-left: 10px;
+  display: flex;
+  position: relative;
+  justify-content: space-around;
+  width: 100%;
+  height: 36px;
+`;
+
+export const prevWeekButton = css`
+  position: absolute;
+  left: 12%;
+`;
+
+export const nextWeekButton = css`
+  position: absolute;
+  right: 0;
 `;
 
 export const notDraggableArea = css`