プルダウンの追加

frontend/src/components/DropDown.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import MenuItem from "@mui/material/MenuItem";
+import Select from "@mui/material/Select";
+import FormControl from "@mui/material/FormControl";
+import InputLabel from "@mui/material/InputLabel";
+
+const DropDown = () => {
+  const [selectedValue, setSelectedValue] = useState(""); // 選択された値の状態管理
+
+  return (
+    <FormControl sx={{ width: "50%", marginBottom:2 }}>
+      <InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
+      <Select
+        labelId="demo-simple-select-label"
+        value={selectedValue}
+        onChange={(event) => setSelectedValue(event.target.value)}
+      >
+        <MenuItem value="乳製品">乳製品</MenuItem>
+        <MenuItem value="肉・魚">肉・魚</MenuItem>
+        <MenuItem value="野菜">野菜</MenuItem>
+        <MenuItem value="調味料">調味料</MenuItem>
+        <MenuItem value="その他">その他</MenuItem>
+      </Select>
+    </FormControl>
+  );
+};
+
+export default DropDown;

frontend/src/pages/TaskListPage.tsx

@@ -22,6 +22,10 @@ import {
   TextField,
   Button,
   Box,
+  MenuItem,
+  Select,
+  FormControl,
+  InputLabel
 } from '@mui/material';
 import {
   Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
@@ -30,12 +34,13 @@ import {
 import { Task } from '../types/types';
 import { TASK_ERRORS } from '../constants/errorMessages';
 //import { FaCarrot } from "react-icons/fa6";　//エラー起きる　いったん保留
+import DropDown from "../components/DropDown";
 
 
 
 
 // 新規タスクの初期状態
-const EMPTY_TASK = { title: '', description: '', completed: false };
+const EMPTY_TASK = { id: 0, title: '', amount: 0, completed: false };
 
 const TaskListPage: React.FC = () => {
   // タスク一覧の状態管理
@@ -206,6 +211,8 @@ const TaskListPage: React.FC = () => {
         <DialogTitle>材料の追加</DialogTitle>
         <DialogContent>
           <Box sx={{ pt: 1 }}>
+            {/*材料カテゴリ選択 */}
+            <DropDown></DropDown>
             {/* タスクタイトル入力フィールド */}
             <TextField
               autoFocus
@@ -214,23 +221,32 @@ const TaskListPage: React.FC = () => {
               fullWidth
               value={newTask.title}
               onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
+              sx={{ marginBottom: 2 }}
             />
-            {/* タスク説明入力フィールド - 複数行入力可能 */}
+            {/* 数量入力フィールド */}
             <TextField
               margin="dense"
-              label="説明"
+              label="数量"
               fullWidth
-              multiline
+              value={newTask.amount}
-              rows={4}
+              onChange={(e) => {
-              value={newTask.description}
+                const value = e.target.value;
-              onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
+                const parsedValue = parseInt(value, 10); // 数値に変換
+                if (!isNaN(parsedValue)) {
+                  setNewTask({ ...newTask, amount: parsedValue }); // number型で保存
+                }
+              }}
+              sx={{ width: "20%" }}
+              type="number"
+              inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
+
             />
           </Box>
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpenDialog(false)}>キャンセル</Button>
           <Button onClick={handleCreateTask} variant="contained">
-            作成
+            追加
           </Button>
         </DialogActions>
       </Dialog>