[PWA] (13) 버튼 사용하지않고, 마이페이지에서 예약 내역 확인하기

마이페이지에서 예약 내역 확인

현재 /mypage 마이페이지에서 "예약 내역 확인하기" 버튼이 있는데 버튼을 클릭해야 /reservation 페이지로 넘어가서 나의 예약 내역을 확인하게끔 되어있다.
버튼을 클릭하고 페이지를 이동하지않고 예약 내역을 한번에 /mypage 에서 볼 수 있게 바꾸어보았다.

수정 내용

1. 예약 내역을 /mypage에 통합

/reservation 페이지에서 사용하던 예약 내역 표시 로직과 UI를 /mypage로 통합하였다.

예약 상태 필터링, 날짜 필터링, 예정된 예약/지난 예약 탭 기능을 추가하여 예약 내역을 한눈에 확인할 수 있도록 구현해보았다.

2. 예약 내역 표시 섹션 추가
/mypage의

안에 예약 내역 테이블을 추가하였다.
탭/필터/예약목록테이블 등.. 추가해주었다.

<Section className="mb-6">
<SectionTitle>예약 내역</SectionTitle>

3. 예약 취소 로직 추가
사용자가 예약 취소 버튼을 클릭하면 취소 사유를 선택한 후 상태를 "취소 요청"으로 변경하도록 구현.

const handleCancelClick = (reservation) => {
setSelectedReservation(reservation);
setIsCancelModalOpen(true); // 취소 모달 열기
};

const handleCancelConfirm = (reason) => {
const updatedReservations = reservations.map((reservation) =>
  reservation.id === selectedReservation.id
    ? {
        ...reservation,
        status: "취소 요청",
        cancelReason: reason,
      }
    : reservation
);
setReservations(updatedReservations);
localStorage.setItem("reservations", JSON.stringify(updatedReservations));
setIsCancelModalOpen(false); // 모달 닫기
};

➡️수정 후
1. 마이페이지에서 예약 내역이 정상적으로 표시됨.
2. 예약 상태, 날짜, 예정된 예약/지난 예약에 따라 필터링이 정상적으로 작동함.
3. "취소" 버튼 클릭 시 예약 상태가 "취소 요청"으로 변경됨.
4. 변경된 예약 상태가 로컬 스토리지에 저장되고, UI에 반영됨.