【リプレイス】Firebaseとの接続

[mather]

実装したこと

Firebaseのサービスへの接続実装。

• Authentication (Googleログイン)
• Firestore (現時点ではイベント一覧のみ)

ログイン後のページとしてマイページを仮実装してみた。 コンポーネントやデザインの設計がされてないので、別で再設計したい。

スクリーンショット

PC(ログインの様子) https://user-images.githubusercontent.com/611276/203389066-d4a311b0-d8a4-4818-aa0a-77001d5e3603.mov

SP(マイページ)

動作確認の方法

.env.emulator を設定する（ビルド時に接続先をエミュレーターモードに切り替えてるので設定は本番と同じ）。

動作確認にはFirebaseエミュレーターを使う必要がある。

$ (cd functions/; npm install)
$ yarn build --mode emulator
$ yarn firebase emulators:start --import .emulator --export-on-exit 

--import .emulator --export-on-exit はエミュレーターを終了してもデータを残しておくオプション（テストデータを作り直すのが面倒なので）

別ターミナルで自動ビルドをしておくと便利。

$ yarn build --mode emulator --watch

[github-actions[bot]]

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

https://leaction--pr125-feature-login-with-g-5qy1fr2z.web.app

_{(expires Mon, 26 Dec 2022 07:56:44 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1167ac8f18a25edf38a44f1d55d85c2ab6704bf8}

[mather]

完全に停滞しているので、一旦マージしてこちらをベースに実装を先に進めて行くことにします。 アーキテクチャに関する違和感の報告や修正提案は随時やっていきましょう。