Merge branch 'develop-frontend' into feature-frontend-stock-suzuki

4 months ago · 3d82e2fe82
parent 05623ea8c2 1f968f1943
commit 3d82e2fe82
13 changed files with 290 additions and 126 deletions
--- a/backend/src/main/java/com/example/todoapp/controller/ToBuysController.java
+++ b/backend/src/main/java/com/example/todoapp/controller/ToBuysController.java
@ -92,7 +92,6 @@ public class ToBuysController {
    }


-
    /**
     * 指定されたユーザーIDに基づいてすべての「買うもの」リストを取得する
     *
@ -125,9 +124,6 @@ public class ToBuysController {
                })
                .collect(Collectors.toList());

-        // Map<String, Object> responseBody = new HashMap<>();
-        // responseBody.put("tobuy_array", responseList);
-
        return ResponseEntity.ok(responseList);
    }

@ -189,7 +185,8 @@ public class ToBuysController {
            Authentication authentication) {

        Long recipeId = payload.get("recipeId");
-        List<ToBuyResponseDTO> responseList = toBuysService.addByRecipeId(recipeId, authentication);
+        Long servings = payload.get("servings");
+        List<ToBuyResponseDTO> responseList = toBuysService.addByRecipeId(recipeId, servings,authentication);

        //shopのフィールドを削除
        List<Map<String, Object>> filteredList = responseList.stream()
--- a/backend/src/main/java/com/example/todoapp/service/StocksService.java
+++ b/backend/src/main/java/com/example/todoapp/service/StocksService.java
@ -1,6 +1,5 @@
 package com.example.todoapp.service;

-import com.example.todoapp.dto.StockDTO;
 import com.example.todoapp.dto.AddStocksDTO;
 import com.example.todoapp.dto.UpdateStockRequest;
 import com.example.todoapp.model.Stocks;
@ -57,9 +56,6 @@ public class StocksService {
        } else {
            // 材料情報を取得
            Optional<Stuffs> existstuffs = stuffsRepository.findById(stock.getStuffId());
-            if (existstuffs == null) {
-                throw new RuntimeException("材料がありません");
-            }
            stuffs = existstuffs.get();
        }

--- a/backend/src/main/java/com/example/todoapp/service/ToBuysService.java
+++ b/backend/src/main/java/com/example/todoapp/service/ToBuysService.java
@ -91,14 +91,22 @@ public class ToBuysService {
            stuff = optStuff.get();
        }

-        ToBuys toBuys = new ToBuys();
-        toBuys.setUser(user);
-        toBuys.setStuff(stuff);
-        toBuys.setAmount(toBuyDTO.getAmount());
-        toBuys.setStore(toBuyDTO.getShop());
+        Optional<ToBuys> existingToBuy = toBuysRepository.findByUserAndStuff(user, stuff);

-        // データベースに保存
-        return toBuysRepository.save(toBuys);
+        if (existingToBuy.isPresent()) {
+            // 存在する場合は数量を更新
+            ToBuys existing = existingToBuy.get();
+            existing.setAmount(existing.getAmount() + toBuyDTO.getAmount());
+            return toBuysRepository.save(existing);
+        } else {
+            // 新しい材料を作成
+            ToBuys toBuys = new ToBuys();
+            toBuys.setUser(user);
+            toBuys.setStuff(stuff);
+            toBuys.setAmount(toBuyDTO.getAmount());
+            toBuys.setStore(toBuyDTO.getShop());
+            return toBuysRepository.save(toBuys);
+        }

    }

@ -212,7 +220,7 @@ public class ToBuysService {
     * @param authentication 認証情報
     * @return 追加された「買うもの」のリスト
     */
