From d06f289193d941eabe65901c2d13367234e44919 Mon Sep 17 00:00:00 2001
From: "Haru.Kusano" <haru.kusano@ivis.co.jp>
Date: Mon, 16 Jun 2025 16:52:52 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/TaskListPage.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/TaskListPage.tsx b/frontend/src/pages/TaskListPage.tsx
index 6b71ecc..7d11166 100644
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@@ -294,21 +294,21 @@ const TaskListPage: React.FC = () => {
         </List>
       </div>
       {/* 新規材料作成ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '20%', transform: 'translateX(-50%)' }}>
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
         <Typography variant="caption" color="textSecondary">
-          材料のみ追加
+          材料の追加
         </Typography>
       </Box>
       <Fab
         color="primary"
-        sx={{ position: 'fixed', bottom: 90, left: '20%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '80%', transform: 'translateX(-50%)' }}
         onClick={() => setOpenAddToBuyDialog(true)}
       >
         <AddIcon />
       </Fab>
 
       {/*新規料理追加ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
+      {/* <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '80%', transform: 'translateX(-50%)' }}>
         <Typography variant="caption" color="textSecondary">
           料理から追加
         </Typography>
@@ -323,7 +323,7 @@ const TaskListPage: React.FC = () => {
       //selected={isSelected('/test')}
       >
         <SoupKitchenIcon />
-      </Fab>
+      </Fab> */}
 
 
       {/* 買うものリストへの材料追加ダイアログ */}

From 753d1ae9b21bf0d7016c1e286a42c41d4bfea367 Mon Sep 17 00:00:00 2001
From: "Haru.Kusano" <haru.kusano@ivis.co.jp>
Date: Tue, 17 Jun 2025 15:28:49 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E3=83=9C=E3=83=88=E3=83=A0=E3=83=8A?=
 =?UTF-8?q?=E3=83=93=E3=82=B2=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Layout.tsx | 166 +++++++++++++++++------------
 1 file changed, 96 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 10d255d..4053729 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -2,7 +2,7 @@
  * アプリケーションの共通レイアウトを提供するコンポーネント
  * ヘッダー（AppBar）とメインコンテンツ領域を含む基本的なページ構造を定義
  */
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   AppBar,
   Toolbar,
@@ -35,79 +35,105 @@ const Layout: React.FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const [bottomNavi, setBottomNavi] = useState(1);
-
-  /**
-   * ログアウト処理を行うハンドラー関数
-   * ローカルストレージからトークンを削除し、ログインページにリダイレクト
-   */
-  const handleLogout = () => {
-    localStorage.removeItem('token');
-    navigate('/login');
-  };
+
+
+    const getTabIndex = (pathname: string) => {
+      switch (pathname) {
+        case '/stock':
+          return 0;
+        case '/tasks':
+          return 1;
+        case '/recipeList':
+          return 2;
+        default:
+          return 0;
+      }
+    };
+
+
+    
+
+
+    const [bottomNavi, setBottomNavi] = useState(getTabIndex(location.pathname));
+
+    useEffect(() => {
+      setBottomNavi(getTabIndex(location.pathname));
+    }, [location.pathname]);
+
+    /**
+     * ログアウト処理を行うハンドラー関数
+     * ローカルストレージからトークンを削除し、ログインページにリダイレクト
+     */
+    const handleLogout = () => {
+      localStorage.removeItem('token');
+      navigate('/login');
+    };
+
+
+
+
+
+    // メニューを開閉するハンドラー
+    const toggleDrawer = () => {
+      setDrawerOpen(!drawerOpen);
+    };
 
   
 
- 
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+        {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
+        <AppBar position="static" elevation={0}>
+          <Toolbar>
+            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+              shopchop
+            </Typography>
+            <Button color="inherit" onClick={handleLogout}>
+              ログアウト
+            </Button>
+          </Toolbar>
+        </AppBar>
+
+
 
-  // メニューを開閉するハンドラー
-  const toggleDrawer = () => {
-    setDrawerOpen(!drawerOpen);
-  };
 
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
-      {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
-      <AppBar position="static" elevation={0}>
-        <Toolbar>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            shopchop
-          </Typography>
-          <Button color="inherit" onClick={handleLogout}>
-            ログアウト
-          </Button>
-        </Toolbar>
-      </AppBar>
-
-     
-
-
-
-      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
-        <BottomNavigation
-          showLabels
-          value={bottomNavi}
-          onChange={(event, newValue) => {
-            setBottomNavi(newValue);
-            switch(newValue) {
-              case 0:
-                navigate('stock');
-                break;
-              case 1:
-                navigate('tasks');
-                break;
-              case 2:
-                navigate('recipeList');
-                break;
-            }
-            // ここでルーティング処理などを行う
-          }}
-        >
-          <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
-          <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
-          <BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
-        </BottomNavigation>
-      </Paper>
-
-
-      {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
-      <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
-        <Container>
-          <Outlet /> {/* React Router の Outlet - 子ルートのコンポーネントがここにレンダリングされる */}
-        </Container>
+
+        <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => theme.zIndex.drawer + 1 }} elevation={3}>
+          <BottomNavigation
+            showLabels
+            value={bottomNavi}
+            onChange={(event, newValue) => {
+              setBottomNavi(newValue);
+              switch (newValue) {
+                case 0:
+                  navigate('stock');
+                  break;
+                case 1:
+                  navigate('tasks');
+                  break;
+                case 2:
+                  navigate('recipeList');
+                  break;
+              }
+              // ここでルーティング処理などを行う
+            }}
+          >
+            <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
+            <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
+            <BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
+          </BottomNavigation>
+        </Paper>
+
+
+        {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
+        <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
+          <Container>
+            <Outlet /> {/* React Router の Outlet - 子ルートのコンポーネントがここにレンダリングされる */}
+          </Container>
+        </Box>
       </Box>
-    </Box>
-  );
-};
+    );
+  };
+
 
-export default Layout;
\ No newline at end of file
+  export default Layout;
\ No newline at end of file