Feature/issue#2 ✨ Plan・Do 画面の実装

[tora-muscle]

🎫 課題へのリンク

• issue #2

✨ やったこと

• PlanDo 画面の実装
• DDD アーキテクチャを意識したフォルダ整理、責務分離
• iPad の大画面表示への対応

🚩 やらないこと

• DB の導入（ローカル、リモート） ▶︎ 全ての画面デザイン実装後に着手
• 画面アニメーションの追加 ▶︎ DB 導入後、最終調整手前で着手
• 横画面への対応 ▶︎ DB 導入後、最終調整手前で着手
• ログイン画面の実装 ▶︎ 二次開発のリモート DB 導入時に検討

👍 できるようになること（ユーザ目線）

• 1 日付表示カード

  • 1-1 今週の日付 : 今週一週間の日付を月曜日~日曜日で表示 今週一週間の日付がわかる

  • 1-2 今年の残り日数 : 閏年も考慮した今年の残日数を表示 塾、予備校の日数カウントダウンのような、少しばかりの緊張感を持って生活できる

  • 1-3 カスタムプログレスバー : task、todo の進捗状況表示 太いバー表示にしたく、自前で１から実装したので見やすい 進捗によって色が３段階変化するので緊張感、満足感が得られる

• 2 task カード

  • 2-1 task タイトル : タイトルを設定 文字数無制限なので、細かい文章表現が可能。勿論、行数によってカード自体も縦に広がるので UI が崩れる心配はない その週の中目標を立てることでゴールが見えやすく、継続につながる 「task title」のプレースホルダー表示があるので何を入力すればいいかが分かりやすい

  • 2-2 カスタムプログレスサークル : task カード内の todo 進捗を表示 task 内の todo の数が膨大になっても task、中目標の進捗が可視化されるのでタスクに優先度をつけやすい ３段階色変更

  • 2-3 todo タイトル : 小目標を設定 文字数無制限 ラジオボタン押下で色変更。完了・未完了がわかりやすい 中目標、小目標と細分化することで、具体的な目標達成への道筋が立てやすく、目標達成率アップ 「todo」のプレースホルダー表示

• 3 Floating Action Button task カードを新規に追加する 押下しやすく かつ UI を圧迫しない大きさを調整したのでユーザビリティが向上

• その他

  • スワイプ削除 task カード、todo カードはそれぞれ左右スワイプで削除することができるので、直感的な操作を実現

  • ドロップシャドウ カードやボタンに影をつけることでデザイン性を向上

  • Make a plan!! タスク数が 0 の際にはイラストと共に「Make a plan!!」の文字が出る。 デザイン性向上

👎 できなくなること（ユーザ目線）

• なし

✅ 動作確認

検証環境：iOS16.2 iPhone12Pro（実機）| iOS16.2 iPhone 14 Pro（simulator）| iPad Pro (12.9 -inch)(6th generation)（simulator）

task なし(iPhone 12 Pro)	task あり(iPhone 12 Pro)

task なしiPad Pro (12.9 -inch)	task ありiPad Pro (12.9 -inch)

▼ 動作動画(iPhone 14 Pro)

https://user-images.githubusercontent.com/111550856/220535817-f9cd2b1d-5903-45fc-a68a-e2b803ee8c37.mov

🔀 マージ条件

• [x] セルフレビューに通過すること

👀 その他

• README にはこのプルリクの内容修正して転記すればいいかな

Closes #2