-    public List<ToBuyResponseDTO> addByRecipeId(Long recipeId, Authentication authentication) {
+    public List<ToBuyResponseDTO> addByRecipeId(Long recipeId, Long servings,Authentication authentication) {
        // ユーザー情報を取得
        String username = authentication.getName();
        User user = userRepository.findByUsername(username)
@ -225,7 +233,9 @@ public class ToBuysService {

        for (RecipeStuffs rs : recipeStuffsList) {
            Stuffs stuff = rs.getStuff();
-            int requiredAmount = rs.getAmount();
+            
+            // 材料の数量をサービング数に基づいて計算
+            int requiredAmount = rs.getAmount() * (servings != null ? servings.intValue() : 1);

            Optional<ToBuys> existingToBuyOpt = toBuysRepository.findByUserAndStuff(user, stuff);

--- a/backend/src/main/resources/application-localfwd.yml
+++ b/backend/src/main/resources/application-localfwd.yml
@ -0,0 +1,20 @@
+spring:
+  datasource:
+    url: jdbc:postgresql://localhost:5432/${LOCAL_DB_NAME}
+    driver-class-name: org.postgresql.Driver
+    username: ${LOCAL_DB_USER}
+    password: ${LOCAL_DB_PASSWORD}
+  jpa:
+    database-platform: org.hibernate.dialect.PostgreSQLDialect
+    properties:
+      hibernate:
+        jdbc:
+          lob:
+            non_contextual_creation: true
+
+server:
+  address: 0.0.0.0
+  port: 8080
+
+cors:
+  allowed-origins: http://${WIN_IP}:3000
--- a/frontend/src/components/BuyDialog.tsx
+++ b/frontend/src/components/BuyDialog.tsx
@ -26,12 +26,14 @@ const formatDateLocal = (date: Date) => {
 const BuyDialog = ({
    openDialog,
    setOpenDialog,
+    stuffName,
    newStock,
    setNewStock,
    onSubmit,
 }: {
    openDialog: boolean,
    setOpenDialog: (open: boolean) => void,
+    stuffName: string,
    newStock: NewStock,
    setNewStock: (tobuy: NewStock) => void,
    onSubmit: () => void,
@ -40,11 +42,21 @@ const BuyDialog = ({
    return (


-        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '500px', maxHeight: '80vh' } }}
+        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minHeight: '600px', maxHeight: '80vh' } }}
 >
            <DialogTitle>在庫登録</DialogTitle>
            <DialogContent>
                <Box sx={{ pt: 1 }}>
+                    {/* 材料名表示 */}
+                    <TextField
+                        margin="dense"
+                        label="材料名"
+                        fullWidth
+                        value={stuffName}
+                        disabled
+                        sx={{ marginBottom: 2 , marginTop: 2}}
+                    />
+
                    {/* 価格入力フィールド */}
                    <TextField
                        autoFocus
@ -58,6 +70,7 @@ const BuyDialog = ({
                                setNewStock({ ...newStock, price: value })
                            };
                        }}
+                        sx={{ marginBottom: 2 }}
                    />
                    {/* 購入日・消費期限を横並びに */}
                    <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
--- 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,
@ -16,7 +16,11 @@ import {
  ListItemIcon,
  ListItemButton,
  Divider,
-  IconButton
+  IconButton,
+  AlertColor,
+  BottomNavigation,
+  BottomNavigationAction,
+  Paper
 } from '@mui/material';
 import {
  Menu as MenuIcon,
@ -24,13 +28,17 @@ import {
  Inventory as InventoryIcon, // テストページ用のアイコン
  Science as ScienceIcon, // 鈴木
  SoupKitchen as SoupKitchenIcon,
+  ShoppingCart as ShoppingCartIcon
 } from '@mui/icons-material';
 import { useNavigate, Outlet, useLocation } from 'react-router-dom';
+import { MessageContext } from './MessageContext';
+import MessageAlert from './MessageAlert';

 const Layout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [bottomNavi, setBottomNavi] = useState(1);

  /**
   * ログアウト処理を行うハンドラー関数
@ -41,39 +49,69 @@ const Layout: React.FC = () => {
    navigate('/login');
  };

-  /**
-   * 画面遷移処理を行うハンドラー関数
-   * 指定されたパスに遷移し、サイドメニューを閉じる
-   */
-  const handleNavigate = (path: string) => {
-    navigate(path);
-    setDrawerOpen(false);
-  };
+  

-  // 現在のパスに基づいてメニュー項目が選択状態かどうかを判定
-  const isSelected = (path: string): boolean => {
-    return location.pathname === path;
-  };
+ 

  // メニューを開閉するハンドラー
  const toggleDrawer = () => {
    setDrawerOpen(!drawerOpen);
  };

+  // メッセージ表示
+
+  // ページ遷移後もメッセージを維持
+  useEffect(() => {
+    const saved = sessionStorage.getItem('globalMessage');
+    if (saved) {
+      const { message, severity } = JSON.parse(saved);
+      showMessage(message, severity);
+    }
+  }, []);
+
+  const [msgOpen, setMsgOpen] = useState(false);
+  const [msgText, setMsgText] = useState('');
+  const [msgType, setMsgType] = useState<AlertColor>('info');
+
+  const showMessage = (msg: string, sev: AlertColor) => {
+    setMsgText(msg);
+    setMsgType(sev);
+    setMsgOpen(true);
+    sessionStorage.setItem('globalMessage', JSON.stringify({ message: msg, severity: sev }));
+  };
+
+  const showErrorMessage = (message: string) => showMessage(message, 'error');
+  const showWarningMessage = (message: string) => showMessage(message, 'warning');
+  const showInfoMessage = (message: string) => showMessage(message, 'info');
+  const showSuccessMessage = (message: string) => showMessage(message, 'success');
+
+  const handleMsgClose = () => {
+    setMsgOpen(false);
+    // setMsgText(''); // ここで空にすると，メッセージが消えるアニメーションが始まる時点で文字が消えてしまう
+    sessionStorage.removeItem('globalMessage');
+  };
+
+  const handleBottomNavigation = (event: React.SyntheticEvent, newValue: any) => {
+    setBottomNavi(newValue);
+    switch(newValue) {
+      case 0:
+        navigate('stock');
+        break;
+      case 1:
+        navigate('tasks');
+        break;
+      case 2:
+        navigate('recipeList');
+        break;
+    }
+    // ここでルーティング処理などを行う
+  }
+
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      {/* ヘッダー部分 - アプリ名とログアウトボタンを表示 */}
      <AppBar position="static" elevation={0}>
        <Toolbar>
-          <IconButton
-            edge="start"
-            color="inherit"
-            aria-label="menu"
-            onClick={toggleDrawer}
-            sx={{ mr: 2 }}
-          >
-            <MenuIcon />
-          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            shopchop
          </Typography>
@ -83,57 +121,46 @@ const Layout: React.FC = () => {
        </Toolbar>
      </AppBar>

-      {/* サイドメニュー */}
-      <Drawer
-        anchor="left"
-        open={drawerOpen}
-        onClose={() => setDrawerOpen(false)}
-      >
-        <Box
-          sx={{ width: 250 }}
-          role="presentation"
+      <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;
+            }
+            // ここでルーティング処理などを行う
+          }}
        >
-          <List>
-            <ListItemButton
-              onClick={() => handleNavigate('/tasks')}
-              selected={isSelected('/tasks')}
-            >
-              <ListItemIcon><ListAltIcon /></ListItemIcon>
-              <ListItemText primary="買うものリスト" />
-            </ListItemButton>
-            {/* テストページへのリンクを追加 */}
-
-             {/* 在庫リストへのリンクを追加 */} 
-            <ListItemButton 
-              onClick={() => handleNavigate('/addRecipe')} 
-              selected={isSelected('/addRecipe')}
-            >
-              <ListItemIcon><SoupKitchenIcon /></ListItemIcon>
-              <ListItemText primary="料理の追加" />
-            </ListItemButton>
-            <ListItemButton 
-              onClick={() => handleNavigate('/recipeList')} 
-              selected={isSelected('/recipeList')}
-            >
-              <ListItemIcon><ScienceIcon /></ListItemIcon>
-              <ListItemText primary="料理リスト" />
-            </ListItemButton>
-            <ListItemButton
-              onClick={() => handleNavigate('/stock')}
-              selected={isSelected('/stock')}
-            >
-              <ListItemIcon><InventoryIcon /></ListItemIcon>
-              <ListItemText primary="在庫管理" />
-            </ListItemButton>
-            <Divider />
-          </List>
-        </Box>
-      </Drawer>
+          <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 - 子ルートのコンポーネントがここにレンダリングされる */}
+
+          <MessageContext.Provider value={{ showErrorMessage, showWarningMessage, showSuccessMessage, showInfoMessage }}>
+            <MessageAlert
+              open={msgOpen}
+              message={msgText}
+              severity={msgType}
+              onClose={handleMsgClose}
+            />
+            <Outlet /> {/* React Router の Outlet - 子ルートのコンポーネントがここにレンダリングされる */}
+          </MessageContext.Provider>
+
        </Container>
      </Box>
    </Box>
--- a/frontend/src/components/MessageAlert.tsx
+++ b/frontend/src/components/MessageAlert.tsx
@ -0,0 +1,29 @@
+import React from 'react';
+import { Snackbar, Alert, AlertColor } from '@mui/material';
+
+interface MessageAlertProps {
+  open: boolean;
+  message: string;
+  severity: AlertColor; // 'error' | 'warning' | 'info' | 'success'
+  onClose: (event?: React.SyntheticEvent | Event, reason?: string) => void;
+  duration?: number;
+}
+
+const MessageAlert: React.FC<MessageAlertProps> = ({
+  open,
+  message,
+  severity,
+  onClose,
+  duration = 6000,
+}) => {
+  return (
+    <Snackbar open={open} autoHideDuration={duration} onClose={onClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} sx={{bottom: '120px'}}>
+      <Alert onClose={onClose} severity={severity} sx={{ width: '100%' }}>
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default MessageAlert;
--- a/frontend/src/components/MessageContext.tsx
+++ b/frontend/src/components/MessageContext.tsx
@ -0,0 +1,17 @@
+
+import React, { createContext, useContext } from 'react';
+
+export interface MessageContextType {
+  showErrorMessage: (message: string) => void;
+  showWarningMessage: (message: string) => void;
+  showSuccessMessage: (message: string) => void;
+  showInfoMessage: (message: string) => void;
+}
+
+export const MessageContext = createContext<MessageContextType | undefined>(undefined);
+
+export const useMessage = () => {
+  const context = useContext(MessageContext);
+  if (!context) throw new Error('useMessage must be used within MessageContext.Provider');
+  return context;
+};
--- a/frontend/src/pages/AddRecipe.tsx
+++ b/frontend/src/pages/AddRecipe.tsx
@ -25,7 +25,8 @@ import {
  Select,
  FormControl,
  InputLabel,
-  ListItemIcon
+  ListItemIcon,
+  AlertColor
 } from '@mui/material';
 import {
  Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
@ -36,6 +37,8 @@ import { StuffAndCategoryAndAmount } from '../types/types';
 import EditAmountDialog from '../components/EditAmountDialog';
 import { recipeApi, toBuyApi } from '../services/api';
 import { useNavigate, useParams } from 'react-router-dom';
+import MessageAlert from '../components/MessageAlert';
+import { useMessage } from '../components/MessageContext';

 const AddRecipe: React.FC = () => {
  const { recipeId: recipeIdStr } = useParams();
@ -43,6 +46,8 @@ const AddRecipe: React.FC = () => {

  const navigate = useNavigate();

+  //  編集時，既存情報を読み込んだかどうか
+  const [recipeLoaded, setRecipeLoaded] = useState(false);
  //  料理名，説明
  const [recipeName, setRecipeName] = useState<string>('');
  const [recipeSummary, setRecipeSummary] = useState<string>('');
@ -58,53 +63,64 @@ const AddRecipe: React.FC = () => {
  // 編集しているアイテム
  const [editingItem, setEditingItem] = useState<StuffAndCategoryAndAmount>(emptyItem);
  const [editingItemIdx, setEditingItemIdx] = useState(0);
+  //削除確認ダイアログの表示状態
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+
+  //  エラーメッセージ表示
+  const { showErrorMessage, showSuccessMessage } = useMessage();

  const loadRecipe = async () => {
-    if (recipeId && !recipeName) {
+    if (recipeId && !recipeLoaded) {
      const recipe = await recipeApi.getById(recipeId);
      console.log('loaded recipe=', recipe)
      setRecipeName(recipe.recipeName)
      setRecipeSummary(recipe.summary)
      setItems(recipe.stuffAndAmountArray)
+      setRecipeLoaded(true)
    }
  }

  const handleSaveRecipe = async () => {

    if (!recipeName) {
-      alert('レシピ名が入力されていません！')
+      showErrorMessage('レシピ名が入力されていません！')
      return false;
    }

    if (!items.length) {
-      alert('材料が追加されていません！')
+      showErrorMessage('材料が追加されていません！')
      return false;
    }

-    if (!recipeId) {
-      //  新規追加
-      const response = await recipeApi.addRecipe({
+    try {
+      if (!recipeId) {
+        //  新規追加
+        const response = await recipeApi.addRecipe({
+          recipeName,
+          summary: recipeSummary,
+          stuffAndAmountArray: items,
+        })
+        return response.recipeId;
+      }
+
+      const response = await recipeApi.updateRecipe({
+        recipeId,
        recipeName,
        summary: recipeSummary,
        stuffAndAmountArray: items,
      })
-      return response.recipeId;
+    } catch {
+      showErrorMessage('レシピの送信に失敗しました。同じ料理名が存在する可能性があります。');
+      return false;
    }

-    const response = await recipeApi.updateRecipe({
-      recipeId,
-      recipeName,
-      summary: recipeSummary,
-      stuffAndAmountArray: items,
-    })
-
    return recipeId;
  }

  const handleSubmit = async () => {
    const recipeId = await handleSaveRecipe();
-    // alert('レシピが保存されました！');
    if (!recipeId) return;
+    showSuccessMessage('レシピが保存されました！');
    navigate('/recipeList');
  }

@ -112,7 +128,7 @@ const AddRecipe: React.FC = () => {
    const recipeId = await handleSaveRecipe();
    if (!recipeId) return false;
    await toBuyApi.addByRecipe(recipeId);
-    // alert('レシピが保存されて買うものリストに追加されました！');
+    showSuccessMessage('レシピが保存されて買うものリストに追加されました！');
    navigate('/tasks');
  }

@ -122,7 +138,8 @@ const AddRecipe: React.FC = () => {
  }, []);

  return (
-    (recipeId && !recipeName)
+    <>
+    {(recipeId && !recipeLoaded)
      ? <p>読み込み中...</p>
      :
      <Box>
@ -138,7 +155,7 @@ const AddRecipe: React.FC = () => {
            value={recipeSummary} onChange={(e) => setRecipeSummary(e.target.value)}
          />
        </div>
-        <h2 style={{marginTop: "0.5em" }}>
+        <h2 style={{ marginTop: "0.5em" }}>
          材料リスト
        </h2>
        {/* すべての材料情報を表示 */}
@ -179,7 +196,11 @@ const AddRecipe: React.FC = () => {
                    tooltip: { sx: { backgroundColor: "white", color: "red", fontSize: "0.8rem", padding: "6px", borderRadius: "6px" } },
                  }}>
                  <IconButton edge="end" sx={{ marginRight: 0, marginLeft: 0 }} aria-label="delete"
-                    onClick={() => setItems([...items.slice(0, index), ...items.slice(index + 1)])}>
+                    onClick={() => {
+                      setOpenDeleteDialog(true)
+                      setEditingItem(item)
+                      setEditingItemIdx(index)
+                    }}>
                    <DeleteIcon />
                  </IconButton>
                </Tooltip>
@ -200,7 +221,7 @@ const AddRecipe: React.FC = () => {
          </Fab>
        </div>

-        <div style={{ position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "2%", whiteSpace: 'nowrap' }}>
+        <div style={{ position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "64px", whiteSpace: 'nowrap' }}>
          <Button variant='contained' color="primary" onClick={handleSubmit} sx={{ marginRight: "1rem" }}>
            <SaveIcon sx={{ fontSize: "1.5rem", marginRight: "0.5rem" }} />
            レシピを保存
@ -219,6 +240,29 @@ const AddRecipe: React.FC = () => {
            setOpenAddDialog(false);
          }} />

+        {/* 削除ダイアログ */}
+        <Dialog open={openDeleteDialog} onClose={() => setOpenDeleteDialog(false)} disableScrollLock={true}
+          fullWidth
+          maxWidth="sm"
+          sx={{ overflow: "hidden" }}
+        >
+          <DialogTitle>食材の削除</DialogTitle>
+          <DialogContent>
+            {editingItem && (
+              <>
+                <Typography variant="h4">{editingItem.stuffName}を削除します。</Typography>
+                <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>
+                <Button onClick={() => setOpenDeleteDialog(false)} sx={{ mt: 3, mb: 2, left: '70%' }}>キャンセル</Button>
+                <Button variant="contained" color="error" onClick={() => {
+                  setItems([...items.slice(0, editingItemIdx), ...items.slice(editingItemIdx + 1)])
+                  setOpenDeleteDialog(false); // 削除処理後にダイアログを閉じる
+                }}
+                  style={{ marginTop: "10px" }} sx={{ mt: 3, mb: 2, left: '72%' }}>削除</Button>
+              </>
+            )}
+          </DialogContent>
+        </Dialog>
+
        {/* 数量変更ダイアログ */}
        <EditAmountDialog openDialog={openAmountDialog} setOpenDialog={setOpenAmountDialog}
          editingItem={editingItem}
@ -229,6 +273,8 @@ const AddRecipe: React.FC = () => {
          }} />

      </Box>
+    }
+    </>
  );
 };

--- a/frontend/src/pages/DishList.tsx
+++ b/frontend/src/pages/DishList.tsx
@ -159,9 +159,10 @@ const DishList: React.FC = () => {
                        ))}
                    {/* </List> */}
                </div>
-                <div style={{width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "20px"}}>
-                    <Button variant='contained' sx={{width: "60%", height: "60px", 
-                        fontSize: "40px", left: "50%", transform: 'translateX(-50%)' }} 
+                <div style={{width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "64px"}}>
+                    <Button variant='contained' sx={{
+                        width: "60%", 
+                        fontSize: "24px", left: "50%", transform: 'translateX(-50%)' }} 
                        color="primary"
                        onClick={() => navigate('/add1')}
                        >
--- a/frontend/src/pages/RecipeList.tsx
+++ b/frontend/src/pages/RecipeList.tsx
@ -31,11 +31,14 @@ import {
  SoupKitchen as SoupKitchenIcon
 } from '@mui/icons-material';
 import { ToBuy, Stuff, RecipeWithId, RecipeDetail } from '../types/types';
+import { useMessage } from '../components/MessageContext';

 const RecipeList: React.FC = () => {
  const navigate = useNavigate();
  // 料理リストの料理名を格納する配列

+  const { showErrorMessage } = useMessage();
+
  // すべての料理リスト
  const [allRecipes, setAllRecipes] = useState<RecipeWithId[]>();

@ -48,7 +51,7 @@ const RecipeList: React.FC = () => {
      const recipes = await recipeApi.getAllRecipes();
      setAllRecipes(recipes);
    } catch (error) {
-      alert("レシピの取得に失敗しました．");
+      showErrorMessage("レシピの取得に失敗しました。");
      // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
    }
  };
@ -93,10 +96,10 @@ const RecipeList: React.FC = () => {
          ))}
          {/* </List> */}
        </div>
-        <div style={{ width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "20px" }}>
+        <div style={{ width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "64px" }}>
          <Button variant='contained' sx={{
            width: "60%", height: "60px",
-            fontSize: "40px", left: "50%", transform: 'translateX(-50%)'
+            fontSize: "32px", left: "50%", transform: 'translateX(-50%)'
          }}
            color="primary"
            onClick={() => navigate('/AddRecipe')}
--- a/frontend/src/pages/StockPage.tsx
+++ b/frontend/src/pages/StockPage.tsx
@ -30,6 +30,7 @@ import { Add as AddIcon } from '@mui/icons-material';
 import { STOCK_ERRORS } from '../constants/errorMessages';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート
+import { useMessage } from '../components/MessageContext';

 // 日付をyyyy-MM-dd形式で返す関数
 const formatDateLocal = (date: Date) => {
@ -73,6 +74,8 @@ const StockPage: React.FC = () => {
  // 在庫の編集状態
  const [editStock, setEditStock] = useState<Stock | null>(null);

+  const { showWarningMessage } = useMessage();
+
  // コンポーネントマウント時にタスク一覧を取得
  useEffect(() => {
    fetchStocks();
@ -219,7 +222,7 @@ const StockPage: React.FC = () => {
      setEditStock({ ...selectedRow });
      setIsEditOpen(true);
    } else {
-      alert("編集する食材を選択してください。");
+      showWarningMessage("編集する食材を選択してください。");
    }
  };
  // 変更を適用. 数量に0を入力したとき、削除ダイアログに飛ぶ機能を追加
@ -307,7 +310,7 @@ const StockPage: React.FC = () => {
    if (selectedRow) {
      setIsDeleteOpen(true);
    } else {
-      alert("削除する食材を選択してください。");
+      showWarningMessage("削除する食材を選択してください。");
    }
  };
  /** 削除ダイアログを閉じる */
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@ -31,6 +31,7 @@ import AddStuffAmountDialog from '../components/AddStuffAmountDialog';
 import BuyDialog from '../components/BuyDialog';
 import { useNavigate } from 'react-router-dom';
 import DatePicker from 'react-datepicker';
+import { useMessage } from '../components/MessageContext';

 //import { FaCarrot } from "react-icons/fa6";　//エラー起きる　いったん保留

@ -91,7 +92,7 @@ const TaskListPage: React.FC = () => {
    shop: undefined,
  });

-
+  const { showErrorMessage } = useMessage();

  // コンポーネントマウント時にタスク一覧を取得
  useEffect(() => {
@ -149,7 +150,7 @@ const TaskListPage: React.FC = () => {
  const handleAddNewToBuy = async () => {
    try {
      if (isNaN(newToBuy.amount)) {
-        console.log('数量が正しくありません．');
+        showErrorMessage('数量が正しくありません．');
        return;
      }

@ -171,7 +172,7 @@ const TaskListPage: React.FC = () => {
   const handleUpdateNewToBuy = async () => {
    try {
      if (isNaN(editingItem.amount)) {
-        console.log('数量が正しくありません．');
+        showErrorMessage('数量が正しくありません．');
        return;
      }

@ -195,7 +196,7 @@ const TaskListPage: React.FC = () => {
      console.log("newPrice:", newStock.price)
      console.log("parsedPrice: ", parsedPrice)
      if (isNaN(parsedPrice)) {
-        alert('入力が無効です')
+        showErrorMessage('価格が正しく入力されていません。')
        return
        //setNewStock({ ...newStock, price: parsedPrice });
      }
@ -251,6 +252,7 @@ const TaskListPage: React.FC = () => {
                  <IconButton color="primary" sx={{ marginRight: 0, marginLeft: 0 }} edge="end" aria-label="購入情報を記入"
                    onClick={() => {
                      setOpenInfoDialog(true)
+                      setEditingItem(tobuy)
                      setSelectedToBuyId(tobuy.tobuyId)
                      // handleDeleteTask(tobuy.tobuyId)
                    }}>
@ -294,28 +296,28 @@ const TaskListPage: React.FC = () => {
        </List>
      </div>
      {/* 新規材料作成ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '40%', transform: 'translateX(-50%)' }}>
+      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 66, left: '20%', transform: 'translateX(-50%)' }}>
        <Typography variant="caption" color="textSecondary">
          材料のみ追加
        </Typography>
      </Box>
      <Fab
        color="primary"
-        sx={{ position: 'fixed', bottom: 16, left: '40%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '20%', transform: 'translateX(-50%)' }}
        onClick={() => setOpenAddToBuyDialog(true)}
      >
        <AddIcon />
      </Fab>

      {/*新規料理追加ボタン - 画面下部に固定表示 */}
-      <Box sx={{ textAlign: 'center', position: 'fixed', bottom: 76, left: '60%', 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: 16, left: '60%', transform: 'translateX(-50%)' }}
+        sx={{ position: 'fixed', bottom: 90, left: '80%', transform: 'translateX(-50%)' }}
        onClick={() => {
          // setOpenAddToBuyDialog(true);
          navigate('/RecipeList');
@ -330,7 +332,7 @@ const TaskListPage: React.FC = () => {
      <AddStuffAmountDialog openDialog={openAddToBuyDialog} setOpenDialog={setOpenAddToBuyDialog} newItem={newToBuy} setNewItem={setNewToBuy} onSubmit={handleAddNewToBuy} />

      {/* 購入処理(在庫登録)のための数値入力ダイアログ */}
-      <BuyDialog openDialog={openInfoDialog} setOpenDialog={setOpenInfoDialog} newStock={newStock} setNewStock={setNewStock} onSubmit={handleBuy} />
+      <BuyDialog openDialog={openInfoDialog} setOpenDialog={setOpenInfoDialog} stuffName={editingItem.stuffName} newStock={newStock} setNewStock={setNewStock} onSubmit={handleBuy} />

      {/* 数量変更ダイアログ */}
      <EditAmountDialog openDialog={openAmountDialog} setOpenDialog={setOpenAmountDialog}