Merge remote-tracking branch 'origin/feature-frontend-top' into develop-frontend

frontend/src/components/Layout.tsx

@@ -38,27 +38,50 @@ 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);
-  };
 
-  // メッセージ表示
+
+
+    // メニューを開閉するハンドラー
+    const toggleDrawer = () => {
+      setDrawerOpen(!drawerOpen);
+    };
+
+      // メッセージ表示
 
   // ページ遷移後もメッセージを維持
   useEffect(() => {
@@ -91,67 +114,57 @@ const Layout: React.FC = () => {
     sessionStorage.removeItem('globalMessage');
   };
 
-  const handleBottomNavigation = (event: React.SyntheticEvent, newValue: any) => {
+  
-    setBottomNavi(newValue);
+
-    switch(newValue) {
+    return (
-      case 0:
+      <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
-        navigate('stock');
+        {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
-        break;
+        <AppBar position="static" elevation={0}>
-      case 1:
+          <Toolbar>
-        navigate('tasks');
+            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-        break;
+              shopchop
-      case 2:
+            </Typography>
-        navigate('recipeList');
+            <Button color="inherit" onClick={handleLogout}>
-        break;
+              ログアウト
-    }
+            </Button>
-    // ここでルーティング処理などを行う
+          </Toolbar>
-  }
+        </AppBar>
-
+
-  return (
+
-    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+
-      {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
+
-      <AppBar position="static" elevation={0}>
+
-        <Toolbar>
+        <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => theme.zIndex.drawer + 1 }} elevation={3}>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+          <BottomNavigation
-            shopchop
+            showLabels
-          </Typography>
+            value={bottomNavi}
-          <Button color="inherit" onClick={handleLogout}>
+            onChange={(event, newValue) => {
-            ログアウト
+              setBottomNavi(newValue);
-          </Button>
+              switch (newValue) {
-        </Toolbar>
+                case 0:
-      </AppBar>
+                  navigate('stock');
-
+                  break;
-      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
+                case 1:
-        <BottomNavigation
+                  navigate('tasks');
-          showLabels
+                  break;
-          value={bottomNavi}
+                case 2:
-          onChange={(event, newValue) => {
+                  navigate('recipeList');
-            setBottomNavi(newValue);
+                  break;
-            switch(newValue) {
+              }
-              case 0:
+              // ここでルーティング処理などを行う
-                navigate('stock');
+            }}
-                break;
+          >
-              case 1:
+            <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
-                navigate('tasks');
+            <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
-                break;
+            <BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
-              case 2:
+          </BottomNavigation>
-                navigate('recipeList');
+        </Paper>
-                break;
+
-            }
+
-            // ここでルーティング処理などを行う
+        {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
-          }}
+        <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
-        >
+          <Container>
-          <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
+            <MessageContext.Provider value={{ showErrorMessage, showWarningMessage, showSuccessMessage, showInfoMessage }}>
-          <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
-          <BottomNavigationAction label="レシピ" icon={<SoupKitchenIcon />} />
-        </BottomNavigation>
-      </Paper>
-
-      {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
-      <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
-        <Container>
-
-          <MessageContext.Provider value={{ showErrorMessage, showWarningMessage, showSuccessMessage, showInfoMessage }}>
             <MessageAlert
               open={msgOpen}
               message={msgText}
@@ -160,11 +173,11 @@ const Layout: React.FC = () => {
             />
             <Outlet /> {/* React Router の Outlet - 子ルートのコンポーネントがここにレンダリングされる */}
           </MessageContext.Provider>
-
+          </Container>
-        </Container>
+        </Box>
       </Box>
-    </Box>
+    );
-  );
+  };
-};
+
 
-export default Layout;
+  export default Layout;

frontend/src/pages/TaskListPage.tsx

@@ -330,21 +330,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>
@@ -359,7 +359,7 @@ const TaskListPage: React.FC = () => {
       //selected={isSelected('/test')}
       >
         <SoupKitchenIcon />
-      </Fab>
+      </Fab> */}
 
 
       {/* 買うものリストへの材料追加ダイアログ */}