[PWA] (12) user가 예약 취소하기

예약 관리 페이지에서 사용자가 예약을 취소할 수 있는 기능을 추가하여, 예약 상태를 "취소 요청"으로 변경하고 취소 사유를 입력받도록 구현해보았다.

☑️user 단에서 취소 요청하기

예약 상태에 "취소 요청"을 추가하여, 사용자가 취소 요청을 할 수 있도록 구현했다.

✔️취소 요청 버튼 추가

예약 목록 테이블의 관리 열에 "예약 취소" 버튼을 추가.
추가된 코드 위치: 예약 목록 테이블의 내부.

{reservation.status === "예약 대기" && (
<button
  className="px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 hover:bg-red-200"
  onClick={() => handleCancelRequest(reservation.id)}
>
  예약 취소
</button>
)}

✔️취소 요청 처리 함수 추가

handleCancelRequest 함수에서 예약 상태를 "취소 요청"으로 변경하고, 취소 요청 시간을 기록.

const handleCancelRequest = (reservationId) => {
  const updatedReservations = reservations.map((reservation) =>
    reservation.id === reservationId
      ? {
          ...reservation,
          status: "취소 요청",
          canceledAt: new Date().toLocaleString(),
        }
      : reservation
  );

  setReservations(updatedReservations);
  localStorage.setItem("reservations", JSON.stringify(updatedReservations));
};

✔️UI 수정

예약 상태에 따라 배경색과 텍스트 색상을 다르게 표시.
추가된 코드 위치: 예약 상태 열.

<span
  className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
    reservation.status === "예약 확정"
      ? "bg-green-100 text-green-800"
      : reservation.status === "취소됨"
      ? "bg-red-100 text-red-800"
      : reservation.status === "취소 요청"
      ? "bg-orange-100 text-orange-800"
      : "bg-yellow-100 text-yellow-800"
  }`}
>
  {reservation.status}
</span>

➡️ 수정후
예약 상태가 "예약 대기"일 때 "취소" 버튼이 표시됨.
"취소" 버튼 클릭 시, 예약 상태가 "취소 요청"으로 변경됨.
취소 요청된 예약은 로컬 스토리지에 정상적으로 저장됨.

☑️admin 단에서 취소 요청 승인하기

예약 관리 페이지에 "취소 요청 목록" 섹션을 추가하여, 취소 요청된 예약을 별도로 확인하고 관리할 수 있도록 기능을 구현하였다.

✔️취소 요청 목록 섹션 추가

취소 요청 목록 섹션을 추가하여, status가 "취소 요청"인 예약만 필터링하여 표시한다.
각 취소 요청 항목에 대해 예약 정보를 표시하고, "취소 승인" 버튼을 추가하였다.

✔️취소 승인 로직 추가

handleApproveCancel 함수에서 취소 요청을 승인하고, 해당 예약을 "취소된 예약 목록"으로 이동하도록 구현하였다.

취소 요청된 예약이 없을 경우, "취소 요청된 예약이 없습니다."라는 메시지를 표시.

➡️ 수정후
취소 요청된 예약이 있을 경우, 목록에 정상적으로 표시됨.
"취소 승인" 버튼 클릭 시, 해당 예약이 취소된 예약 목록으로 이동하고, 로컬 스토리지 데이터가 업데이트됨.
취소 요청된 예약이 없을 경우, 없다는 메시지가 표시됨.