Home のデザイン修正・モバイルでの挙動修正 (#629)

# PRの概要

#622 #627 を参照ください

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

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

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

Author: nakaterm

web/README.md

@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header title="チャット" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="flex-1 overflow-hidden">{children}</div>
+        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="3_chat" />
     </>

web/app/chat/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header title="フレンド" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="grow overflow-y-auto">{children}</div>
+        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="1_friends" />
     </>

web/app/friends/layout.tsx

@@ -15,11 +15,11 @@ export default function Friends() {
   const [activeTab, setActiveTab] = useState("matching");
 
   return (
-    <div className="w-full">
-      <div className="flex w-full border-gray-200 border-b">
+    <div className="relative w-full">
+      <div className="fixed top-12 flex h-10 w-full border-gray-200 border-b bg-white">
         <button
           type="button"
-          className={`relative flex-1 py-3 text-center ${
+          className={`relative flex-1 text-center ${
             activeTab === "matching" ? "text-primary" : "text-gray-600"
           }`}
           onClick={() => setActiveTab("matching")}
@@ -31,7 +31,7 @@ export default function Friends() {
         </button>
         <button
           type="button"
-          className={`relative flex-1 py-2 text-center ${
+          className={`relative flex-1 text-center ${
             activeTab === "request" ? "text-primary" : "text-gray-600"
           }`}
           onClick={() => setActiveTab("request")}
@@ -43,7 +43,7 @@ export default function Friends() {
         </button>
       </div>
 
-      <div className="text-center text-gray-700 text-lg">
+      <div className="pt-10 text-center text-gray-700 text-lg">
         {activeTab === "matching" ? <NoSSRMatchings /> : <NoSSRRequests />}
       </div>
     </div>

web/app/friends/page.tsx

@@ -0,0 +1,16 @@
+interface RoundButtonProps {
+  onclick: () => void;
+  icon: React.ReactNode;
+}
+
+export default function RoundButton({ onclick, icon }: RoundButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onclick}
+      className="btn btn-circle bg-white shadow-md"
+    >
+      {icon}
+    </button>
+  );
+}

web/app/home/components/RoundButton.tsx

@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="grow overflow-y-auto ">{children}</div>
+        <div className="h-full pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="0_home" />
     </>

web/app/home/layout.tsx

@@ -1,17 +1,17 @@
 "use client";
 
-import CloseIcon from "@mui/icons-material/Close";
 import type { UserWithCoursesAndSubjects } from "common/types";
 import { motion, useAnimation } from "framer-motion";
 import { useCallback, useEffect, useState } from "react";
-import { MdThumbUp } from "react-icons/md";
+import { MdClose, MdThumbUp } from "react-icons/md";
 import request from "~/api/request";
 import { useAboutMe, useRecommended } from "~/api/user";
 import { Card } from "~/components/Card";
 import { DraggableCard } from "~/components/DraggableCard";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import NoMoreUser from "./components/NoMoreUser";
 import PersonDetailedMenu from "./components/PersonDetailedMenu";
+import RoundButton from "./components/RoundButton";
 
 export default function Home() {
   const { data, error } = useRecommended();
@@ -133,14 +133,14 @@ export default function Home() {
               </motion.div>
             </div>
           )}
-          <div className="button-container mt-4 mb-4 flex w-full justify-center space-x-8">
-            <CloseButton
+          <div className="mt-2 mb-4 flex w-full justify-around px-8">
+            <RoundButton
               onclick={() => handleAction("reject")}
-              icon={<CloseIconStyled />}
+              icon={<MdClose className="text-3xl text-gray-500" />}
             />
-            <GoodButton
+            <RoundButton
               onclick={() => handleAction("accept")}
-              icon={<FavoriteIconStyled />}
+              icon={<MdThumbUp className="text-3xl text-primary" />}
             />
           </div>
           {openDetailedMenu && (
@@ -158,36 +158,6 @@ export default function Home() {
   );
 }
 
-interface RoundButtonProps {
-  onclick: () => void;
-  icon: JSX.Element;
-}
-
-const CloseButton = ({ onclick, icon }: RoundButtonProps) => (
-  <button
-    type="button"
-    onClick={onclick}
-    className="btn btn-circle bg-white shadow-md"
-  >
-    {icon}
-  </button>
-);
-const GoodButton = ({ onclick, icon }: RoundButtonProps) => (
-  <button
-    type="button"
-    onClick={onclick}
-    className="btn btn-circle bg-white shadow-md"
-  >
-    {icon}
-  </button>
-);
-
-const CloseIconStyled = () => <CloseIcon className="text-4xl text-gray-500" />;
-
-const FavoriteIconStyled = () => (
-  <MdThumbUp className="text-3xl text-primary" />
-);
-
 class Queue<T> {
   private store: T[];
   constructor(initial: T[]) {

web/app/home/page.tsx

@@ -30,14 +30,14 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" className="h-full">
       <head>
         <meta charSet="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/course-mate-icon.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>CourseMate</title>
       </head>
-      <body>
+      <body className="h-full">
         <ThemeProvider theme={theme}>
           <CssBaseline />
           <SnackbarProvider
@@ -50,7 +50,7 @@ export default function RootLayout({
                 <AlertProvider>
                   <ModalProvider>
                     <BanLandscape />
-                    <div className="flex h-screen flex-col">{children}</div>
+                    {children}
                   </ModalProvider>
                 </AlertProvider>
               </AuthProvider>

web/app/layout.tsx

@@ -11,7 +11,7 @@ export default function Layout({
     <>
       <Header title="検索" />
       <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="grow overflow-y-auto">{children}</div>
+        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
       </NavigateByAuthState>
       <BottomBar activeTab="2_search" />
     </>

web/app/search/layout.tsx

@@ -54,7 +54,7 @@ export default function SearchPage({
   );
 
   return (
-    <div className="flex min-h-screen justify-center ">
+    <div className="flex justify-center">
       <div className="w-full">
         <h2 className="m-5 mb-4 font-bold text-2xl">ユーザー検索</h2>
         <Search placeholder="検索" setSearchString={setQuery} />