From 2a961fd8c067327dfbd7f7136a2f5bee419907f1 Mon Sep 17 00:00:00 2001
From: "Masaharu.Kato" <masaharu.kato@ivis.co.jp>
Date: Tue, 24 Jun 2025 10:13:13 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.css                          |  4 +-
 frontend/src/components/AddByRecipeDialog.tsx |  9 ++--
 frontend/src/components/Layout.tsx            | 43 ++++++++-----------
 frontend/src/index.css                        |  2 +-
 frontend/src/pages/RecipeList.tsx             |  4 +-
 5 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 4879a4c..b45f764 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -23,8 +23,8 @@ body {
 
 /* Material UIのコンテナコンポーネントのカスタマイズ */
 .MuiContainer-root {
-  padding-top: 24px;
-  padding-bottom: 24px;
+  /* padding-top: 24px;
+  padding-bottom: 24px; */
 }
 
 /* Material UIのペーパーコンポーネントのカスタマイズ */
diff --git a/frontend/src/components/AddByRecipeDialog.tsx b/frontend/src/components/AddByRecipeDialog.tsx
index 174914e..266f1d7 100644
--- a/frontend/src/components/AddByRecipeDialog.tsx
+++ b/frontend/src/components/AddByRecipeDialog.tsx
@@ -76,10 +76,10 @@ const AddByRecipeDialog = ({
           />
         </DialogTitle>
         <DialogContent dividers sx={{ padding: 2 }}>
-          <Typography variant="h3">
+          <Typography sx={{fontSize: '1.5rem'}}>
             {recipe.recipeName}
           </Typography>
-          <Typography>
+          <Typography sx={{mt: 2, mb: 2}}>
             ({recipe.maxServings}人分在庫あり)
           </Typography>
           <div>
@@ -108,7 +108,7 @@ const AddByRecipeDialog = ({
               type="number"
               margin="dense"
               label="何人前"
-              fullWidth
+              className="numberField"
               defaultValue={1}
               value={numOfPeople}
               onChange={(e) => {
@@ -116,7 +116,6 @@ const AddByRecipeDialog = ({
                 // setNumOfPeaple(!isNaN(num) ? num : '');
                 setNumOfPeaple(e.target.value);
               }}
-              sx={{ minWidth: "8px", width: "100%" }}
               inputProps={{ inputMode: "numeric", min: 1, pattern: "[0-9]*" }} // ここで整数のみ許可
 
             />
@@ -140,7 +139,7 @@ const AddByRecipeDialog = ({
                 const finalAddResult = await toBuyApi.addByRecipe(recipe.recipeId, num, checked);
                 setOpenDialog(false);
                 if (finalAddResult.data.length === 0) {
-                  showInfoMessage('必要な食材が在庫にあったのでリストには追加されませんでした！');
+                  showInfoMessage('必要な食材が在庫にあったのでリストには追加されませんでした。');
                 } else {
                   showSuccessMessage('レシピが保存されて買うものリストに追加されました！');
                 }
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index f984793..162e24e 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -76,10 +76,6 @@ const Layout: React.FC = () => {
       navigate('/login');
     };
 
-
-
-
-
     // メニューを開閉するハンドラー
     const toggleDrawer = () => {
       setDrawerOpen(!drawerOpen);
@@ -119,7 +115,21 @@ const Layout: React.FC = () => {
     sessionStorage.removeItem('globalMessage');
   };
 
-  
+  const onBottomNaviChange = (event: React.SyntheticEvent, value: any) => {
+    setBottomNavi(value);
+    switch (value) {
+      case 0:
+        navigate('stock');
+        break;
+      case 1:
+        navigate('tasks');
+        break;
+      case 2:
+        navigate('recipeList');
+        break;
+    }
+    // ここでルーティング処理などを行う
+  }
 
     return (
       <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
@@ -135,29 +145,11 @@ const Layout: React.FC = () => {
           </Toolbar>
         </AppBar>
 
-
-
-
-
         <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;
-              }
-              // ここでルーティング処理などを行う
-            }}
+            onChange={onBottomNaviChange}
           >
             <BottomNavigationAction label="在庫" icon={<InventoryIcon />} />
             <BottomNavigationAction label="買うもの" icon={<ShoppingCartIcon />} />
@@ -165,10 +157,9 @@ const Layout: React.FC = () => {
           </BottomNavigation>
         </Paper>
 
-
         {/* メインコンテンツ領域 - 子ルートのコンポーネントがここに表示される */}
         <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 3 }}>
-          <Container sx={{ padding: 0, margin: 0 }}>
+          <Container sx={{ padding: 0, mt: 0, mb: 0, mr: 'auto', ml: 'auto' }}>
             <MessageContext.Provider value={{ showErrorMessage, showWarningMessage, showSuccessMessage, showInfoMessage }}>
             <MessageAlert
               open={msgOpen}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 812542a..9cdf2d1 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -18,7 +18,7 @@ html, body {
   -moz-osx-font-smoothing: grayscale;
   /* スクロールバーのレイアウトシフトを防止 */
   scrollbar-gutter: stable both-edges;
-  overflow: auto
+  overflow: auto;
 }
 
 /* ルート要素のスタイル - Reactアプリケーションのマウントポイント */
diff --git a/frontend/src/pages/RecipeList.tsx b/frontend/src/pages/RecipeList.tsx
index a0eb54c..b015cd9 100644
--- a/frontend/src/pages/RecipeList.tsx
+++ b/frontend/src/pages/RecipeList.tsx
@@ -114,7 +114,7 @@ const RecipeList: React.FC = () => {
                   <ListItemSecondaryAction>
                     
                     {recipe.maxServings ?
-                      <Typography variant="body1" component="span" sx={{ marginRight: '1em', color: "mediumaquamarine" }}>
+                      <Typography variant="body1" component="span" sx={{ mr: 0, color: "mediumaquamarine" }}>
                         {recipe.maxServings}人分
                       </Typography>
                     : <></>}
@@ -132,7 +132,7 @@ const RecipeList: React.FC = () => {
                       </Tooltip>
                     }
 
-                    <Tooltip title="編集">
+                    <Tooltip title="編集" sx={{ml: 1}}>
                       <IconButton edge="end" aria-label="編集"
                         onClick={() => {
                           navigate('/addRecipe/' + recipe.recipeId);