前回に引き続き、フロントの進捗を共有する。API はモックのハリボテだが、それっぽくなってきたぞ！

変更点

変更点は赤枠で囲ってある。画面はシンプルだが、裏では結構モジュール化している。このくらいの規模になると、徐々にモジュール化のメリットが出てくる。一つ一つのコード量が小さくて、責務が適切に分割されているから、ちょっとした修正も楽になるよ！

# UI モジュールを格納した components ディレクトリ

|____molecules
| |____form
| | |____AvatarImageInput.vue
| | |____NameTextField.vue
| | |____UserIdTextField.vue
| | |____IdeaDescriptionTextarea.vue
| | |____UserNameTextField.vue
| | |____IdeaTitleTextField.vue
| | |____WordTextField.vue
| |____contaminant
| | |____DeleteIdeaDialog.vue
| | |____EditButton.vue
| | |____LogoutButton.vue
| | |____PageTitle.vue
| | |____PostedBy.vue
| | |____Theme.vue
| | |____ViewChip.vue
| | |____DeleteAccountButton.vue
| | |____HeaderTitle.vue
| | |____LoginButton.vue
| | |____LikeChip.vue
| | |____DeleteAccountDialog.vue
| |____actions
| | |____CreateIdeaButton.vue
| | |____PostSameThemeButton.vue
| | |____DeleteIdeaButton.vue
| | |____DeleteAccountButton.vue
| | |____DeleteIdeaIcon.vue
| | |____PostIdeaButton.vue
| | |____EditIdeaButton.vue
| | |____CrossButtonIcon.vue
| | |____SaveButton.vue
| | |____CloseButton.vue
| | |____RandomThemeButton.vue
| | |____LikeButton.vue
| |____media
| | |____ButtonAccountIcon.vue
| | |____AccountIcon.vue
| | |____ProfileAvatar.vue
|____atoms
| |____form
| | |____TextField.vue
| | |____FileInput.vue
| | |____Textarea.vue
| | |____Select.vue
| |____navigation
| | |____AppBar.vue
| | |____Drawer.vue
| | |____HamburgerButton.vue
| |____contaminant
| | |____PageCard.vue
| | |____List.vue
| | |____Divider.vue
| | |____Chip.vue
| | |____ToolBarTitle.vue
| | |____WhiteBackground.vue
| | |____Dialog.vue
| | |____Button.vue
| |____media
| | |____Icon.vue
| | |____Avatar.vue
|____organisms
| |____IdeaForm.vue
| |____ProfileBar.vue
| |____ProfileForm.vue
| |____IdeasHeader.vue
| |____UserSetting.vue
| |____Header.vue
| |____SideBar.vue
| |____IdeaOverview.vue
| |____ProfileBar copy.vue
| |____IdeaDetail.vue

ランダムテーマが長いとき、… で省略するようにした。
「アイデアが欲しい」ボタンは閲覧数の右に移動した。状態をわかりやすくするために、欲しい状態の時は、塗りつぶして、そうでない場合は白抜きにした。
投稿者のアバターと名前を表示した。

スマホ表示ではランダムテーマは縦並びにしてレスポンシブ表示。

• 自分のアイデア一覧画面

• 欲しいアイデア一覧画面

• アカウント設定画面

をナビゲーションに追加した。

自分のアイデアのみ削除できる。

アイデア削除ダイアログ。

自分のアイデアのみ編集できる。

欲しいアイデア一覧は、当然、欲しい状態になっている。

アカウント設定では、アバターとユーザー名を変更できる。

アカウント削除ダイアログ。

残タスク

フロントは次のタスクが残っている。

• 他のユーザーのアイデア一覧

  • ユーザーアバターをクリックすると表示

• アイデアタグ機能 (テーマは自動設定)

• アイデアタグ検索機能

• アイデア閲覧数昇降順機能

• アイデアお気に入り数昇降順機能

• アイデア更新日昇降順機能

• コメント追加機能

• コメント編集機能

• コメント削除機能