割り勘計算機

概要

このプロジェクトでは、割り勘アプリを構築します。
メンバーを登録し、支払い記録を入力することで、最適な精算方法を画面に表示します。

学習目標

Zustand を使用したグローバルな状態管理について、学習します。

複数のコンポーネント間で状態を共有する設計や、useContext との違いについて、確認してください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

• Zustand を用いたグローバルな状態管理
• Vite を用いた React 環境構築
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• GitHub Pages へのデプロイ
• 複雑なロジックを分離させるカスタムフック

---

🎯 お題

• 「ユーザーストーリー」を全て満たすアプリを構築してください。
• 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
• スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須機能

1. メンバー登録：
   • 割り勘を行うメンバーを追加し、表示する。
2. 支払い記録：
   • 立て替えた人、金額、内容を記録・削除する。
3. 精算結果の算出：
   • 最適な精算方法を表示する（例：誰が誰にいくら払うべきか）

ユーザーストーリー

• ユーザーがサイトにアクセスすると、メンバーの名前を入力できるフォームがが表示されている。
• 追加したメンバーの名前が、全員表示される
• ユーザーが支払い記録を追加する際は、支払った人をドロップダウンリストから選択できる
• 支払い内容（テキスト）と金額（数値）を入力できる
• 必要な情報を入力し、「記録する」ボタンをクリックすると、支払いの記録が一覧で表示される
• 支払い記録を削除できる
• 最適な精算方法として「誰が誰にいくら払えば良いか」が一覧で表示される
• アプリケーションがデプロイされており、誰でもアクセス可能である。