From 3d0c02886996a39c7fd184b2b695dab7b76bfdf9 Mon Sep 17 00:00:00 2001
From: "Haru.Kusano" <haru.kusano@ivis.co.jp>
Date: Wed, 4 Jun 2025 15:10:58 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json          | 15 ++++++
 frontend/package.json               |  1 +
 frontend/src/pages/TaskListPage.tsx | 84 ++++++++++++++++++++++-------
 3 files changed, 81 insertions(+), 19 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b073615..0488d5f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -21,6 +21,7 @@
         "@types/react-dom": "^18.2.18",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.5.0",
         "react-router-dom": "^6.21.1",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
@@ -13444,6 +13445,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.1.0.tgz",
       "integrity": "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ=="
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -26113,6 +26122,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.1.0.tgz",
       "integrity": "sha512-SN/U6Ytxf1QGkw/9ve5Y+NxBbZM6Ht95tuXNMKs8EJyFa/Vy/+Co3stop3KBHARfn/giv+Lj1uUnTfOJ3moFEQ=="
     },
+    "react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d268744..afa6af2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "@types/react-dom": "^18.2.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "5.3.0",
     "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index c537f37..2f49ef0 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@@ -7,6 +7,7 @@ import { taskApi } from '../services/api';
 import {
   Container,
   Typography,
+  Tooltip,
   List,
   ListItem,
   ListItemText,
@@ -22,9 +23,16 @@ import {
   Button,
   Box,
 } from '@mui/material';
-import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
+import {
+  Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
+  SoupKitchen as SoupKitchenIcon
+} from '@mui/icons-material';
 import { Task } from '../types/types';
 import { TASK_ERRORS } from '../constants/errorMessages';
+//import { FaCarrot } from "react-icons/fa6";　//エラー起きる　いったん保留
+
+
+
 
 // 新規タスクの初期状態
 const EMPTY_TASK = { title: '', description: '', completed: false };
@@ -106,7 +114,7 @@ const TaskListPage: React.FC = () => {
         タスク一覧
       </Typography>
       {/* タスク一覧表示エリア - 青い背景のコンテナ */}
-      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px'}}>
+      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
         <List>
           {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */}
           {tasks.map((task) => (
@@ -132,39 +140,77 @@ const TaskListPage: React.FC = () => {
                   textDecoration: task.completed ? 'line-through' : 'none',
                 }}
               />
-              {/* タスク削除ボタン */}
+              {/* 買い物リスト：食材情報記入ボタン */}
               <ListItemSecondaryAction>
-                <IconButton
-                  edge="end"
-                  aria-label="delete"
-                  onClick={() => handleDeleteTask(task.id)}
+                <Tooltip title="食材情報追加">
+                  <IconButton
+                    edge="end"
+                    aria-label="食材情報追加"
+                  //onClick={() => handleDeleteTask(task.id)}
+                  >
+                    <ShoppingBasketIcon />
+                  </IconButton>
+                </Tooltip>
+                {/* 買い物リスト：食材削除ボタン */}
+                <Tooltip title="項目を削除"
+                  componentsProps={{
+                    tooltip: {
+                      sx: {
+                        backgroundColor: "white",
+                        color: "red",
+                        fontSize: "0.8rem",
+                        padding: "6px",
+                        borderRadius: "6px",
+                      },
+                    },
+                  }}
                 >
-                  <DeleteIcon />
-                </IconButton>
+
+                  <IconButton
+                    edge="end"
+                    aria-label="delete"
+                    onClick={() => handleDeleteTask(task.id)}
+                  >
+                    <DeleteIcon />
+                  </IconButton>
+                </Tooltip>
               </ListItemSecondaryAction>
+
             </ListItem>
           ))}
         </List>
       </div>
-      {/* 新規タスク作成ボタン - 画面下部に固定表示 */}
-      <Fab
-        color="primary"
-        sx={{ position: 'fixed', bottom: 16, left: '50%', transform: 'translateX(-50%)'}}
-        onClick={() => setOpenDialog(true)}
-      >
-        <AddIcon />
-      </Fab>
+      {/* 新規材料作成ボタン - 画面下部に固定表示 */}
+      <Tooltip title="材料のみ追加">
+        <Fab
+          color="primary"
+          sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
+          onClick={() => setOpenDialog(true)}
+        >
+          <AddIcon />
+        </Fab>
+      </Tooltip>
+      {/*新規料理追加ボタン - 画面下部に固定表示 */}
+      <Tooltip title="料理から追加">
+        <Fab
+          color="primary"
+          sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
+          onClick={() => setOpenDialog(true)}
+        >
+          <SoupKitchenIcon />
+        </Fab>
+      </Tooltip>
 
       {/* 新規タスク作成ダイアログ */}
       <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}>
-        <DialogTitle>新規タスク</DialogTitle>
+        <DialogTitle>材料の追加</DialogTitle>
         <DialogContent>
           <Box sx={{ pt: 1 }}>
             {/* タスクタイトル入力フィールド */}
             <TextField
               autoFocus
               margin="dense"
-              label="タイトル"
+              label="材料名"
               fullWidth
               value={newTask.title}
               onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}