チュートリアルのレイアウトを修正

Author: KaichiManabe

web/app/tutorial/layout.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import Header from "~/components/Header";
+import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+
+export default function TutorialPageLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <NavigateByAuthState type="toLoginForUnauthenticated">
+      <Header title="チュートリアル/Tutorial" />
+      <div className="grow">{children}</div>
+      <div className="m-4 text-center">
+        <Link href="/home" className="btn btn-primary w-full">
+          ホーム画面へ
+        </Link>
+      </div>
+    </NavigateByAuthState>
+  );
+}

web/app/tutorial/page.tsx

@@ -1,12 +1,10 @@
 "use client";
 
-import { Navigation, Pagination } from "swiper/modules";
+import { Navigation } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
-import Link from "next/link";
-import Header from "~/components/Header";
 
 const tutorialSteps = [
   {
@@ -41,36 +39,26 @@ const tutorialSteps = [
 
 export default function Tutorial() {
   return (
-    <div className="absolute inset-0 flex flex-col overflow-y-auto px-5 pt-14">
-      <Header title="チュートリアル/Tutorial" />
-      <div className="text-left">
-        <Swiper
-          modules={[Navigation, Pagination]}
-          spaceBetween={50}
-          slidesPerView={1}
-          navigation
-          pagination={{ clickable: true }}
-          className="pb-16"
-        >
-          {tutorialSteps.map((step) => (
-            <SwiperSlide key={step.imgPath}>
-              <div className="mb-6 text-center">
-                <h1 className="mb-4 font-bold text-lg">{step.label}</h1>
-                <img
-                  src={step.imgPath}
-                  alt={step.label}
-                  className="mx-auto block h-auto w-[60vw] max-w-[400px]"
-                />
-              </div>
-            </SwiperSlide>
-          ))}
-        </Swiper>
-        <div className="text-center">
-          <Link href="/home" className="btn btn-primary w-full">
-            ホーム画面へ
-          </Link>
-        </div>
-      </div>
+    <div className="h-full ">
+      <Swiper
+        modules={[Navigation]}
+        spaceBetween={50}
+        slidesPerView={1}
+        navigation
+      >
+        {tutorialSteps.map((step) => (
+          <SwiperSlide key={step.imgPath}>
+            <div className="text-center ">
+              <h1 className="m-6 font-bold text-3xl">{step.label}</h1>
+              <img
+                src={step.imgPath}
+                alt={step.label}
+                className="mx-auto block h-auto w-[60vw] max-w-[400px] "
+              />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </div>
   );
 }

web/components/chat/RoomWindow.tsx

@@ -145,7 +145,7 @@ export function RoomWindow(props: Props) {
   );
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex flex-col">
       {room.matchingStatus !== "matched" && (
         <FloatingMessage
           message="この人とはマッチングしていません。"
@@ -157,7 +157,7 @@ export function RoomWindow(props: Props) {
         <RoomHeader room={room} />
       </div>
       {messages && messages.length > 0 ? (
-        <div className="flex-1 overflow-hidden p-2" ref={scrollDiv}>
+        <div className="h-full flex-1 overflow-hidden p-2" ref={scrollDiv}>
           {messages.map((m) =>
             m.isPicture ? (
               <img