ヘッダー (TopBar) の値をグローバルに書き換える

web/app/chat/layout.tsx

@@ -1,19 +1,17 @@
-import BottomBar from "~/components/BottomBar";
-import Header from "~/components/Header";
+"use client";
+
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+import { useSetHeaderFooter } from "~/hooks/useLayoutHeaderFooter";
 
 export default function Layout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  useSetHeaderFooter({ title: "チャット" }, { activeTab: "3_chat" });
   return (
-    <>
-      <Header title="チャット" />
-      <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
-      </NavigateByAuthState>
-      <BottomBar activeTab="3_chat" />
-    </>
+    <NavigateByAuthState type="toLoginForUnauthenticated">
+      <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
+    </NavigateByAuthState>
   );
 }

web/app/faq/page.tsx

@@ -1,47 +1,43 @@
 "use client";
 
-import Header from "~/components/Header";
-import TopNavigation from "~/components/common/TopNavigation";
+import { useSetHeaderFooter } from "~/hooks/useLayoutHeaderFooter";
 
 export default function FAQ() {
+  useSetHeaderFooter({ title: "よくある質問" }, { activeTab: "none" });
   return (
-    <>
-      <Header title="よくある質問" />
-      <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>
+    <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">
+        <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:
-              収集した個人情報は、サインインおよびサービス提供の目的にのみ使用され、他の目的には使用されません。
-            </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>
+          <p className="mb-4 leading-7">
+            <strong>Q: 東大公式のアプリですか？</strong>
+            <br />
+            A:
+            本サービスはut.code();によって運営されており、東京大学は運営に関与しておりません
+          </p>
         </div>
       </div>
-    </>
+    </div>
   );
 }

web/app/friends/layout.tsx

@@ -1,19 +1,17 @@
-import BottomBar from "~/components/BottomBar";
-import Header from "~/components/Header";
+"use client";
+
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+import { useSetHeaderFooter } from "~/hooks/useLayoutHeaderFooter";
 
 export default function Layout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  useSetHeaderFooter({ title: "フレンド" }, { activeTab: "1_friends" });
   return (
-    <>
-      <Header title="フレンド" />
-      <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
-      </NavigateByAuthState>
-      <BottomBar activeTab="1_friends" />
-    </>
+    <NavigateByAuthState type="toLoginForUnauthenticated">
+      <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
+    </NavigateByAuthState>
   );
 }

web/app/home/layout.tsx

@@ -1,19 +1,17 @@
-import BottomBar from "~/components/BottomBar";
-import Header from "~/components/Header";
+"use client";
+
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+import { useSetHeaderFooter } from "~/hooks/useLayoutHeaderFooter";
 
 export default function Layout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  useSetHeaderFooter({}, { activeTab: "0_home" });
   return (
-    <>
-      <Header />
-      <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="h-full pt-12 pb-12">{children}</div>
-      </NavigateByAuthState>
-      <BottomBar activeTab="0_home" />
-    </>
+    <NavigateByAuthState type="toLoginForUnauthenticated">
+      <div className="h-full pt-12 pb-12">{children}</div>
+    </NavigateByAuthState>
   );
 }

web/app/layout.tsx

@@ -9,6 +9,12 @@ import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import BanLandscape from "~/components/BanLandscape";
+import BottomBar from "~/components/BottomBar";
+import {
+  HeaderFooterProvider,
+  useHeaderFooterInternal,
+} from "~/components/HeaderFooterContext";
+import TopBar from "~/components/TopBar";
 import { AlertProvider } from "~/components/common/alert/AlertProvider";
 import { ModalProvider } from "~/components/common/modal/ModalProvider";
 import AuthProvider from "~/firebase/auth/AuthProvider";
