画面のレイアウト調整、数値入力のバリデーション強化

frontend/src/components/AddByRecipeDialog.tsx

@@ -76,7 +76,7 @@ const AddByRecipeDialog = ({
           />
         </DialogTitle>
         <DialogContent dividers sx={{ padding: 2 }}>
-          <Typography sx={{fontSize: '1.5rem'}}>
+          <Typography sx={{fontSize: '1.6rem'}}>
             {recipe.recipeName}
           </Typography>
           <Typography sx={{mt: 2, mb: 2}}>
@@ -108,13 +108,20 @@ const AddByRecipeDialog = ({
               type="number"
               margin="dense"
               label="何人前"
-              className="numberField"
+              fullWidth
               defaultValue={1}
               value={numOfPeople}
               onChange={(e) => {
-                // const num = parseInt(e.target.value, 10);
+                const value = e.target.value;
-                // setNumOfPeaple(!isNaN(num) ? num : '');
+                const parsedValue = parseInt(value, 10); // 数値に変換
-                setNumOfPeaple(e.target.value);
+                if (/*!isNaN(parsedValue) && */ isNaN(parsedValue) || parsedValue >= 1) { //負数除外
+                  setNumOfPeaple(value);
+                }
+              }}
+              onKeyDown={(e) => {
+                if (e.key === '-' || e.key === 'e' || e.key === 'E') {
+                  e.preventDefault();
+                }
               }}
               inputProps={{ inputMode: "numeric", min: 1, pattern: "[0-9]*" }} // ここで整数のみ許可
 
@@ -132,7 +139,7 @@ const AddByRecipeDialog = ({
               color="primary"
               onClick={async () => {
                 const num = parseInt(numOfPeople, 10);
-                if (!num || isNaN(num)) {
+                if (!num || isNaN(num) || num <= 0) {
                   showErrorMessage('人数が正しく入力されていません。');
                   return;
                 }

frontend/src/components/AddStuffAmountDialog.tsx

@@ -136,6 +136,11 @@ const AddStuffAmountDialog = ({
                 setNewItem({ ...newItem, amount: parsedValue }); // number型で保存
               }
             }}
+            onKeyDown={(e) => {
+              if (e.key === '-' || e.key === 'e' || e.key === 'E') {
+                e.preventDefault();
+              }
+            }}
             className="numberField"
             type="number"
             inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可

frontend/src/components/DeleteStuffDialog.tsx

@@ -4,6 +4,7 @@ import {
   DialogContent,
   Button,
   Typography,
+  DialogActions,
 } from '@mui/material';
 
 const DeleteStuffDialog = ({
@@ -18,7 +19,7 @@ const DeleteStuffDialog = ({
   onSubmit: () => void,
 }) => {
 
-{/* 削除ダイアログ */}
+  {/* 削除ダイアログ */ }
   return <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}
     fullWidth
     maxWidth="sm"
@@ -26,15 +27,16 @@ const DeleteStuffDialog = ({
   >
     <DialogTitle>食材の削除</DialogTitle>
     <DialogContent>
-              <Typography variant="h4">{stuffName}を削除します。</Typography>
+      <Typography sx={{fontSize: '1.6rem'}}>{stuffName} を削除します。</Typography>
       <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
-              <Button onClick={() => setOpenDialog(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
+    </DialogContent>
+    <DialogActions>
+      <Button onClick={() => setOpenDialog(false)} >キャンセル</Button>
       <Button variant="contained" color="error" onClick={() => {
         onSubmit();
         setOpenDialog(false); // 削除処理後にダイアログを閉じる
-              }}
+      }}>削除</Button>
-                style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
+    </DialogActions>
-        </DialogContent>
   </Dialog>
 
 }

frontend/src/pages/RecipeList.tsx

@@ -120,20 +120,20 @@ const RecipeList: React.FC = () => {
                     : <></>}
 
                     {recipe.maxServings === 0 ?
-                      <Tooltip title="" sx={{ color: "tomato" }}>
+                      <Tooltip title="">
-                        <IconButton edge="end" aria-label="">
+                        <IconButton sx={{ mr: 0, ml: 0, color: "tomato" }} edge="end" aria-label="">
                           <CloseIcon />
                         </IconButton>
                       </Tooltip> :
-                      <Tooltip title="" sx={{ color: "mediumaquamarine" }}>
+                      <Tooltip title="">
-                        <IconButton edge="end" aria-label="">
+                        <IconButton sx={{ mr: 0, ml: 0, color: "mediumaquamarine" }} edge="end" aria-label="">
                           <TaskAltIcon />
                         </IconButton>
                       </Tooltip>
                     }
 
-                    <Tooltip title="編集" sx={{ml: 1}}>
+                    <Tooltip title="編集" sx={{}}>
-                      <IconButton edge="end" aria-label="編集"
+                      <IconButton sx={{ mr: 0, ml: 0 }} edge="end" aria-label="編集"
                         onClick={() => {
                           navigate('/addRecipe/' + recipe.recipeId);
                         }}

frontend/src/pages/StockPage.tsx

@@ -453,6 +453,7 @@ const StockPage: React.FC = () => {
                   margin="normal"
                   name="amount"
                   type="number"
+                  fullWidth 
                   className="numberField"
                   value={editStock.amount}
                   onChange={handleChange}
@@ -470,7 +471,7 @@ const StockPage: React.FC = () => {
                   margin="normal"
                   name="buyAmount"
                   type="number"
-                  className="numberField"
+                  fullWidth
                   value={editStock.buyAmount}
                   onChange={handleChange}
                   inputProps={{ min: 0 }}
@@ -484,10 +485,10 @@ const StockPage: React.FC = () => {
                 {/* 購入価格フィールド */}
                 <TextField
                   label="購入価格"
-                  fullWidth
                   margin="normal"
                   name="price"
                   type="number"
+                  fullWidth
                   value={editStock.price}
                   onChange={handleChange}
                   inputProps={{ min: 0 }}
@@ -511,19 +512,18 @@ const StockPage: React.FC = () => {
 
                 {/* 購入日・賞味期限入力 */}
                 <BuyExpDateSelect newStock={editStock} setNewStock={({ buyDate, expDate }) => setEditStock({ ...editStock, buyDate, expDate })} />
-
+              </>
-                <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
+            )}
+          </DialogContent>
+          <DialogActions>
                   <Button onClick={() => { setOpenEditDialog(false); setSelectedRow(null); }}>
                     キャンセル
                   </Button>
-                  <Button variant="contained" color="success" onClick={handleApplyChanges} sx={{ mt: 3, mb: 2 }}>
+                  <Button variant="contained" color="success" onClick={handleApplyChanges}>
                     変更を適用
                   </Button>
-                  <Button variant="contained" color="error" onClick={() => setOpenDeleteDialog(true)} sx={{ mt: 3, mb: 2 }}>削除</Button>
+                  <Button variant="contained" color="error" onClick={() => setOpenDeleteDialog(true)}>削除</Button>
-                </Box>
+            </DialogActions>
-              </>
-            )}
-          </DialogContent>
         </Dialog>
 
         {/* 削除ダイアログ */}
@@ -613,10 +613,10 @@ const StockPage: React.FC = () => {
               {!openCategory[category] ? <ArrowDownIcon color="primary" /> : <ArrowUpIcon color="primary" />}
               {category}
             </Typography>
-            {!stocks
+            {openCategory[category] && (!stocks
               ? <Typography>読み込み中...</Typography>
               : StockTable(stocks, [category])
-            }
+            )}
           </Box>
         )
       })}

frontend/src/pages/TaskListPage.tsx

@@ -290,7 +290,7 @@ const TaskListPage: React.FC = () => {
                     </Typography>
                     {/* 買い物リスト：数量変更ボタン */}
                     <Tooltip title="数量変更">
-                      <IconButton sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="数量変更"
+                      <IconButton sx={{ mr: 0, ml: 0 }} edge="end" aria-label="数量変更"
                         onClick={() => {
                           setOpenAmountDialog(true)
                           setEditingItem(tobuy)
@@ -301,7 +301,7 @@ const TaskListPage: React.FC = () => {
                     </Tooltip>
                     {/* 買い物リスト：食材情報記入ボタン */}
                     <Tooltip title="購入情報を記入">
-                      <IconButton color="primary" sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="購入情報を記入"
+                      <IconButton color="primary" sx={{ mr: 0, ml: 0 }} edge="end" aria-label="購入情報を記入"
                         onClick={() => {
                           setOpenInfoDialog(true)
                           setEditingItem(tobuy)