Merge branch 'dev' of https://github.com/210on/infox into dev

src/services/ViewMemo.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { Box, Typography } from "@mui/material";
+import { useNavigate, useParams } from 'react-router-dom';
+import { Box, Button, Typography } from "@mui/material";
 import { searchMemoById } from "../services/searchMemo";
 import { useRecoilValue } from 'recoil';
 import { userAtom } from '../states/userAtom';
@@ -15,6 +15,11 @@ export function ViewMemo(): JSX.Element {
   const [memo, setMemo] = useState<Memo | null>(null);
   const safeContent = memo ? DOMPurify.sanitize(memo.content) : "";
 
+  const navigate = useNavigate();
+  const backToMemoList = () => {
+    navigate("/memolist");
+  };
+
   useEffect(() => {
     const fetchMemo = async () => {
       if (id && loginUser.userId) {
@@ -40,12 +45,21 @@ export function ViewMemo(): JSX.Element {
   }
 
   return (
+    <>
     <Box sx={{ padding: "20px" }}>
       <Typography variant="h2">{memo.title}</Typography>
       <Box sx={{ marginTop: "20px" }}>
         <div dangerouslySetInnerHTML={{ __html: safeContent }} />
         {/* タグや作成日時など、他の情報もここに表示できるよ */}
       </Box>
     </Box>
+  <Button
+    variant="outlined"
+    onClick={() => backToMemoList()}
+    sx={{ marginLeft: 2 }}
+  >
+    Back
+  </Button>
+  </>
   );
 }