# 課題5（個人開発）ToDo

今回、女性向けにボディメイクの情報を集めたサイトを作成します。
**まずは一覧、新規登録、編集、削除機能を作成します。**
なお、どの画面においても**全てカテゴリごと**に表示されているとします。

# カテゴリの種類

1. 食生活
2. 運動
3. メンタルヘルス
4. 美容
5. お悩み相談

# １．環境構築

アプリ開発の準備をする
ユーザーはアプリをスマホからみることができる

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

開発者はCI/CDを利用して快適に開発を行うことができる

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

# ３．DB設定

ユーザーは一覧を見ることができる

## TODO
- [x] ChakuraUIを導入する
- [x] 以下のテーブルを作成する(前回作ったプロジェクトでOK)

### Categoryテーブル

table: category

|Name|Type|option|
|---|---|---|
|id |int8|
|name|varchar|non-nulll|
|created_at|timestamp|

テストデータを1件入れる

|Name|Value|
|---|---|
|id ||
|name|1|

### articleテーブル

table:article

|Name|Type|Option|
|---|---|---|
|id|int8|
|author|text|non-null|
|contents|text|non-null|
|created_at|timestamp|

テストデータを1件いれる

|Name|Value|
|---|---|
|id||
|author|test|
|contents|This is test contents|

### article_categoryテーブル

中間テーブル
table:article_category
|Name|Type|Option|
|---|---|---|
|id|int8|
|article_id|int8|non-null|
|category_id|int8|non-null|

RLSを無効にする

- [x] supabaseを使えるようにセットアップする
ファイル名はsupabase.tsにしないとインポートできないので注意

- [x] テストデータを表示する（Routeing不要）
- [ ] 取得中はローディング画面を出す

- [x] ChakraUIを使ってスタイルを整える
スマホ・PCどちらでも閲覧可能にするため、レスポンシブなスタイルにすること。

# ４．新規登録機能

ユーザーは記事を投稿できる

## TODO

- [x] routerに新規登録画面（/register）を登録してページが表示できるようにする
- [x] ページにタイトルをつける
- [x] レイアウトを当てながらカテゴリ、記事内容の入力欄を作る(見た目だけで良い)
カテゴリは選択制（食事、運動、メンタルヘルス、美容、アドバイス）
後々記事投稿の前に、ユーザー登録をしてもらうと同時にユーザーIDを設定してもらいたい
- [x] 投稿ボタンを実装する
- [x] 全項目に入力必須のバリデーションエラーを設定する
idは英数字のみ
- [x] 各項目を登録することができる
supabaseに実際に登録するように実装する
- [x] 登録に成功したら一覧画面（/view）にページ遷移する
useNavigateを使う

## テスト
- [x] タイトルが表示されている
- [x] 全項目入力して投稿ボタンを押すと/viewに遷移する(useNavigateのパスをみる)
- [x] ユーザーIDがないとエラーメッセージがでる
- [x] ユーザーIDが英数字以外だとエラーメッセージがでる
- [x] 記事タイトルがないとエラーメッセージがでる
- [x] 記事内容がないとエラーメッセージがでる
- [x] カテゴリ未選択だとエラーメッセージがでる

## リリース
- [x] CI/CDが成功する
- [x] Firebaseにデプロイ成功する

# ５．一覧表示機能
ユーザーは投稿された記事の一覧をみることができる

## TODO
**一覧表示画面**
- [x] タイトルがある
- [x] Routerを設定する
- [x] 一覧画面（/view）
ひとまずすべての情報が見れるようにする
カテゴリ毎のページに遷移することも可能（「食生活」ボタンを押下したら食生活のページへ遷移する）
- [x] 記事ごとにボタンが出るように設定する
- [x] 新規登録画面（/register）
- [x] 編集画面(/edit)
- [x] 投稿済みの記事が表示されている
## テスト
- [x] 一覧表示画面のテストを書く
- [x] タイトルが表示されている
- [x] 投稿済みの記事が表示されている
- [x] 新規登録ボタンがある
- [x] 編集ボタンがある

## リリース
- [x] CI/CDが成功する
- [x] Firebaseにデプロイ成功する

# 6．カテゴリ毎表示機能
ユーザーは投稿された記事をカテゴリごとにみることができる

## TODO
**カテゴリ毎の表示画面（全5カテゴリ分）**
- [x] Routerを設定する
- [x] 食生活（/view/diet）
特定の記事をクリックしたら（/view/diet/:id）
- [x] 運動（/view/fitness）
特定の記事をクリックしたら（/view/fitness/:id）
- [x] メンタルヘルス（/view/mind）
特定の記事をクリックしたら（/view/mind/:id）
- [x] 美容（/view/beauty）
特定の記事をクリックしたら（/view/beauty/:id）
- [x] お悩み相談（/view/advice）
特定の記事をクリックしたら（/view/advice/:id）
- [x] 新規登録画面（/register）
- [x] 編集画面(/edit)

## テスト
- [x] タイトルがある（タイトルはカテゴリ名とする）
- [x] 該当カテゴリの記事のみを表示する
- [x] 戻るをクリックすると/viewに遷移する
- [x] 記事をクリックすると、/view/該当のカテゴリ/:idに遷移する

## リリース
- [x] CI/CDが成功する
- [x] Firebaseにデプロイ成功する

# ７．編集機能
投稿者は投稿後の記事を編集できる

## TODO

- [x] タイトルがある
- [x] 記事ごとに編集ボタンがある
- [x] 編集ボタンをクリックすると/edit/該当のカテゴリ/:idに遷移する
- [x] 記事が編集できる
- [x] 編集後に投稿ボタンをクリックすると、編集内容が反映されて/に遷移する
- [x] 戻るボタンをクリックすると/に遷移する

## テスト
- [x] タイトルがある
- [x] 編集後登録ボタンをクリックすると/に遷移する
- [x] 戻るボタンをクリックすると/に遷移する

## リリース
- [x] CI/CDが成功する
- [x] Firebaseにデプロイ成功する

# ８．削除機能
投稿者は投稿後の記事を削除できる

## TODO

- [x] 記事ごとに削除ボタンがある

## テスト
- [x] 削除ボタンがある

## リリース
- [x] CI/CDが成功する
- [x] Firebaseにデプロイ成功する