新しい料理を追加ボタンのUI変更、用意できる人数によって表示内容を変更

frontend/src/pages/RecipeList.tsx

@@ -27,7 +27,7 @@ import {
   InputLabel
 } from '@mui/material';
 import {
-  Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
+  Add as AddIcon, Delete as DeleteIcon, Edit as EditIcon, ShoppingBasket as ShoppingBasketIcon,
   SoupKitchen as SoupKitchenIcon, Close as CloseIcon, TaskAlt as TaskAltIcon
 } from '@mui/icons-material';
 import { ToBuy, Stuff, RecipeWithId, RecipeDetail } from '../types/types';
@@ -39,8 +39,14 @@ const RecipeList: React.FC = () => {
 
   const { showErrorMessage } = useMessage();
 
+  const EMPTY_RECIPEWITHID =  {
+    recipeName: '',// レシピ名
+    summary: '',// レシピ概要
+    recipeId: 0, // レシピID
+    maxServings: 0 // 最大調理可能数
+  }
   // すべての料理リスト
-  const [allRecipes, setAllRecipes] = useState<RecipeWithId[]>();
+  const [allRecipes, setAllRecipes] = useState<RecipeWithId[]>([EMPTY_RECIPEWITHID, EMPTY_RECIPEWITHID]);
 
   const openRecipeById = (recipeId: number) => {
     navigate('/addRecipe/' + recipeId);
@@ -51,7 +57,7 @@ const RecipeList: React.FC = () => {
       const recipes = await recipeApi.getAllRecipes();
       setAllRecipes(recipes);
       console.log("マックス");
-      console.log(recipes.map(recipe => recipe.maxServings))
+      console.log(allRecipes.map(recipe => recipe.maxServings))
     } catch (error) {
       showErrorMessage("レシピの取得に失敗しました。");
       // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
@@ -92,7 +98,39 @@ const RecipeList: React.FC = () => {
                 onClick={() => openRecipeById(recipe.recipeId)}
               >
                 {recipe.recipeName}
-                {recipe.maxServings === 0 && <CloseIcon />}
+                {recipe.maxServings === 0 && <FormGroup row><CloseIcon 
+                  style={{fontSize:"3vw", position: "absolute", right:'10%', transform: 'translateY(-50%)', color: "tomato"}}
+                />
+                <Tooltip title="編集">
+                      <IconButton sx={{ position: "absolute", right:'3%', transform: 'translateY(-50%)' }} edge="end" aria-label="編集"
+                        onClick={() => {
+                          navigate('/addRecipe/' + recipe.recipeId);
+                        }}
+                      >
+                        <EditIcon style={{fontSize:"2.5vw"}}/>
+                      </IconButton>
+                    </Tooltip>
+                </FormGroup>}
+                {recipe.maxServings !== 0 && <FormGroup row>
+                  <text style={{
+                    fontSize:"2vw", position: "absolute", right:'18%', transform: 'translateY(-52%)', color: "mediumaquamarine"}}>
+                    {recipe.maxServings}人分
+                  </text>
+                  <TaskAltIcon style={{
+                    fontSize:"3vw", position: "absolute", right:'10%', transform: 'translateY(-50%)', color: "mediumaquamarine"}} 
+                  />
+                  {/* 買い物リスト：数量変更ボタン */}
+                    <Tooltip title="編集">
+                      <IconButton sx={{ position: "absolute", right:'3%', transform: 'translateY(-50%)' }} edge="end" aria-label="編集"
+                        onClick={() => {
+                          navigate('/addRecipe/' + recipe.recipeId);
+                        }}
+                      >
+                        <EditIcon style={{fontSize:"2.5vw"}}/>
+                      </IconButton>
+                    </Tooltip>
+                  </FormGroup>
+                  }
               </Button>
             </FormGroup>
             // </ListItem>
@@ -100,7 +138,19 @@ const RecipeList: React.FC = () => {
           {/* </List> */}
         </div>
         <div style={{ width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "64px" }}>
-          <Button variant='contained' sx={{
+          <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
+                  <Typography variant="caption" color="textSecondary">
+                    新しい料理を追加
+                  </Typography>
+                </Box>
+          <Fab
+                  color="primary"
+                  sx={{ position: 'fixed', bottom: 90, left: '80%', transform: 'translateX(-50%)' }}
+                  onClick={() => navigate('/addRecipe')}
+                >
+                  <AddIcon />
+                </Fab>
+          {/* <Button variant='contained' sx={{
             width: "60%", height: "60px",
             fontSize: "32px", left: "50%", transform: 'translateX(-50%)'
           }}
@@ -108,7 +158,7 @@ const RecipeList: React.FC = () => {
             onClick={() => navigate('/addRecipe')}
           >
             新しい料理を追加
-          </Button>
+          </Button> */}
         </div>
       </Box>