💸 Income Tracker | 収入・バイト管理ツール

シンプルで清潔感のあるUIを追求した、大学生や副業ワーカー向けの給与管理Webアプリです。
複数のバイト先の時給管理から、日々の稼働記録、総収入のリアルタイム集計までをサポートします。
自分用のモチベ用に作成したアプリです。

✨ 特徴

• リアルタイム集計: 記録を追加した瞬間に、今月の総収入（給与 + 交通費）や各バイトごとの稼働時間・件数を即座に反映します。
• ストレスフリーな入力体験:
  • IME対応: 日本語入力（全角文字）が途切れないよう、入力中のステートを分離した独自のコンポーネント設計。
  • スマート入力: 数値入力欄から邪魔な三角ボタン（スピンボタン）を排除。負の数や不要な記号の入力もガードします。
• バイト先カスタマイズ:
  • バイト先ごとにテーマカラーを設定可能。
  • 集計タブでは、稼働状況を視覚的なタイル形式で確認できます。
• 安心のゴミ箱ギミック:
  • 間違えて削除した記録やバイト先を一時的に保管。
  • ふたが開閉するマイクロインタラクション付きのゴミ箱ボタンを搭載。
• モダンなUI/UX:
  • Animate.css によるスムーズな画面遷移。
  • モバイルでの操作を意識したカードレイアウト。

🛠 技術スタック

• Frontend: React (TypeScript)
• Styling: Bootstrap 5 + Animate.css
• State Management: カスタムフックによる集中管理 (useStore)
• Icons: Bootstrap Icons

🚀 セットアップ

1. リポジトリをクローン

git clone https://github.com/Appleple47/Income-Tracker.git
cd Income-Tracker

2. 依存関係のインストール

npm install

3. 開発サーバーの起動

npm run dev

📂 ディレクトリ構成

src/
├── components/
│   ├── InputPanel.tsx    # 稼働記録の入力・履歴管理
│   ├── SummaryPanel.tsx  # 総収入とバイト先設定（時給・カラー）
│   ├── TrashPanel.tsx    # 削除データの管理・復元
│   ├── Toast.tsx         # 操作フィードバック通知
│   └── UserIdPanel.tsx   # ユーザー識別管理
├── hooks/
│   └── useStore.ts       # ロジック・永続化の集中管理
├── types/
│   └── index.ts          # 型定義（Job, Entry等）
└── App.tsx               # 全体レイアウトとルーティング