useModalを必要なところだけにした

Author: KaichiManabe

web/app/chat/layout.tsx

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

web/app/friends/layout.tsx

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

web/app/layout.tsx

@@ -10,8 +10,6 @@ import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import BanLandscape from "~/components/BanLandscape";
 import { AlertProvider } from "~/components/common/alert/AlertProvider";
-import { ModalProvider } from "~/components/common/modal/ModalProvider";
-import AuthProvider from "~/firebase/auth/AuthProvider";
 
 const theme = createTheme({
   palette: {
@@ -47,10 +45,10 @@ export default function RootLayout({
             <React.StrictMode>
               <CssBaseline />
               <AlertProvider>
-                <ModalProvider>
-                  <BanLandscape />
-                  {children}
-                </ModalProvider>
+                {/* <ModalProvider> */}
+                <BanLandscape />
+                {children}
+                {/* </ModalProvider> */}
               </AlertProvider>
             </React.StrictMode>
           </SnackbarProvider>

web/app/search/layout.tsx

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