モバイル用の投稿ダイアログ呼び出しボタンを追加

スタイル調整

src/app/(menu)/_components/menu/elements/MobileOpenPostDialogButton.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { IconButton } from '@/app/_components/button/IconButton';
+import PostDialog from '@/app/_components/post/PostDialog';
+import { useProfile } from '@/swr/client/auth';
+import { Send } from '@mui/icons-material';
+import { Box, styled } from '@mui/material';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+
+const StyledButton = styled(IconButton)`
+  position: fixed;
+
+  bottom: calc(
+    ${({ theme }) => theme.mixins.bottomMenu.height}px +
+      env(safe-area-inset-bottom) + 1rem
+  );
+  right: 1rem;
+
+  height: auto;
+  width: 3.5rem;
+  aspect-ratio: 1 / 1;
+
+  > svg {
+    width: 2rem;
+    height: auto;
+  }
+
+  ${({ theme }) => theme.breakpoints.up('tablet')} {
+    display: none;
+  }
+
+  /* FIXME: IconButtonのvariant=containedで色つかない問題が解消したら消す */
+  color: white;
+  background-color: #007bbb;
+  :hover {
+    background-color: #007bbb;
+  }
+`;
+
+export default function MobileOpenPostDialogButton() {
+  const [getOpenDialog, setOpenDialog] = useState(false);
+
+  const renderablePaths = ['/home', '/search', '/notifications'];
+  const renderable = renderablePaths.includes(usePathname() as string);
+  const { data: profile } = useProfile();
+
+  return (
+    <>
+      {profile && renderable && (
+        <Box>
+          <StyledButton
+            variant="contained"
+            color="primary"
+            onClick={() => setOpenDialog(true)}
+          >
+            <Send />
+          </StyledButton>
+
+          <PostDialog
+            fullScreen
+            open={getOpenDialog}
+            close={() => setOpenDialog(false)}
+          />
+        </Box>
+      )}
+    </>
+  );
+}

src/app/(menu)/layout.tsx

@@ -4,6 +4,7 @@ import { styled } from '@mui/material';
 import SideMenu from '@/app/(menu)/_components/menu/SideMenu';
 import BottomMenu from '@/app/(menu)/_components/menu/BottomMenu';
 import { ReactNode } from 'react';
+import MobileOpenPostDialogButton from '@/app/(menu)/_components/menu/elements/MobileOpenPostDialogButton';
 
 const Layout = styled('div')`
   display: grid;
@@ -37,6 +38,8 @@ export default function MenuLayout({ children }: { children: ReactNode }) {
       <SideMenu />
       {children}
       <BottomMenu />
+
+      <MobileOpenPostDialogButton />
     </Layout>
   );
 }

src/app/_components/post/PostDialog.tsx

@@ -40,11 +40,12 @@ const StyledDialogActions = styled(DialogActions)`
 `;
 
 interface Props {
+  fullScreen?: boolean;
   open: boolean;
   close: () => void;
 }
 
-export default function PostDialog({ open, close }: Props) {
+export default function PostDialog({ fullScreen, open, close }: Props) {
   const [getContent, setContent] = useState('');
   const [getShowConfirmCloseDialog, setShowConfirmCloseDialog] =
     useState(false);
@@ -59,6 +60,7 @@ export default function PostDialog({ open, close }: Props) {
   return (
     <Box>
       <Dialog
+        fullScreen={fullScreen}
         open={open}
         onClose={() => (getContent.length ? confirmAndClose() : close())}
       >

src/app/_components/post/PostForm.tsx

@@ -16,18 +16,23 @@ const VFlex = styled(Flex)`
 `;
 
 const Wrapper = styled(VFlex)`
-  height: auto;
+  height: 100%;
   min-height: auto;
 
   width: 600px;
 
-  ${({ theme }) => theme.breakpoints.down('laptop')} {
+  ${({ theme }) => theme.breakpoints.down('desktop')} {
     width: 450px;
   }
+
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    width: 100%;
+  }
 `;
 
 const HFlex = styled(Flex)`
   flex-direction: row;
+  height: 100%;
 `;
 
 const Spacer = styled(Box)<{ size?: number | string }>(({ size }) => {

src/app/_components/post/elements/Editor.tsx

@@ -1,8 +1,18 @@
 'use client';
 
-import { Input, InputProps } from '@mui/material';
+import { Input, InputProps, styled } from '@mui/material';
 import { useEffect, useRef } from 'react';
 
+const StyledInput = styled(Input)`
+  height: 100%;
+
+  textarea {
+    // inputPropsのminRowsに応じてタグに直接スタイル設定される
+    height: 100% !important;
+    vertical-align: top;
+  }
+`;
+
 type OmitKeys = 'multilne' | 'placeholder' | 'value' | 'onChange' | 'fullWidth';
 
 interface Props {
@@ -27,7 +37,7 @@ const Editor = ({
   }, [inputRef, focusEditor]);
 
   return (
-    <Input
+    <StyledInput
       inputRef={inputRef}
       multiline
       placeholder="いまどうしてる？"