roomescape-refactored/frontend/src/pages/MyReservationPage.tsx

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { cancelWaiting, fetchMyReservations } from '@_api/reservation/reservationAPI';
import type { MyReservationRetrieveResponse } from '@_api/reservation/reservationTypes';
import { ReservationStatus } from '@_api/reservation/reservationTypes';
import { isLoginRequiredError } from '@_api/apiClient';

const MyReservationPage: React.FC = () => {
  const [reservations, setReservations] = useState<MyReservationRetrieveResponse[]>([]);
  const navigate = useNavigate();

  const handleError = (err: any) => {
    if (isLoginRequiredError(err)) {
      alert('로그인이 필요해요.');
      navigate('/login', { state: { from: location } });
    } else {
      const message = err.response?.data?.message || '알 수 없는 오류가 발생했습니다.';
      alert(message);
      console.error(err);
    }
  };

  useEffect(() => {
    fetchMyReservations()
      .then(res => setReservations(res.reservations))
      .catch(handleError);
  }, []);

  const _cancelWaiting = (id: number) => {
    cancelWaiting(id)
      .then(() => {
        alert('예약 대기가 취소되었습니다.');
        setReservations(reservations.filter(r => r.id !== id));
      })
      .catch(handleError);
  };

  const getStatusText = (status: ReservationStatus, rank: number) => {
    if (status === ReservationStatus.CONFIRMED) {
      return '예약';
    }
    if (status === ReservationStatus.CONFIRMED_PAYMENT_REQUIRED) {
      return '예약 - 결제 필요';
    }
    if (status === ReservationStatus.WAITING) {
      return `${rank}번째 예약 대기`;
    }
    return '';
  };

  return (
    <div className="content-container">
      <h2 className="content-container-title">내 예약</h2>
      <div className="table-container"></div>
      <table className="table">
        <thead>
          <tr>
            <th>테마</th>
            <th>날짜</th>
            <th>시간</th>
            <th>상태</th>
            <th>대기 취소</th>
            <th>paymentKey</th>
            <th>결제금액</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {reservations.map(r => (
            <tr key={r.id}>
              <td>{r.themeName}</td>
              <td>{r.date}</td>
              <td>{r.time}</td>
              <td>{getStatusText(r.status, r.rank)}</td>
              <td>
                {r.status === ReservationStatus.WAITING &&
                  <button className="btn btn-danger" onClick={() => _cancelWaiting(r.id)}>취소</button>}
              </td>
              <td>{r.paymentKey}</td>
              <td>{r.amount}</td>
              <td></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default MyReservationPage;