イベント申し込みキャンセル機能実装

概要

• 認証済みユーザーが申し込み済みのイベントをキャンセルできる機能を実装する。
• ユーザーの利便性向上と、予定変更・急用等への柔軟な対応を可能にする。

目的

• ユーザーが申し込み後に予定変更した場合の対応
• 誤申し込みやダブルブッキングの解決
• 定員管理の柔軟性向上
• ユーザー体験の大幅改善

背景

現在のシステムでは、一度イベントに申し込むとキャンセルができず、以下の問題が発生している：

• 急用や予定変更への対応不可
• 誤申し込み時の修正手段なし
• 定員に達したイベントでのキャンセル待ち機能なし
• ユーザーの利便性が低い

実際のイベント管理サービス（connpass等）では申し込みキャンセル機能は標準機能として提供されており、本アプリでも必須の機能と判断。

実装内容

1. バックエンドAPI

• キャンセルAPI実装（DELETE /api/events/[id]/cancel）
• ユーザー申し込み履歴取得API（GET /api/user/registrations）
• 権限チェック（申し込み者本人のみキャンセル可能）
• 定員数の自動更新
• データ整合性の確保

2. メール通知機能

• キャンセル完了メール（申し込み者へ）
• キャンセル通知メール（イベント作成者へ）
• メールテンプレートの作成

3. フロントエンドUI

• ユーザーの申し込み履歴ページ
• キャンセルボタンとモーダル
• キャンセル確認ダイアログ
• イベント詳細ページでのキャンセル機能
• 申し込み状況の動的更新

4. UX改善

• キャンセル理由の選択（オプション）
• キャンセル期限の設定（イベント開始前のみ等）
• 申し込み・キャンセル履歴の表示
• Toast通知による操作フィードバック

技術的詳細

API設計例

キャンセルAPI

// DELETE /api/events/[id]/cancel export async function onRequest(context: RequestContext) { // 1. 認証チェック // 2. 申し込み状況確認 // 3. キャンセル処理実行 // 4. 定員数更新 // 5. メール通知送信 }

申し込み履歴API

// GET /api/user/registrations export async function onRequest(context: RequestContext) { // 1. 認証チェック // 2. ユーザーの申し込み履歴取得 // 3. イベント情報と結合 // 4. キャンセル可能フラグ付与 }

データベース更新

-- attendees テーブルに status カラム追加検討 ALTER TABLE attendees ADD COLUMN status TEXT DEFAULT 'registered'; -- 'registered', 'cancelled' 等の状態管理 -- または論理削除での実装 ALTER TABLE attendees ADD COLUMN cancelled_at INTEGER;

フロントエンド実装例

// ユーザー申し込み履歴表示 function MyRegistrations() { const { data: registrations } = useQuery({ queryKey: ['user-registrations'], queryFn: getUserRegistrations, }); const cancelMutation = useMutation({ mutationFn: cancelEventRegistration, onSuccess: () => { toast.success('申し込みをキャンセルしました'); queryClient.invalidateQueries(['user-registrations']); }, }); return ( <div> {registrations?.map(reg => ( <EventRegistrationCard key={reg.id} registration={reg} onCancel={() => cancelMutation.mutate(reg.event_id)} /> ))} </div> ); }

ユーザーストーリー

基本フロー

1. ユーザーがマイページで申し込み済みイベント一覧を確認 2. キャンセルしたいイベントの「キャンセル」ボタンをクリック 3. 確認ダイアログで理由を選択（オプション） 4. 「キャンセル確定」で処理実行 5. キャンセル完了の通知とメール送信 6. イベント詳細ページで定員数が更新される 

エラーケース

- イベント開始後のキャンセル不可 - 既にキャンセル済みの場合 - 申し込んでいないイベントのキャンセル試行 - 権限のないユーザーによる操作 

受け入れ基準

• 認証済みユーザーが申し込み済みイベントをキャンセルできる
• キャンセル後、定員に空きが生まれる
• キャンセル完了時にメール通知が送信される
• 申し込み履歴でキャンセル状況が確認できる
• 不正なキャンセル操作は適切にエラーハンドリングされる
• イベント詳細ページの参加者数が正確に更新される
• UXに配慮した確認フローが実装されている

依存関係

前提条件

• Issue イベント申し込み・キャンセル機能の実装 #5 ✅ (イベント申し込み機能)

関連Issue

• Issue ユーザープロフィールページ・ユーザー情報の編集機能実装 #18 (ユーザープロフィールページ) - 申し込み履歴表示で連携

制約事項

• イベント開始後のキャンセルは不可
• キャンセル期限はイベント開始24時間前まで（設定可能）
• 1つのイベントに対して何度も申し込み・キャンセルを繰り返すことの制限検討

テスト計画

• 正常系：申し込み→キャンセルの一連フロー
• 異常系：権限なし、期限切れ、重複操作等
• 定員管理：キャンセル後の定員数更新確認
• メール送信：各種通知メールの送信確認
• UI/UX：操作フローの直感性確認

見積もり

実装時間: 1-2日
テスト時間: 半日

ブランチ

feature/event-registration-cancel