# 課題5：マーダーミステリー参加者募集アプリ

## 実装機能

### 会員登録（簡易版）
- 今回は簡易的に、入力された内容で`accounts`と`profiles`を作成する
- メール認証などはなし

### ログイン（簡易版）
- 一致するユーザーIDが`accounts`テーブルに存在する場合にページ遷移する

### イベントのCRUD機能
- 主催イベント、参加イベント、おすすめイベントそれぞれの一覧画面が必要
- おすすめイベントについて、簡易版としてプロフィールで登録した`好きなジャンル`または`プレイスタイル`が一致するイベントを表示するようにする
- ただし、自分が主催または参加しているイベント、募集人数と参加人数が一致しているイベントは、おすすめイベントに表示されないようにすること
- 削除は詳細画面から行い、削除前のアラートを表示する（誤削除防止）

### プロフィールの編集、閲覧
- `profiles`には会員登録時に設定されたユーザー名のみ登録されているのが初期状態
- プロフ画像の保存方法はSupabaseのStorage機能で実装予定
- 参考：https://qiita.com/maaaashi/items/6236732e0461561bb64a

### イベント参加機能
- 今回は簡易版として、参加ボタン押下でアラートを表示し、OK押下で参加可能とする
- （本来は主催者側の承認機能が欲しいが時間的に厳しそう...）

### ユーザー評価機能
- ユーザー詳細で評価ボタン押下→モーダル表示→☆5段階から選択して登録、という形とする
- 表示時時のフォーマット例：`★★★☆☆(12)`
- ChakraUIに星評価用のコンポーネントあるためこちらを利用予定
- https://chakra-ui.com/docs/components/rating

## 画面一覧

| No. | 画面名 | 概要 | 入力/表示項目 | リンク（遷移先） | アクション | 備考 |
| --- | ----- | --- | ----- | -------- | ------------ | --- |
| 1 | 会員登録 | ユーザーの新規登録 | ユーザーID、ユーザー名、パスワード | | 会員登録 | 会員登録完了後、マイページへ遷移 |
| 2 | ログイン | アプリのログインページ | ID、パスワード | | ログイン | 認証通過後、マイページへ遷移 |
| 3 | マイページ | プロフィールカードとおすすめイベントの表示 | | プロフィール編集<br>イベント詳細 | プロフィール取得<br>おすすめイベント取得 | |
| 4 | プロフィール編集 | ユーザーの詳細プロフィールの編集 | プロフ画像、ユーザー名、自己紹介、好きなジャンル、プレイスタイル | | プロフィール取得<br>プロフィール更新 | |
| 5 | プロフィール詳細 | ユーザーの詳細プロフィールの表示 | プロフ画像、ユーザー名、評価、自己紹介、好きなジャンル、プレイスタイル | | プロフィール取得<br>ユーザー評価 | ユーザー評価は、`ユーザーを評価する`ボタン押下→モーダル表示し登録することを想定 |
| 6 | 主催イベント一覧 | 自分が作成したイベントの一覧を表示 | イベント名、詳細、ジャンル、プレイスタイル、参加者数 | イベント作成<br>イベント編集<br>イベント詳細 | 主催イベント取得 | |
| 7 | 参加イベント一覧 | 自分が参加したイベントの一覧を表示 | イベント名、詳細、ジャンル、プレイスタイル、参加者数 | イベント詳細 | 参加イベント取得 | |
| 8 | イベント作成 | 開催したいマダミスイベントの作成 | イベント名、募集人数、詳細、ジャンル、プレイスタイル | | イベント登録 | |
| 9 | イベント編集 | 自分が主催のイベントの修正 | イベント名、募集人数、詳細、ジャンル、プレイスタイル | | イベント取得<br>イベント更新 | |
| 10 | イベント詳細 | イベントの詳細の表示 | イベント名、<br>募集人数、<br>詳細、<br>参加者、<br>ジャンル、<br>プレイスタイル | ・プロフィール詳細<br>・(ログインユーザーが主催の場合は)<br>イベント編集 | ・イベント/参加者取得<br>・(ログインユーザーが主催ユーザーではない、かつイベントに未参加、かつイベントの募集人数 > 参加者数の場合は)<br>イベント参加<br>・(ログインユーザーが主催の場合は)<br>イベント削除 | ・参加者欄：参加しているユーザーのプロフィール画像と参加者数を表示する（画像クリックでプロフィール詳細へ遷移）<br>・`参加する`ボタン押下でアラート表示→OKでイベント参加<br>・`削除する`ボタン押下でアラート表示→OKでイベント削除　|

