料理名を追加する機能(予定)の実装、それに対するルートとレイアウトの変更

frontend/src/App.tsx

@@ -10,6 +10,9 @@ import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import TaskListPage from './pages/TaskListPage';
 import './App.css';
+// 必要なインポートを追加
+import AddDishes1 from './pages/AddDishes1';
+import AddDishes2 from './pages/AddDishes2';
 
 /**
  * アプリケーション全体のMaterial UIテーマを定義
@@ -92,6 +95,23 @@ const App: React.FC = () => {
                   </PrivateRoute>
                 }
               />
+              {/* テストページへのルートを追加 */}
+              <Route
+                path="add1"
+                element={
+                  <PrivateRoute>
+                    <AddDishes1 />
+                  </PrivateRoute>
+                }
+              />
+              <Route
+                path="add2"
+                element={
+                  <PrivateRoute>
+                    <AddDishes2 />
+                  </PrivateRoute>
+                }
+              />
             </Route>
           </Routes>
         </BrowserRouter>

frontend/src/components/Layout.tsx

@@ -21,6 +21,7 @@ import {
 import { 
   Menu as MenuIcon,
   ListAlt as ListAltIcon,
+  Science as ScienceIcon, // テストページ用のアイコン
 } from '@mui/icons-material';
 import { useNavigate, Outlet, useLocation } from 'react-router-dom';
 
@@ -98,6 +99,14 @@ const Layout: React.FC = () => {
               <ListItemIcon><ListAltIcon /></ListItemIcon>
               <ListItemText primary="タスク一覧" />
             </ListItemButton>
+            {/* テストページへのリンクを追加 */}
+            <ListItemButton 
+              onClick={() => handleNavigate('/add1')} 
+              selected={isSelected('/add1')}
+            >
+              <ListItemIcon><ScienceIcon /></ListItemIcon>
+              <ListItemText primary="料理の追加" />
+            </ListItemButton>
             <Divider />
           </List>
         </Box>

frontend/src/pages/AddDishes1.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  AppBar, 
+  Toolbar, 
+  Typography, 
+  Container, 
+  Box, 
+  Button, 
+  Drawer,
+  List,
+  ListItemText,
+  ListItemIcon,
+  ListItemButton,
+  Divider,
+  IconButton,
+  TextField,
+  Paper,
+  Alert,
+  Link,
+  Grid,
+ } from '@mui/material';
+ import { LoginCredentials } from '../types/types';
+import { authApi } from '../services/api';
+import { GENERAL_ERRORS } from '../constants/errorMessages';
+
+const AddDishes1: React.FC = () => {
+  const navigate = useNavigate();
+  const [dish, setDish] = useState("");
+  // エラーメッセージの状態管理
+  const [error, setError] = useState(false);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setDish(event.target.value);
+  };
+  const handleSubmit = async (e: React.FormEvent) => {
+      e.preventDefault(); // フォームのデフォルト送信動作を防止
+      if (!dish.trim()) {
+        setError(true);
+      } else {
+        alert("送信成功！");
+        navigate('/add2'); // タスク一覧ページにリダイレクト
+      }
+    };
+
+  return (
+    <div>
+      <Typography variant="h4" component="h1" gutterBottom>
+        料理の追加・編集
+      </Typography>
+      <Box component="form" onSubmit={handleSubmit}>
+        <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '10px', textAlign: 'center'}}>
+          <TextField
+            required
+            // id="username"
+            label="追加・編集したい料理名を入力"
+            placeholder='ここに料理名を入力'
+            variant="outlined"
+            InputLabelProps={{ style: { fontSize: "40px" }}}
+            style={{width: "80%" }}
+            InputProps={{ style: { fontSize: "40px"} }}
+            // name="username"
+            // autoComplete="username"
+            autoFocus
+            value={dish}
+            onChange={handleChange}
+            error={error}
+            helperText={error ? "入力が必要です" : ""}
+          />
+        </div>
+        <div style={{position: "fixed", left: "75%", transform: 'translateX(-50%)', bottom: "10px"}}>
+          <Button type="submit" variant='contained' sx={{ width: "250px", height: "60px", fontSize: "40px" }} color="primary" >
+            編集・追加{dish}
+          </Button>
+        </div>
+      </Box>
+      </div>
+  );
+};
+
+export default AddDishes1;

frontend/src/pages/AddDishes2.tsx

@@ -0,0 +1,16 @@
+/**
+ * テストページコンポーネント
+ * 白紙の状態で表示されるテスト用のページ
+ */
+import React from 'react';
+import { Box } from '@mui/material';
+
+const AddDishes2: React.FC = () => {
+  return (
+    <Box>
+      {/* 白紙のページ - 何も表示しない */}
+    </Box>
+  );
+};
+
+export default AddDishes2;