step4を修正 (#523)

# PRの概要

## 具体的な変更内容

## 影響範囲

## 動作要件

## 補足

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

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

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

Author: KaichiManabe

web/app/chat/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Typography } from "@mui/material";
 import { useSearchParams } from "next/navigation";
 import { Suspense } from "react";
 import { useRoomsOverview } from "~/api/chat/hooks";
@@ -31,7 +30,7 @@ function ChatListContent() {
   ) : state.current === "loading" ? (
     <FullScreenCircularProgress />
   ) : state.current === "error" ? (
-    <Typography color="error">Error: {state.error.message}</Typography>
+    <p className="decoration-red">Error: {state.error.message}</p>
   ) : (
     <RoomList roomsData={state.data} />
   );

web/app/signup/steps/step4_course.tsx

@@ -1,5 +1,3 @@
-import { Typography } from "@mui/material";
-import { Box } from "@mui/system";
 import Link from "next/link";
 import { useMyID } from "~/api/user";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
@@ -9,37 +7,26 @@ export default function Step4() {
   const { state } = useMyID();
   return (
     <>
-      <Box>
+      <div>
         {state.current === "loading" ? (
           <FullScreenCircularProgress />
         ) : state.current === "error" ? (
           <p>Error: {state.error.message}</p>
         ) : (
-          <Box mt={2} mx={2} display="flex" flexDirection="column" gap={2}>
-            <Typography variant="h6" component="h1">
-              授業情報の登録 (スキップ可)
-            </Typography>
-            <Box>
+          <div className="mx-4 mt-4 flex flex-col gap-4">
+            <h1>授業情報の登録 (スキップ可)</h1>
+            <div>
               <EditableCoursesTable userId={state.data} />
-            </Box>
-          </Box>
+            </div>
+          </div>
         )}
-      </Box>
-      <Box
-        p={3}
-        sx={{
-          position: "fixed",
-          display: "flex",
-          justifyContent: "space-between",
-          bottom: 0,
-          width: "100%",
-        }}
-      >
+      </div>
+      <div className="b-0 fixed flex w-full justify-between p-6">
         <span />
         <Link href="/tutorial" className="btn btn-primary">
           次へ
         </Link>
-      </Box>
+      </div>
     </>
   );
 }