細かいDaisyUI移行を実行 (#526)

# PRの概要

## 具体的な変更内容

## 影響範囲

## 動作要件

## 補足

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

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

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

Author: KaichiManabe

web/app/home/layout.tsx

@@ -1,4 +1,3 @@
-import { Box } from "@mui/material";
 import BottomBar from "~/components/BottomBar";
 import Header from "~/components/Header";
 
@@ -10,21 +9,9 @@ export default function HomePageLayout({
   return (
     <>
       <Header title="ホーム/Home" />
-      <Box
-        sx={{
-          position: "absolute", // TODO: absolute 指定しない
-          top: {
-            xs: "56px",
-            sm: "64px",
-          },
-          bottom: "56px",
-          left: 0,
-          right: 0,
-          overflowY: "auto",
-        }}
-      >
+      <div className="relative top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
         {children}
-      </Box>
+      </div>
       <BottomBar activeTab="0_home" />
     </>
   );

web/app/login/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Box, Button, Link, Typography } from "@mui/material";
 import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 import { useRouter } from "next/navigation";
 import { useSnackbar } from "notistack";
@@ -125,34 +124,21 @@ export default function Login() {
   return (
     <NavigateByAuthState type="toHomeForAuthenticated">
       <Header title="CourseMate" />
-      <Box
-        sx={{
-          position: "absolute",
-          top: "56px",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          overflowY: "auto",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "space-around",
-        }}
-      >
-        <Box textAlign="center">
+      <div className="absolute top-14 right-0 bottom-0 left-0 flex flex-col items-center justify-around overflow-y-auto">
+        <div className="text-center">
           <CourseMateIcon width="200px" height="200px" />
-        </Box>
-        <Box textAlign="left">
-          <Typography variant="h4">
+        </div>
+        <div className="text-left">
+          <h1 className="font-semibold text-3xl">
             CourseMateを使って
             <br />
             同じ授業の人と
             <br />
             友達になろう
-          </Typography>
-        </Box>
+          </h1>
+        </div>
 
-        <Box sx={{ width: "80%" }} textAlign="center">
+        <div className="w-4/5 text-center">
           <button
             className="gsi-material-button"
             onClick={logInByGoogle}
@@ -219,16 +205,15 @@ export default function Login() {
             </div>
           </button>
           <br />
-          <Link
-            component={Button}
+          <button
+            type="button"
             onClick={singUpByGoogle}
-            mt={2}
-            underline="none"
+            className="mt-2 text-blue-600 hover:underline"
           >
             初めての方はこちら
-          </Link>
-        </Box>
-      </Box>
+          </button>
+        </div>
+      </div>
     </NavigateByAuthState>
   );
 }

web/app/signup/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Box } from "@mui/material";
 import { useSnackbar } from "notistack";
 import { useState } from "react";
 
@@ -78,19 +77,10 @@ function Registration() {
 export default function RegistrationPage() {
   return (
     <NavigateByAuthState type="toHomeForAuthenticated">
-      <Box
-        sx={{
-          position: "absolute",
-          top: "56px",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          overflowY: "auto",
-        }}
-      >
+      <div className="absolute top-14 right-0 bottom-0 left-0 overflow-y-auto">
         <Header title="登録/Register" />
         <Registration />
-      </Box>
+      </div>
     </NavigateByAuthState>
   );
 }

web/app/tutorial/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Box, Typography } from "@mui/material";
 import { Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
@@ -42,68 +41,36 @@ const tutorialSteps = [
 
 export default function Tutorial() {
   return (
-    <Box
-      sx={{
-        padding: "20px",
-        display: "flex",
-        flexDirection: "column",
-        position: "absolute",
-        top: "56px",
-        bottom: 0,
-        left: 0,
-        right: 0,
-        overflowY: "auto",
-      }}
-    >
+    <div className="absolute inset-0 flex flex-col overflow-y-auto px-5 pt-14">
       <Header title="チュートリアル/Tutorial" />
-      <Box
-        sx={{
-          textAlign: "left",
-        }}
-      >
+      <div className="text-left">
         <Swiper
           modules={[Navigation, Pagination]}
           spaceBetween={50}
           slidesPerView={1}
           navigation
           pagination={{ clickable: true }}
-          style={{
-            paddingBottom: "60px",
-          }}
+          className="pb-16"
         >
           {tutorialSteps.map((step) => (
             <SwiperSlide key={step.imgPath}>
-              <Box sx={{ textAlign: "center", mb: "24px" }}>
-                <Typography
-                  variant="h6"
-                  component="h1"
-                  gutterBottom
-                  sx={{ fontWeight: "bold", mb: "16px" }}
-                >
-                  {step.label}
-                </Typography>
+              <div className="mb-6 text-center">
+                <h1 className="mb-4 font-bold text-lg">{step.label}</h1>
                 <img
                   src={step.imgPath}
                   alt={step.label}
-                  style={{
-                    display: "block",
-                    width: "60vw",
-                    height: "calc(60vw·*·(667·/·375))",
-                    maxWidth: 400,
-                    overflow: "hidden",
-                    margin: "auto",
-                  }}
+                  className="mx-auto block h-auto w-[60vw] max-w-[400px]"
                 />
-              </Box>
+              </div>
             </SwiperSlide>
           ))}
         </Swiper>
-        <Box sx={{ textAlign: "center" }}>
+        <div className="text-center">
           <Link href="/home" className="btn btn-primary w-full">
             ホーム画面へ
           </Link>
-        </Box>
-      </Box>
-    </Box>
+        </div>
+      </div>
+    </div>
   );
 }

web/components/Header.tsx

@@ -1,6 +1,5 @@
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import { AppBar, Box, IconButton, Toolbar, Typography } from "@mui/material";
 import Link from "next/link";
+import { MdInfoOutline } from "react-icons/md";
 import { CourseMateIcon } from "./common/CourseMateIcon";
 
 type Props = {
@@ -10,32 +9,20 @@ type Props = {
 export default function Header(props: Props) {
   const { title } = props;
   return (
-    <>
-      <AppBar
-        position="fixed"
-        sx={{
-          backgroundColor: "secondary.main",
-          boxShadow: "2px 2px 4px -2px gray",
-        }}
-      >
-        <Toolbar>
-          <Box sx={{ marginRight: "8px" }}>
-            <IconButton LinkComponent={Link} href="/home">
-              <CourseMateIcon width="28px" height="28px" />
-            </IconButton>
-          </Box>
-          <Typography
-            variant="h6"
-            component="h2"
-            sx={{ flexGrow: 1, color: "#000000" }}
-          >
-            {title}
-          </Typography>
-          <IconButton LinkComponent={Link} href="/faq" sx={{ zIndex: "100" }}>
-            <InfoOutlinedIcon />
-          </IconButton>
-        </Toolbar>
-      </AppBar>
-    </>
+    <header className="fixed top-0 left-0 z-50 w-full bg-secondary shadow-md">
+      <div className="flex items-center justify-between px-4 py-2">
+        <Link href="/home" passHref>
+          <CourseMateIcon width="28px" height="28px" />
+        </Link>
+
+        <h1 className="flex-grow text-center font-semibold text-black text-lg">
+          {title}
+        </h1>
+
+        <Link href="/faq" passHref>
+          <MdInfoOutline size={24} />
+        </Link>
+      </div>
+    </header>
   );
 }

web/components/ImageCropper.tsx

@@ -1,4 +1,3 @@
-import { Slider } from "@mui/material";
 import { useState } from "react";
 import Cropper from "react-easy-crop";
 
@@ -11,6 +10,10 @@ export function ImageCropper({ sameOriginURL: url, onImageChange }: Props) {
   const [crop, setCrop] = useState({ x: 0, y: 0 });
   const [zoom, setZoom] = useState(1);
 
+  const handleSliderChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setZoom(Number(event.target.value));
+  };
+
   return (
     <>
       <div
@@ -39,16 +42,19 @@ export function ImageCropper({ sameOriginURL: url, onImageChange }: Props) {
           }}
         />
       </div>
-      <Slider
-        value={zoom}
-        min={1}
-        max={3}
-        step={0.05}
-        aria-labelledby="Zoom Level"
-        onChange={(_, newVal) => {
-          setZoom(Number(newVal) || 1);
-        }}
-      />
+      <div className="mt-4 flex items-center">
+        <input
+          id="zoom"
+          type="range"
+          className="range range-secondary"
+          min={1}
+          max={3}
+          step={0.05}
+          value={zoom}
+          onChange={handleSliderChange}
+        />
+        <span className="ml-2 text-sm">{zoom.toFixed(2)}</span>
+      </div>
     </>
   );
 }

web/components/chat/MessageInput.tsx

@@ -1,6 +1,5 @@
-import SendIcon from "@mui/icons-material/Send";
-import { Box, IconButton, Stack, TextField, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
+import { MdSend } from "react-icons/md";
 import type { DMOverview, SendMessage, UserID } from "~/common/types";
 import { parseContent } from "~/common/zod/methods";
 
@@ -58,34 +57,30 @@ export function MessageInput({ send, room }: Props) {
   }
 
   return (
-    <Box sx={{ padding: "0px" }}>
+    <div className="p-0">
       <form onSubmit={submit}>
-        <Stack direction="row" spacing={1} alignItems="center" margin={2}>
-          <TextField
+        <div className="flex items-center space-x-2 p-2">
+          <textarea
             name="message"
             placeholder="メッセージを入力"
-            variant="outlined"
-            size="small"
+            className={`textarea textarea-bordered w-full resize-none ${
+              error ? "textarea-error" : ""
+            }`}
             value={message}
-            fullWidth
-            multiline
-            minRows={1}
-            maxRows={3}
+            rows={1}
             onChange={(e) => setMessage(e.target.value)}
             onKeyDown={handleKeyDown}
-            error={!!error}
             autoComplete="off"
           />
-          <IconButton type="submit" color="primary">
-            <SendIcon />
-          </IconButton>
-        </Stack>
-        {error && (
-          <Typography color="error" variant="body2" marginLeft={2}>
-            {error}
-          </Typography>
-        )}
+          <button
+            type="submit"
+            className="btn btn-primary btn-circle flex items-center justify-center"
+          >
+            <MdSend />
+          </button>
+        </div>
+        {error && <p className="ml-2 text-red-500 text-sm">{error}</p>}
       </form>
-    </Box>
+    </div>
   );
 }