レシピ一覧・編集画面の修正

frontend/src/components/AddByRecipeDialog.tsx

@@ -41,7 +41,7 @@ const AddByRecipeDialog = async ({
                 <div>
                     <strong>レシピ名:</strong> {recipe.recipeName}
                 </div>
-                <div>
+                {/* <div>
                     ({recipe.maxservings})
                 </div>
                 <div>
@@ -53,7 +53,7 @@ const AddByRecipeDialog = async ({
                             </li>
                         ))}
                     </ul>
-                </div>
+                </div> */}
                 
                 {/* レシピを追加する人数分を入力 */}
 

frontend/src/pages/AddRecipe.tsx

@@ -282,8 +282,6 @@ const AddRecipe: React.FC = () => {
 
           ))}</List>)}
 
-        
-
         <div style={{ position: "fixed", left: "80%", transform: 'translateX(-50%)', bottom: "10%" }}>
           <Box sx={{ textAlign: 'center' }}>
             <Typography variant="caption">材料を追加</Typography>
@@ -296,11 +294,7 @@ const AddRecipe: React.FC = () => {
         <div style={{ position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "64px", whiteSpace: 'nowrap' }}>
           <Button variant='contained' color="primary" onClick={handleSubmit} sx={{ marginRight: "1rem" }}>
             <SaveIcon sx={{ fontSize: "1.5rem", marginRight: "0.5rem" }} />
-            レシピを保存
-          </Button>
-          <Button variant='contained' color="primary" onClick={openNumOfPeopleDialog}>
-            <ListAltIcon sx={{ fontSize: "1.5rem", marginRight: "0.5rem" }} />
-            保存して買うものリストへ追加
+            保存
           </Button>
         </div>
 
@@ -344,49 +338,6 @@ const AddRecipe: React.FC = () => {
             setOpenAmountDialog(false);
           }} />
 
-        {/* 人数入力ダイアログ */}
-        <Dialog open={openNumOfPeapleDialog} onClose={() => setOpenNumOfPeapleDialog(false)} disableScrollLock={true}
-          style={{ width : '100%', position : 'fixed', left: '50%', transform: 'translateX(-50%)' }}
-        >
-          <Box display="flex" alignItems="center"
-            >
-            <DialogTitle sx={{ flexGrow: 1 }}>買うものリストへ追加</DialogTitle>
-          </Box>
-          <DialogContent>
-          <div>
-          {/* 人数入力フィールド */}
-          <TextField
-            margin="dense"
-            label="何人前"
-            fullWidth
-            value={numOfPeaple}
-            onChange={(e) => {
-              const value = e.target.value;
-              const parsedValue = parseInt(value, 10); // 数値に変換
-              if (/*!isNaN(parsedValue) && */ isNaN(parsedValue) || parsedValue >= 1) { //負数除外
-                setNumOfPeaple(parsedValue); // number型で保存
-              }
-            }}
-            sx={{ minWidth: "8px", width: "100%" }}
-            type="number"
-            inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
-
-          />
-        </div>
-        <FormControlLabel
-          control={<Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />}
-          label={<Typography sx={{ fontSize: '85%' }}>足りない食材のみ登録</Typography>}
-        />
-        </DialogContent>
-          <DialogActions>
-            <Button onClick={() => setOpenNumOfPeapleDialog(false)}>前の画面に戻る</Button>
-            <Button onClick={() => handleSubmitAndAddToBuy()} variant="contained"
-              style={{ width: '40%' }}
-            >
-              追加
-            </Button>
-          </DialogActions>
-        </Dialog>
       </div>
       </>
     }

frontend/src/pages/RecipeList.tsx

@@ -62,12 +62,12 @@ const RecipeList: React.FC = () => {
   const fetchAllRecipes = async () => {
     try {
       const recipes = await recipeApi.getAllRecipes();
+      console.log('All recipes:');
+      console.log(recipes);
       setAllRecipes(recipes);
-      console.log("マックス");
-      console.log(allRecipes.map(recipe => recipe.maxServings))
     } catch (error) {
+      console.error(`${RECIPE_ERRORS.FETCH_FAILED}:`, error);
       showErrorMessage(RECIPE_ERRORS.FETCH_FAILED);
-      // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
     }
   };
 
@@ -105,33 +105,42 @@ const RecipeList: React.FC = () => {
                   }
                   }
                 >
-                  {recipe.recipeName}
-                  {recipe.maxServings === 0 ?
-                    <FormGroup row>
-                      <CloseIcon sx={{ fontSize: "3vw", position: "absolute", right: '10%', transform: 'translateY(-50%)', color: "tomato" }} />
-                    </FormGroup> :
-                    <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"
-                      }}
+                  <ListItemText
+                    primary={recipe.recipeName}
                   />
 
+                  <ListItemSecondaryAction>
+                    
+                    {recipe.maxServings ?
+                      <Typography variant="body1" component="span" sx={{ marginRight: '1em', color: "mediumaquamarine" }}>
+                        {recipe.maxServings}人分
+                      </Typography>
+                    : <></>}
+
+                    {recipe.maxServings === 0 ?
+                      <Tooltip title="" sx={{ color: "tomato" }}>
+                        <IconButton edge="end" aria-label="">
+                          <CloseIcon />
+                        </IconButton>
+                      </Tooltip> :
+                      <Tooltip title="" sx={{ color: "mediumaquamarine" }}>
+                        <IconButton edge="end" aria-label="">
+                          <TaskAltIcon />
+                        </IconButton>
+                      </Tooltip>
+                    }
+
                     <Tooltip title="編集">
-                        <IconButton sx={{ position: "absolute", right: '3%', transform: 'translateY(-50%)' }} edge="end" aria-label="編集"
+                      <IconButton edge="end" aria-label="編集"
                         onClick={() => {
                           navigate('/addRecipe/' + recipe.recipeId);
                         }}
                       >
-                          <EditIcon style={{ fontSize: "2.5vw" }} />
+                        <EditIcon />
                       </IconButton>
                     </Tooltip>
-                    </FormGroup>
-                  }
+
+                  </ListItemSecondaryAction>
                 </ListItem>
               ))}
           </List>