料理リスト：削除ダイアログ追加

frontend/src/pages/AddRecipe.tsx

@@ -58,6 +58,8 @@ const AddRecipe: React.FC = () => {
   // 編集しているアイテム
   const [editingItem, setEditingItem] = useState<StuffAndCategoryAndAmount>(emptyItem);
   const [editingItemIdx, setEditingItemIdx] = useState(0);
+  //削除確認ダイアログの表示状態
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
 
   const loadRecipe = async () => {
     if (recipeId && !recipeName) {
@@ -138,7 +140,7 @@ const AddRecipe: React.FC = () => {
             value={recipeSummary} onChange={(e) => setRecipeSummary(e.target.value)}
           />
         </div>
-        <h2 style={{marginTop: "0.5em" }}>
+        <h2 style={{ marginTop: "0.5em" }}>
           材料リスト
         </h2>
         {/* すべての材料情報を表示 */}
@@ -179,7 +181,11 @@ const AddRecipe: React.FC = () => {
                     tooltip: { sx: { backgroundColor: "white", color: "red", fontSize: "0.8rem", padding: "6px", borderRadius: "6px" } },
                   }}>
                   <IconButton edge="end" sx={{ marginRight: 0, marginLeft: 0 }} aria-label="delete"
-                    onClick={() => setItems([...items.slice(0, index), ...items.slice(index + 1)])}>
+                    onClick={() => {
+                      setOpenDeleteDialog(true)
+                      setEditingItem(item)
+                      setEditingItemIdx(index)
+                    }}>
                     <DeleteIcon />
                   </IconButton>
                 </Tooltip>
@@ -219,6 +225,29 @@ const AddRecipe: React.FC = () => {
             setOpenAddDialog(false);
           }} />
 
+        {/* 削除ダイアログ */}
+        <Dialog open={openDeleteDialog} onClose={() => setOpenDeleteDialog(false)} disableScrollLock={true}
+          fullWidth
+          maxWidth="sm"
+          sx={{ overflow: "hidden" }}
+        >
+          <DialogTitle>食材の削除</DialogTitle>
+          <DialogContent>
+            {editingItem && (
+              <>
+                <Typography variant="h4">{editingItem.stuffName}を削除します。</Typography>
+                <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
+                <Button onClick={() => setOpenDeleteDialog(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
+                <Button variant="contained" color="error" onClick={() => {
+                  setItems([...items.slice(0, editingItemIdx), ...items.slice(editingItemIdx + 1)])
+                  setOpenDeleteDialog(false); // 削除処理後にダイアログを閉じる
+                }}
+                  style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
+              </>
+            )}
+          </DialogContent>
+        </Dialog>
+
         {/* 数量変更ダイアログ */}
         <EditAmountDialog openDialog={openAmountDialog} setOpenDialog={setOpenAmountDialog}
           editingItem={editingItem}