## 共通パーツ一覧
| No. | 画面名 | 概要 | 入力/表示項目 | リンク（遷移先） | アクション | 備考 |
| --- | ----- | --- | ----- | -------- | ------------ | --- |
| 1 | ヘッダー | 画面のヘッダー部分 | | 主催イベント<br>参加イベント | | |

## メモ
<details>
<summary>
余力があれば以下機能も実装したいが1か月だと難しいため別の機会に
</summary>

- 認証・認可機能
- 会員登録時のメール認証
- 現在はURLに`user_id`を指定すれば他のアカウントの情報が閲覧できてしまうため、認可も行えるようにしたい
- イベント参加実行時の、主催者側の承認機能
- イベントから退会する機能
- イベント詳細ごとのチャット機能
- イベント作成・編集時に主催者が参加者を検索して招待できる機能
- シナリオページからイベント作成を行える機能（課題5ではイベント詳細欄にシナリオの詳細やURLなど記載する形でカバー）
- シナリオのレビュー機能、お気に入り機能
- マッチング精度向上（将来的には、自分のプレイスタイルと似ている参加者が多いイベントや、体験済みシナリオをもとにしたマッチングなども行えるとよいかも）
- フォロー機能
- SP最適化
</details>

## 画面遷移図

graph LR

  classDef default fill: #fff,stroke: #333,stroke-width: 1px;
  style mypage fill: #fff,stroke: #333,stroke-width: 1px;
  style header fill: #fff,stroke: #333,stroke-width: 1px;
  style hostedEvent fill: #fff,stroke: #333,stroke-width: 1px;
  style participatingEvent fill: #fff,stroke: #333,stroke-width: 1px;
  style common fill: #fff,stroke: #333,stroke-width: 1px;

　subgraph common [共通]
    イベント詳細--参加者アイコン押下-->プロフィール詳細
  end

  subgraph hostedEvent [主催イベント]
    主催イベント一覧-->イベント作成
    主催イベント一覧-->イベント編集
    主催イベント一覧-->イベント詳細
  end

  subgraph participatingEvent [参加イベント]
    参加イベント一覧-->イベント詳細
  end

  subgraph mypage [マイページ]
    プロフィールカード-->プロフィール編集
    おすすめイベント一覧-->イベント詳細
  end

  subgraph header [ヘッダ]
    主催イベント-->主催イベント一覧
    参加イベント-->参加イベント一覧
  end

  ログイン--ID/パスワード認証-->mypage
  会員登録-->mypage

## テーブル定義

※ 削除時は物理削除
※ いずれのテーブルも以下の共通カラムを持つ（中間テーブル以外）

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | | | created_at | timestamptz | 〇 | now | |
| 2 | | | created_by | varchar | 〇 | | 作成者のuser_id |
| 3 | | | updated_at | timestamptz | 〇 | now | |
| 4 | | | updated_by | varchar | 〇 | | 更新者のuser_id |

### accounts

ユーザーアカウント

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | 〇 | | user_id | varchar | 〇 | | 登録時は存在チェックを行う（重複不可） |
| 2 | | | password | varchar | 〇 | | ハッシュ化して保存 |

### profiles

ユーザープロフィール

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | 〇 | | profile_id | uuid | 〇 | | |
| 2 | | 〇 | user_id | varchar | 〇 | | |
| 3 | | | user_name | varchar | 〇 | | 会員登録時に登録を行う |
| 4 | | | avatar_url | varchar | | | |
| 5 | | | introduction | text | | | |

### events

作成されたマダミスイベント

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | 〇 | | event_id | uuid | 〇 | | |
| 2 | | | name | varchar | 〇 | | |
| 3 | | | max_user_num | int2 | 〇 | | 募集人数 |
| 4 | | | detail | text | | | |

### genres

ジャンル

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | 〇 | | genre_id | uuid | 〇 | | |
| 2 | | | name | varchar | 〇 | | |

### play_styles

