Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[동방 예약] 지난 시간은 선택하지 못하도록 수정 #158

Merged
merged 5 commits into from
Apr 7, 2024
Merged

[동방 예약] 지난 시간은 선택하지 못하도록 수정 #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
34f4331
fix: 지난 시간은 선택하지 못하도록 로직 추가
dooohun Apr 5, 2024
4aa1cec
refactor: 지난 시간을 선택하지 못하는 이벤트를 onClick 이벤트로 수정
dooohun Apr 5, 2024
5493999
fix: 예약된 시간에 선택 안되는 에러 수정
dooohun Apr 5, 2024
6bbe04c
feat: 이미 지난 시간의 예약 취소 및 수정 불가
dooohun Apr 5, 2024
aa0d1f2
Merge branch 'main' into fix/#140
dooohun Apr 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/page/Reservation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function ReservationOutlet() {
</Button>
</ButtonGroup>
{/* 주를 만들자 */}
{mode === 'week' && <Week setDate={setDate} />}
{mode === 'week' && <Week currentDate={currentPageDate} setCurrentDate={setDate} />}
{mode === 'month' && <Month /> }
</div>
);
Expand Down
41 changes: 28 additions & 13 deletions src/page/Reservation/view/Week/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { HOUR_LIST, MINUTE_LIST } from 'util/constants/time';
import makeNumberArray from 'util/hooks/makeNumberArray';
import { useGetReservations } from 'query/reservations';
import useBooleanState from 'util/hooks/useBooleanState';
import { useSnackBar } from 'ts/useSnackBar';
import * as S from './styles';
import CreateReservationModal from './modal/createReservationModal';
import DisplayTime from './modal/displayTime';
Expand All @@ -33,21 +34,24 @@ interface ModifyReservationModalProps {
hour: string;
minute: string;
dayIndex: number;
day: string;
time: string;
}

interface WeekProps {
setDate: (date: { year: number; month: number }) => void;
currentDate: { year: number; month: number };
setCurrentDate: (date: { year: number; month: number }) => void;
}

