[Advent Calendar 2021][Day16]カレンダー表示機能を作る

undefined
はじめに
Advent Calendar 2021のDay16。 今回は、カレンダー表示機能を作っていきます。 2日遅れで更新。。
表示するコンポーネントに分割する
表示はかなり適当に実装してきたので、整理しようと思います。 以下のようにコンポーネントを分割しようと思います。
- Navbar
- ログイン状態の表示
- ログイン・ログアウトボタン
- ユーザ削除
- Modal
- カレンダー追加、参加機能で重複しているので汎用的に使えるようにする
- Fab
- カレンダー追加ボタン
ページのレイアウト
Nuxtにレイアウトの機能があるので、それを使ってDefaultLayoutを作ります。
<template> <Navbar /> <div class="md:container md:mx-auto"> <slot /> </div></template>
ページ
- トップページ
- カレンダー一覧を表示する
- カレンダー詳細ページ
- 24日分の記事タイトル・リンクを表示する
- tailwindのGridで実装する
- 各日付がまだ参加されていなければ参加できるようにする
- 24日分の記事タイトル・リンクを表示する
その他
- 全体的に不具合の修正など。
- templateの直下に複数のルートエレメントを配置できるようになったはずですが、たまにそれをやると挙動がおかしくなったりして、かなり調査しました。結論としては、templateの下には、Nuxt2のときと同じく1エレメントが無難だと思っています。
- 出来ていないこと
- ロールによる出しわけ。登録・編集系の機能を匿名ユーザに見せないなど。
- 編集・削除操作がない。
まとめ
今回は、カレンダー表示機能を作りました。 次回は、ユニットテストを行っていきます。