@@ -50,7 +56,9 @@ export default function RootLayout({
                 <AlertProvider>
                   <ModalProvider>
                     <BanLandscape />
-                    {children}
+                    <HeaderFooterProvider>
+                      <MainLayout>{children}</MainLayout>
+                    </HeaderFooterProvider>
                   </ModalProvider>
                 </AlertProvider>
               </AuthProvider>
@@ -61,3 +69,14 @@ export default function RootLayout({
     </html>
   );
 }
+
+function MainLayout({ children }: { children: React.ReactNode }) {
+  const { headerProps, bottomBarProps } = useHeaderFooterInternal();
+  return (
+    <>
+      <TopBar {...headerProps} />
+      {children}
+      <BottomBar {...bottomBarProps} />
+    </>
+  );
+}

web/app/login/page.tsx

@@ -6,13 +6,13 @@ import { useRouter } from "next/navigation";
 import { useSnackbar } from "notistack";
 import * as user from "~/api/user";
 import { getByGUID } from "~/api/user";
-import Header from "~/components/Header";
 import { auth } from "~/firebase/config";
 import "./style.css";
 import { useState } from "react";
 import { CourseMateIcon } from "~/components/common/CourseMateIcon";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+import { useSetHeaderFooter } from "~/hooks/useLayoutHeaderFooter";
 
 const provider = new GoogleAuthProvider();
 const ALLOW_ANY_MAIL_ADDR =
@@ -125,9 +125,10 @@ export default function Login() {
     return <FullScreenCircularProgress />;
   }
 
+  useSetHeaderFooter({ info: true }, { activeTab: "none" });
+
   return (
     <NavigateByAuthState type="toHomeForAuthenticated">
-      <Header info />
       <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" />

web/app/search/layout.tsx

@@ -1,19 +1,17 @@
-import BottomBar from "~/components/BottomBar";
-import Header from "~/components/Header";
+"use client";
+
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+import { useSetHeaderFooter } from "~/hooks/useLayoutHeaderFooter";
 
 export default function Layout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  useSetHeaderFooter({ title: "検索" }, { activeTab: "2_search" });
   return (
-    <>
-      <Header title="検索" />
-      <NavigateByAuthState type="toLoginForUnauthenticated">
-        <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
-      </NavigateByAuthState>
-      <BottomBar activeTab="2_search" />
-    </>
+    <NavigateByAuthState type="toLoginForUnauthenticated">
+      <div className="h-full overflow-y-auto pt-12 pb-12">{children}</div>
+    </NavigateByAuthState>
   );
 }

web/app/settings/aboutUs/page.tsx

@@ -1,13 +1,18 @@
+"use client";
+
 import { FaGithub, FaXTwitter } from "react-icons/fa6";
 import { MdLanguage } from "react-icons/md";
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
-import TopNavigation from "~/components/common/TopNavigation";
+import { useSetHeaderFooter } from "~/hooks/useLayoutHeaderFooter";
 
 export default function AboutUs() {
+  useSetHeaderFooter(
+    { title: "About Us", backButtonPath: "/settings" },
+    { activeTab: "4_settings" },
+  );
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <div className="relative flex flex-col p-2">
-        <TopNavigation title="About Us" />
         <div className="w-full p-8">
           <h1 className="mb-2 text-left text-xl underline">
             CourseMateについて

web/app/settings/card/page.tsx

@@ -7,7 +7,7 @@ import { useAboutMe } from "~/api/user";
 import { Card } from "~/components/Card";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
-import TopNavigation from "~/components/common/TopNavigation";
+import { useSetHeaderFooter } from "~/hooks/useLayoutHeaderFooter";
 
 export default function SettingsProfile() {
   const { state } = useAboutMe();
@@ -18,6 +18,11 @@ export default function SettingsProfile() {
 
   if (error) throw error;
 
+  useSetHeaderFooter(
+    { title: "カードのプレビュー", backButtonPath: "/settings" },
+    { activeTab: "4_settings" },
+  );
+
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       {loading ? (
@@ -26,7 +31,6 @@ export default function SettingsProfile() {
         <p>データがありません。</p>
       ) : (
         <div className="flex flex-col p-2">
-          <TopNavigation title="あなたのカード" />
           <div className="flex flex-1 flex-col items-center">
             <div className="flex w-full justify-end">
               <Link

web/app/settings/contact/page.tsx

@@ -1,11 +1,16 @@
+"use client";
+
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
-import TopNavigation from "~/components/common/TopNavigation";
+import { useSetHeaderFooter } from "~/hooks/useLayoutHeaderFooter";
 
 export default function Contact() {
+  useSetHeaderFooter(
+    { title: "お問い合わせ", backButtonPath: "/settings" },
+    { activeTab: "4_settings" },
+  );
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <div className="flex flex-col p-2">
-        <TopNavigation title="お問い合わせ" />
         <div className="w-full p-8 text-left">
           <p className="mb-4 leading-7">
             ご利用いただきありがとうございます。サービスに関するご意見やバグ報告がございましたら、以下のリンクからお問い合わせください。皆様のフィードバックは、サービスの改善に役立てさせていただきます。

web/app/settings/courses/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import Link from "next/link";
 import { useAboutMe } from "~/api/user";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import EditableCoursesTable from "~/components/course/EditableCoursesTable";
+import { useSetHeaderFooter } from "~/hooks/useLayoutHeaderFooter";
 
 export default function EditCourses() {
   const { state } = useAboutMe();
@@ -13,9 +13,13 @@ export default function EditCourses() {
 
   if (error) throw error;
 
+  useSetHeaderFooter(
+    { title: "授業", backButtonPath: "/settings" },
+    { activeTab: "4_settings" },
+  );
+
   return (
     <div className="my-0 flex h-full max-w-[350] flex-col p-2 text-center">
-      <h1 className="mb-2 text-xl">授業編集</h1>
       {loading ? (
         <FullScreenCircularProgress />
       ) : data ? (
@@ -25,11 +29,6 @@ export default function EditCourses() {
       ) : (
         <p>データがありません。</p>
       )}
-      <div className="mt-5 flex justify-between">
-        <Link href="/settings" className="btn">
-          設定画面に戻る
-        </Link>
-      </div>
     </div>
   );
 }

web/app/settings/delete/page.tsx

@@ -4,8 +4,8 @@ import { useRouter } from "next/navigation";
 import { useSnackbar } from "notistack";
 import { useCallback } from "react";
 import { deleteAccount } from "~/api/user";
-import TopNavigation from "~/components/common/TopNavigation";
 import { useAlert } from "~/components/common/alert/AlertProvider";
+import { useSetHeaderFooter } from "~/hooks/useLayoutHeaderFooter";
 
 export default function DeleteAccount() {
   const router = useRouter();
@@ -33,9 +33,13 @@ export default function DeleteAccount() {
     });
   }, [showAlert, enqueueSnackbar, router.push]);
 
+  useSetHeaderFooter(
+    { title: "アカウント削除", backButtonPath: "/settings" },
+    { activeTab: "4_settings" },
+  );
+
   return (
     <div className="flex flex-col p-2">
-      <TopNavigation title="アカウント削除" />
       <div className="w-full p-8 text-left">
         <p className="mb-4 text-center text-red-500 leading-7">
           アカウントを削除した場合、マッチングやチャットに関する情報の一切が削除されます。