[frontend] コンテスト問題一覧画面の修正(回答状況によって背景色が変わる)

[h-takeyeah]

コンテスト問題一覧画面が FIXME だらけだったので修正します

• 得点欄に実際のデータを表示するようになります

• 問題の難しさ(Difficulty)に合わせてバッジを表示するようになります

• ジャッジ状況をリアルタイムに確認するのはできてません(提出 ID を得ないと叩けないのだけどそれを得るのが難しいため)

  • もうちょい模索する(金曜夜目処)

• ジャッジ状況をリアルタイムに確認するのはやめ，その代わりに得点状況によって背景色を変えるようにするように仕様を決めました→実装しました

• ついでに GitHub Actions ワークフローを更新しています．preview のときは必ずモックを有効にするようになります

バッジを使えるようにするのにあたって，バッジのコンポーネント DifficultyBadge.tsx のパラメータの型に Protobuf から生成された Enum を対応させるための変換器を Converter として model ディレクトリに置くようにしてみました．model ディレクトリはなんとなく Protobuf と切り離しておきたいと勝手に考えていたのですが，できなさそうなので苦肉の策で Converter を作りました．

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit bf89386):

https://szpp-judge-3776--pr106-feat-frontend-judge-tyji07e9.web.app

_{(expires Tue, 10 Oct 2023 17:13:59 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1f8b9d12a855b0fe650d3231cd716db46d79c069}

[h-takeyeah]

backend の CI が落ちてるのはちょっとバックエンドチームに任せるのでここはマージします．