プレイスタイル

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | 〇 | | play_style_id | uuid | 〇 | | |
| 2 | | | name | varchar | 〇 | | |

### rates

評価

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | ------- | --- |
| 1 | 〇 | | rate_id | uuid | 〇 | | |
| 2 | | | rating | int2 | 〇 | 0 | |

### user_genres

プロフィールで選択された好きなジャンル

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | 〇 | | id | uuid | 〇 | | |
| 2 | 〇 | 〇 | user_id | varchar | 〇 | | |
| 3 | 〇 | 〇 | genre_id | uuid | 〇 | | |

### user_play_styles

プロフィールで選択された好きなプレイスタイル

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | 〇 | | id | uuid | 〇 | | |
| 2 | 〇 | 〇 | user_id | varchar | 〇 | | |
| 3 | 〇 | 〇 | play_style_id | uuid | 〇 | | |

### user_rates

ユーザー評価

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | 〇 | 〇 | target_user_id | varchar | 〇 | | |
| 2 | 〇 | 〇 | user_id | varchar | 〇 | | |
| 3 | | 〇 | rate_id | uuid | 〇 | | |

### event_genres

イベントで選択されたシナリオジャンル

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | 〇 | | id | uuid | 〇 | | |
| 2 | 〇 | 〇 | event_id | uuid | 〇 | | |
| 3 | 〇 | 〇 | genre_id | uuid | 〇 | | |

### event_play_styles

イベントで選択されたおすすめプレイスタイル

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | 〇 | | id | uuid | 〇 | | |
| 2 | 〇 | 〇 | event_id | uuid | 〇 | | |
| 3 | 〇 | 〇 | play_style_id | uuid | 〇 | | |

### event_users

イベント参加者

| No | PK | FK | カラム名 | 型 | NotNull | デフォルト | 備考 |
| -- | :-: | :-: | ----- | -- | :----: | -------- | --- |
| 1 | 〇 | | id | uuid | 〇 | | |
| 2 | 〇 | 〇 | event_id | uuid | 〇 | | |
| 3 | 〇 | 〇 | user_id | varchar | 〇 | | |

### ER図

#### ユーザー周り

