From cf5e7b3dddff5775ac18c49339d3f204ac02700a Mon Sep 17 00:00:00 2001
From: "masato.fujita" <masato.fujita@ivis.co.jp>
Date: Thu, 19 Jun 2025 11:54:56 +0900
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E3=81=97=E3=81=84=E6=96=99=E7=90=86?=
 =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?UI=E5=A4=89=E6=9B=B4=E3=80=81=E7=94=A8=E6=84=8F=E3=81=A7?=
 =?UTF-8?q?=E3=81=8D=E3=82=8B=E4=BA=BA=E6=95=B0=E3=81=AB=E3=82=88=E3=81=A3?=
 =?UTF-8?q?=E3=81=A6=E8=A1=A8=E7=A4=BA=E5=86=85=E5=AE=B9=E3=82=92=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/RecipeList.tsx | 62 ++++++++++++++++++++++++++++---
 1 file changed, 56 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/RecipeList.tsx b/frontend/src/pages/RecipeList.tsx
index 08ec897..89ec4cc 100644
--- a/frontend/src/pages/RecipeList.tsx
+++ b/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>