export default function Week({ setDate }: WeekProps) {
export default function Week({ currentDate, setCurrentDate }: WeekProps) {
const [currentWeekStart, setCurrentWeekStart] = useState<Date>(() => {
const today = new Date();
const dayOfWeek = today.getDay();
const difference = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
today.setDate(today.getDate() - difference);
return new Date(today.setHours(0, 0, 0, 0));
});
const currentYear = new Date().getFullYear();
const selectedYear = currentDate.year;
const [weekDates, setWeekDates] = useState<WeekDay[]>([]);
const [dragStart, setDragStart] = useState<TimeSlotSelection | null>(null);
const [dragEnd, setDragEnd] = useState<TimeSlotSelection | null>(null);
Expand All @@ -59,6 +63,7 @@ export default function Week({ setDate }: WeekProps) {
const { data: reservationInfo, refetch } = useGetReservations();
const startDateTime = useRef<string>('');
const endDateTime = useRef<string>('');
const openSnackBar = useSnackBar();

// 예약 정보가 변경될 때마다 선택된 범위를 업데이트
useEffect(() => {
Expand Down Expand Up @@ -96,13 +101,13 @@ export default function Week({ setDate }: WeekProps) {
const endTime = endHour * 60 + endMinute;
const newEndTime = `${String(endHour).padStart(2, '0')}:${String(endMinute).padStart(2, '0')}`;
if (startTime <= endTime) {
startDateTime.current = `${currentYear}-${dragStart.day} ${dragStart.time}`;
endDateTime.current = `${currentYear}-${dragEnd.day} ${newEndTime}`;
startDateTime.current = `${selectedYear}-${dragStart.day} ${dragStart.time}`;
endDateTime.current = `${selectedYear}-${dragEnd.day} ${newEndTime}`;
} else {
startDateTime.current = `${currentYear}-${dragEnd.day} ${newEndTime}`;
endDateTime.current = `${currentYear}-${dragStart.day} ${dragStart.time}`;
startDateTime.current = `${selectedYear}-${dragEnd.day} ${newEndTime}`;
endDateTime.current = `${selectedYear}-${dragStart.day} ${dragStart.time}`;
}
}, [dragStart, dragEnd, currentYear]);
}, [dragStart, dragEnd, selectedYear]);

// 현재 주의 날짜 목록을 업데이트
useEffect(() => {
Expand All @@ -114,7 +119,7 @@ export default function Week({ setDate }: WeekProps) {
date: `${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`,
};
});
setDate({ year: currentWeekStart.getFullYear(), month: Number(dates[0].date.split('-')[0]) });
setCurrentDate({ year: currentWeekStart.getFullYear(), month: Number(dates[0].date.split('-')[0]) });
setWeekDates(dates);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentWeekStart]);
Expand All @@ -126,7 +131,7 @@ export default function Week({ setDate }: WeekProps) {
const goToNextWeek = () => {
setCurrentWeekStart(new Date(currentWeekStart.setDate(currentWeekStart.getDate() + 7)));
};

// 오늘 날짜 기준으로 이전 날짜는 선택 불가능하게 만들어야 함
const handleMouseDown = ({ time, day }: TimeSlotSelection) => {
setDragging(true);
setDragStart({ time, day });
Expand Down Expand Up @@ -163,7 +168,9 @@ export default function Week({ setDate }: WeekProps) {
closeReservationModal();
};

const handleModifyReservationModalOpen = ({ hour, minute, dayIndex }: ModifyReservationModalProps) => {
const handleModifyReservationModalOpen = ({
hour, minute, dayIndex, day, time,
}: ModifyReservationModalProps) => {
const isSelected = selectionRange.some(({ start, end }) => {
const startTimeInMinutes = Number(start.time.slice(0, 2)) * 60 + Number(start.time.slice(3));
const endTimeInMinutes = Number(end.time.slice(0, 2)) * 60 + Number(end.time.slice(3));
Expand All @@ -177,6 +184,10 @@ export default function Week({ setDate }: WeekProps) {
const currentTimeInMinutes = Number(`${hour}:${minute}`.slice(0, 2)) * 60 + Number(`${hour}:${minute}`.slice(3));
return start.day === weekDates[dayIndex]?.date && end.day === weekDates[dayIndex]?.date && ((startTimeInMinutes <= currentTimeInMinutes && currentTimeInMinutes <= endTimeInMinutes) || (endTimeInMinutes <= currentTimeInMinutes && currentTimeInMinutes <= startTimeInMinutes));
});
if (!isSelected && new Date(`${selectedYear}-${day} ${time}`) < new Date()) {
openSnackBar({ type: 'error', message: '지난 시간은 선택할 수 없습니다.' });
return;
}
if (isSelected) {
setSelectedIndex(reservationInfoIndex);
openModifyReservationModal();
Expand Down Expand Up @@ -219,7 +230,9 @@ export default function Week({ setDate }: WeekProps) {
onMouseDown={() => handleMouseDown({ time: `${hour}:${minute}`, day: weekDates[dayIndex]?.date })}
onMouseEnter={() => handleMouseEnter({ time: `${hour}:${minute}`, day: weekDates[dayIndex]?.date })}
onMouseUp={handleMouseUp}
onClick={() => handleModifyReservationModalOpen({ hour, minute, dayIndex })}
onClick={() => handleModifyReservationModalOpen({
hour, minute, dayIndex, time: `${hour}:${minute}`, day: weekDates[dayIndex]?.date,
})}
css={S.selectedCell({
selectionRange, time: `${hour}:${minute}`, day: weekDates[dayIndex]?.date, dragStart, dragEnd,
})}
Expand All @@ -246,7 +259,9 @@ export default function Week({ setDate }: WeekProps) {
onMouseDown={() => handleMouseDown({ time: `${hour}:${minute}`, day: weekDates[dayIndex]?.date })}
onMouseEnter={() => handleMouseEnter({ time: `${hour}:${minute}`, day: weekDates[dayIndex]?.date })}
onMouseUp={handleMouseUp}
onClick={() => handleModifyReservationModalOpen({ hour, minute, dayIndex })}
onClick={() => handleModifyReservationModalOpen({
hour, minute, dayIndex, time: `${hour}:${minute}`, day: weekDates[dayIndex]?.date,
})}
css={S.selectedCell({
selectionRange, time: `${hour}:${minute}`, day: weekDates[dayIndex]?.date, dragStart, dragEnd,
})}
Expand Down
12 changes: 8 additions & 4 deletions src/page/Reservation/view/Week/modal/modifyReservationModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import * as S from './style';

interface CreateReservationModalProps {
open: boolean;
onClose: () => void;
reservationInfoIndex: number;
onClose: () => void;
refetch: (options?: RefetchOptions | undefined) => Promise<QueryObserverResult<GetReservationsResponse[], Error>>
}

Expand All @@ -22,7 +22,7 @@ const initialReservationInfo = {
};

export default function ModifyReservationModal({
open, onClose, reservationInfoIndex, refetch,
open, reservationInfoIndex, onClose, refetch,
}: CreateReservationModalProps) {
const openSnackBar = useSnackBar();
const { data: reservationsInfo } = useGetReservations();
Expand Down Expand Up @@ -128,8 +128,12 @@ export default function ModifyReservationModal({
/>
</div>
<div css={S.buttonGroup}>
<Button variant="contained" color="error" onClick={handleDeleteReservationClick}>예약 취소</Button>
<Button variant="contained" onClick={handlePutReservationClick}>수정</Button>
{new Date(reservationInfo?.startDateTime) >= new Date() && (
<>
<Button variant="contained" color="error" onClick={handleDeleteReservationClick}>예약 취소</Button>
<Button variant="contained" onClick={handlePutReservationClick}>수정</Button>
</>
)}
<Button variant="contained" onClick={handleModalClose}>취소</Button>
</div>
</div>
Expand Down
Loading