From 9cd959f31aa47398d93993a0d9ee49a9c60397ae Mon Sep 17 00:00:00 2001
From: furutani-k <141975947+furutani-k@users.noreply.github.com>
Date: Thu, 14 Dec 2023 19:49:09 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=A2=E3=83=90=E3=82=A4=E3=83=AB=E7=94=A8?=
=?UTF-8?q?=E3=81=AE=E6=8A=95=E7=A8=BF=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD?=
=?UTF-8?q?=E3=82=B0=E5=91=BC=E3=81=B3=E5=87=BA=E3=81=97=E3=83=9C=E3=82=BF?=
=?UTF-8?q?=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
スタイル調整
---
.../elements/MobileOpenPostDialogButton.tsx | 69 +++++++++++++++++++
src/app/(menu)/layout.tsx | 3 +
src/app/_components/post/PostDialog.tsx | 4 +-
src/app/_components/post/PostForm.tsx | 9 ++-
src/app/_components/post/elements/Editor.tsx | 14 +++-
5 files changed, 94 insertions(+), 5 deletions(-)
create mode 100644 src/app/(menu)/_components/menu/elements/MobileOpenPostDialogButton.tsx
diff --git a/src/app/(menu)/_components/menu/elements/MobileOpenPostDialogButton.tsx b/src/app/(menu)/_components/menu/elements/MobileOpenPostDialogButton.tsx
new file mode 100644
index 00000000..89a1b081
--- /dev/null
+++ b/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 && (
+
+ setOpenDialog(true)}
+ >
+
+
+
+ setOpenDialog(false)}
+ />
+
+ )}
+
+ );
+}
diff --git a/src/app/(menu)/layout.tsx b/src/app/(menu)/layout.tsx
index eb8da02f..9b1cab43 100644
--- a/src/app/(menu)/layout.tsx
+++ b/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 }) {
{children}
+
+
);
}
diff --git a/src/app/_components/post/PostDialog.tsx b/src/app/_components/post/PostDialog.tsx
index 105802fd..1e1b5246 100644
--- a/src/app/_components/post/PostDialog.tsx
+++ b/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 (