✨ 💄 ダッシュボードの上部を作成した (#45)

[AyumuOgasawara]

概要

ダッシュボードの上部を作成した

関連タスク

Closes #45

動作確認

出費が予算を超えた場合

過去の家計簿を見ている場合

ディレクトリ構成(現状)

├─ app/
├─ _components/
│  ├─ common/：共通で使われるコンポーネント(PieChart)
│  │  
│  ├─ features/：ページ毎のコンポーネント
│  │  └─ {page}
│        ├─ type.ts：ページコンポーネントで汎用的に使われる型定義
│  │     └─ {page}.tsx：ページのコンポーネント
│  └─ layouts/
│     └─ Header
│        └─ Header.tsx
├─ lib
│  ├─ db：データベース関連
│        ├─ {page}.ts：ページ毎のdbのCRUDをまとめる
│        ├─ index.ts：dbにある関数をここからexportさせるようにする。そうすることで複数のimportを書かなくて済む
│     └─ prisma.ts
├─ types
│  ├─ {page}.ts：汎用的に使うdb内の型定義
│  ├─ index.ts ：typesをここからexport
└─ utils/：汎用的な関数

実装詳細(コミット順ではない)

レイアウト

• 💄 ダッシュボード上半分の簡易的な配置を定めた (45)
• 💄 背景の色やpadding、marginをつけて、UIを整えた (45)
• 💄 ダッシュボード上部グラフの見た目を作成した (45)
• 💄 サイドバーの範囲を小さくした (45)
• 💄 ダッシュボードの月、予算、金額のレイアウトとカラーを整えた (45)

予算と出費

DB

• ✨ DBからデータを指定した月の出費を取得し合計金額を表示させる機能を追加した (45)
• ✨ 予算を取得した (45)

  金額のデータ変換など

• ✨ 金額を日本円表記にフォーマットする関数の追加 (45)
• ✨ カテゴリー毎の予算と出費の合計を取得できるようにした (45)

日付

• ♻️ 本日の日付の取得を関数にした (45)
• ✨ 残り日数を計算できるようにした (45)
• ♻️ 関数に返り値の型を追加した (45)

円グラフ

• ➕ x-chartsをインストールした(45)
• ✨ 円グラフの中の文字をpropsで与えるようにした (45)
• ✨ PieChartの値をUpperDashbordからpropsで渡せるようにした (45)
• ✨ 予算と出費の割合を表すグラフのデータを作成し、グラフの色をカスタマイズした (45)
• ✨ 出費が予算を上回った場合グラフの色が変わるようにした (45)