Merge remote-tracking branch 'origin/dev-frontend-stock' into dev-frontend-with-api

frontend/src/App.tsx

@@ -10,6 +10,7 @@ import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import TaskListPage from './pages/TaskListPage';
 import StockPage from './pages/StockPage';
+import StockList from './pages/StockList';
 import './App.css';
 
 /**
@@ -93,6 +94,17 @@ const App: React.FC = () => {
                   </PrivateRoute>
                 }
               />
+
+              {/* 在庫リストへのルートを追加 */}
+              <Route
+                path="stock"
+                element={
+                  <PrivateRoute>
+                    <StockList />
+                  </PrivateRoute>
+                }
+              />
+
             </Route>
             <Route path="/" element={<Layout />}>
               {/* ルートパスへのアクセスはタスク一覧にリダイレクト */}

frontend/src/components/Layout.tsx

@@ -22,6 +22,7 @@ import {
   Menu as MenuIcon,
   ListAlt as ListAltIcon,
   Inventory as InventoryIcon, // テストページ用のアイコン
+  Science as ScienceIcon, // 鈴木
 } from '@mui/icons-material';
 import { useNavigate, Outlet, useLocation } from 'react-router-dom';
 
@@ -100,6 +101,8 @@ const Layout: React.FC = () => {
               <ListItemText primary="タスク一覧" />
             </ListItemButton>
             {/* テストページへのリンクを追加 */}
+
+             {/* 在庫リストへのリンクを追加 */} 
             <ListItemButton
               onClick={() => handleNavigate('/stock')}
               selected={isSelected('/stock')}

frontend/src/pages/StockList.tsx

@@ -0,0 +1,75 @@
+/**
+ * テストページコンポーネント
+ * 白紙の状態で表示されるテスト用のページ
+ */
+import React from 'react';
+import {
+    Container,
+    Typography,
+    Button
+} from '@mui/material';
+
+const StockPage: React.FC = () => {
+    return (
+        <Container>
+            <Typography variant="h4" component="h1" gutterBottom>
+                在庫一覧
+            </Typography>
+
+            {/* タスク編集ボタン */}
+            <Button color="success"
+                type="submit"
+                variant="contained"
+                sx={{ mt: 3, mb: 2, left: '80%' }}
+            >
+                編集
+            </Button>
+
+            {/* タスク削除ボタン */}
+            <Button color="error"
+                type="submit"
+                variant="contained"
+                sx={{ mt: 3, mb: 2, left: '82%' }}
+            >
+                削除
+            </Button>
+
+            <Typography variant="h4" component="h1" gutterBottom>
+                乳製品
+            </Typography>
+            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
+            </div>
+
+            <Typography variant="h4" component="h1" gutterBottom>
+                肉・魚
+            </Typography>
+            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
+            </div>
+
+            <Typography variant="h4" component="h1" gutterBottom>
+                野菜
+            </Typography>
+            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
+            </div>
+
+            <Typography variant="h4" component="h1" gutterBottom>
+                調味料
+            </Typography>
+            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
+            </div>
+
+            <Typography variant="h4" component="h1" gutterBottom>
+                その他
+            </Typography>
+            {/* 在庫一覧表示エリア - 青い背景のコンテナ */}
+            <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px' }}>
+            </div>
+        </Container>
+    );
+};
+
+export default StockPage;