メッセージコンポーネントを実装

frontend/src/components/MessageAlert.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Snackbar, Alert, AlertColor } from '@mui/material';
+
+interface MessageAlertProps {
+  open: boolean;
+  message: string;
+  severity: AlertColor; // 'error' | 'warning' | 'info' | 'success'
+  onClose: (event?: React.SyntheticEvent | Event, reason?: string) => void;
+  duration?: number;
+}
+
+const MessageAlert: React.FC<MessageAlertProps> = ({
+  open,
+  message,
+  severity,
+  onClose,
+  duration = 6000,
+}) => {
+  return (
+    <Snackbar open={open} autoHideDuration={duration} onClose={onClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} sx={{bottom: '120px'}}>
+      <Alert onClose={onClose} severity={severity} sx={{ width: '100%' }}>
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default MessageAlert;

frontend/src/pages/AddRecipe.tsx

@@ -25,7 +25,8 @@ import {
   Select,
   FormControl,
   InputLabel,
-  ListItemIcon
+  ListItemIcon,
+  AlertColor
 } from '@mui/material';
 import {
   Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
@@ -36,6 +37,7 @@ import { StuffAndCategoryAndAmount } from '../types/types';
 import EditAmountDialog from '../components/EditAmountDialog';
 import { recipeApi, toBuyApi } from '../services/api';
 import { useNavigate, useParams } from 'react-router-dom';
+import MessageAlert from '../components/MessageAlert';
 
 const AddRecipe: React.FC = () => {
   const { recipeId: recipeIdStr } = useParams();
@@ -43,6 +45,20 @@ const AddRecipe: React.FC = () => {
 
   const navigate = useNavigate();
 
+  //  メッセージ
+  const [_openMessage, _setOpenMessage] = useState(false);
+  const [_messageText, _setMessageText] = useState('');
+  const [_messageType, _setMessageType] = useState<AlertColor>('info');
+  const _showMessage = (message: string, severity: AlertColor) => {
+    _setOpenMessage(true);
+    _setMessageText(message);
+    _setMessageType(severity);
+  }
+  const showErrorMessage = (message: string) => _showMessage(message, 'error');
+  const showWarningMessage = (message: string) => _showMessage(message, 'warning');
+  const showInfoMessage = (message: string) => _showMessage(message, 'info');
+  const showSuccessMessage = (message: string) => _showMessage(message, 'success');
+
   //  編集時，既存情報を読み込んだかどうか
   const [recipeLoaded, setRecipeLoaded] = useState(false);
   //  料理名，説明
@@ -75,12 +91,12 @@ const AddRecipe: React.FC = () => {
   const handleSaveRecipe = async () => {
 
     if (!recipeName) {
-      alert('レシピ名が入力されていません！')
+      showErrorMessage('レシピ名が入力されていません！')
       return false;
     }
 
     if (!items.length) {
-      alert('材料が追加されていません！')
+      showErrorMessage('材料が追加されていません！')
       return false;
     }
 
@@ -102,7 +118,7 @@ const AddRecipe: React.FC = () => {
         stuffAndAmountArray: items,
       })
     } catch {
-      alert('レシピの送信に失敗しました。既に同じ名前の料理が存在する可能性があります。');
+      showErrorMessage('レシピの送信に失敗しました。同じ料理名が存在する可能性があります。');
       return false;
     }
 
@@ -130,7 +146,10 @@ const AddRecipe: React.FC = () => {
   }, []);
 
   return (
-    (recipeId && !recipeLoaded)
+    <>
+    <MessageAlert open={_openMessage} message={_messageText} severity={_messageType} onClose={() => _setOpenMessage(false)}></MessageAlert>
+    
+    {(recipeId && !recipeLoaded)
       ? <p>読み込み中...</p>
       :
       <Box>
@@ -237,6 +256,8 @@ const AddRecipe: React.FC = () => {
           }} />
 
       </Box>
+    }
+    </>
   );
 };