全員にいいねを送りました！のスタイリング (#619)

# PRの概要

- 全員にいいねを送りました！をいい感じにスタイリングした (close #462)

## Note

> [!warning]
> #564 に依存

## 具体的な変更内容

<img width="315" alt="image"
src="https://github.com/user-attachments/assets/07b9e17d-5348-4da2-b246-b2e2ec2ace49"
/>

## レビューリクエストを出す前にチェック！

- [ ] 改めてセルフレビューしたか
- [ ] 手動での動作検証を行ったか
- [ ] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [ ] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [ ] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

---------

Co-authored-by: GuY8528 <[email protected]>
Co-authored-by: KaichiManabe <[email protected]>

Author: 3 people

web/app/home/components/NoMoreUser.tsx

@@ -0,0 +1,9 @@
+export default function NoMoreUser() {
+  return (
+    <div className="flex h-full items-center justify-center px-4 text-center">
+      <p className="text-2xl text-gray-500">
+        「いいね！」を送るユーザーがいません。
+      </p>
+    </div>
+  );
+}

web/app/home/page.tsx

@@ -10,6 +10,7 @@ import { useAboutMe, useRecommended } from "~/api/user";
 import { Card } from "~/components/Card";
 import { DraggableCard } from "~/components/DraggableCard";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
+import NoMoreUser from "./components/NoMoreUser";
 import PersonDetailedMenu from "./components/PersonDetailedMenu";
 
 export default function Home() {
@@ -83,7 +84,7 @@ export default function Home() {
     return <FullScreenCircularProgress />;
   }
   if (displayedUser == null) {
-    return <div>全員にいいねを送りました！</div>;
+    return <NoMoreUser />;
   }
   if (error) throw error;