買うものリストへのレシピ追加画面の実装

frontend/src/components/AddByRecipeDialog.tsx

@@ -6,6 +6,14 @@ import {
   DialogActions,
   Button,
   Box,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction,
+  Typography,
+  TextField,
+  FormControlLabel,
+  Checkbox,
 } from '@mui/material';
 
 import { toBuyApi } from '../services/api';
@@ -13,6 +21,9 @@ import { recipeApi } from '../services/api';
 
 import CloseIcon from '@mui/icons-material/Close';
 import { RecipeDetailWithId, StuffNameAndAmount } from '../types/types';
+import { GENERAL_ERRORS } from '../constants/errorMessages';
+import { useNavigate } from 'react-router-dom';
+import { useMessage } from './MessageContext';
 
 const AddByRecipeDialog = ({
   openDialog,
@@ -45,9 +56,14 @@ const AddByRecipeDialog =  ({
     }
   }, [recipeId]);
 
+  const navigate = useNavigate();
+
+  //  エラーメッセージ表示
+  const { showErrorMessage, showSuccessMessage, showInfoMessage } = useMessage();
+
   return (
     recipe ?
-        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '300px', maxHeight: '80vh' } }}>
+      <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '80vw', maxHeight: '80vh' } }}>
         <DialogTitle sx={{ m: 0, p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
 
           買うものリストへ追加
@@ -60,58 +76,76 @@ const AddByRecipeDialog =  ({
           />
         </DialogTitle>
         <DialogContent dividers sx={{ padding: 2 }}>
-                <div>
-                    <strong>レシピ名:</strong> {recipe.recipeName}
-                </div>
-                <div>
+          <Typography variant="h3">
+            {recipe.recipeName}
+          </Typography>
+          <Typography>
             ({recipe.maxServings}人分在庫あり)
-                </div>
+          </Typography>
           <div>
             <strong>材料（1人前）:</strong>
-                    <ul>
+            <List>
               {recipe.stuffAndAmountArray.map((item, index) => (
-                            <li key={index}>
-                                {item.stuffName} - {item.amount}個
-                            </li>
+                <ListItem key={index} sx={{
+                  bgcolor: 'background.paper',
+                  mb: 1,
+                  borderRadius: 1,
+                  boxShadow: 1,
+                }}>
+                  <ListItemText primary={item.stuffName} />
+                  <ListItemSecondaryAction>
+                    <Typography variant="body1" component="span" sx={{ marginRight: '1em' }}>
+                      {`× ${item.amount}`}
+                    </Typography>
+                  </ListItemSecondaryAction>
+                </ListItem>
               ))}
-                    </ul>
+            </List>
           </div>
-                
-                {/* 在庫との差分を取るかのチェックボックス */}
           <div>
-                    <label>
-                        <input
-                            type="checkbox"
-                            checked={checked}
-                            onChange={(e) => setChecked(e.target.checked)}
-                        />
-                        在庫との差分を取る
-                    </label>
-                </div>
-
-                {/* レシピを追加する人数分を入力 */}
-                <div>
-                    <strong>人数:</strong>
-                    <input
+            {/* 人数入力フィールド */}
+            <TextField
               type="number"
-                        min="1"
+              margin="dense"
+              label="何人前"
+              fullWidth
+              // min={1}
               defaultValue={1}
+              value={numOfPeople}
               onChange={(e) => {
                 setNumOfPeaple(parseInt(e.target.value, 10));
               }}
+              sx={{ minWidth: "8px", width: "100%" }}
+              inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+
             />
           </div>
+          <FormControlLabel
+            control={<Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />}
+            label={<Typography>足りない食材のみ登録</Typography>}
+          />
 
           {/* 買うものリストに追加するボタン */}
-                <Box sx={{ mt: 2 }}>
+          <Box sx={{ mt: 2, textAlign: 'right' }}>
             <Button
               variant="contained"
               color="primary"
-                        onClick={() => {
-                                    toBuyApi.addByRecipe(recipe.recipeId, numOfPeople, checked);
+              onClick={async () => {
+                if (!numOfPeople || isNaN(numOfPeople)) {
+                  showErrorMessage('人数が正しく入力されていません。');
+                  return;
+                }
+                const finalAddResult = await toBuyApi.addByRecipe(recipe.recipeId, numOfPeople, checked);
                 setOpenDialog(false);
+                if (finalAddResult.data.length === 0) {
+                  showInfoMessage('必要な食材が在庫にあったのでリストには追加されませんでした！');
+                } else {
+                  showSuccessMessage('レシピが保存されて買うものリストに追加されました！');
+                }
+                navigate('/tasks');
               }}
             >
+              追加
             </Button>
           </Box>
         </DialogContent>

frontend/src/pages/AddRecipe.tsx

@@ -283,9 +283,9 @@ const AddRecipe: React.FC = () => {
           ))}</List>)}
 
         <div style={{ position: "fixed", left: "80%", transform: 'translateX(-50%)', bottom: "10%" }}>
-          <Box sx={{ textAlign: 'center' }}>
+          {/* <Box sx={{ textAlign: 'center' }}>
             <Typography variant="caption">材料を追加</Typography>
-          </Box>
+          </Box> */}
           <Fab color="primary" onClick={() => setOpenAddDialog(true)}>
             <AddIcon sx={{ fontSize: "1.5rem" }} />
           </Fab>

frontend/src/pages/RecipeList.tsx

@@ -155,6 +155,16 @@ const RecipeList: React.FC = () => {
           checked = {checked} setChecked={setChecked}
         />
       }
+
+      {/* 追加ボタン - 画面下部に固定表示 */}
+      <Box className="plusButtonWrapper">
+        <Fab color="primary" onClick={() => navigate('/addRecipe/')} className="plusButton">
+          <AddIcon />
+        </Fab>
+        {/* <Typography className="plusButtonLabel">
+          レシピの追加
+        </Typography> */}
+      </Box>
     </>
   );
 };