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

はじめに

Advent Calendar 2021のDay16。 今回は、カレンダー表示機能を作っていきます。 ２日遅れで更新。。

表示するコンポーネントに分割する

表示はかなり適当に実装してきたので、整理しようと思います。 以下のようにコンポーネントを分割しようと思います。

  • Navbar
    • ログイン状態の表示
    • ログイン・ログアウトボタン
    • ユーザ削除
  • Modal
    • カレンダー追加、参加機能で重複しているので汎用的に使えるようにする
  • Fab
    • カレンダー追加ボタン

ページのレイアウト

Nuxtにレイアウトの機能があるので、それを使ってDefaultLayoutを作ります。

<template>
    <Navbar />
    <div class="md:container md:mx-auto">
        <slot />
    </div>
</template>

ページ

  • トップページ
    • カレンダー一覧を表示する
  • カレンダー詳細ページ
    • 24日分の記事タイトル・リンクを表示する
      • tailwindのGridで実装する
    • 各日付がまだ参加されていなければ参加できるようにする

その他

  • 全体的に不具合の修正など。
  • templateの直下に複数のルートエレメントを配置できるようになったはずですが、たまにそれをやると挙動がおかしくなったりして、かなり調査しました。結論としては、templateの下には、Nuxt2のときと同じく１エレメントが無難だと思っています。
  • 出来ていないこと
    • ロールによる出しわけ。登録・編集系の機能を匿名ユーザに見せないなど。
    • 編集・削除操作がない。

まとめ

今回は、カレンダー表示機能を作りました。 次回は、ユニットテストを行っていきます。