From c2f4bf0f528b81289e3a0cead9e89bcf008c5ec3 Mon Sep 17 00:00:00 2001
From: "Yuna.Suzuki" <yuna.suzuki@ivis.co.jp>
Date: Thu, 5 Jun 2025 13:36:12 +0900
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E5=BA=AB=E7=AE=A1=E7=90=86=E3=83=AA?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=83=9A=E3=83=BC=E3=82=B8=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0=E3=81=97=E3=81=BE=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx               | 12 +++++
 frontend/src/components/Layout.tsx | 31 ++++++++----
 frontend/src/pages/StockList.tsx   | 75 ++++++++++++++++++++++++++++++
 3 files changed, 108 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/pages/StockList.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7141e87..ad7a883 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,6 +9,7 @@ import Layout from './components/Layout';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import TaskListPage from './pages/TaskListPage';
+import StockList from './pages/StockList';
 import './App.css';
 
 /**
@@ -92,6 +93,17 @@ const App: React.FC = () => {
                   </PrivateRoute>
                 }
               />
+
+              {/* 在庫リストへのルートを追加 */}
+              <Route
+                path="stock"
+                element={
+                  <PrivateRoute>
+                    <StockList />
+                  </PrivateRoute>
+                }
+              />
+
             </Route>
           </Routes>
         </BrowserRouter>
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index e8696a9..796dad0 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -3,13 +3,13 @@
  * ヘッダー（AppBar）とメインコンテンツ領域を含む基本的なページ構造を定義
  */
 import React, { useState } from 'react';
-import { 
-  AppBar, 
-  Toolbar, 
-  Typography, 
-  Container, 
-  Box, 
-  Button, 
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  Container,
+  Box,
+  Button,
   Drawer,
   List,
   ListItemText,
@@ -18,9 +18,10 @@ import {
   Divider,
   IconButton
 } from '@mui/material';
-import { 
+import {
   Menu as MenuIcon,
   ListAlt as ListAltIcon,
+  Science as ScienceIcon, // 鈴木
 } from '@mui/icons-material';
 import { useNavigate, Outlet, useLocation } from 'react-router-dom';
 
@@ -91,13 +92,23 @@ const Layout: React.FC = () => {
           role="presentation"
         >
           <List>
-            <ListItemButton 
-              onClick={() => handleNavigate('/tasks')} 
+            <ListItemButton
+              onClick={() => handleNavigate('/tasks')}
               selected={isSelected('/tasks')}
             >
               <ListItemIcon><ListAltIcon /></ListItemIcon>
               <ListItemText primary="タスク一覧" />
             </ListItemButton>
+
+             {/* 在庫リストへのリンクを追加 */} 
+            <ListItemButton
+              onClick={() => handleNavigate('/stock')}
+              selected={isSelected('/stock')}
+            >
+              <ListItemIcon><ScienceIcon /></ListItemIcon>
+              <ListItemText primary="在庫リスト" />
+            </ListItemButton>
+
             <Divider />
           </List>
         </Box>
diff --git a/frontend/src/pages/StockList.tsx b/frontend/src/pages/StockList.tsx
new file mode 100644
index 0000000..b269649
--- /dev/null
+++ b/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;
\ No newline at end of file