レストラン予約システム

連絡先、席種、営業時間、定休日、席種別の満席判定を含む予約Web UIを作る問題です。

レストラン予約Webアプリを作成してください。

必須機能:
- 初期表示で予約作成フォームと予約一覧を表示する。
- 顧客名、電話番号、メールアドレス、日付(YYYY-MM-DD)、時刻(HH:mm)、人数、席種、利用目的、要望を入力できる。
- 予約作成後、成功メッセージを表示する。
- 予約一覧に、少なくとも顧客名、電話番号、メールアドレス、日付、時刻、人数、席種、利用目的、要望を表示する。
- 不正入力では予約を作らず、エラーメッセージを表示する。
- 同一ブラウザセッション内で状態を維持し、リロード後も予約一覧を復元する。
- 予約可能時間は17:00から22:00開始までとし、30分単位の時刻だけ受け付ける。
- 毎週火曜日は定休日として予約を受け付けない。タイムゾーンはAsia/Tokyoとして扱う。
- 人数は1以上8以下の整数だけ受け付ける。
- 電話番号は数字、ハイフン、プラス記号を使った7文字以上の値だけ受け付ける。
- メールアドレスは一般的な email 形式だけ受け付ける。
- 席種は「テーブル」「カウンター」「個室」「テラス」のいずれかを受け付ける。
- 同じ日付、同じ時刻、同じ席種の予約人数合計は8人までとし、超える予約は満席エラーとして作成しない。

Playwrightテストは次のDOM IDだけを使います。
- 顧客名入力: id="ranked-aa-customer-name"
- 電話番号入力: id="ranked-aa-phone"
- メールアドレス入力: id="ranked-aa-email"
- 日付入力: id="ranked-aa-date"
- 時刻入力: id="ranked-aa-time"
- 人数入力: id="ranked-aa-party-size"
- 席種入力: id="ranked-aa-seating-area"
- 利用目的入力: id="ranked-aa-occasion"
- 要望入力: id="ranked-aa-special-requests"
- 予約作成ボタン: id="ranked-aa-submit-reservation"
- 成功メッセージ: id="ranked-aa-success-message"
- エラーメッセージ: id="ranked-aa-error-message"
- 予約一覧: id="ranked-aa-reservation-list"

成功メッセージには「予約」と「成功」を含めてください。不正入力時のエラーメッセージには「エラー」を含めてください。満席時のエラーメッセージにも「エラー」を含めてください。