erDiagram
  accounts ||--|| profiles : ""
  accounts ||--o{ user_genres: ""
  genres ||--o{ user_genres: ""
  accounts ||--o{ user_play_styles: ""
  play_styles ||--o{ user_play_styles: ""
  accounts ||--o{ user_rates: ""
  rates ||--o{ user_rates: ""

#### イベント周り

erDiagram
  events ||--o{ event_genres : ""
  genres ||--o{ event_genres: ""
  events ||--o{ event_play_styles : ""
  play_styles ||--o{ event_play_styles : ""
  events ||--o{ event_users : ""
  accounts ||--o{ event_users: ""

# MVP1

アプリ開発の準備をする

## TODO
- [x] React+TypeScriptの開発環境をViteで用意する
- [x] Fireabseにデプロイする(新規プロジェクトを作成)
- [x] Makefileを作成(make deployでデプロイできる)

# MVP2

拡張機能の設定、CI/CDを利用して快適に開発を行えるようにする

## TODO
- [x] VSCode拡張機能の設定
- [x] ESLint
- [x] Prettier
- [x] Jestとreact-testing-libraryを導入する
- [x] サンプルのテスト(関数とコンポーネント)が動く
- [x] src/\_\_tests__/sampleComponent.spec.ts
- [x] Makefileでテストを実行できる(make test)
- [x] Github ActionsでPushでパイプラインが動くように設定する
- [x] ビルドステップが実行される
- [x] 自動テストが実行される
- [x] 自動デプロイが実行される

# MVP3

ユーザーは会員登録・ログインすることができる

## TODO
- [x] ChakuraUIを導入する
- [x] Supabase上に、以下のテーブルを作成する
- [x] `accounts`テーブル
- [x] `profiles`テーブル
- [x] RLSを無効にする
- [x] Supabaseを使えるようにセットアップする
- [x] Routerを設定する
- [x] ログイン画面：`localhost:5173/login`
- [x] 会員登録画面：`localhost:5173/register`
- [x] マイページ：`localhost:5173/:user_id/mypage`
- [x] 404画面
- [x] 会員登録画面を実装する
- [x] タイトルをつける
- [x] レイアウトを当てながらユーザーID、ユーザー名、パスワードの入力欄を作る(見た目のみ)
- [x] 登録ボタンを表示する
- [x] 必須項目（全項目）にバリデーションエラーを設定する
react-hook-formでバリデーションエラーを表示する
- [x] その他のバリデーションエラーを設定する
- [x] ユーザーID：英語文字列のみ登録可能とする
- [x] パスワード：英数字記号のみ登録可能、8文字以上で登録可能
- [x] Supbaseに項目を登録することができる
- [x] `accounts`テーブル
- [x] `profiles`テーブル
- [x] 登録に成功したらマイページ（`localhost:5173/:user_id/mypage`）にページ遷移する
- [x] ChakraUIを使ってスタイルを整える
- [x] ログイン画面を実装する
- [x] タイトルをつける
- [x] レイアウトを当てながらユーザーID、パスワードの入力欄を作る(見た目のみ)
- [x] ログインボタンを表示する
- [x] 必須項目（全項目）にバリデーションエラーを設定する
- [x] `accounts`テーブルに入力値と一致するデータが存在する場合はログインできるようにする
- [x] ログインに成功したらマイページ（`localhost:5173/:user_id/mypage`）にページ遷移する
- [x] ChakraUIを使ってスタイルを整える
- [x] 今後の実装用に、テスト用ユーザーデータを複数件登録しておくこと

# MVP4

ユーザーはマイページからプロフィールを編集することができる

## TODO

- [x] Supabase上に、以下のテーブルを作成する
- [x] `genres`テーブル
- [x] `play_styles`テーブル
- [x] RLSを無効にする
- [x] 各テーブルに複数件のテストデータを作成しておく
- [x] Supabase上に`avatars`bucketを作成する（プロフィール画像保存用）
- [x] Routerを設定する
- [x] 主催イベント画面：`localhost:5173/:user_id/events/hosted`
- [x] 参加イベント画面：`localhost:5173/:user_id/events/joined`
- [x] プロフィール編集画面：`localhost:5173/:user_id/edit`
- [x] マイページを実装する（おすすめイベントの表示は別MVPで実装する）
- [x] ヘッダーを作成する
- [x] ヘッダーには主催イベント、参加イベントのリンクを表示し、各画面にページ遷移させる
- [x] プロフィールカードを作成する（評価の表示は別MVPで実装する）
- [x] プロフィール画像（SupabaseのStorageから取得。未設定時はデフォルト画像を表示）
- [x] ユーザー名
- [x] プロフィール編集ボタン（プロフィール編集画面にページ遷移させる）
- [x] プロフィール編集画面を実装する
- [x] タイトルをつける
- [x] レイアウトを当てながらプロフィール画像、ユーザー名、自己紹介、好きなジャンル（複数選択）、プレイスタイル（複数選択）の入力欄を作る(見た目のみ)
- [x] 更新ボタンを表示する
- [x] 必須項目（ユーザー名）にバリデーションエラーを設定する
react-hook-formでバリデーションエラーを表示する
- [x] Supbaseの項目を更新することができる
- [x] `profiles`テーブル
- [x] `user_genres`テーブル（ジャンルの登録がある場合）
- [x] `user_play_styles`テーブル（プレイスタイルの登録がある場合）
- [x] 更新に成功したらマイページ（`localhost:5173/:user_id/mypage`）にページ遷移する
- [x] ChakraUIを使ってスタイルを整える

# MVP5

ユーザーは主催イベントを登録・閲覧・編集・削除することができる

## TODO

- [x] Supabase上に、以下のテーブルを作成する
- [x] `events`テーブル
- [x] `event_genres`テーブル
- [x] `event_play_styles`テーブル
- [x] `event_users`テーブル
- [x] RLSを無効にする
- [x] Routerを設定する
- [x] イベント作成画面：`localhost:5173/:user_id/events/create`
- [x] イベント詳細画面：`localhost:5173/:user_id/events/:event_id`
- [x] イベント編集画面：`localhost:5173/:user_id/events/:event_id/edit`
- [x] プロフィール詳細画面：`localhost:5173/:user_id/profile/:profile_id`
- [x] 主催イベント画面にイベント作成ボタンを表示する（イベント作成画面に遷移させる）
- [x] イベント作成画面を実装する
- [x] タイトルをつける
- [x] レイアウトを当てながらイベント名、募集人数、詳細、ジャンル（複数選択）、おすすめプレイスタイル（複数選択）の入力欄を作る(見た目のみ)
- [x] 登録ボタンを表示する
- [x] 必須項目（イベント名、募集人数）にバリデーションエラーを設定する
react-hook-formでバリデーションエラーを表示する
- [x] Supbaseに項目を登録することができる
- [x] `events`テーブル
- [x] `event_genres`テーブル（ジャンルの登録がある場合）
- [x] `event_play_styles`テーブル（プレイスタイルの登録がある場合）
- [x] 登録に成功したら主催イベント画面（`localhost:5173/:user_id/events/hosted`）にページ遷移する
- [x] ChakraUIを使ってスタイルを整える
- [x] 主催イベント画面を実装する
- [x] タイトルをつける
- [x] `events`、`event_genres`、`event_play_styles`、`event_users`などからデータ取得し、一覧表示する
- [x] 詳細ボタンを表示する（イベント詳細画面に遷移させる）
- [x] 編集ボタンを表示する（イベント編集画面に遷移させる）
- [x] ChakraUIを使ってスタイルを整える
- [x] イベント詳細画面を実装する
- [x] タイトルをつける
- [x] レイアウトを当てながらイベント名、募集人数、詳細、参加者、ジャンル（複数選択）、プレイスタイル（複数選択）の表示欄を作る(見た目のみ)
- [x] `events`、`event_genres`、`event_play_styles`、`event_users`、`profiles`テーブル、Storageなどからデータ取得し、各項目を表示する
- [x] 参加しているユーザーのプロフィール画像と参加者数を表示する
- [x] 画像クリックでプロフィール詳細へ遷移させる
- [x] 編集ボタンを表示する（イベント編集画面に遷移させる）
- [x] 編集ボタンは、自分が主催のイベントのみに表示されるよう調整する（`events`テーブルの`created_by`と、ログインユーザーの`user_id`を比較）
- [x] 削除ボタンを表示する（アラート表示し、OKの場合にデータ削除を行う）
- [x] 削除ボタンは、自分が主催のイベントのみに表示されるよう調整する
- [x] 削除ボタン押下時にアラートを表示させる
- [x] アラートメッセージ：`削除したデータは戻せません。削除してもよろしいですか？`
- [x] Supbaseからデータを削除することができる
- [x] `events`テーブル
- [x] `event_genres`テーブル
- [x] `event_play_styles`テーブル
- [x] `event_users`テーブル
- [x] ChakraUIを使ってスタイルを整える
- [x] イベント編集画面を実装する
- [x] タイトルをつける
- [x] レイアウトを当てながらイベント名、募集人数、詳細、ジャンル（複数選択）、プレイスタイル（複数選択）の入力欄を作る(見た目のみ)
- [x] `events`、`events_genres`、`event_play_styles`テーブルなどからデータ取得し、各項目を表示する
- [x] 更新ボタンを表示する
- [x] 必須項目（イベント名、募集人数）にバリデーションエラーを設定する
react-hook-formでバリデーションエラーを表示する
- [x] Supbaseの項目を更新することができる
- [x] `events`テーブル
- [x] `event_genres`テーブル（ジャンルの登録がある場合）
- [x] `event_play_styles`テーブル（プレイスタイルの登録がある場合）
- [x] 更新に成功したらイベント詳細画面（`localhost:5173/:user_id/events/:event_id`）にページ遷移する
- [x] ChakraUIを使ってスタイルを整える

# MVP6

ユーザーはイベントに参加することができる。
参加しているイベント情報や参加者の情報を閲覧することができる。

## TODO

- [x] イベント詳細画面を改修する
- [x] 参加するボタンを表示する（ログインユーザーが主催ユーザーではない、かつイベントに未参加、かつイベントの募集人数 > 参加者数の場合）
- [x] 参加するボタン押下時にアラートを表示させる
- [x] アラートメッセージ：`「{イベント名}」に参加します。よろしいですか？`
- [x] Supbaseにデータを登録することができる
- [x] `event_users`テーブル
- [x] 登録に成功したら参加イベント画面（`localhost:5173/:user_id/events/joined`）遷移する
- [x] プロフィール詳細画面を実装する
- [x] タイトルをつける
- [x] レイアウトを当てながらプロフィール画像、ユーザー名、自己紹介、好きなジャンル（複数選択）、プレイスタイル（複数選択）の表示欄を作る(見た目のみ)
- [x] 評価の表示は別MVPで実装する
- [x] `profiles`、`genres`、`play_styles`などからデータ取得し、各項目を表示する
- [x] ChakraUIを使ってスタイルを整える
- [x] 参加イベント画面を実装する
- [x] タイトルをつける
- [x] `events`、`event_genres`、`event_play_styles`、`event_users`などからデータ取得し、一覧表示する
- [x] 詳細ボタンを表示する（イベント詳細画面に遷移させる）
- [x] ChakraUIを使ってスタイルを整える

# MVP7

ユーザーはおすすめイベントを見ることができる

## TODO

- [x] マイページにおすすめイベントを実装する
- [x] タイトルをつける
- [x] `events`、`event_genres`、`event_play_styles`、`event_users`などからデータ取得し、一覧表示する
- [x] おすすめイベントについて、簡易版としてプロフィールで登録した`好きなジャンル`または`プレイスタイル`が一致するイベントを表示するようにする
- [x] ただし、自分が主催または参加しているイベント、募集人数と参加人数が一致しているイベントは、おすすめイベントに表示されないようにすること
- [x] 詳細ボタンを表示する（イベント詳細画面に遷移させる）
- [x] ChakraUIを使ってスタイルを整える

# MVP8

ユーザーは別のユーザーを評価することができる

## TODO

- [x] Supabase上に、以下のテーブルを作成する
- [x] `rates`テーブル
- [ ] 各テーブルにテストデータを作成しておく
- [x] `user_rates`テーブル
- [x] RLSを無効にする
- [ ] プロフィール詳細画面を改修する
- [x] `ユーザーを評価する`ボタンを表示する
- [x] ログインユーザーと、閲覧しているプロフィール画面のユーザーが異なる場合のみ表示すること
- [x] ボタン押下でユーザー評価モーダルを表示する
- [x] 評価用の入力欄を表示する
- [x] 登録ボタンを表示する
- [ ] Supabaseにデータを登録することができる
- [ ] `user_rates`テーブル
- [ ] `user_rates`、`rates`テーブルなどからデータ取得し、評価を表示する
- [ ] マイページを改修する
- [ ] プロフィールカードに評価を表示する

# MVP9

それぞれのページにテストを実装して安心してCDができるようにする
ページごとにテストのファイルは分けること

## TODO

- [ ] 会員登録画面のテストを書く
- [ ] タイトルが表示されている
- [ ] 全項目入力して登録ボタンを押すとマイページに遷移する
- [ ] ユーザーIDを入力しないでボタンを押すとエラーメッセージが表示される
- [ ] ユーザー名を入力しないでボタンを押すとエラーメッセージが表示される
- [ ] パスワードを入力しないでボタンを押すとエラーメッセージが表示される
- [ ] ユーザーIDに英語文字列以外を入力してボタンを押すとエラーメッセージが表示される
- [ ] パスワードに英数字記号以外を入力してボタンを押すとエラーメッセージが表示される
- [ ] パスワードに8文字未満の値を入力してボタンを押すとエラーメッセージが表示される

- [ ] ログイン画面のテストを書く
- [ ] タイトルが表示されている
- [ ] 全項目入力して登録ボタンを押すとマイページに遷移する
- [ ] ユーザーIDを入力しないでボタンを押すとエラーメッセージが表示される
- [ ] パスワードを入力しないでボタンを押すとエラーメッセージが表示される
- [ ] 会員登録はこちらを押すと会員登録画面に遷移する

- [ ] マイページのテストを書く
- [ ] ローディング画面をみることができる
- [ ] プロフィールカード
- [ ] プロフィール画像が表示されている
- [ ] ユーザー名が表示されている
- [ ] 評価が表示されている
- [ ] プロフィール編集ボタンを押すとプロフィール編集に遷移する
- [ ] おすすめイベント
- [ ] テーブルをみることができる(リスト)
- [ ] イベント名が表示されている
- [ ] 詳細が表示されている
- [ ] ジャンルが表示されている
- [ ] プレイスタイルが表示されている
- [ ] 参加者数が表示されている
- [ ] 詳細ボタンを押すとイベント詳細画面に遷移する

- [ ] プロフィール編集画面のテストを書く
- [ ] タイトルが表示されている
- [ ] 全項目入力して更新ボタンを押すとマイページに遷移する
- [ ] 必須項目のみ入力して更新ボタンを押すとマイページに遷移する
- [ ] ユーザー名を入力しないでボタンを押すとエラーメッセージが表示される

- [ ] プロフィール詳細画面のテストを書く
- [ ] タイトルが表示されている
- [ ] プロフ画像が表示されている
- [ ] ユーザー名が表示されている
- [ ] 評価が表示されている
- [ ] 自己紹介が表示されている
- [ ] 好きなジャンルが表示されている
- [ ] プレイスタイルが表示されている
- [ ] ユーザーを評価するボタンを押すとモーダルが表示される
- [ ] モーダルのタイトルが「ユーザー評価」というタイトルになっていること
- [ ] 星を選択していない場合、エラーメッセージが表示されること
- [ ] 星を選択している場合、登録できること

- [ ] 主催イベント一覧画面のテストを書く
- [ ] ローディング画面をみることができる
- [ ] タイトルが表示されている
- [ ] テーブルをみることができる(リスト)
- [ ] イベント名が表示されている
- [ ] 詳細が表示されている
- [ ] ジャンルが表示されている
- [ ] プレイスタイルが表示されている
- [ ] 参加者数が表示されている
- [ ] イベント作成ボタンを押すとイベント作成画面に遷移する
- [ ] 詳細ボタンを押すとイベント詳細画面に遷移する
- [ ] 編集ボタンを押すとイベント編集画面に遷移する

- [ ] 参加イベント一覧画面のテストを書く
- [ ] ローディング画面をみることができる
- [ ] タイトルが表示されている
- [ ] テーブルをみることができる(リスト)
- [ ] イベント名が表示されている
- [ ] 詳細が表示されている
- [ ] ジャンルが表示されている
- [ ] プレイスタイルが表示されている
- [ ] 参加者数が表示されている
- [ ] 詳細ボタンを押すとイベント詳細画面に遷移する

- [ ] イベント作成画面のテストを書く
- [ ] タイトルが表示されている
- [ ] 全項目入力して登録ボタンを押すと主催イベント画面に遷移する
- [ ] 必須項目のみ入力して登録ボタンを押すと主催イベント画面に遷移する
- [ ] イベント名を入力しないでボタンを押すとエラーメッセージが表示される
- [ ] 募集人数を入力しないでボタンを押すとエラーメッセージが表示される

- [ ] イベント編集画面のテストを書く
- [ ] タイトルが表示されている
- [ ] 全項目入力して更新ボタンを押すと主催イベント画面に遷移する
- [ ] 必須項目のみ入力して更新ボタンを押すと主催イベント画面に遷移する
- [ ] イベント名を入力しないでボタンを押すとエラーメッセージが表示される
- [ ] 募集人数を入力しないでボタンを押すとエラーメッセージが表示される

- [ ] イベント詳細画面のテストを書く
- [ ] タイトルが表示されている
- [ ] イベント名が表示されている
- [ ] 詳細が表示されている
- [ ] 募集人数が表示されている
- [ ] 参加者が表示されている
- [ ] ジャンルが表示されている
- [ ] プレイスタイルが表示されている
- [ ] プロフィールアイコンを押すとプロフィール詳細画面に遷移する
- [ ] 編集ボタンを押すとイベント編集画面に遷移する
- [ ] 参加するボタンを押すとモーダルが表示される
- [ ] アラートメッセージが` 「{イベント名}」に参加します。よろしいですか？`になっていること
- [ ] 登録できること
- [ ] 削除ボタンを押すとモーダルが表示される
- [ ] アラートメッセージが` 削除したデータは戻せません。削除してもよろしいですか？`になっていること
- [ ] 削除できること

- [ ] ヘッダーのテストを書く
- [ ] 主催イベントのリンクを押すと主催イベント画面に遷移する
- [ ] 参加イベントのリンクを押すと参加イベント画面に遷移する

# MVP10

- [ ] READMEを書く
- [ ] 記事を書く