本日（4/25）の作業
本日も仕事の方が忙しくてガッツリ作業時間取れない＆ 仕事の方でも使うTurborepo（Monorepo） + Tailwind + cva + twMergeで複数のアプリケーション間で共通のコンポーネントを使うがスタイルが若干異なる場合の対応を行いました。
✅ 複数のアプリケーション間かつそれぞれのスタイルを区分する共通のコンポーネントの実装
🚴 日報の画面設計・実装
🚴 設計
🚴 実装
サインインの実装
認証画面実装
認証ロジック実装（主にClient側）
Server側の認証チェック実装
Client側の認証チェック実装
複数のアプリケーション間かつそれぞれのスタイルを区分する共通のコンポーネントの実装
見出しの通りですが具体的に説明をメモっときます。
要件
Hoge App, Moge AppとRemixのアプリケーションをturborepoのmonorepoで2つまとめている
Hoge App, Moge Appとpackages/uiでまとめているUI Component用のpackageをimportしている
Hoge AppとMoge Appでは色味が異なるがコンポーネントとしては色だけなのであとは共通コンポーネントとして扱いたい
下はセクション間の区切り線のコンポーネントです。
これはpackages/ui/sharedディレクトリ配下にあります。これだとHoge AppもMoge Appも黒（alpha 50）の区切り線になります。仮にHoge Appの全体のカラーパターン次第ではくっきりした線になり区切り線が目立ちすぎユーザの認知を妨げる可能性があり適した色合いにしたいところです。
で、まずは以下の型定義にします。
hogeVariants, mogeVariantsと用意します（とりあえず適当にdark/lightで反転した色を定義してます）。それをAppVariantsオブジェクト型にまとめ、DividerPropsにジェネリクスを設けてPropsのappとVariantPropsのジェネリクスにAppVariantsのどちらか指定した形で渡します。
これを実装するとこうなります。
これでコンポーネントを使う際も <Divider app="moge" color="dark" /> と言った感んじにすると良いですし、app PropsをContextで渡ってくるようにしておけばPropsで一々指定しなくても良いです。
ちなみにcolorでhogeDark, mogeDarkみたいにしても良いですが、Hoge AppでもmogeDarkが指定できるのはなって思ってこうしました。
その他、メモなど
仕事の方、API実装とかは今回担当していないので別のエンジニアが実装したものを結合しようと思ってAPIドキュメント見てるけどイミュータブルデータモデリングとかを頭に入れてしまった後によくあるようなRESTful APIを見ると戸惑ってしまう。