買うものリストの削除確認ダイアログの作成

frontend/src/pages/TaskListPage.tsx

@@ -67,6 +67,9 @@ const TaskListPage: React.FC = () => {
   //数量変更ダイアログの表示状態
   const [openAmountDialog, setOpenAmountDialog] = useState(false);
 
+  //削除確認ダイアログの表示状態
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+
   const [selectedTask, setSelectedTask] = useState<ToBuy["tobuyId"]>(0);
 
   const [selectedEditingTask, setSelectedEditingTask] = useState<ToBuy>({
@@ -77,6 +80,13 @@ const TaskListPage: React.FC = () => {
     shop: undefined,
   });
 
+  const [selectedDeleteTask, setSelectedDeleteTask] = useState<ToBuy>({
+    tobuyId: 0,
+    stuffId: 0,
+    stuffName: "",
+    amount: 0,
+    shop: undefined,
+  });
 
   const [newToBuy, setNewToBuy] = useState(EMPTY_TOBUY);
 
@@ -311,7 +321,11 @@ const TaskListPage: React.FC = () => {
                     edge="end"
                     sx={{ marginRight: 0, marginLeft: 0 }}
                     aria-label="delete"
-                    onClick={() => handleDeleteTask(tobuy.tobuyId)}
+                    onClick={() => {//handleDeleteTask(tobuy.tobuyId)
+                      setSelectedDeleteTask(tobuy)
+                      setOpenDeleteDialog(true)
+                    }
+                  }
                   >
                     <DeleteIcon />
                   </IconButton>
@@ -545,6 +559,29 @@ const TaskListPage: React.FC = () => {
           </Button>
         </DialogActions>
       </Dialog>
+
+      {/* 削除ダイアログ */}
+      <Dialog open={openDeleteDialog} onClose={() => setOpenDeleteDialog(false)} disableScrollLock={true}
+        fullWidth
+        maxWidth="sm"
+        sx={{ overflow: "hidden" }}
+      >
+        <DialogTitle>食材の削除</DialogTitle>
+        <DialogContent>
+          {selectedDeleteTask && (
+            <>
+              <Typography variant="h4">{selectedDeleteTask.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={() => {
+                handleDeleteTask(selectedDeleteTask.tobuyId);
+                setOpenDeleteDialog(false); // 削除処理後にダイアログを閉じる
+              }}
+                style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
+            </>
+          )}
+        </DialogContent>
+      </Dialog>
     </Container>
 
   );