Friends タブを MUI → daisyUI に修正 (#525)

# PRの概要

## 具体的な変更内容

## 影響範囲

## 動作要件

## 補足
Error: Hydration failed because the initial UI does not match what was
rendered on the server.
See more info here:
https://nextjs.org/docs/messages/react-hydration-error
というエラーがデます。動作自体は問題なく動きます。誰か直してください...

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

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

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

---------

Co-authored-by: naka-12 <[email protected]>

Author: KaichiManabe

web/app/friends/page.tsx

@@ -1,56 +1,52 @@
 "use client";
-
-import { Tab, Tabs } from "@mui/material";
 import { useState } from "react";
-import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
-import Matchings from "~/components/match/matching";
-import Requests from "~/components/match/requests";
 
-export default function Friends() {
-  const [open, setOpen] = useState(0);
+// https://nextjs.org/docs/messages/react-hydration-error#solution-2-disabling-ssr-on-specific-components
+import dynamic from "next/dynamic";
+const NoSSRMatchings = dynamic(() => import("~/components/match/matching"), {
+  ssr: false,
+});
+const NoSSRRequests = dynamic(() => import("~/components/match/requests"), {
+  ssr: false,
+});
 
-  const handleChange = (_event: React.SyntheticEvent, newOpen: number) => {
-    setOpen(newOpen);
-  };
+export default function Friends() {
+  const [activeTab, setActiveTab] = useState("matching");
 
   return (
-    <NavigateByAuthState type="toLoginForUnauthenticated">
-      <div className="fixed z-50 w-full border-gray-200 border-b-[1px] bg-white">
-        <Tabs value={open} onChange={handleChange} variant="fullWidth">
-          <Tab label="マッチ中" {...a11yProps(0)} sx={{ width: "50%" }} />
-          <Tab label="リクエスト" {...a11yProps(1)} sx={{ width: "50%" }} />
-        </Tabs>
-      </div>
-      <div className="absolute top-9 right-0 left-0 overflow-y-auto">
-        <TabPanel open={open}>
-          {open === 0 ? <Matchings /> : open === 1 ? <Requests /> : null}
-        </TabPanel>
+    <div className="w-full">
+      <div className="flex w-full border-gray-200 border-b">
+        <button
+          type="button"
+          className={`relative flex-1 py-2 text-center ${
+            activeTab === "matching" ? "text-primary" : "text-gray-600"
+          }`}
+          onClick={() => setActiveTab("matching")}
+        >
+          <span>マッチ中</span>
+          {activeTab === "matching" && (
+            <span className="absolute bottom-0 left-0 h-1 w-full bg-primary" />
+          )}
+        </button>
+
+        <button
+          type="button"
+          className={`relative flex-1 py-2 text-center ${
+            activeTab === "request" ? "text-primary" : "text-gray-600"
+          }`}
+          onClick={() => setActiveTab("request")}
+        >
+          <span>リクエスト</span>
+          {activeTab === "request" && (
+            <span className="absolute bottom-0 left-0 h-1 w-full bg-primary" />
+          )}
+        </button>
       </div>
-    </NavigateByAuthState>
-  );
-}
 
-function TabPanel({
-  open,
-  children,
-}: {
-  open: number;
-  children: React.ReactNode;
-}) {
-  return (
-    <div
-      // role="tabpanel" // FIXME: biome says it should not be a div, but I couldn't find a proper html elem
-      id={`tabpanel-${open}`}
-      aria-labelledby={`tab-${open}`}
-    >
-      <div>{children}</div>
+      {/* コンテンツ部分 */}
+      <div className="mt-4 text-center text-gray-700 text-lg">
+        {activeTab === "matching" ? <NoSSRMatchings /> : <NoSSRRequests />}
+      </div>
     </div>
   );
 }
-
-function a11yProps(index: number) {
-  return {
-    id: `tab-${index}`,
-    "aria-controls": `tabpanel-${index}`,
-  };
-}

web/components/match/matching.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { deleteMatch } from "~/api/match";
 import { useMatched } from "~/api/user";
 import FullScreenCircularProgress from "../common/FullScreenCircularProgress";
@@ -13,15 +14,11 @@ export default function Matchings() {
 
   return (
     <div className="p-4">
-      <p className="mr-10 ml-10 text-lg">
-        {data && data.length === 0 && (
-          <>
-            誰ともマッチングしていません。
-            <br />
-            リクエストを送りましょう！
-          </>
-        )}
-      </p>
+      {data && data.length === 0 && (
+        <p className="mr-10 ml-10 text-lg">
+          誰ともマッチングしていません。 リクエストを送りましょう！
+        </p>
+      )}
       {current === "loading" ? (
         <FullScreenCircularProgress />
       ) : error ? (

web/components/match/myRequests.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as request from "~/api/request";
 import { usePendingFromMe } from "~/api/user";
 import FullScreenCircularProgress from "../common/FullScreenCircularProgress";

web/components/match/othersRequests.tsx

@@ -1,3 +1,4 @@
+"use client";
 import request from "~/api/request";
 import { usePendingToMe } from "~/api/user";
 import FullScreenCircularProgress from "../common/FullScreenCircularProgress";

web/components/match/requests.tsx

@@ -1,3 +1,4 @@
+"use client";
 import MyReq from "./myRequests";
 import OthersReq from "./othersRequests";