アイコン導入etc

Author: nakaterm

web/app/faq/page.tsx

@@ -1,96 +1,47 @@
 "use client";
 
-import { ArrowBack } from "@mui/icons-material";
-import { Box, IconButton, Typography } from "@mui/material";
-import { useRouter } from "next/navigation";
 import Header from "~/components/Header";
+import TopNavigation from "~/components/common/TopNavigation";
 
 export default function FAQ() {
-  const router = useRouter();
-
   return (
-    <Box
-      sx={{
-        padding: "20px",
-        display: "flex",
-        flexDirection: "column",
-        position: "absolute",
-        top: "56px",
-        bottom: 0,
-        left: 0,
-        right: 0,
-        overflowY: "auto",
-      }}
-    >
+    <>
       <Header title="よくある質問/FAQ" />
-      <IconButton
-        sx={{ position: "absolute", top: "20px", left: "20px" }}
-        onClick={() => router.back()}
-      >
-        <ArrowBack />
-      </IconButton>
-
-      <Box
-        sx={{
-          width: "100%",
-          maxWidth: "600px",
-          padding: "30px",
-          textAlign: "left",
-        }}
-      >
-        <Typography
-          variant="h5"
-          component="h1"
-          gutterBottom
-          sx={{ fontWeight: "bold", mb: "24px", textAlign: "center" }}
-        >
-          よくある質問
-        </Typography>
-
-        <Typography
-          variant="body1"
-          paragraph
-          sx={{ lineHeight: 1.8, mb: "16px" }}
-        >
-          <strong>Q: 東大生以外も利用できますか？</strong>
-          <br />
-          A:
-          本サービスは東大生のみを対象としています。それゆえ、ECCSアカウントによるログインが必須です。他のGoogleアカウントではログインできません。
-        </Typography>
-
-        <Typography
-          variant="body1"
-          paragraph
-          sx={{ lineHeight: 1.8, mb: "16px" }}
-        >
-          <strong>Q: 授業登録機能はすべての学部に対応していますか？</strong>
-          <br />
-          A:
-          本サービスの授業登録機能は前期教養学部のみに対応しており、今のところ後期学部には対応しておりません。
-        </Typography>
-
-        <Typography
-          variant="body1"
-          paragraph
-          sx={{ lineHeight: 1.8, mb: "16px" }}
-        >
-          <strong>Q: 収集された個人情報はどのように利用されますか？</strong>
-          <br />
-          A:
-          収集した個人情報は、サインインおよびサービス提供の目的にのみ使用され、他の目的には使用されません。
-        </Typography>
-
-        <Typography
-          variant="body1"
-          paragraph
-          sx={{ lineHeight: 1.8, mb: "16px" }}
-        >
-          <strong>Q: 東大公式のアプリですか？</strong>
-          <br />
-          A:
-          本サービスはut.code();によって運営されており、東京大学は運営に関与しておりません
-        </Typography>
-      </Box>
-    </Box>
+      <div className="absolute top-14 right-0 bottom-0 left-0 flex flex-column overflow-y-auto sm:top-16">
+        <div className="flex flex-col p-2">
+          <TopNavigation title="よくある質問" />
+          <div className="w-full p-8 text-left">
+            <p className="mb-4 leading-7">
+              {/* TODO: この辺の構造を直す */}
+              <strong>Q: 東大生以外も利用できますか？</strong>
+              <br />
+              A:
+              本サービスは東大生のみを対象としています。それゆえ、ECCSアカウントによるログインが必須です。他のGoogleアカウントではログインできません。
+            </p>
+
+            <p className="mb-4 leading-7">
+              <strong>Q: 授業登録機能はすべての学部に対応していますか？</strong>
+              <br />
+              A:
+              本サービスの授業登録機能は前期教養学部のみに対応しており、今のところ後期学部には対応しておりません。
+            </p>
+
+            <p className="mb-4 leading-7">
+              <strong>Q: 収集された個人情報はどのように利用されますか？</strong>
+              <br />
+              A:
+              収集した個人情報は、サインインおよびサービス提供の目的にのみ使用され、他の目的には使用されません。
+            </p>
+
+            <p className="mb-4 leading-7">
+              <strong>Q: 東大公式のアプリですか？</strong>
+              <br />
+              A:
+              本サービスはut.code();によって運営されており、東京大学は運営に関与しておりません
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
   );
 }

web/app/settings/contact/page.tsx

@@ -1,28 +1,15 @@
-import { Box, Typography } from "@mui/material";
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 import TopNavigation from "~/components/common/TopNavigation";
 
 export default function Contact() {
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
-      <Box
-        sx={{
-          padding: "8px",
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
+      <div className="flex flex-col p-2">
         <TopNavigation title="お問い合わせ" />
-        <Box
-          sx={{
-            width: "100%",
-            padding: "30px",
-            textAlign: "left",
-          }}
-        >
-          <Typography sx={{ mb: "16px", lineHeight: "1.8" }}>
+        <div className="w-full p-8 text-left">
+          <p className="mb-4 leading-7">
             ご利用いただきありがとうございます。サービスに関するご意見やバグ報告がございましたら、以下のリンクからお問い合わせください。皆様のフィードバックは、サービスの改善に役立てさせていただきます。
-          </Typography>
+          </p>
           <a
             href="https://forms.gle/WvFTbsJoHjGp9Qt88"
             target="_blank"
@@ -31,8 +18,8 @@ export default function Contact() {
           >
             ご意見・バグ報告をする
           </a>
-        </Box>
-      </Box>
+        </div>
+      </div>
     </NavigateByAuthState>
   );
 }

web/app/settings/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 SettingsPageLayout({
   return (
     <>
       <Header title="設定/Settings" />
-      <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="3_settings" />
     </>
   );

web/bun.lockb

@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-easy-crop": "^5.0.8",
+    "react-icons": "^5.3.0",
     "socket.io-client": "^4.7.5",
     "swiper": "^11.1.14",
     "zod": "^3.23.8"