基本的なコンポーネントを daisyUI に移行

.cspell.json

@@ -4,20 +4,22 @@
   "words": [
     "autoincrement",
     "bunx",
+    "chrono",
     "coursemate",
+    "daisyui",
     "datasource",
     "direnv",
     "ECCS",
     "isready",
     "lockb",
+    "mytheme",
     "notistack",
     "psql",
     "qiita",
+    "reqwest",
     "safify",
     "supabase",
-    "swiper",
-    "reqwest",
-    "chrono"
+    "swiper"
   ],
   "dictionaries": [
     "softwareTerms",

biome.json

@@ -4,6 +4,13 @@
     "indentStyle": "space",
     "indentWidth": 2
   },
+  "linter": {
+    "rules": {
+      "nursery": {
+        "useSortedClasses": "warn"
+      }
+    }
+  },
   "vcs": {
     "enabled": true,
     "clientKind": "git",

web/app/chat/layout.tsx

@@ -1,31 +1,19 @@
-import { Box } from "@mui/material";
 import BottomBar from "~/components/BottomBar";
 import Header from "~/components/Header";
+import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 
 export default function ChatPageLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <>
+    <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="チャット/Chat" />
-      <Box
-        sx={{
-          position: "absolute", // TODO: absolute 指定しない
-          top: {
-            xs: "56px",
-            sm: "64px",
-          },
-          bottom: "56px",
-          left: 0,
-          right: 0,
-          overflowY: "auto",
-        }}
-      >
+      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
         {children}
-      </Box>
+      </div>
       <BottomBar activeTab="2_chat" />
-    </>
+    </NavigateByAuthState>
   );
 }

web/app/chat/page.tsx

@@ -7,7 +7,6 @@ import { useRoomsOverview } from "~/api/chat/hooks";
 import RoomList from "~/components/chat/RoomList";
 import { RoomWindow } from "~/components/chat/RoomWindow";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
-import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 
 function ChatListContent() {
   const searchParams = useSearchParams();
@@ -32,10 +31,8 @@ function ChatListContent() {
 
 export default function Chat() {
   return (
-    <NavigateByAuthState type="toLoginForUnauthenticated">
-      <Suspense fallback={<FullScreenCircularProgress />}>
-        <ChatListContent />
-      </Suspense>
-    </NavigateByAuthState>
+    <Suspense fallback={<FullScreenCircularProgress />}>
+      <ChatListContent />
+    </Suspense>
   );
 }

web/app/edit/courses/page.tsx

@@ -1,10 +1,8 @@
 "use client";
 
-import { Box, Button, Typography } from "@mui/material";
 import Link from "next/link";
 import { useAboutMe } from "~/api/user";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
-import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 import EditableCoursesTable from "~/components/course/EditableCoursesTable";
 
 export default function EditCourses() {
@@ -14,65 +12,27 @@ export default function EditCourses() {
   const error = state.current === "error" ? state.error : null;
 
   return (
-    <NavigateByAuthState type="toLoginForUnauthenticated">
-      <Box
-        sx={{
-          padding: "20px",
-          maxWidth: "350px",
-          height: "100%",
-          margin: "0 auto",
-          display: "flex",
-          flexDirection: "column",
-          textAlign: "center",
-        }}
-      >
-        <Typography variant="h6" component="h1" mb={1}>
-          授業編集
-        </Typography>
-        {loading ? (
-          <FullScreenCircularProgress />
-        ) : error ? (
-          <p>Error: {error.message}</p>
-        ) : data ? (
-          <>
-            <EditableCoursesTable userId={data.id} />
-          </>
-        ) : (
-          <p>データがありません。</p>
-        )}
-
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            marginTop: "20px",
-          }}
-        >
-          <Button
-            LinkComponent={Link}
-            href="/settings/profile"
-            style={{
-              borderRadius: "25px",
-              width: "35vw",
-              boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
-            }}
-          >
-            設定画面に戻る
-          </Button>
-          <Button
-            LinkComponent={Link}
-            href="/edit/profile"
-            variant="contained"
-            style={{
-              borderRadius: "25px",
-              width: "35vw",
-              boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
-            }}
-          >
-            プロフィール編集へ
-          </Button>
-        </Box>
-      </Box>
-    </NavigateByAuthState>
+    <div className="mx-auto my-0 flex h-full max-w-[350] flex-col p-5 text-center">
+      <h1 className="mb-2 text-xl">授業編集</h1>
+      {loading ? (
+        <FullScreenCircularProgress />
+      ) : error ? (
+        <p>Error: {error.message}</p>
+      ) : data ? (
+        <>
+          <EditableCoursesTable userId={data.id} />
+        </>
+      ) : (
+        <p>データがありません。</p>
+      )}
+      <div className="mt-5 flex justify-between">
+        <Link href="/settings/profile" className="btn">
+          設定画面に戻る
+        </Link>
+        <Link href="/edit/profile" className="btn btn-primary">
+          プロフィール編集へ
+        </Link>
+      </div>
+    </div>
   );
 }

web/app/edit/layout.tsx

@@ -1,29 +1,17 @@
-import { Box } from "@mui/material";
 import Header from "~/components/Header";
+import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 
 export default function EditPageLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <>
+    <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="編集/Edit" />
-      <Box
-        sx={{
-          position: "absolute", // TODO: absolute 指定しない
-          top: {
-            xs: "56px",
-            sm: "64px",
-          },
-          bottom: "56px",
-          left: 0,
-          right: 0,
-          overflowY: "auto",
-        }}
-      >
+      <div className="absolute top-14 right-0 left-0 overflow-y-auto sm:top-16">
         {children}
-      </Box>
-    </>
+      </div>
+    </NavigateByAuthState>
   );
 }